/* AstroGuide Complete Website */
:root {
    --bg: #080a22;
    --bg2: #0d1030;
    --panel: #101431;
    --gold: #f0c45b;
    --gold2: #ffe19a;
    --text: #f4f1e8;
    --muted: #b9bbc8;
    --line: rgba(242, 196, 93, .28);
    --max: 1180px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    width: min(var(--max), calc(100% - 56px));
    margin: auto
}

.topbar {
    height: 28px;
    background: #060718;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 10px;
    color: #ddd
}

.topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.topbar span {
    margin-right: 20px
}

.topbar i {
    color: var(--gold);
    margin-right: 6px
}

.social {
    display: flex;
    align-items: center;
    gap: 17px
}

.social a {
    opacity: .9
}

.social .wa-link,
.green {
    color: #35d775 !important
}

.header {
    position: absolute;
    z-index: 50;
    top: 28px;
    left: 0;
    right: 0;
    background: rgba(6, 7, 24, .38);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(5px)
}

.nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

/* ================================
   BRAND LOGO
================================ */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

/* ================================
   FULL CIRCLE BRAND LOGO
================================ */

.brand-logo {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;

    border-radius: 50%;
    overflow: hidden;

    display: block;
    position: relative;

    padding: 0;
    margin: 0;

    background: transparent;
    /*border: 2px solid #e9bd55;*/

    box-sizing: border-box;
}

.brand-logo img {
    width: 100%;
    height: 100%;

    display: block;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    border-radius: 75%;

    /* image-এর ভিতরের ফাঁকা margin থাকলে cover করবে */
    transform: scale(1.12);
    transform-origin: center;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.brand-text b {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    color: #e9bd55;
    white-space: nowrap;
}

.brand-text small {
    display: block;
    margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,.65);
    letter-spacing: .5px;
}


/* ================================
   MOBILE RESPONSIVE
================================ */

@media (max-width: 768px) {

    .brand {
        gap: 9px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .brand-text b {
        font-size: 16px;
    }

    .brand-text small {
        font-size: 8px;
        margin-top: 3px;
    }

}

@media (max-width: 480px) {

    .brand {
        gap: 8px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .brand-text b {
        font-size: 14px;
    }

    .brand-text small {
        font-size: 7px;
    }

}
nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 11px
}

nav a {
    color: #eee;
    position: relative
}

nav a.active,
nav a:hover {
    color: var(--gold2)
}

/*nav a.active:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: -13px;*/
/*    height: 2px;*/
/*    background: var(--gold)*/
/*}*/

.nav-cta {
    background: linear-gradient(135deg, #ffe29a, #efbd50);
    color: #171522 !important;
    padding: 11px 17px;
    border-radius: 6px;
    font-weight: 700
}

.menu {
    display: none;
    background: none;
    color: white;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 8px 11px
}

.floating-wa {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px 10px 9px;
    background: #1eb957;
    color: #fff;
    border-radius: 0 22px 22px 0;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 8px 24px #0007
}

.floating-wa i {
    font-size: 21px
}

.floating-wa:hover {
    background: #149445
}

.hero {
    min-height: 520px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(5, 7, 24, .96) 0%, rgba(7, 9, 30, .88) 39%, rgba(7, 9, 30, .22) 100%), url("../images/hero.png") 57% center/cover no-repeat
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 67% 50%, rgba(240, 196, 91, .14), transparent 25%)
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 90px
}

.hero-copy {
    max-width: 590px
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #d8d6ce
}

.hero h1 {
    margin: 10px 0 14px;
    font: 600 clamp(42px, 5vw, 62px)/1.04 Cinzel, serif;
    letter-spacing: 1px;
    animation: rise 1s both
}

.hero h1 span {
    color: var(--gold2);
    display: inline-block;
    animation: glow 2.5s 1s infinite alternate
}

