/* --- CRITICAL: Prevent horizontal overflow on entire page --- */
html,
body {
    max-width: 100vw !important;
    overflow-x: clip;
    position: relative !important;
}

:root, :host {
    --text-7xl: 72px;
}

body {
    background-color: white;
}

.body-font {
    font-family: 'Outfit';
    font-weight: 400; /* Regular qalinlik */
}

.containers {
    margin-top: 10%;
}

/* Konteyner relative bo'lishi kerak, bu sizning HTMLda mavjud: relative */

.star-left {
    position: absolute;
    top: 44%;
    left: 89px;
    transform: translateY(-50%);
    width: 68px;
    height: auto;
}

.star-left2 {
    position: absolute;
    top: 57%;
    left: 75px;
    transform: translateY(-50%);
    width: 34px;
    height: auto;
}

.bg-blacak {
    background-color: #16161675;
}

.imgOurTeam {
    width: 360px;
    height: 360px;
}

.star-right {
    position: absolute;
    top: 51%;
    right: -13px;
    width: 68px;
    height: auto;
}

.star-right2 {
    position: absolute;
    top: 66%;
    right: 33px;
    width: 34px;
    height: auto;
}

.main-image {
    /* Asosiy rasmning joylashuvi */
    max-width: 100%;
    height: auto;
}

/* Mobil qurilmalar uchun kichikroq o'lchamdagi sozlamalar */
@media (max-width: 480px) {
    .star-left,
    .star-right {
        display: none; /* Mobil qurilmalarda ko'rinmas qilish */
    }
}

@media (max-width: 480px) {
    /* 1. Sarlavhani (FAQ) mobilga moslash */
    section.font-outfit h2 {
        font-size: 48px !important; /* 6xl dan 32px ga tushdi */
        line-height: 1.2 !important;
        margin-bottom: 30px !important;
        padding: 0 10px;
    }

    /* 2. Tugmalar (Buttons) konteynerini sozlash */
    .flex.flex-wrap.justify-center.gap-4 {
        gap: 12px !important; /* Tugmalar orasi yaqinroq */
        padding: 0 15px;
    }

    /* 3. Tugmalarni o'zini mobilga moslash */
    section.font-outfit button {
        width: 100% !important; /* Har bir tugma alohida qatorda (to'liq kenglik) */
        max-width: 300px; /* Haddan tashqari cho'zilib ketmasligi uchun */
        font-size: 16px !important;
        padding: 12px 20px !important;
        margin: 0 auto;
    }

    /* 4. Seksiyaning umumiy paddingi */
    section.font-outfit.py-20 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 480px) {
    /* SVG dagi w-full (width: 100%) ni bekor qilish */
    svg.w-full.h-full {
        width: auto !important; /* yoki o'zingizga mos kenglik, masalan: 150% */
        max-width: none !important; /* Cheklovlarni olib tashlash */
        /* Agar shakl juda kichrayib ketsa, uni kattalashtirish uchun: */
        transform: scale(1);
        transform-origin: top left;
    }
}

@media (max-width: 480px) {
    /* Ilon rasmini mobil versiyada butunlay yashirish */
    img[alt='snake-icon'],
    img[src*='ilon.webp'] {
        display: none !important;
    }
}

.botton-col {
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    gap: 10px;
    border-radius: 12px;
    box-shadow: #347155;
    color: white;
    background-color: #6aa68b;
}

.botton-color {
    font-weight: 600;
    cursor: pointer;
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    gap: 10px;
    border-radius: 12px;
    background: #faa106;
    box-shadow: 0px 6px 0px 0px #b97704;
    color: white;
}

    .botton-color:hover {
        background-color: #ffc446;
        padding-top: 12px;
        padding-right: 32px;
        padding-bottom: 12px;
        padding-left: 32px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0px 6px 0px 0px #e0b35c;
        color: white;
    }

.botton-color-price {
    cursor: pointer;
    width: 70%;
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    gap: 10px;
    border-radius: 12px;
    background: #46b2e0;
    box-shadow: 0px 6px 0px 0px #336d86;
    color: white;
}

    .botton-color-price:hover {
        background-color: #8ad1f0;
        padding-top: 12px;
        padding-right: 32px;
        padding-bottom: 12px;
        padding-left: 32px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0px 6px 0px 0px #76a9bf;
        color: white;
    }

.botton-color-pricep {
    cursor: pointer;
    padding-top: 12px;
    padding-right: 72px;
    padding-bottom: 11px;
    padding-left: 72px;
    gap: 10px;
    border-radius: 12px;
    background: #46b2e0;
    box-shadow: 0px 6px 0px 0px #336d86;
    color: white;
}

    .botton-color-pricep:hover {
        background-color: #8ad1f0;
        padding-top: 12px;
        padding-right: 72px;
        padding-bottom: 11px;
        padding-left: 72px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0px 6px 0px 0px #76a9bf;
        color: white;
    }

.botton-color-price22 {
    cursor: pointer;
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    gap: 10px;
    border-radius: 12px;
    background: #46b2e0;
    box-shadow: 0px 6px 0px 0px #336d86;
    color: white;
}

    .botton-color-price22:hover {
        background-color: #548fa9;
        padding-top: 12px;
        padding-right: 32px;
        padding-bottom: 12px;
        padding-left: 32px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0px 6px 0px 0px #336d86;
        color: white;
    }

.botton-color-price3 {
    cursor: pointer;
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    gap: 10px;
    border-radius: 12px;
    background: #70CE67;
    box-shadow: 0px 6px 0px 0px #4D9646;
    color: white;
}

    .botton-color-price3:hover {
        background-color: #5FAF57;
        padding-top: 12px;
        padding-right: 32px;
        padding-bottom: 12px;
        padding-left: 32px;
        gap: 10px;
        border-radius: 12px;
        box-shadow: 0px 6px 0px 0px #87D181;
        color: white;
    }

.botton-login {
    color: #3d464c;
    font-weight: 600;
    cursor: pointer;
    padding-top: 12px;
    padding-right: 48px;
    padding-bottom: 12px;
    padding-left: 48px;
    gap: 10px;
    border-radius: 16px;
    background: #f2f2f2;
    box-shadow: 0px 6px 0px 0px #a9aec1;
}

    .botton-login:hover {
        padding-top: 12px;
        padding-right: 48px;
        padding-bottom: 12px;
        padding-left: 48px;
        gap: 10px;
        border-radius: 16px;
        background: #a9aec1;
        box-shadow: 0px 6px 0px 0px #e7e4e4;
    }

.text-hover:hover {
    color: #faa106;
}

.crem {
    background-color: #fff8e9;
}

.colorblue {
    background-color: #c5eac9;
}

