#about-karate { margin-top: 4rem !important; margin-bottom: 4rem !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 2.5rem !important; width: 100% !important; box-sizing: border-box !important; }
#about-karate .karate-image-col { flex: 1 1 24% !important; min-width: 300px !important; position: relative !important; }
#about-karate .karate-image-stack { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 4/3 !important; }
#about-karate .karate-img-back { position: absolute !important; top: 125px !important; left: 0px !important; width: 45% !important; height: auto !important; border-radius: 15px !important; object-fit: cover !important; box-shadow: 0 !important; z-index: 1 !important; }
#about-karate .karate-img-front { position: absolute !important; bottom: -45px !important; left: 225px !important; width: 46% !important; height: auto !important; border-radius: 15px !important; border: 0 solid #fff !important; box-shadow: 0 !important; z-index: 2 !important; }
#about-karate .karate-content-col { flex: 1 1 55% !important; min-width: 320px !important; display: flex !important; flex-direction: column !important; }
#about-karate .karate-heading { color: #ef6c26 !important; font-size: clamp(1.6rem, 3vw, 2.5rem) !important; line-height: 1.2 !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; font-weight: 400 !important; }
#about-karate .karate-subheading { font-size: clamp(1.4rem, 2vw, 2.2rem) !important; color: #222 !important; font-weight: 300 !important; margin-top: 0 !important; margin-bottom: 2.5rem !important; line-height: 0.7 !important; }
#about-karate .karate-text-grid { display: flex !important; gap: 2rem !important; flex-wrap: wrap !important; margin-bottom: 2.5rem !important; }
#about-karate .karate-text-p { flex: 1 !important; min-width: 250px !important; font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem) !important; line-height: 1.575 !important; font-weight: 200 !important; color: #333 !important; margin: 0 !important; }
#about-karate .karate-logos-row { display: flex !important; gap: 2.5rem !important; align-items: center !important; flex-wrap: wrap !important; margin-top: auto !important; margin-bottom: 2.5rem !important; }
#about-karate .karate-logo { height: 70px !important; width: auto !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; }
#about-karate .karate-logo--dosb { box-shadow: none !important; }
#about-karate .karate-logo--shuhari { margin-left: -1.2rem !important; }
#about-karate .karate-buttons { display: flex !important; gap: 1rem !important; flex-wrap: wrap !important; }
@media screen and (max-width: 768px) { #about-karate { flex-direction: column !important; gap: 2rem !important; } #about-karate .karate-image-col { flex: 1 1 100% !important; margin-bottom: 60px !important; margin-top: 20px !important; } #about-karate .karate-image-stack { height: 420px !important; aspect-ratio: auto !important; margin-bottom: 20px !important; width: 100% !important; } #about-karate .karate-img-back { width: 65% !important; top: 20px !important; left: 3% !important; height: auto !important; } #about-karate .karate-img-front { width: 40% !important; bottom: 20px !important; right: 5% !important; left: auto !important; height: auto !important; } #about-karate .karate-content-col { flex: 1 1 100% !important; margin-top: 10px !important; } #about-karate .karate-logo--kokoro, #about-karate .karate-logo--shuhari { display: none !important; } #about-karate .karate-text-p { font-size: 1.2rem !important; line-height: 1.5 !important; } }
@media screen and (min-width: 1400px) and (max-width: 1480px) { #about-karate .karate-logos-row { flex-wrap: nowrap !important; gap: 1.5rem !important; } #about-karate .karate-logo { height: 50px !important; } #about-karate .karate-image-stack { aspect-ratio: auto !important; display: flex !important; gap: 1rem !important; align-items: flex-start !important; } #about-karate .karate-img-back { position: relative !important; top: auto !important; left: auto !important; width: 48% !important; height: auto !important; margin-top: 0 !important; } #about-karate .karate-img-front { position: relative !important; bottom: auto !important; left: auto !important; width: 48% !important; height: auto !important; margin-top: 80px !important; } }