.hero-copy>p {
    font-size: 13px;
    color: #e1e2e7;
    max-width: 570px;
    animation: rise .8s .3s both
}

.actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 20px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    padding: 11px 18px;
    font-size: 11px;
    font-weight: 700
}

.gold {
    background: linear-gradient(135deg, #ffe39a, #edbc4e);
    color: #171522
}

.outline {
    border: 1px solid #eee;
    background: #0002
}

.hero-trust {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 9px;
    color: #e5e5eb
}

.hero-trust i {
    color: var(--gold);
    margin-right: 5px
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(5px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes glow {
    from {
        text-shadow: none
    }

    to {
        text-shadow: 0 0 22px #f0c45b77
    }
}

.section {
    padding: 18px 0;
    background: var(--bg)
}

.section-head {
    text-align: center;
    margin-bottom: 16px
}

.orn {
    color: var(--gold);
    font-size: 16px
}

.section-head h2 {
    margin: 0;
    font: 600 23px Cinzel, serif;
    color: #f2e5c0;
    letter-spacing: 1px
}

.section-head p {
    margin: 2px 0 0;
    color: #b8bac6;
    font-size: 10px
}

.section-head.left {
    text-align: left
}

.section-head.left h2 {
    font-size: 25px
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

.card {
    border: 1px solid var(--line);
    background: #10132e;
    border-radius: 6px;
    overflow: hidden
}

.card-img {
    height: 115px;
    background-size: cover;
    background-position: center
}

.card-body {
    padding: 11px
}

.card h3 {
    margin: 0 0 4px;
    font: 600 13px Cinzel, serif;
    color: #f3ead0
}

.card p {
    font-size: 9px;
    color: #b9bbc7;
    margin: 0 0 8px
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    color: #c7c8d0
}

.price {
    color: #f5d47c;
    font-weight: 700
}

.arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: #191621
}

.about-strip {
    display: grid;
    grid-template-columns: 31% 44% 25%;
    background: #11142f
}

.about-img {
    min-height: 300px;
    background: url("../images/sarthak.png") center/cover
}

.about-copy {
    padding: 19px 24px
}

.about-copy p {
    font-size: 10px;
    color: #c4c6d0;
    line-height: 1.6
}

.features {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px
}

.features div {
    font-size: 9px;
    color: #d7d8df
}

.features i {
    width: 20px;
    color: var(--gold)
}

.how {
    background: linear-gradient(90deg, #090c27dd, #090c2740), url("../images/how.png") center/cover
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.step {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 11px;
    align-items: center
}

.step-icon {
    width: 52px;
    height: 52px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 18px
}

.step strong {
    font-size: 10px;
    color: var(--gold)
}

.step h3 {
    margin: 0;
    font-size: 12px
}

.step p {
    margin: 1px 0;
    font-size: 8px;
    color: #aeb1bf
}

.step>i {
    color: var(--gold)
}

.course-card {
    background: #f1e4c4;
    color: #171626;
    border-radius: 5px;
    overflow: hidden
}

.course-img {
    height: 102px;
    background-size: cover;
    background-position: center
}

.course-body {
    padding: 9px 11px
}

.course-body h3 {
    margin: 0 0 3px;
    font-size: 12px
}

.course-body p {
    font-size: 8px;
    color: #565564;
    min-height: 25px;
    margin: 0 0 5px
}

.meta {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #d4c7aa;
    padding-bottom: 7px;
    font-size: 8px;
    color: #5d5c68
}

.course-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px
}

.course-bottom strong {
    font-size: 13px
}

.course-bottom del {
    font-size: 8px;
    color: #777;
    margin-left: 5px
}

.enroll {
    padding: 7px 10px;
    background: var(--gold);
    border-radius: 4px;
    color: #171522;
    font-size: 8px;
    font-weight: 700
}

.testimonials {
    background: #090c27
}

.testimonial {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 5px
}

.avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #d9c9a8;
    color: #333;
    display: grid;
    place-items: center;
    font-weight: 700
}

.stars {
    color: var(--gold);
    font-size: 10px
}

.testimonial p {
    font-size: 9px;
    color: #c3c5cf;
    margin: 3px 0
}

.testimonial strong,
.testimonial small {
    display: block;
    font-size: 8px
}

.testimonial strong {
    color: #f2dc9e
}

.testimonial small {
    color: #999dac
}

.booking-strip {
    padding: 17px 0;
    background: linear-gradient(90deg, #16102599, #16102555), url("../images/booking.png") center/cover
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-items: end
}

.field label {
    display: block;
    font-size: 8px;
    color: #ddd;
    margin-bottom: 3px
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid #cfcfd2;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 9px;
    outline: 0
}

.field textarea {
    min-height: 45px;
    resize: vertical
}

.message {
    grid-column: span 2
}

.submit {
    display: flex;
    justify-content: flex-end
}

.page-hero {
    min-height: 275px;
    display: flex;
    align-items: flex-end;
    position: relative;
    background: linear-gradient(90deg, #050718ee, #080a2233), url("../images/hero.png") center/cover
}

.page-hero .hero-content {
    padding-bottom: 25px
}

.page-hero h1 {
    font: 600 clamp(42px, 5vw, 65px) Cinzel, serif;
    margin: 6px 0;
    color: #f4f1e8
}

.page-hero h1 span {
    color: var(--gold)
}

.page-hero p {
    margin: 0;
    color: #e5dfcf;
    font: 500 15px Cinzel, serif
}

.crumb {
    display: flex;
    gap: 10px;
    font-size: 9px;
    color: #e7c865;
    margin-top: 9px
}

.crumb b {
    color: #eee
}

.story {
    padding: 15px 0
}

.story-grid {
    display: grid;
    grid-template-columns: 40% 42% 18%;
    gap: 18px
}

.profile {
    min-height: 285px;
    background: url("../images/sarthak.png") center/cover;
    border: 1px solid var(--line);
    border-radius: 4px;
    position: relative
}

.profile-label {
    position: absolute;
    bottom: 15px;
    left: 22px;
    right: 22px;
    padding: 8px 12px;
    background: #0b0b20dd;
    border-left: 3px solid var(--gold)
}

.profile-label strong {
    display: block;
    color: var(--gold2);
    font: 600 13px Cinzel, serif
}

.profile-label span {
    font-size: 8px
}

.story-copy p {
    font-size: 10px;
    color: #c4c5cf;
    line-height: 1.55
}

.mission {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 28px 19px;
    display: flex;
    align-items: center;
    background: #0d102c
}

.mission p {
    font: 500 12px/1.75 Cinzel, serif;
    color: #ddd;
    margin: 0
}

.signature {
    font: italic 21px Cinzel;
    color: var(--gold);
    margin-top: 10px
}

.role {
    font-size: 8px;
    color: #bbb
}

.stats {
    background: #0c0f2b;
    border-block: 1px solid #ffffff12
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    border-right: 1px solid #ffffff10
}

.stat:last-child {
    border: 0
}

.stat-icon {
    width: 45px;
    height: 45px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 19px
}

.stat strong {
    display: block;
    font: 600 20px Cinzel;
    color: var(--gold)
}

.stat span {
    display: block;
    font-size: 8px;
    color: #c4c5cd
}

.expertise {
    background: linear-gradient(#080b28dd, #080b28ee), url("../images/hero.png") center/cover
}

.expert-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.expert {
    padding: 14px 10px;
    text-align: center;
    border: 1px solid var(--line);
    background: #0d1029dd;
    border-radius: 5px;
    min-height: 145px
}

.expert-icon {
    width: 43px;
    height: 43px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto;
    color: var(--gold);
    font-size: 21px
}

.expert h3 {
    font: 600 11px Cinzel;
    color: #eee3c4
}

.expert p {
    font-size: 8px;
    color: #b8bac5
}

.timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative
}

.timeline:before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 22px;
    height: 1px;
    background: #c69d4d
}

.mile {
    position: relative;
    z-index: 1;
    padding: 0 10px
}

.mile-dot {
    width: 45px;
    height: 45px;
    margin: auto;
    background: #171a35;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold)
}

.mile strong {
    display: block;
    color: var(--gold);
    font: 600 14px Cinzel;
    margin-top: 4px
}

.mile h4 {
    font-size: 9px;
    margin: 2px 0;
    color: #e7e5dc
}

.mile p {
    font-size: 8px;
    color: #aeb0bb
}

.education {
    padding: 12px 0
}

.education-box {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 18px;
    border: 1px solid var(--line);
    padding: 13px;
    background: #0c0f2a
}

.education ul {
    padding: 0;
    list-style: none
}

.education li {
    font-size: 8px;
    color: #c8cad1;
    margin: 7px 0
}

.education li:before {
    content: "✓";
    background: var(--gold);
    color: #222;
    border-radius: 50%;
    padding: 1px 4px;
    margin-right: 7px
}

.certs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.cert {
    height: 140px;
    background: #ead7ae;
    border: 3px solid #bc9344;
    padding: 3px
}

.cert img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cta {
    min-height: 130px;
    display: flex;
    align-items: center;
    text-align: center;
    background: linear-gradient(#20132555, #20132555), url("../images/booking.png") center/cover
}

.cta .section-head {
    margin-bottom: 8px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.service-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #0d102c
}

.service-card .img {
    height: 120px;
    background-size: cover;
    background-position: center
}

.service-card .body {
    padding: 11px
}

.service-card h3 {
    margin: 0;
    font: 600 14px Cinzel;
    color: #eee5cc
}

.service-card p {
    font-size: 9px;
    color: #bfc0ca;
    min-height: 45px
}

.bullets {
    padding: 0;
    list-style: none
}

.bullets li {
    font-size: 8px;
    color: #c9cad3;
    margin: 5px 0
}

.bullets li:before {
    content: "✓";
    color: #171522;
    background: var(--gold);
    border-radius: 50%;
    padding: 0 3px;
    margin-right: 6px
}

.service-meta {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #bbb;
    border-top: 1px solid #ffffff12;
    padding-top: 8px
}

.service-meta strong {
    color: var(--gold);
    font-size: 12px
}

.service-actions {
    display: flex;
    gap: 8px;
    margin-top: 9px
}

.service-actions .btn {
    flex: 1;
    padding: 8px
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.why {
    text-align: center
}

.why i {
    width: 45px;
    height: 45px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto;
    color: var(--gold);
    font-size: 18px
}

.why strong {
    display: block;
    color: #e9d48e;
    font-size: 10px;
    margin-top: 5px
}

.why p {
    font-size: 8px;
    color: #aaa
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.faq {
    border: 1px solid #ffffff10;
    background: #10132f;
    border-radius: 4px
}

.faq button {
    width: 100%;
    background: none;
    border: 0;
    color: #eee;
    text-align: left;
    padding: 10px;
    font-size: 9px;
    display: flex;
    justify-content: space-between
}

.faq .answer {
    display: none;
    padding: 0 10px 10px;
    color: #aeb0bc;
    font-size: 8px
}

.faq.open .answer {
    display: block
}

.course-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.course-full {
    border: 1px solid var(--line);
    background: #0d102d;
    border-radius: 6px;
    overflow: hidden
}

.course-full .img {
    height: 112px;
    background-size: cover;
    background-position: center
}

.course-full .body {
    padding: 10px
}

.course-full h3 {
    font: 600 12px Cinzel;
    margin: 0;
    color: #f2e9cf
}

.course-full p {
    font-size: 8px;
    color: #b8bac4;
    min-height: 28px
}

.course-full .bullets li {
    font-size: 8px
}

.course-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px
}

.course-price strong {
    font-size: 13px;
    color: #f4d177
}

.badge {
    font-size: 7px;
    background: #f43b54;
    color: white;
    padding: 3px 5px;
    border-radius: 3px
}

.feature-course {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 46% 54%;
    border: 1px solid var(--line);
    background: #0d102d;
    border-radius: 6px;
    overflow: hidden
}

.feature-course .img {
    min-height: 170px;
    background-size: cover;
    background-position: center
}

.feature-course .body {
    padding: 14px
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.tabs a {
    font-size: 9px;
    border: 1px solid #ffffff20;
    padding: 7px 16px;
    border-radius: 5px
}

.tabs a.active,
.tabs a:hover {
    background: var(--gold);
    color: #191621;
    border-color: var(--gold)
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 20px
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.post {
    border: 1px solid var(--line);
    background: #0d102d;
    border-radius: 5px;
    overflow: hidden
}

.post img {
    width: 100%;
    height: 105px;
    object-fit: cover
}

.post-body {
    padding: 9px
}

.tag {
    display: inline-block;
    background: var(--gold);
    color: #181522;
    border-radius: 10px;
    padding: 3px 7px;
    font-size: 7px;
    font-weight: 700
}

.post-meta {
    font-size: 7px;
    color: #9ea0ac;
    margin: 6px 0
}

.post h3 {
    font: 600 13px Cinzel;
    margin: 0;
    color: #eee7d2
}

.post p {
    font-size: 8px;
    color: #b6b8c3
}

.read {
    color: var(--gold);
    font-size: 8px;
    font-weight: 700
}

.sidebar {
    border: 1px solid var(--line);
    background: #0d102d;
    padding: 12px;
    border-radius: 5px;
    height: max-content
}

.sidebar h3 {
    font: 600 14px Cinzel;
    color: #edcf7c
}

.search {
    display: flex
}

.search input {
    flex: 1;
    border: 0;
    padding: 9px;
    font-size: 9px
}

.search button {
    width: 38px;
    border: 0;
    background: var(--gold)
}

.cat {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff0b;
    padding: 7px 0;
    font-size: 8px;
    color: #d0d1d8
}

.popular {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 7px;
    margin: 8px 0
}

.popular img {
    width: 55px;
    height: 40px;
    object-fit: cover
}

.popular span {
    font-size: 7px;
    color: #ddd
}

.contact-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #0c0f2b;
    border-block: 1px solid #ffffff10
}

.contact-trust {
    padding: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-right: 1px solid #ffffff0d
}

.contact-trust:last-child {
    border: 0
}

.contact-trust i {
    color: var(--gold);
    font-size: 21px
}

.contact-trust strong {
    display: block;
    font-size: 9px
}

.contact-trust span {
    display: block;
    color: #aeb0ba;
    font-size: 8px
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 16px 0
}

.contact-list {
    display: grid;
    gap: 7px
}

.contact-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #ffffff12;
    background: #0d102d;
    padding: 9px;
    border-radius: 6px
}

.contact-item .icon {
    width: 42px;
    height: 42px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 17px
}

.contact-item h4 {
    margin: 0;
    color: #e9cf7c;
    font: 600 11px Cinzel
}

.contact-item p {
    margin: 2px 0;
    color: #ddd;
    font-size: 9px
}

.contact-item small {
    color: #aaa;
    font-size: 7px
}

.contact-item .action {
    background: var(--gold);
    color: #191622;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700
}

.contact-form-box {
    border: 1px solid var(--line);
    padding: 15px;
    border-radius: 7px;
    background: #0d102d
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.full {
    grid-column: span 2
}

.contact-form-box textarea {
    min-height: 85px
}

.map-office {
    display: grid;
    grid-template-columns: 1.2fr .8fr
}

.map-placeholder {
    min-height: 280px;
    background: #d9dde2 url("../images/office.png") center/cover;
    display: grid;
    place-items: center
}

.office {
    background: linear-gradient(#10102ccc, #10102ccc), url("../images/office.png") center/cover;
    padding: 25px
}

.office h2 {
    font: 600 20px Cinzel;
    color: var(--gold2)
}

.office p {
    font-size: 9px;
    color: #ddd
}

.booking-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 17px 0
}

.booking-box {
    border: 1px solid var(--line);
    background: #0d102d;
    border-radius: 6px;
    padding: 15px
}

.consult-list {
    display: grid;
    gap: 7px
}

.consult {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid #ffffff12;
    border-radius: 6px;
    padding: 8px
}

.consult.selected {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px #f0c45b22
}

.consult .ico {
    width: 43px;
    height: 43px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 18px
}

.consult h4 {
    margin: 0;
    font-size: 10px
}

.consult p {
    font-size: 8px;
    color: #aaa;
    margin: 2px 0
}

.consult .cost {
    color: var(--gold);
    font-weight: 700;
    font-size: 11px
}

.pay-list {
    display: grid;
    gap: 5px;
    margin: 10px 0
}

.pay {
    border: 1px solid #ffffff15;
    border-radius: 4px;
    padding: 8px;
    font-size: 8px;
    color: #ddd
}

.offer {
    margin-top: 10px;
    height: 100px;
    background: url("../images/offer.jpg") center/cover;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 15px
}

.offer h3 {
    font: 600 17px Cinzel;
    color: #f2dc94
}

.offer p {
    font-size: 8px;
    color: #ddd
}

.footer {
    background: #070a20;
    border-top: 1px solid #ffffff10
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr .8fr 1fr 1.1fr 1.15fr;
    gap: 25px;
    padding: 23px 0
}

.footer h4 {
    margin: 0 0 8px;
    color: #e9cd7c;
    font: 600 10px Cinzel
}

.footer p,
.footer a {
    font-size: 8px;
    color: #afb1bc;
    display: block;
    margin: 4px 0
}

.footer-brand p {
    max-width: 235px;
    line-height: 1.5
}

.footer-social {
    display: flex;
    gap: 9px
}

.footer-social a {
    width: 25px;
    height: 25px;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.footer .brand {
    margin-bottom: 9px
}

.newsletter {
    display: flex
}

.newsletter input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 9px;
    font-size: 8px
}

.newsletter button {
    width: 38px;
    border: 0;
    background: var(--gold)
}

.copyright {
    border-top: 1px solid #ffffff0b;
    padding: 9px 0;
    color: #777b8a;
    font-size: 7px
}

.copyright .container {
    display: flex;
    justify-content: space-between
}

.copyright a {
    display: inline;
    font-size: 7px
}

@media(max-width:1050px) {
    nav {
        gap: 15px
    }

    .grid4,
    .course-page-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .about-strip {
        grid-template-columns: 35% 65%
    }

    .features {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .expert-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .story-grid {
        grid-template-columns: 38% 44% 18%
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:780px) {
    .container {
        width: calc(100% - 30px)
    }

    .topbar {
        display: none
    }

    .header {
        top: 0
    }

    .nav {
        min-height: 65px
    }

    .menu {
        display: block
    }

    nav {
        display: none;
        position: absolute;
        top: 65px;
        left: 15px;
        right: 15px;
        background: #0b0d29;
        border: 1px solid var(--line);
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    nav.open {
        display: flex
    }

    nav a {
        padding: 9px
    }

    .nav-cta {
        text-align: center
    }

    .hero {
        min-height: 650px
    }

    .hero-content {
        padding-top: 100px
    }

    .hero h1 {
        font-size: 39px
    }

    .hero-trust {
        gap: 12px
    }

    .grid3,
    .service-grid,
    .steps,
    .post-grid {
        grid-template-columns: 1fr
    }

    .about-strip,
    .story-grid,
    .education-box,
    .contact-grid,
    .booking-page-grid,
    .map-office {
        grid-template-columns: 1fr
    }

    .about-img {
        min-height: 290px
    }

    .features {
        grid-template-columns: 1fr 1fr
    }

    .expert-grid {
        grid-template-columns: 1fr 1fr
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 17px
    }

    .timeline:before {
        left: 22px;
        top: 20px;
        bottom: 20px;
        width: 1px;
        height: auto
    }

    .mile {
        padding-left: 60px
    }

    .mile-dot {
        position: absolute;
        left: 0;
        top: 0
    }

    .certs {
        grid-template-columns: repeat(2, 1fr)
    }

    .contact-top {
        grid-template-columns: repeat(2, 1fr)
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .full {
        grid-column: auto
    }

    .booking-form {
        grid-template-columns: 1fr 1fr
    }

    .message,
    .submit {
        grid-column: span 2
    }

    .course-page-grid {
        grid-template-columns: 1fr 1fr
    }

    .feature-course {
        grid-column: span 2
    }

    .blog-layout {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .floating-wa span {
        display: none
    }

    .floating-wa {
        padding: 10px;
        border-radius: 0 20px 20px 0
    }
}

@media(max-width:500px) {
    .hero {
        min-height: 690px
    }

    .hero h1 {
        font-size: 33px
    }

    .actions {
        flex-direction: column
    }

    .actions .btn {
        width: 100%
    }

    .grid4,
    .course-page-grid,
    .expert-grid,
    .certs,
    .footer-grid,
    .features,
    .contact-top {
        grid-template-columns: 1fr
    }

    .booking-form {
        grid-template-columns: 1fr
    }

    .message,
    .submit {
        grid-column: auto
    }

    .feature-course {
        grid-column: auto;
        grid-template-columns: 1fr
    }

    .feature-course .img {
        min-height: 160px
    }

    .copyright .container {
        flex-direction: column;
        gap: 5px
    }

    .page-hero {
        min-height: 300px
    }
}
/* =========================================
   HOW IT WORKS BANNER
========================================= */

.booking-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #080a22;
    line-height: 0;
    box-sizing: border-box;
}

.booking-banner a {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.booking-banner img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    object-fit: contain !important;
    object-position: center center;

    box-sizing: border-box;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 780px) {

    .booking-banner {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden !important;
    }

    .booking-banner a {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }

    .booking-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 500px) {

    .booking-banner {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        overflow: hidden !important;
    }

    .booking-banner a {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }

    .booking-banner img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center center;
    }
}


/* =========================================================
   FINAL FIXES - BOOKING FORM + BANNER + MOBILE OVERFLOW
   ========================================================= */

/* Global horizontal overflow protection */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* ---------------------------------------------------------
   BOOKING FORM - DESKTOP
   --------------------------------------------------------- */

.booking-strip {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 32px 0 38px;
    background:
        linear-gradient(90deg, rgba(12, 10, 25, .70), rgba(12, 10, 25, .48)),
        url("../images/booking.png") center center / cover no-repeat;
}

.booking-form {
    width: 100%;
    max-width: 1120px;
    margin: 26px auto 0;
    padding: 24px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px 15px;
    align-items: end;

    background: rgba(7, 9, 30, .78);
    border: 1px solid rgba(240, 196, 91, .30);
    border-radius: 16px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .32),
        inset 0 0 35px rgba(240, 196, 91, .035);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.booking-form .field {
    width: 100%;
    min-width: 0;
}

.booking-form .field label {
    display: block;
    margin: 0 0 7px;
    color: #f2e4bd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
}

.booking-form .field label span {
    color: #ff7b7b;
}

.input-wrap {
    position: relative;
    width: 100%;
}

.input-wrap > i {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b98c35;
    font-size: 13px;
    pointer-events: none;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    border: 1px solid rgba(240, 196, 91, .28);
    border-radius: 9px;

    background: rgba(255, 255, 255, .97);
    color: #202133;

    font-family: inherit;
    font-size: 11px;
    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        transform .22s ease;
}

.booking-form input,
.booking-form select {
    height: 47px;
    padding: 0 42px 0 41px;
}

.booking-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
}

.select-wrap::after {
    content: "\f107";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #9b762f;
    pointer-events: none;
}

.booking-form textarea {
    min-height: 108px;
    padding: 13px 14px 13px 41px;
    resize: vertical;
}

.textarea-wrap > i {
    top: 17px;
    transform: none;
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: #777b8a;
}

.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover {
    border-color: rgba(240, 196, 91, .62);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: #f0c45b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(240, 196, 91, .12);
}

.booking-form .message {
    grid-column: span 2;
}

.booking-form .submit {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
}

.booking-form .booking-submit {
    width: 100%;
    min-height: 47px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 11px;
    font-weight: 700;

    box-shadow: 0 9px 25px rgba(0, 0, 0, .25);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.booking-form .booking-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(0, 0, 0, .32);
}

.booking-form .booking-submit:active {
    transform: translateY(0);
}

.booking-form .booking-submit i:first-child {
    font-size: 16px;
}


/* ---------------------------------------------------------
   HOW IT WORKS / BOOKING BANNER
   NO EXTRA WHITE SPACE + NO HORIZONTAL OVERFLOW
   --------------------------------------------------------- */

.booking-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #080a22;
    line-height: 0;
    font-size: 0;
}

.booking-banner a {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0;
    font-size: 0;
}

.booking-banner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    object-fit: contain !important;
    object-position: center center;

    vertical-align: top;
}


/* ---------------------------------------------------------
   MOBILE / TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .booking-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
    }

    .booking-form .message {
        grid-column: span 2;
    }

    .booking-form .submit {
        grid-column: span 2;
    }
}


@media (max-width: 780px) {

    .container {
        width: calc(100% - 30px);
        max-width: 100%;
    }

    /* Prevent any section from creating horizontal scrolling */
    .section,
    .about-strip,
    .booking-strip,
    .booking-banner,
    .booking-banner a {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Banner stays completely inside mobile viewport */
    .booking-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .booking-form {
        width: 100%;
        grid-template-columns: 1fr 1fr;
        padding: 18px;
        gap: 15px 12px;
        margin-top: 22px;
        border-radius: 14px;
    }

    .booking-form .message,
    .booking-form .submit {
        grid-column: span 2;
    }

    .booking-form input,
    .booking-form select {
        height: 47px;
    }

    .booking-form textarea {
        min-height: 105px;
    }
}


@media (max-width: 500px) {

    .booking-strip {
        padding: 35px 0;
    }

    .booking-form {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 14px;
        border-radius: 13px;
    }

    .booking-form .field,
    .booking-form .message,
    .booking-form .submit {
        grid-column: auto;
        width: 100%;
    }

    .booking-form input,
    .booking-form select {
        width: 100%;
        height: 47px;
    }

    .booking-form textarea {
        width: 100%;
        min-height: 105px;
    }

    .booking-form .booking-submit {
        width: 100%;
        min-height: 49px;
    }

    .booking-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .booking-banner a {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .booking-banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ---------------------------------------------------------
   EXTRA SAFETY FOR ALL FORM ELEMENTS
   --------------------------------------------------------- */

.booking-form *,
.booking-form *::before,
.booking-form *::after {
    box-sizing: border-box;
}

.booking-form input[type="date"] {
    color-scheme: light;
}

.booking-form button {
    font-family: inherit;
}

@media (max-width: 360px) {

    .booking-form {
        padding: 13px;
    }

    .booking-form input,
    .booking-form select {
        font-size: 10px;
        padding-left: 38px;
        padding-right: 35px;
    }

    .booking-form textarea {
        font-size: 10px;
        padding-left: 38px;
    }

    .booking-form .field label {
        font-size: 9px;
    }
}