.title-book {
    margin-top: 15%;
}

.title-Book {
    margin-top: 10%;
}

.colorsfon {
    background-color: white;
}

.shed {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.row-margin {
    margin-left: 4%;
    margin: 4%;
}

.box-say {
    border-radius: 24px;
    width: 459px;
    height: 452px;
}

.box-say-two {
    color: #3d464c;
    line-height: 135%;
    font-weight: 600;
}

.box-say-two-p {
    font-size: 18px;
    color: #4c5371;
    font-weight: 400;
    margin-top: 2%;
}

.text-one-line {
    white-space: normal;
}
/* Faqat web (desktop) uchun */
@media (min-width: 480px) {
    .text-one-line {
        white-space: nowrap;
    }
}

.m-toop {
    margin-top: 17%;
}

.color-green {
    background-color: #d3effa;
}

.padding-10 {
    padding-left: 10%;
}

.element-class {
    position: absolute; /* yoki relative, fixed, sticky */
    right: -13px;
}

.element-class1 {
    position: absolute; /* yoki relative, fixed, sticky */
    right: 82%;
}

.card-shadow {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.quote-icon {
    font-size: 4rem; /* Katta o'lcham uchun */
    line-height: 1;
    color: #4caf50; /* Yashil rang */
}
/* Asosiy fon rasmi (desktop uchun) */
.faq-bg {
    background-image: url('image/FAQ-contact-us-web.webp');
}
/* Mobil uchun alohida fon rasmi */
@media (max-width: 480px) {
    .faq-bg {
        background-image: url('image/FAQ-contact-us-mobile.webp');
    }
}
/* Faqat desktop (md va undan katta) ekranlar uchun qushni ko'rsatish */
.bird-image {
    display: none;
}

@media (min-width: 480px) {
    .bird-image {
        display: block;
        position: absolute;
        right: -74px;
        bottom: 15px;
        width: 342px;
    }
}

.irregular-shape {
    border-radius: 60% 40% 60% 40% / 60% 30% 70% 40%;
}

.responsive-text {
    font-size: 18px; /* mobile default */
}

.rescent-size {
    font-size: 24px;
}

@media (min-width: 480px) {
    .rescent-size {
        font-size: 24px; /* desktop */
    }
}

@media (min-width: 480px) {
    .responsive-text {
        font-size: 24px; /* desktop */
    }
}

.responsive-text-in {
    font-size: 18px; /* mobile default */
}

@media (min-width: 480px) {
    .responsive-text-in {
        font-size: 20px; /* desktop */
    }
}

.responsive-text-titlte {
    font-size: 48px; /* mobile default */
}

@media (min-width: 480px) {
    .responsive-text-titlte {
        font-size: 72px; /* desktop */
    }
}

.line-heated {
    line-height: 180%;
}

.text-colors {
    color: #65727d;
}
/* Custom font families */
.font-fredoka-one {
    font-family: 'Fredoka One';
}

.font-outfit {
    font-family: 'Outfit', medium;
}

/* Custom colors from Figma */
.bg-blue-faint {
    background-color: #46b2e0;
}
/* Starter Header */
.text-blue-dark {
    color: #3d464c;
}
/* Main dark text */
.text-gray-medium {
    color: #65727d;
}
/* Secondary gray text */
.border-gray-light {
    border-color: #d6d8d9;
}
/* Divider line */
.text-quran-green {
    color: #2bb24c;
}
/* Checkmark green */

/* Intermediate Card Colors */
.bg-orange-faint {
    background-color: #faa106;
}
/* Intermediate Header */

.bg-green-price-faint {
    background-color: #75d069;
}

/* Pro Card Colors */
.bg-green-faint {
    background-color: #6aa68b;
}
/* Pro Header */

/* Background patterns */
.bg-pattern-yellow {
    background-color: rgba(254, 221, 152, 0.15); /* Figma's yellowish background pattern color */
}

.bg-pattern-blue-light {
    background-color: rgba(189, 235, 252, 0.15); /* A light blue for background pattern */
}

.bg-pattern-green-light {
    background-color: rgba(197, 234, 201, 0.15); /* A light green for background pattern */
}

.botton-color:focus-visible {
    border-radius: 16px;
    border: 3px solid #b97704;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #b97704;
}

.botton-login:focus-visible {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #a9aec1;
}

.botton-color-price3:focus-visible {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #3e8f3e;
}

.botton-color-price:focus-visible {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #336d86;
}

.botton-color-pricep:focus-visible {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #336d86;
}

.botton:focus-visible {
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    /* Bosilgandek effekt */
    box-shadow: 0px 8px 0px #b97704;
}

.text-hover:focus-visible {
    color: #faa106;
}

button:focus-visible {
    outline: none;
}

.botton-color {
    cursor: pointer;
    background-color: #faa106;
    /* QuranEra rasmidagi to'q sariq rang */
}

    .botton-color:hover {
        background-color: #ffc446;
    }

.botton-login {
    cursor: pointer;
}

    .botton-login:hover {
        background-color: #a9aec1;
    }

.botton-price1 {
    background-color: #46b2e0;
    border: 1px solid #e2e8f0;
    box-shadow: #336d86;
}

    .botton-price1:hover {
        background-color: #7dc2df;
    }

.botton-price2 {
    background-color: #faa106;
    border: 1px solid #e2e8f0;
    box-shadow: #336d86;
}

    .botton-price2:hover {
        background-color: #f6b544;
    }

.botton-price3 {
    background-color: #6aa68b;
    border: 1px solid #e2e8f0;
    box-shadow: #336d86;
}

    .botton-price3:hover {
        background-color: #7eaf99;
    }

.link-a {
    color: #4caf50;
    background-color: transparent;
    text-decoration: none;
}

.link-a-black {
    color: #3d464c;
    background-color: transparent;
    text-decoration: none;
}

.text-lines {
    max-width: 100%;
    white-space: normal;
}

@media (min-width: 480px) {
    .title-lines {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.button-siza {
    width: 299px;
    height: 56px;
}

.page {
    display: none;
}

    .page.active {
        display: block;
    }

.text-hover:hover {
    color: #faa106;
}

.FAA-color {
    color: #faa106;
}

.colorsfon {
    background-color: white;
    /* Rasmdagi och kulrang fon */
}

.crem {
    background-color: #fff8e9;
    /* QuranEra Cream rangi */
}

.colorblue {
    background-color: #c5eac9;
    /* Xarita ramkasining ichki foni oq bo'lsin */
}

.experts-bg {
    background-color: #d3f3fd;
    /* "Whats experts say" bo'limi foni */
}

.title-colors {
    color: #3d464c;
}

.border-light-green {
    border-color: #c5eac9;
    /* Hero Sectiondagi SVG fonining rangi */
    border-width: 14px;
}

.border-light-g {
    border-color: #c5eac9;
    /* Hero Sectiondagi SVG fonining rangi */
}

.nofull {
    height: 108%;
}

.experts-bg-section {
    background: transparent;
    padding-top: 50px;
    padding-bottom: 20px;
}

.features-blue-gradient {
    background: linear-gradient(180deg, #99d9f2 0%, #7bc6e8 100%); /* Pastki ko'k fon */
    padding: 60px 0;
    margin-top: -2px; /* Choklarni yopish uchun */
}

/* Mobilda rasmda ko'rsatilgan tartib */
@media (max-width: 480px) {
    .experts-bg-section {
        background: #e6f7ff !important; /* Faqat mobilda havorang fon */
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .expert-card {
        margin-bottom: 20px; /* Kartochkalar orasi ochiq bo'lishi uchun */
    }

    /* Sizning qoidangiz: mobilda toshbaqa va bezaklar ko'rinmasligi kerak */
    .mobile-hide-decor,
    img[src*='qush.webp'],
    img[src*='ayn.webp'] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* 1. Clip-path ni o'chirib, o'rniga rangli fon berish */
    div[style*='clip-path'] {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        background-color: #c5eac9 !important; /* Siz so'ragan rang */
        border-radius: 24px; /* Burchaklari chiroyli bo'lishi uchun */
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* 1. p tegi ichidagi margin-top (mt-10) ni olib tashlash */
    div.relative.w-screen p.relative.z-10 {
        margin-top: 0 !important;
        padding-top: 2rem !important; /* Matn yopishib qolmasligi uchun biroz padding */
        padding-bottom: 2rem !important;
    }
}
/* Umumiy konteyner stili (Web ko'rinishi) */
.anytime-anywhere-section {
    width: 100%;
    margin: 0 auto;
}

.anytime-anywhere-sectio {
    padding: 5% 10% 1% 10%;
}

.crem-card {
    background-color: #e8f7e4; /* Kartochka foni */
    border-radius: 9999px; /* Webda dumaloq (Capsule) */
    padding: 32px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0px solid rgba(0, 0, 0, 0.05);
}

.card-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.card-icon {
    width: 79px;
    height: 71px;
    flex-shrink: 0;
}

/* Scrollbar-ni barcha brauzerlarda yashirish */
#testimonialsTrack {
    -ms-overflow-style: none; /* Internet Explorer va Edge uchun */
    scrollbar-width: none; /* Firefox uchun */
}

    #testimonialsTrack::-webkit-scrollbar {
        display: none; /* Chrome, Safari va Opera uchun */
    }

.card-title {
    color: #3d464c;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    text-align: left; /* Odatiy holatda chapda */
}

.card-subtitle {
    color: #29323a;
    margin: 4px 0 0 0;
    font-weight: 500;
}

.buy-button {
    cursor: pointer;
    background-color: #f2a93b; /* botton-color */
    color: white;
    font-weight: 600;
    border: none;
    padding: 12px 48px;
    border-radius: 9999px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}

    .buy-button:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

/* MOBILE KO'RINISHI (480px dan kichik ekranlar uchun) */
@media (max-width: 480px) {
    .card-title {
        text-align: center; /* Mobilda markazga o'tadi */
        font-size: 32px !important; /* Mobilda biroz kichraytirilsa chiroyli chiqadi */
    }

    .card-text {
        text-align: center; /* Subtitle (pastki matn) ham markazga tushishi uchun */
        width: 100%;
    }

    .crem-card {
        flex-direction: column; /* Elementlar ustma-ust tushadi */
        border-radius: 100px; /* Mobilda yumshoq burchakli to'rtburchak */
        padding: 32px 32px;
        text-align: center;
    }

    .card-left {
        flex-direction: column; /* Icon va matn ham ustma-ust */
        gap: 27px;
    }

    .buy-link,
    .buy-button {
        width: 77%; /* Tugma 100% yuzani egallaydi */
    }

    .buy-button {
        padding: 16px;
        border-radius: 16px; /* Mobilda tugma burchagi biroz to'rtburchakroq */
    }

    /* Toshbaqa yoki boshqa qahramonlar bo'lsa yashirish */
    .mobile-hide {
        display: none !important;
    }
}

.text-size-memorabl {
    font-size: 32px;
}

.img-size-memorabl {
    width: 355px;
    height: 232px;
}

.text-lg-size {
    font-size: 20px;
    width: 74%;
    margin-top: 10%;
}

.title-colors-why-do {
    color: #ffffff;
}

.text-p-color {
    color: #65727d;
}

/* Hero sectiondagi SVG va Kitob tasviri uchun responsive sozlamalar */
.hero-svg-bg {
    background-size: auto;
    /* Mobil ko'rinishda fondagi SVG ni yoyish */
    background-position: left bottom;
    /* Mobil ko'rinishda pastki chapga joylashish */
}

@media (min-width: 480px) {
    .hero-svg-bg {
        background-size: contain !important;
        /* Desktopda to'liq ko'rinishi uchun */
        background-position: left center !important;
        /* Desktopda chap markazga joylashish */
    }

    .kitob-image-desktop {
        transform: translateY(10%) translateX(20%) !important;
        /* Desktopdagi joylashuv */
    }
}

/* Kitob rasmining mobil joylashuvi uchun */
.kitob-image-mobile {
    bottom: 0;
    right: 0;
    transform: translateY(0%) translateX(0%);
    /* Mobil joylashuv */
}

/* "Whats experts say" testimonials sectioni foni va "Creative, Engaging, Authentic" sectioni foni */
/* Ikkita SVG fonni bir sectionga birlashtirish */
/* WEB KO'RINISHI (O'zgarmasdan qoladi) */
#combined-experts-section {
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='1119' viewBox='0 0 1920 1119' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1995 1118.24H-75V69.0302C17 49.2014 172.5 -85.4204 884 87.1883C1009.41 105.641 1111.09 94.1379 1222.22 64.5981C1275.38 50.4674 1328.89 35.7882 1383.89 35.8272C1427.02 35.8579 1471.07 39.8828 1511.61 46.6219C1616.65 64.0803 1723.45 100.772 1829.93 99.7105C1908.23 98.93 1919.73 92.0197 1995 68.6815V1118.24Z' fill='%23E8F7E4' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 15rem;
}
/* MOBIL KO'RINISHI (480px gacha) */
@media (max-width: 480px) {
    #combined-experts-section {
        background-image: url("data:image/svg+xml,%3Csvg width='390' height='1931' viewBox='0 0 390 1931' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M410 1931H-20V2.27683C10.8236 -3.29231 44.2829 2.01773 74.0507 11.0363C124.206 26.2315 172.374 49.3799 224.191 57.2184C291.855 67.4542 332.465 62.83 410 42.2271V1931Z' fill='%23E8F7E4' /%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        /* 100% 100% o'rniga cover ishlatsangiz, yoni ochilmaydi */
        background-size: cover !important;
        padding-top: 5rem;
        /* Bo'yini uzunlashtirish uchun paddingni oshiramiz */
        margin-top: 5% !important;
        /* Yonlarda oq joy qolmasligi uchun */
        width: 100% !important;
        margin: 0 !important;
    }
}

#combined-experts-section-1 {
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='630' viewBox='0 0 1920 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M834.093 466.243C430 535.5 245.5 495.5 10 466.243L1216.47 34.8823C1408.54 -34.039 1734.19 24.6405 1873 62.5954L834.093 466.243Z' fill='%2346B2E0'/%3E%3Cpath d='M0 475.544V0C168.323 77.8273 733.94 20.4374 988.841 8.45949C1336.03 -7.85524 1625.55 135.352 1920 41.089V424.183C1670.59 453.791 1268.46 521.285 919.622 475.544C407.183 408.352 93.0243 447.547 0 475.544Z' fill='%2388D4F3'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    /* YANGI QATORLAR */
    background-size: 100% auto, 100% auto; /* Har bir SVG ni o'z kengligiga to'liq cho'zadi, balandligini nisbatda saqlaydi */
    /* background-size: cover; */ /* Agar vertikal to'ldirish kerak bo'lsa va kesilish mumkin bo'lsa */
    /* background-size: 100% 100%; */ /* Agar nisbatlar buzilsa ham, to'liq to'ldirish kerak bo'lsa */

    padding-top: 11rem;
    padding-bottom: 12rem;
}

@media (max-width: 480px) {
    /* 1. Modalning o'zini sozlash */
    .modal-content {
        width: 95% !important;
        padding: 24px 16px !important;
        overflow-y: auto !important; /* Ichidagi kontent uzun bo'lsa skroll bo'lishi uchun */
    }

        /* 2. Sarlavha va matn */
        .modal-content h3 {
            font-size: 24px !important;
            margin-bottom: 8px !important;
        }

        .modal-content p.text-xl {
            font-size: 16px !important;
            margin-bottom: 24px !important;
        }

    /* 3. Formani bitta ustunga o'tkazish va orasi ochiq bo'lishi (Sizning qoidangiz) */
    #fullRegistrationForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Elementlar orasi ochiq bo'lishi uchun */
    }

    /* 4. Inputlar va selectlar */
    .field-group input,
    .field-group select {
        padding: 12px !important;
        font-size: 16px !important; /* Mobil klaviaturasi zoom bo'lib ketmasligi uchun */
    }

    /* 5. Submit tugmasi */
    #fullRegistrationForm button[type='submit'] {
        padding: 14px !important;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    /* 1. Modal oynasini mobilga moslash */
    #first-modal .modal-content {
        width: 95% !important;
        max-height: 90vh !important; /* Ekran balandligining 90% qismi */
        padding: 24px 16px !important;
        overflow-y: auto !important; /* Kontent sig'masa skroll qilish uchun */
        border-radius: 20px !important;
    }

    /* 2. Sarlavhani ixchamlashtirish */
    #first-modal h3 {
        font-size: 26px !important;
        margin-bottom: 20px !important;
        text-align: left;
    }

    /* 3. Formani bitta ustunga o'tkazish va orasi ochiq bo'lishi (Sizning qoidangiz) */
    #first-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Elementlar orasidagi masofa */
    }

    /* 4. Inputlar va field-wrapper'lar */
    .md\:col-span-1 {
        display: flex !important;
        flex-direction: column !important;
        /*		gap: 16px;*/
    }

    .modal-input {
        font-size: 16px !important; /* iPhone zoom oldini olish uchun */
        padding: 12px !important;
    }

    /* 5. Radio-group (Gender, Level, Course) qismlari */
    .radio-group-container {
        margin-bottom: 10px !important;
    }

        .radio-group-container label.text-xl {
            font-size: 18px !important; /* Kichikroq sarlavha */
            margin-bottom: 12px !important;
        }

        .radio-group-container .flex-col {
            gap: 10px !important; /* Variantlar orasidagi masofa */
        }

    /* 6. "Continue" tugmasi */
    #open-second-modal-btn {
        width: 100% !important;
        padding: 16px !important;
        margin-top: 10px !important;
        position: sticky; /* Tugma har doim ko'rinib turishi uchun (ixtiyoriy) */
        bottom: 0;
    }

    /* 7. Custom select o'qchasini to'g'rilash */
    #custom-arrow {
        left: 90% !important;
        top: 24px !important;
    }
}

@media (max-width: 480px) {
    /* 1. Modal konteynerini mobilga moslash */
    #second-modal .modal-content {
        width: 95% !important;
        height: auto !important;
        max-height: 90vh !important; /* Ekran balandligining 90% qismi */
        padding: 24px 16px !important;
        overflow-y: auto !important; /* Kontent sig'masa skroll bo'lishi uchun */
        border-radius: 20px !important;
    }

    /* 2. Sarlavha o'lchami */
    #second-modal h3 {
        font-size: 26px !important;
        margin-bottom: 20px !important;
    }

    /* 3. Formani bitta ustunga o'tkazish va oraliqlar (Sizning qoidangiz) */
    #second-modal form {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important; /* Kartochkalar/bloklar orasi ochiq bo'lishi uchun */
    }

    /* 4. Grid ustunlarini bekor qilish */
    .md\:col-span-1,
    .md\:col-span-2 {
        width: 100% !important;
    }

    .flex.flex-col.gap-2 {
        gap: 12px !important; /* Variantlar orasidagi masofa ochiq bo'lishi uchun */
    }

    /* 6. Textarea (Izohlar qismi) balandligini biroz kamaytirish */
    textarea.h-32 {
        height: 100px !important;
        font-size: 16px !important;
    }

    /* 7. Submit tugmasi */
    #second-modal button[type='submit'] {
        padding: 14px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 1023px) {
    /* 1. Footer rasm takrorlanishini to'xtatish */
    .main-footer {
        background-repeat: no-repeat !important;
        background-size: cover; /* Rasm to'liq yopib turishi uchun, ixtiyoriy */
    }
}

@media (max-width: 1023px) {
    /* 1. Footer kontentini 30% pastga surish */
    .footer-content {
        margin-top: 0% !important;
    }
}

#combined-experts-section2 {
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='532.8' viewBox='0 0 1920 532.8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M834.093 466.243C430 535.5 245.5 495.5 10 466.243L1216.47 34.8823C1408.54 -34.039 1734.19 24.6405 1873 62.5954L834.093 466.243Z' fill='%23F39C12'/%3E%3Cpath d='M0 475.544V0C168.323 77.8273 733.94 20.4374 988.841 8.45949C1336.03 -7.85524 1625.55 135.352 1920 41.089V424.183C1670.59 453.791 1268.46 521.285 919.622 475.544C407.183 408.352 93.0243 447.547 0 475.544Z' fill='%23FFAE42'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    padding-top: 11rem;
    padding-bottom: 12rem;
}

@media (max-width: 480px) {
    /* Ikkinchi seksiyaning fon o'lchamini sozlash */
    #combined-experts-section2 {
        background-size: 1111% auto !important; /* Kengligi 1056%, balandligi avto */
        background-repeat: no-repeat !important;
        background-position: center center !important; /* Fon markazda turishi uchun */
    }
}

#combined-experts-section2-1 {
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='532.8' viewBox='0 0 1920 532.8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M834.093 466.243C430 535.5 245.5 495.5 10 466.243L1216.47 34.8823C1408.54 -34.039 1734.19 24.6405 1873 62.5954L834.093 466.243Z' fill='%23FAD07C'/%3E%3Cpath d='M0 475.544V0C168.323 77.8273 733.94 20.4374 988.841 8.45949C1336.03 -7.85524 1625.55 135.352 1920 41.089V424.183C1670.59 453.791 1268.46 521.285 919.622 475.544C407.183 408.352 93.0243 447.547 0 475.544Z' fill='%23FEDD98'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    padding-bottom: 1rem;
}

#combined-experts-section1 {
    background-image: url("data:image/svg+xml,%3Csvg width='3840' height='1650' viewBox='0 0 1920 1408' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1995 1418.24H-75V68.6815C17 48.8527 172.5 -85.4204 884 87.1883C1009.41 105.641 1111.09 94.1379 1222.22 64.5981C1275.38 50.4674 1328.89 35.7882 1383.89 35.8272C1427.02 35.8579 1471.07 39.8828 1511.61 46.6219C1616.65 64.0803 1723.45 100.772 1829.93 99.7105C1908.23 98.93 1919.73 92.0197 1995 68.6815V1418.24Z' fill='%23FFF3E1' fill-opacity='1.0'/%3E%3C/svg%3E");
    background-repeat: no-repeat; /* Faqat bitta SVG bo'lgani uchun bitta 'no-repeat' yetarli */
    background-position: top center; /* Fon rasmini yuqori markazga joylashtirish */

    padding-top: 11rem;
    /* padding-bottom qismi siz bergan kodda yo'q edi, shuning uchun uni qoldirdim */
    /* padding-bottom: 12rem; */ /* Agar kerak bo'lsa, bu qatorni qo'shing */
}

@media (max-width: 480px) {
    /* 1. Sarlavhani mobilga moslash */
    section.py-20 h2 {
        font-size: 44px !important;
        line-height: 1.2 !important;
        margin-bottom: 30px !important;
    }

    /* 2. Blog kartochkalari konteyneri */
    .grid.grid-cols-1.md\:grid-cols-2 {
        /*gap: 25px !important;*/ /* Kartochkalar orasi ochiq bo'lishi uchun (Sizning qoidangiz) */
    }

    /* 3. Blog kartochkasini o'zi */
    div[class*='bg-white w-[704px]'] {
        width: 100% !important; /* Qat'iy kenglikni bekor qilish */
        height: auto !important; /* Qat'iy balandlikni bekor qilish */
        flex-direction: column !important; /* Rasm va matnni ustma-ust qilish */
        padding: 0 !important; /* Ichki bo'shliqni qayta sozlash */
        overflow: hidden;
    }

        /* 4. Blog rasmi */
        div[class*='bg-white w-[704px]'] img {
            width: 100% !important;
            height: 200px !important; /* Mobil uchun qulay balandlik */
            border-radius: 20px 20px 0 0 !important; /* Faqat tepa qismi yumaloq */
        }

    /* 5. Blog matnlari joylashgan qism */
    .p-15.text-left {
        padding: 20px !important; /* p-15 o'rniga mobilga mos padding */
    }

    .p-15 h3 {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .p-15 p {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        line-height: 1.5 !important;
    }

    /* 6. Load More tugmasini mobilga moslash */
    section.py-20 button.botton-color {
        width: 100% !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Paddingni olib tashlash */
    .flex.items-center.justify-center.min-h-screen {
        padding: 0 !important;
    }

    /* Agar bu konteyner ichida kartochkalar bo'lsa,
       sizning saqlangan qoidangiz bo'yicha ular orasi ochiq bo'ladi */
    .flex.flex-col {
        /*		gap: 12px;*/
    }
}

@media (max-width: 480px) {
    /* Aynan shu klasslar kombinatsiyasiga ega elementni nishonga olamiz */
    .flex.items-center.justify-center.min-h-screen.p-4 {
        min-height: auto !important; /* Ekranni to'liq egallashni bekor qiladi */
        padding: 0 !important; /* p-4 ni olib tashlaydi */
    }

    /* Sizning doimiy qoidalaringiz: */
    /* 1. Kartochkalar orasi ochiq bo'lishi */
    .flex-col {
        /*		gap: 24px;*/
    }
}

@media (max-width: 480px) {
    /* 1. Fon va balandlikni to'g'irlash */
    .faq-bg.aspect-\[2\.25\/1\] {
        aspect-ratio: auto !important; /* Mobilga qat'iy nisbat kerak emas */
        min-height: 400px !important;
        padding: 64px 20px !important;
        background-size: cover !important; /* Fon to'liq qoplashi uchun */
    }

    /* 2. Sarlavhani kichraytirish (72px/6xl juda katta) */
    .faq-bg h2 {
        font-size: 36px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

        /* Br tegini yashirish (matn tabiiy sinishi uchun) */
        .faq-bg h2 br {
            display: none !important;
        }

    /* 3. Matn (email qismi) */
    .faq-bg p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* 4. Tugmani moslash (Sizning doimiy qoidangiz: width 100%) */
    .faq-bg button {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 12px 0 !important;
    }
}

@media (max-width: 480px) {
    #combined-experts-section1 {
        background-size: 1926% 41% !important;
        /* Fon rasm markazda chiroyli turishi uchun quyidagilar ham tavsiya etiladi: */
        background-repeat: no-repeat !important;
        background-position: center top !important;
    }
}

.anytime-anywhere-bg {
    background-image: url('./image/svg/anytime-anywhere-bg.svg');
    background-repeat: no-repeat;
    background-size: 100%;
}

@media (max-width: 480px) {
    .botton-color {
        width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    /* Pricing sarlavhasining mobil versiya uchun tepa masofasi */
    h2.text-4xl.title-colors {
        margin-top: 15% !important;
        margin-bottom: 2rem !important; /* Mobileda masofani muvozanatlash uchun */
    }
}

@media (max-width: 480px) {
    /* 1. Kartochkalarni umumiy 10% ga kichraytirish */
    .flex-col > .w-full.max-w-xs,
    .flex-col > .w-full.max-w-md {
        transform: scale(0.9) !important;
    }

    /* 2. Kartochkalar orasini ochish (Saqlangan ma'lumot asosida) */
    .flex-col.space-y-8 {
        gap: 0px !important;
        padding-bottom: 0%;
    }
}

@media (max-width: 480px) {
    /* 1. Sarlavhani (Home Subscription Pricing) mobilga moslash */
    .max-w-\[838px\] h2[style*='font-size: 72px;'] {
        font-size: 32px !important; /* Siz so'ragan o'lcham */
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        text-align: center;
    }

    /* Mobil ekran tor bo'lgani uchun <br> ni yashirish matnni chiroyli qiladi */
    .max-w-\[838px\] h2 br {
        display: none;
    }

    /* 2. Paragraf matnlarini mobilga moslash */
    .max-w-\[838px\] p.text-2xl {
        font-size: 18px !important; /* 2xl (24px) mobil uchun biroz katta */
        line-height: 1.5 !important;
        text-align: center;
        margin-bottom: 1rem !important;
    }

    /* 3. Umumiy konteyner paddingi */
    .max-w-\[838px\].mx-auto.p-8 {
        padding: 40px 20px !important; /* Kartochkalar orasi ochiq bo'lishi uchun */
    }
}

/* Mobile ko'rinish uchun (1024px dan kichik ekranlar) */
@media (max-width: 1023px) {
    .anytime-anywhere-bg {
        background-size: 530% !important;
        background-position: center; /* Rasm markazda turishi uchun, kerak bo'lsa o'zgartiring */
    }
}

@media (max-width: 480px) {
    /* Rasmlardagi qat'iy o'lchamlarni bekor qilish */
    .grid-cols-2 img.w-65.h-65 {
        width: auto !important;
        height: auto !important;
        max-width: 150px !important; /* Mobil uchun mosroq o'lcham */
        aspect-ratio: 1 / 1; /* Rasm doira bo'lib qolishi uchun */
    }
}

@media (max-width: 1023px) {
    /* 1. SVG-ni mobileda butunlay yashirish */
    .svg-background {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    /* 1. min-h-screen xususiyatini olib tashlash */
    section.min-h-screen {
        min-height: auto !important;
    }
}

@media (max-width: 1023px) {
    /* 1. Rasmdagi h-[360px] ni mobileda bekor qilish */
    .w-\[360px\].h-\[360px\] {
        height: auto !important;
        width: 100% !important; /* Mobile ekran kengligiga moslashishi uchun */
        max-width: 300px; /* Mobileda rasm juda katta bo'lib ketmasligi uchun */
    }
}
/* --- Mobile ko'rinish uchun (1024px dan kichik ekranlar) --- */

@media (max-width: 1023px) {
    /* 1. GIF-ni ekran markaziga qaytarish va ko'rinadigan qilish */
    .w-full.md\:w-1\/2.relative.min-h-\[300px\] div[style*='margin-top: -38%'] {
        margin-top: 0 !important; /* Manfiy marginni bekor qilamiz */
        margin-right: 0 !important; /* Surilishni bekor qilamiz */
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .gif-display {
        display: block;
        width: 100%;
        /*max-width: 320px !important;*/ /* Mobileda juda katta bo'lmasligi uchun */
        height: auto;
    }

    /* 2. Matn qismini to'g'irlash */
    div[style*='margin-top: -20%'] {
        margin-top: 20px !important; /* Mobileda sarlavhani joyiga qaytaramiz */
    }

    h1[style*='font-size: 72px'] {
        font-size: 48px !important; /* 72px mobile uchun juda katta */
        line-height: 1.2 !important;
    }
}

/* --- Mobile ko'rinish uchun (1024px dan kichik ekranlar) --- */

@media (max-width: 1023px) {
    /* 1. inset-x-0 ni mobileda -125px ga o'zgartirish */
    .absolute.inset-x-0 {
        left: -125% !important;
        right: -125% !important;
        width: auto !important; /* Kenglik cheklanib qolmasligi uchun */
    }
}

@media (max-width: 1023px) {
    /* 1. py-12 ni mobileda py-20 ga o'zgartirish */
    .container.py-12 {
        padding-top: 5rem !important; /* py-20 = 80px */
        padding-bottom: 5rem !important; /* py-20 = 80px */
    }
}

@media (max-width: 1023px) {
    /* 1. Yashirilgan video blokini mobileda ko'rsatish */
    .hidden.md\:grid {
        display: flex !important; /* Blokni ko'rinadigan qilish */
        flex-direction: column !important; /* Ustun shakliga keltirish */
        gap: 20px !important; /* Videolar orasini ochish */
        width: 100% !important;
        margin-bottom: 24px !important; /* Pastdagi tugmalardan masofa */
    }

    /* 2. Video konteyner o'lchamlarini moslash */
    .video-container {
        width: 100% !important;
        height: 250px !important; /* Mobile uchun mos balandlik */
        position: relative;
    }
}

@media (max-width: 1023px) {
    .mtIcons {
        margin-top: -45%;
    }
}

/* --- Mobile ko'rinish (1024px dan kichik ekranlar) --- */
@media (max-width: 1023px) {
    /* 1. grid1 klassini mobil qurilmalarda block (flow) holatiga keltirish */
    .grid1 {
        display: block !important; /* Grid xususiyatini bekor qiladi */
        width: 100% !important;
    }

        /* 2. Ichidagi elementlar orasini ochish (ustma-ust tushganda yopishib qolmasligi uchun) */
        .grid1 > div {
            margin-bottom: 24px !important; /* Siz xohlagandek kartochkalar orasi ochiq bo'ladi */
            width: 100% !important;
        }

            /* 3. Oxirgi elementning marginini olib tashlash */
            .grid1 > div:last-child {
                margin-bottom: 0 !important;
            }
}

@media (max-width: 1023px) {
    /* 1. Buttonni mobileda to'liq kenglikka yoyish */
    #open-first-modal-btn {
        width: 100% !important;
        display: block !important; /* To'liq kenglik ishlashi uchun block element qilamiz */
        text-align: center !important;
        white-space: normal !important; /* Matn sig'masa pastga tushishi uchun */
    }
}

/* Web/Desktop ko'rinish uchun (1024px va undan katta ekranlar) */
@media (min-width: 1024px) {
    .anytime-anywhere-bg {
        background-size: 100%;
    }
}
/* Yangi video section uchun CSS */
.video-section {
    background-color: white;
    /* Umumiy fon rangi */
}

/* Vertikal karuselga kiritilgan o'zgarishlarni bekor qilish */
.video-carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height ni olib tashladik */
    /* overflow ni olib tashladik */
    margin: 0 auto;
    max-width: none; /* Avvalgi max-widthni olib tashladik */
}

.testimonials-card {
    height: max-content;
}

.testimonials-page-card {
    height: auto;
}

.video-carousel-wrapper {
    display: flex;
    flex-direction: row; /* Gorizontal joylashishga qaytarildi */
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Videolar orasidagi bo'shliq */
    /* transition va position xususiyatlari olib tashlandi */
    /* transform xususiyatlari olib tashlandi */
}

.video-item {
    position: relative;
    height: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    opacity: 0.5; /* Nofaol videolar biroz xira */
    flex-shrink: 0; /* Kichraymasin */
}

    .video-item.active {
        opacity: 1; /* Faol video to'liq ko'rinadi */
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        width: 60%; /* Faol video kengroq */
        max-width: 800px; /* Maksimal kenglikni belgilash */
    }

    .video-item:not(.active) {
        padding-bottom: 56.25%; /* No-active videolar ham 16:9 bo'lsin */
        width: 20%; /* No-active videolar torroq */
        max-width: 250px;
    }

    .video-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Default holatda ko'rsatiladi */
    }

    .video-item iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        display: none; /* Default holatda yashiriladi */
    }

    .video-item .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4rem; /* w-16 */
        height: 4rem; /* h-16 */
        color: #fff;
        opacity: 0.9;
        transition: opacity 0.2s ease-in-out;
        display: block; /* Default holatda ko'rsatiladi */
    }

    .video-item:hover .play-button {
        opacity: 1;
    }

/* Carousel tugmalari uchun */
.carousel-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    background-color: #fff;
    /* bg-white */
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    z-index: 10;
}

    .carousel-button:hover {
        background-color: #f0f0f0;
        /* hover:bg-gray-100 */
    }

    .carousel-button svg {
        width: 1.5rem;
        /* w-6 */
        height: 1.5rem;
        /* h-6 */
        color: #4a5568;
        /* text-gray-600 */
    }

/* Yangi tugmalar joylashuvi (olindi) */
.carousel-nav-left,
.carousel-nav-right {
    display: none; /* Bu tugmalar endi kerak emas, chunki pastki tugmachalarni ishlatamiz */
}

/* Pastki markaziy navigatsiya tugmalari uchun stil */
.bottom-carousel-nav {
    display: flex; /* Desktop va mobil uchun ko'rsatildi */
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Tugmalar orasidagi bo'shliq */
    margin-top: 2rem; /* Videodan yuqoriroq masofa */
}

/* Mobil ko'rinishda video elementlari uchun maxsus stil */
@media (max-width: 480px) {
    .video-carousel-wrapper {
        flex-direction: column; /* Mobil ko'rinishda ustma-ust joylashish */
    }

    .video-item {
        width: 90%; /* Mobil ko'rinishda har bir videoning kengligi */
        max-width: none; /* Mobil ko'rinishda max-widthni olib tashlash */
        padding-bottom: 56.25%; /* Mobil ko'rinishda ham 16:9 nisbat */
        opacity: 1; /* Mobil ko'rinishda doimo to'liq ko'rinish */
    }

        .video-item:not(.active) {
            display: none; /* Mobil ko'rinishda faqat faol videoni ko'rsatish */
        }
}

.anytime-anywhere-section {
    padding-top: 1rem;
    padding-bottom: 0rem;
    text-align: center;
}

    .anytime-anywhere-section h2 {
        color: #3d464c;
        font-size: 4rem; /* text-4xl */
        margin-bottom: 7rem;
    }

.device-mockups {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3rem;
}

    .device-mockups img {
        height: auto;
        max-width: 60%;
        vertical-align: bottom;
    }

.app-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 5rem; /* Space between app buttons and "Our Community" */
}

.grid1 > div {
    /* Umumiy oʻlchamlar */
    width: 694px; /* Kenglik */
    height: 505px; /* Balandlik */
    /* Boshqa xususiyatlar */
    border-radius: 24px;
    opacity: 1; /* O'zgartirishsiz qoldi */
    /* Padding (ichki boʻshliq) qiymatlari */
    padding-top: 32px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-left: 24px;
    /* Qolgan stillar */
    background-color: #fff; /* bg-white ga mos */
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
}

.grid1 {
    /* Umumiy grid konteyneri */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Har bir qatorda 2 ta ustun */
    gap: 50px; /* Kartochkalar orasidagi boʻshliq (gap) */
}

.app-buttons a img {
    height: 5rem; /* h-12 */
    width: auto;
}

.our-community-section {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.our-community-section {
    position: relative;
}

.svg-background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.svg-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: 2;
}

.section-content {
    position: relative;
    z-index: 10; /* Kontent fonning ustida bo'lishi uchun */
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.section-content1 {
    position: relative;
    z-index: 10; /* Kontent fonning ustida bo'lishi uchun */
    padding-top: 10rem;
    padding-bottom: 12rem;
}

/* Mobil ko'rinishda toshbaqa ko'rinmasligi uchun */
@media (max-width: 480px) {
    .turtle-icon {
        display: none;
    }
}

/* Kartochkalar orasidagi masofa */
.card-container > div {
    padding-bottom: 2rem; /* Mobil versiyada kartochkalar orasini ochish */
}

/* Kartochkalar orasidagi masofa katta ekranlar uchun */
@media (min-width: 480px) {
    .card-container > div {
        padding-bottom: 0;
    }
}

.our-community-section h2 {
    color: #3d464c;
    font-size: 44px; /* Mobil uchun default */
    margin-bottom: 5rem;
    text-align: center;
}

@media (min-width: 480px) {
    .our-community-section h2 {
        font-size: 64px; /* Web/Desktop uchun */
    }
}

.community-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 480px) {
    .community-stats {
        flex-direction: row;
        justify-content: space-between;
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .stat-item img {
        height: 6rem; /* h-24 */
        width: 6rem; /* w-24 */
        margin-bottom: 1rem;
    }

    .stat-item p:first-of-type {
        font-size: 2rem; /* text-4xl */
        font-weight: bold;
        color: #faa106; /* Orange color */
        margin-bottom: 0.5rem;
    }

    .stat-item p:last-of-type {
        font-size: 1.125rem; /* text-lg */
        color: #555;
    }

.stat-item1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .stat-item1 img {
        height: 6rem; /* h-24 */
        width: 7rem; /* w-24 */
        margin-bottom: 1rem;
    }

    .stat-item1 p:first-of-type {
        font-size: 2rem; /* text-4xl */
        color: #3d464c; /*  */
        margin-bottom: 0.5rem;
    }

    .stat-item1 p:last-of-type {
        font-size: 1.125rem; /* text-lg */
        color: #555;
    }

.schools-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center;
}

.blog-card {
    background-color: #ffffff;
    border-radius: 20px; /* Bu qiymatni 10px dan 20px ga o'zgartiring */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Bu qismni qo'shing yoki o'zgartiring */
    width: 704px;
    height: 268px;
    border: 1px solid; /* Bu yerga chegara rangini qo'shing */
}

.schools-section h2 {
    font-size: 4rem;
    color: #3d464c;
    margin-bottom: 1rem;
}

.school-logos {
    margin-top: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 5rem;
}

.school-logo-item img {
    max-width: 120px; /* Logolarning maksimal kengligi */
    height: auto;
    opacity: 0.7; /* Biroz xiralashgan */
    transition: opacity 0.3s ease-in-out;
}

    .school-logo-item img:hover {
        opacity: 1; /* Hoverda to'liq ko'rinadi */
    }

/* Skills Acquired sectioni */
.skills-section {
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
}

    .skills-section h2 {
        font-size: 4rem;
        color: #3d464c;
        margin-bottom: 1rem;
    }

    .skills-section p.subtitle {
        font-size: 20px; /* text-lg */
        color: #666;
        margin-bottom: 4rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 tadan ko'p ustunlar uchun moslashuvchan */
    gap: 2rem; /* Kartochkalar orasidagi bo'shliq */
    max-width: 80%;
    margin: 0 auto;
}

.skill-item {
    display: flex;
    align-items: center;
    border-radius: 0.75rem; /* Kichik yumaloq burchaklar */
    padding: 1.25rem;
    text-align: left; /* Matn chapga tekislangan */
}

    .skill-item img {
        width: 5rem; /* Icon o'lchami */
        height: 5rem; /* Icon o'lchami */
        margin-right: 1rem;
    }

html {
    scroll-behavior: smooth;
}

.skill-item p {
    font-size: 24px; /* text-lg */
    font-weight: 500; /* Medium weight */
    color: #3d464c;
}

/* Mobil responsivlik */
@media (max-width: 480px) {
    .schools-section h2,
    .skills-section h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .school-logos {
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .school-logo-item img {
        max-width: 90px;
    }

    .skills-section p.subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .skills-grid {
        grid-template-columns: 1fr; /* Mobil ekranlarda bir ustun */
    }

    .skill-item {
        padding: 1rem;
    }

        .skill-item img {
            width: 6rem;
            height: 6rem;
            margin-right: 0.75rem;
        }

        .skill-item p {
            font-size: 1rem;
        }
    /* Agar gifni ma'lum bir o'lchamda ko'rsatmoqchi bo'lsangiz */
    .gif-display {
        width: 100%;
        max-width: 600px; /* Maksimal kenglik */
        height: auto;
        border-radius: 8px; /* Yumaloq burchaklar */
    }
}

.footer-wave {
    width: 100%;
    height: 527px; /* SVG ning asli balandligi */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* SVG kodi CSS ichida */
    background-image: url("data:image/svg+xml,%3Csvg width='1920' height='527' viewBox='0 0 1920 527' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3 526.511H1920V90.0119C1814.5 63.5119 1665.5 -11.9881 1507.5 37.0119C1343.95 87.7339 1217.15 99.234 1025.5 48.0123C801 -11.9876 748.501 -29.4876 447 77.0114C274 138.12 73.5 62.012 -3 20.512V526.511Z' fill='%2375D069'/%3E%3C/svg%3E");
}

/* Mobil qurilmalar uchun moslash */
@media (max-width: 480px) {
    .footer-wave {
        height: 200px; /* Mobilda balandlikni kichraytiramiz */
        background-size: fill;
    }
}

.main-footer {
    position: relative;
    /* Agar SVG to'liq qoplamasa yoki yuklanmasa, shu rang fon bo'ladi */
    padding-top: 5rem; /* SVG'ning eng pastki qismi uchun bo'shliq */
    padding-bottom: 3rem; /* Pastki bo'shliq */
    color: #fff; /* Matn rangi */
    overflow: hidden; /* SVG chiqib ketmasligi uchun */
}

.footer-bg-svg {
    position: absolute;
    inset: 0;
    background-image: url('/src/image/svg/footer-web.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
/* Video konteynerlari uchun maxsus CSS */
.video-container {
    position: relative;
    width: 104%;
    padding-bottom: 56.25%; /* 16:9 nisbat uchun (balandlik kenglikning 56.25% i) */
    overflow: hidden;
    border-radius: 32px; /* Rasmdagi burchaklarni yumaloq qilish */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Rasmdagi soya effektini berish */
}

    .video-container iframe,
    .video-container video,
    .video-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Kontentni butun joyni qoplashini ta'minlaydi */
    }
/* Play tugmasi uchun stillar */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tugmani markazga joylash */
    background-color: #faa106; /* Yarim shaffof oq fon */
    border-radius: 50%; /* Dumaloq shakl */
    width: 89px; /* Tugma kengligi */
    height: 88px; /* Tugma balandligi */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10; /* Videodan ustunroq turishi uchun */
    transition: background-color 0.3s ease; /* Hover effekti uchun */
}

    .play-button:hover {
        background-color: #ffc446;
    }

    .play-button svg {
        color: white; /* Play ikonkasi rangi */
        width: 30px; /* Ikonka kengligi */
        height: 30px; /* Ikonka balandligi */
    }

.play-index {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #bebebe73;
    border-radius: 50%;
    width: 80px; /* Mobil kenglik */
    height: 80px; /* Mobil balandlik */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

@media (min-width: 480px) {
    .play-index {
        width: 100px; /* Desktop kengligi */
        height: 100px; /* Desktop balandligi */
    }
}

.play-index:hover {
    background-color: #bebebe73;
}

.play-index svg {
    color: white;
    width: 16px; /* Mobil ikonka kengligi */
    height: 16px; /* Mobil ikonka balandligi */
}

@media (min-width: 480px) {
    .play-index svg {
        width: 20px; /* Desktop ikonka kengligi */
        height: 20px; /* Desktop ikonka balandligi */
    }
}

/* ... (qolgan footer kontenti stillari, masalan, footer-logo-section, footer-links-group, social-icons, footer-bottom stillari) ... */

.animatedGif {
    position: relative;
    top: 35px;
}