* {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}



body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #000000;
    border-radius: 10px;
}

body::-webkit-scrollbar {
    width: 10px;
    background-color: #707070;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
    background-image: -webkit-linear-gradient(90deg,
            transparent,
            #35E0C4 60%,
            transparent,
            transparent)
}

input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#scrollableDiv {
    scroll-behavior: smooth;
}

@font-face {
    font-family: Roboto-Bold;
    src: url(../assets/fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
    font-family: Inter-Regular;
    src: url(../assets/fonts/inter/Inter-Regular.ttf);
}

@font-face {
    font-family: Inter-ExtraLight;
    src: url(../assets/fonts/inter/Inter-ExtraLight.ttf);
}

@font-face {
    font-family: Inter-Bold;
    src: url(../assets/fonts/inter/Inter-Bold.ttf);
}

@font-face {
    font-family: Inter-ExtraBold;
    src: url(../assets/fonts/inter/Inter-ExtraBold.ttf);
}

@font-face {
    font-family: Inter-Light;
    src: url(../assets/fonts/inter/Inter-Light.ttf);
}


::-moz-selection {
    color: rgb(255, 255, 255);
    background: #000000;
}

::selection {
    color: rgb(255, 255, 255);
    background: #000000;
}

.fr-up {
    overflow: hidden;
    position: relative;
}

.fr-up2 {
    overflow: hidden;
    padding-left: 25px !important;
    padding: 15px;
    padding-right: 25px;
    margin-left: -25px;
}

.msk {
    position: relative;
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    visibility: hidden;
}

h1 {
    /*
    font-weight: 800;
    font-size: 56px;
    line-height: 55px; */
    /* font-family: 'Syne', sans-serif; */
    font-family: 'Nunito', sans-serif;
    font-size: clamp(42px, 7vw, 62px);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -1px;
}



@-webkit-keyframes shine {
    0% {
        background-position: -100%;
    }

    100% {
        background-position: 100%;
    }
}

@keyframes shine {
    0% {
        background-position: -100%;
    }

    100% {
        background-position: 100%;
    }
}

/* Not needed for demo */

h2 {
    /* font-family: Roboto-Bold; */
    font-family: 'Nunito', sans-serif !important;
    font-size: 40px;
    line-height: 45px;
    font-weight: 700;
    position: relative;
    /* text-transform: uppercase; */
}

h2 span {
    font-family: 'Nunito', sans-serif;
}

h3 {
    font-family: Inter-Regular;
    font-size: 28px;
    font-weight: 600;
}

h4,
p,
a {
    text-decoration: none;
    font-family: Inter-Regular;
}

li {
    list-style: none;
}

p {
    font-size: 15px;
    font-weight: 100;
    line-height: 23px;
}

/* header----------------------------- */

/* .pages ul li.active a {
    color: #08bfac;
} */

.pages ul li.active {
    position: relative;
}

.pages ul li.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 3px;
    background: #08bfac;
    border-radius: 10px;
}

.header {
    padding: 25px 0;
    position: relative;
    box-shadow: 0px 0px 5px #00000038;
    /* overflow: hidden; */
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
}

.header .container1 {
    padding: 0 100px;
    width: 100%;
}

.hdr-logo img {
    height: 65px;
    object-fit: contain;
}

.hdr-flx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hdr-bg-lft {
    width: 450px;
    height: 100%;
    background-image: linear-gradient(to right, #1D394E, #08BFAC);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.hdr-bg-lft2 {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 369px;
    height: 108px;
    background-color: #000000ad;
    z-index: -2;
    filter: blur(9px);
}

.hdr-bg-lft3 {
    content: "";
    position: absolute;
    left: 18%;
    top: -42px;
    width: 70px;
    height: 150px;
    background-color: #000000c7;
    z-index: -2;
    filter: blur(9px);
    transform: rotate(39deg);
}

.hdr-bg-lft4 {
    width: 451px;
    height: 101%;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.cnt-btn {
    padding: 10px 20px;
    background-color: #1D394E;
    border-radius: 5px;
}

.cnt-btn p {
    font-weight: 600;
    color: #fff;
    font-size: 12px;
}

.cnt-btn i {
    color: #08BFAC;
    font-size: 19px;
}

.cnt-btn {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pages {
    margin-right: 30px;
}

.pages ul {
    display: flex;
    gap: 32px;
}

.pages ul li a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pages ul li a i {
    font-size: 13px;
    color: #00a190;
}

.hdr-rgt {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    top: 22px;
}

.pages p {
    font-size: 16px;
    color: #000000;
}

.hdr-tp {
    height: 40px;
    background-color: #1D394E;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
    display: flex;
    align-items: center;
}

.hdr-contact-flx {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.hdr-contact-flx p,
.hdr-contact-flx i {
    color: #fff;
    font-size: 13px;
}

.hdr-contact {
    display: flex;
    gap: 30px;
    align-items: center;
    width: fit-content;
    margin-left: auto;
}

.hero-slider {
    margin-top: 6px;
}

.hero-slider .item img {
    height: 89vh;
    width: 100%;
    object-fit: cover;
}



.dropdown-arrow {
    font-size: 11px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.has-dropdown {
    position: relative;
}

/* ── Rotate arrow when open ── */
.has-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* ── Dropdown menu ── */
.dropdown-menu-custom {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    position: absolute;
    /* left: -50%; */
    /* top: 0; */
    min-width: max-content;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #e8edf2;
    opacity: 0;
    visibility: hidden;
    /* transform: translateX(-10px); */
    transition: all 0.25s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
}

/* ── Show dropdown ── */
.dropdown-menu-custom {
    left: -50%;
    top: 170%;
    transform: translateY(-10px);
}

.has-dropdown.open .dropdown-menu-custom {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* ── Dropdown items ── */
.dropdown-menu-custom li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.dropdown-menu-custom li a i {
    font-size: 13px;
    color: #17b9a0;
    width: 16px;
}

.dropdown-menu-custom li a:hover {
    background: #f0fdf9;
    color: #0F6E56;
}

/* ── Active item ── */
.dropdown-menu-custom li a.active {
    background: #E1F5EE;
    color: #0F6E56;
    font-weight: 700;
}



/* header close----------------------- */

/* index------------------------------ */
.hero {
    position: relative;
}

.hro-trngls {
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hro-trngls .trngl1 {
    width: 65%;
    height: 100%;
    /* background-image: linear-gradient(to right, #1d394e59, #08bfad3b); */
    background-image: linear-gradient(153deg, #01274494, #08bfad3b);
    clip-path: polygon(0% 0%, 30% 0%, 100% 73%, 37% 100%, 0% 100%);
}

.hro-trngls .trngl2 {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-image: linear-gradient(to right, #1d394e59, #08bfad3b); */
    background-image: linear-gradient(153deg, #001b3094, #08bfad3b);
    clip-path: polygon(0 0, 25% 0, 100% 85%, 37% 100%, 0% 100%);
}

.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
}

.hero .hero-cont {
    position: absolute;
    bottom: 150px;
    max-width: 700px;
    color: #fff;
    z-index: 2;
}

.hero-cont-tp-cont h3 {
    font-size: 15px;
    font-weight: 100;
}

.hero-cont-tp-conth3-dv {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 5px 20px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    width: fit-content;
    margin-bottom: 20px;
}

.hero-cont-tp-conth3-dv img {
    width: 20px;
    object-fit: contain !important;
    position: relative !important;
    bottom: 0px !important;
}

.hero-cont-tp-cont {
    margin-bottom: 60px;
    position: relative;

    /* margin-left: 20px; */
}

.hero-slider .item img {
    height: 89vh;
    width: 100%;
    object-fit: cover;
}

/* .hero-cont-tp-cont-btm-ln {
    position: absolute;
    bottom: -35px;
    left: -20px;
    width: 50%;
    height: 3px;
    background-color: #fff;
}

.hero-cont-tp-cont::after {
    content: "";
    position: absolute;
    width: 135px;
    height: 3px;
    background-color: #fff;
    top: -23%;
    left: -20px;
}

.hero-cont-tp-cont::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 144%;
    background-color: #fff;
    top: -22%;
    left: -20px;
} */
.hero-cont-tp-cont img {
    height: 28px;
    object-fit: contain;
    position: absolute;
    bottom: -45px;
}

.hero-cont p {
    max-width: 500px;
}


/* -----------buttons style---------------- */



.btn-shimmer {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0F6E56, #1D9E75, #17b9a0);
    color: #fff;
    font-size: 15px;
    /* font-weight: 700; */
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(23, 185, 160, 0.35);
    letter-spacing: 0.3px;
}

/* Shimmer light sweep */
.btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 100%);
    animation: shimmer 2.4s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.btn-shimmer:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(23, 185, 160, 0.5);
}

.btn-shimmer:active {
    transform: scale(0.97);
}


/* ════════════════════════════════
   BUTTON 2 — PULSE RING
════════════════════════════════ */
.btn-pulse-wrap {
    position: relative;
    display: inline-flex;
}

/* Animated pulse rings */
.btn-pulse-wrap::before,
.btn-pulse-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    background: linear-gradient(135deg, #17b9a0, #0F6E56);
    opacity: 0;
    animation: pulse-ring 2s ease-out infinite;
    z-index: 0;
}

.btn-pulse-wrap::after {
    animation-delay: 1s;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

.btn-pulse {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0F6E56, #17b9a0);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(23, 185, 160, 0.35);
}

.btn-pulse:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 28px rgba(23, 185, 160, 0.45);
}

.btn-pulse:active {
    transform: scale(0.97);
}


/* ════════════════════════════════
   BUTTON 3 — ARROW SLIDE
════════════════════════════════ */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #085041, #1D9E75);
    color: #fff;
    font-size: 15px;
    /* font-weight: 700; */
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(23, 185, 160, 0.3);
}

/* Arrow hidden by default */
.btn-arrow .arr {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    transition: max-width 0.35s ease, opacity 0.3s ease, margin-left 0.3s ease;
    font-size: 17px;
}

/* Arrow slides in on hover */
.btn-arrow:hover .arr {
    max-width: 30px;
    opacity: 1;
    margin-left: 10px;
}

.btn-arrow:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(23, 185, 160, 0.45);
}

.btn-arrow:active {
    transform: scale(0.97);
}


/* ════════════════════════════════
   BUTTON 4 — OUTLINE FILL
════════════════════════════════ */
.btn-fill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #17b9a0;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 40px;
    border-radius: 50px;
    border: 2.5px solid #17b9a0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.35s ease, box-shadow 0.2s ease;
}

/* Fill slides in from left */
.btn-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0F6E56, #17b9a0);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
    z-index: 0;
    border-radius: 50px;
}

.btn-fill:hover::before {
    transform: scaleX(1);
}

.btn-fill:hover {
    color: #fff;
    box-shadow: 0 10px 28px rgba(23, 185, 160, 0.35);
    border-color: #17b9a0;
}

/* Text stays above the fill */
.btn-fill span {
    position: relative;
    z-index: 1;
}

.btn-fill:active {
    transform: scale(0.97);
}


/* --------buttons style close ------------ */





/* .hro-btn {
    display: flex;
    gap: 20px;
    align-items: center;
} */

.hro-btn {
    padding: 10px 30px;
    border: 1px solid #fff;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;

}

.hro-btn.btn-arrow {
    background: transparent !important;
}

.hro-btn i {
    /* transform: rotate(-45deg); */
    font-size: 20px;
}

.hero-btns {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 25px;
}

.hero-btns p {
    font-size: 14px;
}

.btn1 {
    background-image: linear-gradient(to right, #08BFAC, #1D394E);
}

.hero-scl {
    width: 55px;
    height: 70px;
    /* border-radius: 50%; */
    /* background: rgba(26, 171, 155, 0.15); */
    display: flex;
    justify-content: center;
    align-items: center;
}
.mb-scl{
    display: none;
}

.hero-scl i {
    font-size: 20px;
    color: #fff;
}

.hero-scls {
    display: flex;
    flex-direction: column;
    /* gap: 25px; */
    background: rgba(26, 171, 154, 0.37);
    border-radius: 0 15px 15px 0;
}
.pc-scl{
position: absolute;
    left: 0px;
    bottom: 32%;
    z-index: 2;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.ind1 {
    position: relative;
}

.ind-tp-trngl {
    width: 75%;
    height: 80px;
    background-image: linear-gradient(to right, #1D394E, #08BFAC);
    position: absolute;
    top: 0px;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
}

.ind1-cont {
    width: 100%;
    height: 100%;
    padding: 120px 0;
    position: relative;
    /* background-image: url(../assets/imgs/5.jpg); */
    background: rgb(248, 250, 252);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    /* margin-top: 94px; */
}

.ind1-bg-trngl1 {
    width: 170px;
    object-fit: contain;
    position: absolute;
    top: 60px;
    left: 10%;
}

.ind1-bg-trngl2 {
    width: 87px;
    object-fit: contain;
    position: absolute;
    top: -8px;
    right: 6%;
    z-index: -1;
}

.ttl-tab-ln {
    height: 4px;
    background-color: #000000;
    margin-bottom: 3px;
    border-radius: 5px;
}

.ttl-tab-ln.ln3 {
    width: 15px;
}

.ttl-tab-ln.ln2 {
    width: 25px;
}

.ttl-tab-ln.ln1 {
    width: 35px;
}

.ttl-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.ttl-tab h3 {
    font-size: 16px;
    font-weight: 100;
    color: #3cb1a2;

}


/* ══ WRAPPER ══ */
.btn-dropdown-wrap {
    position: relative;
    display: inline-flex;
}

/* ══ DROPDOWN BOX ══ */
.hero-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    background: #141f1c;
    border: 1px solid rgba(30, 207, 176, 0.2);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s ease;
}

/* Show state */
.hero-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ══ DROPDOWN ITEMS ══ */
.hero-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #e8f0ee;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.hero-dropdown a:hover {
    background: rgba(30, 207, 176, 0.1);
    color: #1ecfb0;
}

.hero-dropdown a i {
    font-size: 14px;
    color: #1ecfb0;
    width: 18px;
    flex-shrink: 0;
}

/* Divider between items */
.hero-dropdown a:not(:last-child) {
    border-bottom: 1px solid rgba(30, 207, 176, 0.08);
}

.ind1-cont-lft {
    position: relative;
    padding-right: 50px;
}

.ind1-cont-lft-brdr-ln {
    width: 2px;
    height: 100%;
    background: linear-gradient(rgb(26, 171, 155), transparent);
    position: absolute;
    left: -3%;
    top: 0;
}

.ind1-cont-lft h2 {
    margin-bottom: 10px;
}

.ind1-cont-lft h2 span {
    color: rgb(26, 171, 155);
    margin-left: 100px;
}

.btm-dt-ln-fl {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

.btm-dt-ln {
    height: 4px;
    border-radius: 5px;
}

.btm-dt-ln.ln1 {
    width: 50px;
    background: rgb(26, 171, 155);
}

.btm-dt-ln.ln2 {
    width: 20px;
    background: rgb(26, 171, 155);
    opacity: 0.4;
}

.btm-dt-ln.ln3 {
    width: 15px;
    background: rgb(26, 171, 155);
    opacity: 0.2;
}

.skill-box-fl {
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 580px;
}

.skill-box {
    margin-top: 20px;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.skill-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 100;
}

.skill-header p {
    font-size: 12px;
    font-weight: 100;
    padding: 0px 10px;
    background: rgb(26, 171, 155);
    color: #fff;
    border-radius: 5px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    width: 0;
    height: 100%;
    background: rgb(26, 171, 155);
    border-radius: 20px;
    transition: width 1.5s ease;
}

.ind1-cont-rgt-mn-img {
    width: 70%;
    height: 550px;
    margin-left: auto;
    position: relative;
    margin-top: -150px;
    z-index: 1;
}

.ind1-cont-rgt-mn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind1-cont-rgt-sb-img {
    width: 300px;
    height: 370px;
    position: absolute;
    bottom: -70px;
    left: 60px;
    z-index: 3;
}

.ind1-cont-rgt-sb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind1-cont-rgt {
    position: relative;
    padding-left: 50px;
}

.ind1-cont-rgt-dt-img {
    width: 216px;
    object-fit: contain;
    position: absolute;
    top: 142px;
    left: 0px;
    z-index: 0;
}

.ind1-cont-rgt-strk-bx {
    width: 52%;
    height: 360px;
    position: absolute;
    bottom: -35px;
    right: 20%;
    border: 8px solid #189483;
    z-index: 2;
}

.ind1-cont-lft-btn p {
    padding: 10px 30px;
    background-image: linear-gradient(to right, #08BFAC, #1D394E);
    color: #fff;
    border-radius: 30px;
    font-size: 14px;
    width: fit-content;
}


/* --------------------------- */

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.title-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.icon-box {
    width: 28px;
    height: 28px;
    background: rgba(26, 171, 155, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1aab9b;
    font-size: 16px;
}

.title-badge span {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #1aab9b;
    font-weight: 600;
}

.section-title h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0a1628;
}

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

.teacher-card {
    text-align: center;
}

.teacher-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 15px;
}

.teacher-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: .5s;
}

.teacher-card:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    inset: 0;
    background: #1aab9b;
    opacity: 0;
    transition: .3s;
}

.teacher-card:hover .overlay {
    opacity: .2;
}

.teacher-card h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 5px;
}

.teacher-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #1aab9b;
}

.view-all-wrap {
    text-align: center;
    margin-top: 40px;
}

.view-all-btn {
    display: inline-block;
    padding: 14px 35px;
    background: #1aab9b;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    transition: .3s;
}

.view-all-btn:hover {
    opacity: .9;
}

@media(max-width:991px) {

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

}

@media(max-width:576px) {

    .teachers-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 24px;
    }

}






.about-gallery {
    position: relative;
    height: 550px;
    width: 100%;
}

/* Common Image Card */
.img-card {
    position: absolute;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

/* Top Left */
.img-1 {
    width: 54%;
    height: 310px;
    left: 20px;
    top: 0;
}

/* Top Right */
.img-2 {
    width: 245px;
    height: 360px;
    right: 16px;
    top: 40px;
}

/* Bottom Left */
.img-3 {
    width: 260px;
    height: 200px;
    left: 20px;
    bottom: 0px;
}

/* Bottom Center */
.img-4 {
    width: 190px;
    height: 165px;
    left: 300px;
    bottom: 38px;
    z-index: 2;
}

/* Experience Box */
.experience-box {
    position: absolute;
    width: 95px;
    height: 95px;
    background: linear-gradient(135deg, rgb(26, 171, 155), rgb(13, 138, 126));
    color: #fff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 240px;
    left: 270px;
    z-index: 3;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.experience-box h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.experience-box span {
    font-size: 11px;
}

.experience-box p {
    line-height: 14px;
}

/* Dotted Decoration */
.dots {
    position: absolute;
    top: 0;
    right: 70px;
    width: 140px;
    height: 60px;
    background-image: radial-gradient(#87d7d0 1.2px, transparent 1.2px);
    background-size: 16px 16px;
    z-index: 0;
}

/* Circle Decoration */
.circle-shape {
    position: absolute;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: rgba(82, 192, 183, .18);
    right: -10px;
    bottom: -10px;
}

.circle-shape::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(82, 192, 183, .25);
    top: 63%;
    left: 60%;
    transform: translate(-50%, -50%);
}





/* ---------------------------------- */

.offer-section {
    background: #0a1628;
    padding: 150px 0 100px 0;
    position: relative;
}

.offer-section:after {
    content: "";
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 7vw;
    background-image: url(../assets/icons/13.png);
    background-size: cover;
    object-position: bottom;
    background-repeat: no-repeat;
}

/* .offer-img {
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
} */

.offer-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.offer-label span {
    color: #1aab9b;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
}

.icon-box {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #1aab9b, #0d8a7e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-section h2 {
    color: #fff;
    font-weight: 800;
    font-size: 36px;
    line-height: 45px;
    margin-bottom: 20px;
}

.offer-section h2 span {
    color: #1aab9b;
}

.offer-section p {
    color: #94a3b8;
    /* line-height: 1.8; */
}

.offer-btn {
    /* display: inline-block; */
    margin-top: 20px;
    padding: 14px 30px;
    border-radius: 50px;
    background: linear-gradient(135deg, #1aab9b, #068175);
    color: #fff;
    text-decoration: none;
    box-shadow: rgba(26, 171, 155, 0.3) 0px 4px 20px;
}

.lft-ln {
    width: 80%;
    height: 1px;
    background-color: #1aab9b;
    margin-top: 5px;
}

.wth-ln {
    display: flex;
    align-items: center;
    opacity: 0;
    gap: 10px;
    transform: translateY(15px);
    transition: all .45s ease;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.offer-card {
    position: relative;
    min-height: 200px;
    border-radius: 20px;
    overflow: hidden;
}

.offer-card img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s;
}

.offer-card:hover img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(10, 22, 40, .95),
            rgba(10, 22, 40, .3));
}

.tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #1aab9b;
    color: #fff;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
}

.content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.content h3 {
    color: #fff;
    margin-bottom: 3px;
    font-size: 21px;
}

.content p {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.content a {
    color: #1aab9b;
    text-decoration: none;
    font-weight: 700;
}

.offer-stats {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .08);
}

.stat {
    text-align: center;
    padding: 30px;
    background: rgba(255, 255, 255, .03);
}

.stat h3 {
    color: #1aab9b;
    font-size: 30px;
    font-weight: 800;
}

.stat span {
    color: #94a3b8;
    font-size: 13px;
}

.offer-card {
    position: relative;
    min-height: 250px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.offer-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.offer-card:hover img {
    transform: scale(1.1);
}

/* Dark overlay */
.offer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(10, 22, 40, .95) 0%,
            rgba(10, 22, 40, .45) 55%,
            transparent 100%);
    z-index: 1;
}

/* Green hover overlay */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(26, 171, 155, .45) 0%,
            transparent 65%);
    opacity: 0;
    transition: .4s ease;
    z-index: 2;
}

.offer-card:hover .overlay {
    opacity: 1;
}

.tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #1aab9b;
    color: #fff;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    z-index: 3;
}

.content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 3;
}

.content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-weight: 800;
}

/* Hidden by default */
.content p {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.7;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .45s ease;
}

/* Learn more hidden */
.content a {
    margin-top: 10px;
    color: #1aab9b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(15px);
    transition: all .45s ease;
    text-wrap: nowrap;
    text-transform: uppercase;
}

/* Show content on hover */
.offer-card:hover .content p {
    max-height: 100px;
    opacity: 1;
}

.offer-card:hover .content a {
    opacity: 1;
    transform: translateY(0);
}

.offer-card:hover .content .wth-ln {
    opacity: 1;
    transform: translateY(0);
}







/* ------------------------------------------- */

.ind2 {
    padding: 30px 0 80px 0;
    background-image: url(../assets/icons/10.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.ind2-cont-rgt p {
    text-align: end;
    max-width: 500px;
    margin-left: auto;
}

.ind2-btm-cont-lft {
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;

}

.ind2-btm-cont-lft-img {
    width: 100%;
    height: 300px;

}

.ind2-btm-cont-lft-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind2-btm-cont {
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 60px;
}

.ind2-btm-cont-lft-txt {
    background-color: #fff;
    padding: 25px 20px;

}

.ind2-btm-cont-lft-txt h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.ind2-btm-cont-lft-txt p {
    font-size: 15px;
}

.ind2-btm-cont-rgt-flx-txt h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.ind2-btm-cont-rgt-flx-txt p {
    font-size: 15px;
}

.ind2-btm-cont-rgt-flx-txt {
    display: flex;
    align-items: center;
    padding: 25px 20px;
    background-color: #fff;
}

.ind2-btm-cont-rgt-flx-img {
    width: 300px;
    height: 100%;
    flex-shrink: 0;
}

.ind2-btm-cont-rgt-flx-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind2-btm-cont-rgt {
    height: 500px;
    width: 100%;
}

.ind2-btm-cont-rgt-flx {
    height: 240px;
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.ind3-hdng {
    text-align: center;
}

.ind3-cont-lft-rnd {
    width: 190px;
    object-fit: contain;
    position: absolute;
    top: 180px;
    right: 33px;
    z-index: -1;
}

.ind3-cont-lft-str {
    width: 65px;
    object-fit: contain;
    position: absolute;
    top: -57px;
    left: 50px;
    z-index: -1;
}

.ind3 {
    padding: 110px 0;
}

.ind3 h2 span {
    color: #1aab9b;
}




/* RIGHT */

.right-content {
    flex: 1;
}

.subtitle {
    color: #333;
    font-weight: 600;
    position: relative;
    padding-left: 30px;
}

.subtitle::before {
    content: "";
    width: 18px;
    height: 2px;
    background: #222;
    position: absolute;
    left: 0;
    top: 10px;
    box-shadow: 0 5px 0 #222;
}


.desc {
    max-width: 900px;
    margin-bottom: 30px;
    margin: 0 auto;
    margin-top: 8px;
}

.ind3-hdng .badge {
    margin: 0 auto;
    margin-bottom: 10px;
}

.ind3-hdng {
    margin-bottom: 90px;
}

/* .features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.feature {
    position: relative;
}

.icon {
    width: 18px;
    height: 18px;
    background: #d8c7c7;
    border-radius: 3px;
    margin-bottom: 15px;
}

.feature h4 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #111;
} */







/* ── SECTION ── */
.features-section {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── HEADER ── */
.fs-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0F6E56;
}

.dot {
    width: 7px;
    height: 7px;
    background: #1D9E75;
    border-radius: 50%;
    display: inline-block;
}

.fs-heading {
    font-size: 32px;
    font-weight: 800;
    color: #1a2f4e;
    line-height: 1.2;
}

.fs-sub {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    max-width: 560px;
}

/* ── GRID ── */
.fs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ── CARD ── */
.fs-card {
    background: #fff;
    border: 1.5px solid #e8edf2;
    border-radius: 18px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* Teal top bar that slides in on hover */
.fs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0F6E56, #1D9E75, #17b9a0);
    border-radius: 18px 18px 0 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.fs-card:hover::before {
    transform: scaleX(1);
}

.fs-card:hover {
    border-color: #b2e8da;
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(23, 185, 160, 0.12);
}

/* Icon box */
.icon-wrap {
    width: 46px;
    height: 46px;
    background: #E1F5EE;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s;
}

.icon-wrap svg {
    width: 22px;
    height: 22px;
    color: #0F6E56;
    stroke: #0F6E56;
}

.fs-card:hover .icon-wrap {
    background: #17b9a0;
}

.fs-card:hover .icon-wrap svg {
    stroke: #fff;
}

/* Title */
.card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a2f4e;
    line-height: 1.3;
}

/* Description */
.card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    flex: 1;
}

/* Learn more link */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #1D9E75;
    text-decoration: none;
    margin-top: 4px;
    width: fit-content;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 1px;
    transition: gap 0.2s, border-color 0.2s;
}

.card-link:hover {
    gap: 9px;
    border-bottom-color: #1D9E75;
}

/* ── BUTTON ── */
.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0F6E56;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 36px;
    border-radius: 50px;
    text-decoration: none;
    align-self: flex-start;
    letter-spacing: 0.3px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(15, 110, 86, 0.28);
}

.btn-contact:hover {
    background: #085041;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15, 110, 86, 0.38);
}

.btn-contact:active {
    transform: scale(0.97);
}

.btn-contact svg {
    flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .fs-grid {
        grid-template-columns: 1fr;
    }

    .fs-heading {
        font-size: 24px;
    }
}





.ind3-btn {
    margin-top: 40px;
    padding: 10px 30px;
    background: linear-gradient(90deg, #2db8a4, #313858);
    color: #fff;
    border-radius: 30px;
    width: fit-content;
}

.ind3-btn svg {
    transform: rotate(-50deg);
    height: 20px;
    object-fit: contain;
    width: 20px;
    position: relative;
    top: -3px;
}

.ind3-cont-lft {
    height: 615px;
    position: relative;
    width: 100%;
}

.ind3-cont-lft-mn-img {
    width: 74%;
    height: 520px;
    object-fit: cover;
    object-position: top;
    border-radius: 50px 200px 0 20px;
}

.ind3-cont-lft-sb-img {
    width: 235px;
    height: 317px;
    position: absolute;
    right: 9px;
    bottom: 0px;
}

.ind3-cont-lft-sb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 100px;
    border: 8px solid #fff;
}

.ind4 {
    padding: 100px 0;
    background-image: linear-gradient(153deg, #000000, #234965);
    margin-bottom: 30px;
}

.ind4-cont-lft h2 {
    font-size: 50px;
    color: #fff;
    line-height: 50px;
    margin-bottom: 30px;
}

.ind4-cont-lft h2 span {
    font-size: 27px;
}

.ind4-cont-lft h3 {
    font-size: 19px;
    color: #fff;
    margin: 10px 0;
}

.ind4-cont-lft p {
    font-size: 15px;
    color: #fff;
    margin-bottom: 20px;
}

.ind4-cont-lft-btn {
    padding: 10px 30px;
    background: linear-gradient(90deg, #2db8a4, #313858);
    color: #000;
    border-radius: 30px;
    width: fit-content;
    margin: 20px 0;
}

.prfl {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #fff;
}

.prfl-img {
    width: 50px;
    height: 50px;
}

.prfl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rtng-str {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

.rtng-str i {
    font-size: 15px;
    color: #ffc400;
}

.test-cont p {
    font-size: 16px;
    color: #fff;
    font-style: italic;
    font-weight: 100;
}

.test-cont {
    margin-top: 20px;
}

.testimonial .slick-arrow {
    position: absolute;
    top: 112%;
    padding: 10px 15px;
    background: linear-gradient(90deg, #2db8a4, #313858);
    color: #fff;
    border-radius: 10px;
    width: fit-content;
    z-index: 1;

}

.testimonial .slick-arrow.nxt {
    left: 55px;
}

.ind5 {
    padding: 100px 0;
}

.ind5-hdng {
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 50px;
}

.ind5-hdng .badge {
    margin: 0 auto;
    margin-bottom: 10px;
    width: fit-content;
}

.ttl-tab .ttl-tab-ln-fl {
    height: 32px;
    width: 30px;
    background: linear-gradient(135deg, rgb(26, 171, 155), rgb(13, 138, 126));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmbr-img {
    width: 100%;
    height: 350px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.mmbr-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to top, #000000, #00000000);
}

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

}

.mmbr-nm {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    z-index: 1;
}

.mmbr-nm h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.mmbr-nm p {
    font-size: 13px;
}

.mmbr-vw-btn {
    width: fit-content;
    margin: 0 auto;
    margin-top: 50px;

}

.mmbr-vw-btn p {
    padding: 10px 30px;
    background: linear-gradient(90deg, #2db8a4, #313858);
    color: #ffffff;
    border-radius: 30px;
}

.ind6 {
    padding: 120px 0;
    width: 100%;
    background-image: url(../assets/imgs/17.avif);
    background-size: cover;
    background-position: center;
    position: relative;
    /* background-attachment: fixed; */
    color: #ffffff;
    text-align: center;
    position: relative;


}

.ind6::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #03172fc4;
}

.ind6 h2 {
    font-size: 40px;
    position: relative;
    z-index: 1;
}

.ind6 p {
    font-size: 14px;
    padding: 10px 30px;
    background: linear-gradient(90deg, #2db8a4, #313858);
    color: #ffffff;
    border-radius: 30px;
    width: fit-content;
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

/* index close ----------------------- */

/* about ----------------------------- */


.about-section {
    overflow: hidden;
    padding: 130px 0;
}

.page-hdr {
    padding: 10px 0;
    background-image: linear-gradient(to right, #1D2155, #08BFAC);
    position: sticky;
    top: 122px;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}

.brd-crmb {
    display: flex;
    align-items: center;
    gap: 10px;

}

.brd-crmb p {
    color: #ffffff;
}

.about-left {
    display: flex;
    gap: 15px;
    position: relative;
}

.about-left .about-left-str {
    width: 100px;
    object-fit: contain;
    position: absolute;
    top: -55px;
    left: 122px;
}

.about-left::after {
    content: "";
    width: 139%;
    height: 150%;
    background-image: url(../assets/icons/16.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -51px;
    right: -70px;
    z-index: -1;
}

.dig-mn {
    position: relative;
    height: 83vh;
    display: flex;
    align-items: end;
    background-image: url(../assets/imgs/21.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 100%;

}

.ofc-mn {
    position: relative;
    height: 83vh;
    display: flex;
    align-items: end;
    background-image: url(../assets/imgs/21.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 100%;
}

.dig-mn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, #000, #0000001f);
    width: 100%;
    height: 100%;

}

.ofc-mn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, #000, #0000001f);
    width: 100%;
    height: 100%;

}

.stripes {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.stripes span {
    width: 6px;
    height: 70px;
    border-radius: 20px;
    background: #f4a89a;
}

.stripes span:nth-child(even) {
    opacity: .3;
}

.image-mosaic {
    position: relative;
    flex: 1;
    height: 420px;
}

.img-box {
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.img-box:hover img {
    transform: scale(1.08);
}

.img1 {
    top: 40px;
    left: 0;
    width: 34%;
    height: 50%;
}

.img2 {
    top: -24px;
    right: 25px;
    width: 57%;
    height: 59%;
}

.img3 {
    bottom: -90px;
    left: -15px;
    width: 59%;
    height: 58%;
}

.img4 {
    bottom: -51px;
    right: 0;
    width: 39%;
    height: 54%;
}

.about-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.icon-box {
    width: 28px;
    height: 28px;
    background: rgba(26, 171, 155, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1aab9b;
}

.about-label span {
    font-size: 12px;
    letter-spacing: 3px;
    color: #6b7280;
    font-weight: 600;
}

.about-title {
    font-weight: 800;
    color: #0a1628;
    margin-bottom: 5px;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.title-row h2 {
    margin: 0;
    font-weight: 800;
    color: #0a1628;
}

.title-line {
    width: 35px;
    height: 4px;
    background: #1aab9b;
    border-radius: 20px;
}

.about-section p {
    line-height: 1.8;
}

.progress-item {
    margin-bottom: 20px;
}

.progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
}

.custom-progress {
    height: 4px;
    background: #e5e7eb;
    border-radius: 20px;
}

.fill {
    height: 100%;
    background: #1aab9b;
    border-radius: 20px;
}

.about-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 14px 30px;
    background: #1aab9b;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.about-btn:hover {
    opacity: .9;
    color: #fff;
}

@media(max-width:991px) {

    .image-mosaic {
        height: 350px;
    }

}


.mission-section {
    background: #edf0f2;
    padding: 40px 0;
}

.mission-wrapper {
    position: relative;
    max-width: 1200px;
    height: 320px;
}

/* Vertical title */

.vertical-text {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.vertical-text h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #000;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
}

/* Vision */

.vision {
    position: absolute;
    left: 170px;
    top: 20px;
    width: 390px;
}

.vision h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.vision p {
    font-size: 14px;
    line-height: 2;
    color: #333;
    margin-bottom: 8px;
}

/* Mission */

.mission {
    position: absolute;
    left: 320px;
    top: 125px;
    width: 420px;
    text-align: center;
}

.mission h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.mission p {
    font-size: 14px;
    line-height: 2;
    color: #333;
}

/* Image */

.mission-image {
    position: absolute;
    right: 40px;
    top: 3px;
    width: 195px;
    height: 238px;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
}

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

/* Cyan asterisk */

.star-icon {
    position: absolute;
    top: -12px;
    right: 20px;
    color: #8ddfe0;
    font-size: 58px;
    font-weight: 300;
    line-height: 1;
}


.msn-vsn {
    background-color: #F6FBFF;
    padding: 80px 0;

}

.msn-lft {
    display: flex;
    align-items: center;
    padding-right: 50px;
    height: 100%;
}

.msn-lft h2 {
    font-size: 30px;
    transform: rotate(-90deg);
    text-wrap: nowrap;
    margin-top: 140px;
    width: 100px;
    position: relative;
    left: -50px;
}

.msn-lft h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 2px;
    background-color: #000;
}

.msn {
    text-align: end;
    margin-top: 50px;
}

.msn-lft h3 {
    font-size: 23px;
    margin-bottom: 10px;
}

.msn-rgt {
    position: relative;
}

.msn-rgt img {
    width: 80%;
    object-fit: contain;
    z-index: 1;
    position: relative;
}

.msn-str {
    position: absolute !important;
    top: -34px;
    right: 67px;
    width: 64px !important;
    object-fit: contain;
    z-index: 0 !important;
}







/* ------------------------------------------ */







/* about close------------------------ */

/* course ----------------------------- */

.crs1 {
    padding: 80px 0;
}

.crs1-tp h2 {
    max-width: 700px;
    font-size: 40px;
    line-height: 45px;
}

.crs1-tp-scnd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.crs1-tp-scnd p {
    max-width: 500px;
}

.crs1-tp-scnd-flx {
    display: flex;
    align-items: start;
    gap: 10px;
    justify-content: end;
}

.crs1-tp-scnd-flx img {
    width: 26px;
    object-fit: contain;
    margin-top: 6px;
}

.crs1-tp-mn {
    margin-top: 20px;
}

.brshr-dnld {
    padding: 10px 30px;
    border: 1px solid #000;
    border-radius: 50px;
    display: inline-block;
    margin-top: 30px;
}

.crs1-tp-mn-lft {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

}

/* .crs1-tp-mn-lft {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 60px;
} */

.crs1-tp-mn-lft img {
    width: 63px;
    object-fit: contain;
    position: absolute;
    bottom: 72px;
    right: 29%;
    z-index: -1;
}

.crs1-tp-mn-rgt-img {
    height: 370px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 20px;
}


.crs1-tp-mn-rgt-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crs-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.crs-btns p {
    padding: 10px 30px;
    background-image: linear-gradient(to right, #003630, #43A7C3);
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
}

.crs2-tp h2 {
    max-width: 600px;
}

.crs2-tp p {
    max-width: 500px;
    text-align: right;
    margin-left: auto;
    position: relative;
    top: 50px;
}

.crs2 {
    padding: 60px 0;
    background: #fafafa;
}

.crs2-tp-flx {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Header */

.section-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
}

.badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8fbf8;
    color: #08bfac;
    border: 1px solid rgba(8, 191, 172, .2);
    border-radius: 50px;
    padding: 5px 20px 5px 15px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    width: fit-content;
}

.badge p {
    font-size: 13px;
    font-weight: 100;
    text-transform: uppercase;
    color: #00a190;
}

.section-header h2 {
    margin-top: 20px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

.section-header h2 span {
    color: #08bfac;
}

.section-header p {
    text-align: right;
    max-width: 400px;
    margin-left: auto;
}

/* Grid */

.feature-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Card */

.feature-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(8, 191, 172, .15);
    border-radius: 20px;
    padding: 30px;
    overflow: hidden;
    transition: .35s;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #08bfac;
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8, 191, 172, .4);
    box-shadow: 0 10px 25px rgba(8, 191, 172, .15);
}

.icon-box {
    width: 50px;
    height: 50px;
    background: #e8fbf8;
    color: #08bfac;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.feature-card:hover .icon-box {
    background: #08bfac;
    color: #fff;
}

.feature-card h3 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
}

.feature-card p {
    margin-top: 12px;
    color: #666;
    line-height: 1.8;
}

/* CTA Card */

.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 30px;
    color: #fff;
    background: linear-gradient(135deg, #08bfac, #1d394e);
}

.cta-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -60px;
    top: -60px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cta-content h3 {
    font-size: 20px;
    line-height: 1.4;
}

.cta-btn {
    width: 42px;
    height: 42px;
    background: #fff;
    color: #1d394e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: .3s;
}

.cta-card:hover .cta-btn {
    transform: rotate(45deg);
}

.cta-card p {
    margin-top: 20px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .85);
}

/* Responsive */

@media(max-width:991px) {

    .section-header {
        grid-template-columns: 1fr;
    }

    .section-header p {
        text-align: left;
    }

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

@media(max-width:767px) {

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

    .section-header h2 {
        font-size: 32px;
    }
}




.faq-sec {
    background: #fff;
    padding-bottom: 60px;
}

/* ── SECTION ── */
.faq-section {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

/* ── LEFT ── */
.faq-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Eyebrow */
.faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a2f4e;
    text-transform: uppercase;
}

/* Heading */
.faq-heading {
    font-weight: 800;
    color: #1a2f4e;
    text-transform: uppercase;
}

/* Description */
.faq-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.7;
    max-width: 500px;
}

/* ── FAQ LIST ── */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.faq-item {
    border-top: 1px solid #e0e6ed;
}

.faq-item:last-child {
    border-bottom: 1px solid #e0e6ed;
}

/* Question button */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    padding: 20px 0;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.faq-question span {
    font-size: 17px;
    font-weight: 700;
    color: #1a2f4e;
    line-height: 1.4;
}

.faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #1a2f4e;
    transition: transform 0.3s ease;
}

/* Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.3s ease;
}

.faq-answer p {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    padding-bottom: 20px;
}

/* Active state */
.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-question span {
    color: #1a2f4e;
}

/* ── RIGHT ── */
.faq-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Teal asterisk */
.asterisk {
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 58px;
    color: #17b9a0;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* Image wrapper */
.faq-img-wrap {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.12);
}

.faq-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 420px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .faq-section {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 20px;
    }

    .faq-right {
        order: -1;
    }

    .faq-img-wrap img {
        min-height: 260px;
    }

    .faq-heading {
        font-size: 24px;
    }
}


/* .course contact------------------------- */


.crs-cntct {
    padding: 80px 0;
}

/* ── WRAPPER ── */
.contact-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
    position: relative;
}

/* ── LEFT PANEL ── */
.left-panel {
    position: relative;
    background: linear-gradient(135deg, #1a2f4e 0%, #17b9a0 100%);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 520px;
}

.left-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=800&q=80') center/cover no-repeat;
    opacity: 0.25;
    border-radius: 0;
    z-index: 0;
}

.left-content {
    position: relative;
    z-index: 1;
}

.left-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 28px;
}

.left-tag span {
    width: 7px;
    height: 7px;
    background: #17b9a0;
    border-radius: 50%;
    display: inline-block;
}

.left-heading {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.left-heading em {
    font-style: normal;
    color: #5de8d4;
}

.left-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 320px;
}

/* Info cards */
.info-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 14px 18px;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: #17b9a0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
        font-family: Inter-Regular;
}

.info-value {
    font-size: 13.5px;
    color: #fff;
        font-family: Inter-Regular;
}

/* Decorative asterisk */
.asterisk {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 52px;
    color: #17b9a0;
    font-weight: 300;
    z-index: 1;
    line-height: 1;
    opacity: 0.85;
}

/* ── RIGHT PANEL ── */
.right-panel {
    padding: 52px 50px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #17b9a0;
    margin-bottom: 10px;
}

.form-eyebrow::before {
    content: '';
    width: 28px;
    height: 3px;
    background: #17b9a0;
    border-radius: 2px;
}

.form-heading {
    font-size: 26px;
    font-weight: 800;
    color: #1a2f4e;
    line-height: 1.25;
    margin-bottom: 30px;
}

/* Form grid */
.form-grid {
    display: grid;
    gap: 0;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.form-group label {
    font-size: 11.5px;
    font-weight: 600;
    color: #1a2f4e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
        font-family: Inter-Regular;
}

.form-group input,
.form-group select,
.form-group textarea {
    border: none;
    border-bottom: 2px solid #e0e6ed;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #333;
    outline: none;
    transition: border-color 0.25s;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aab;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: #17b9a0;
}

.form-group select {
    appearance: none;
    cursor: pointer;
    color: #aab;
}

.form-group select.selected {
    color: #333;
}

.form-group textarea {
    resize: none;
    height: 80px;
    line-height: 1.6;
}

.form-group.full {
    grid-column: 1 / -1;
}

/* Submit */
.btn-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1a2f4e, #17b9a0);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

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

.btn-submit::after {
    content: '→';
    margin-left: 10px;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 820px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .left-panel {
        min-height: 300px;
        padding: 40px 30px;
    }

    .right-panel {
        padding: 36px 28px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* -------------------------------------------------- */

/* course close------------------------ */



/* blog ----------------------------------- */
.blog-section {
    padding: 80px 0;
}

/* ── HEADER ── */
.blog-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* align-items: flex-end; */
    margin-bottom: 130px;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #17b9a0;
    margin-bottom: 14px;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    background: #17b9a0;
    border-radius: 50%;
    display: inline-block;
}

.blog-heading {
    font-weight: 900;
    /* color: #1a2f4e; */
    /* text-transform: uppercase; */
    letter-spacing: -0.5px;
    max-width: 600px;
}

.blog-header-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    top: 100px;
}

.blog-header-right p {
    font-size: 14px;
    color: #777;
    line-height: 1.75;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a2f4e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-view-all:hover {
    background: #17b9a0;
    transform: translateY(-2px);
}

/* ── GRID ── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ── CARD ── */
.blog-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}

/* Featured card accent */
.blog-card.featured {
    border-top: 4px solid #17b9a0;
}

/* Image */
.card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 210px;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .card-img-wrap img {
    transform: scale(1.05);
}

/* Tag badge */
.card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #17b9a0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
}

/* Body */
.card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #aab;
    font-weight: 500;
}

.card-title {
    font-size: 18px;
    font-weight: 800;
    color: #1a2f4e;
    line-height: 1.3;
}

.card-desc {
    font-size: 13.5px;
    color: #666;
    line-height: 1.7;
    flex: 1;
}

/* See More link */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #17b9a0;
    text-decoration: none;
    margin-top: 6px;
    transition: gap 0.2s;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    width: fit-content;
}

.card-link:hover {
    gap: 10px;
    border-bottom-color: #17b9a0;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-heading {
        font-size: 28px;
    }
}

@media (max-width: 580px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-heading {
        font-size: 24px;
    }
}

/* blog close ----------------------------- */


/* blog detail----------------------------- */


.blog-detail {
    padding: 80px 0;
}

/* ── PAGE LAYOUT ── */
.page-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 25px;
    align-items: flex-start;
}

/* ── MAIN CONTENT ── */
.blog-main {
    background: #fff;
    border-radius: 18px;
    padding: 0 0 40px 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* Hero image */
.blog-hero {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.blog-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #17b9a0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
}

/* Meta row */
.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px 32px 0;
    font-size: 12.5px;
    color: #999;
    font-weight: 500;
}

.meta-cat {
    background: #eaf9f6;
    color: #17b9a0;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.meta-dot {
    color: #ccc;
}

/* Title */
.blog-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a2f4e;
    line-height: 1.25;
    padding: 14px 32px 0;
}

/* Sub headings */
.blog-sub {
    font-size: 17px;
    font-weight: 700;
    color: #1a2f4e;
    padding: 28px 32px 0;
    position: relative;
}

.blog-sub::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #17b9a0;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Body text */
.blog-text {
    font-size: 14.5px;
    color: #555;
    line-height: 1.85;
    padding: 14px 32px 0;
}

/* ── SIDEBAR ── */
.blog-sidebar {
    position: sticky;
    top: 180px;
}

.sidebar-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

.sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: #1a2f4e;
    margin-bottom: 14px;
}

.sidebar-divider {
    height: 2px;
    background: linear-gradient(90deg, #17b9a0, transparent);
    border-radius: 2px;
    margin-bottom: 20px;
}

/* Sidebar list */
.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-item:last-child {
    border-bottom: none;
}

.sidebar-item:hover .si-body h4 {
    color: #17b9a0;
}

/* Sidebar image */
.si-img {
    width: 72px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.si-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.sidebar-item:hover .si-img img {
    transform: scale(1.06);
}

/* Sidebar text */
.si-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.si-body h4 {
    font-size: 13px;
    font-weight: 700;
    color: #1a2f4e;
    line-height: 1.4;
    transition: color 0.2s;
}

.si-body p {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .page-wrapper {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    .blog-title {
        font-size: 22px;
    }
}

/* blog detail close----------------------- */


/* testimonial ---------------------------- */



/* ── SECTION ── */
.testimonials-section {
    padding: 80px 0;
}

/* ── HEADER ── */
.t-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.t-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #17b9a0;
}

.t-dot {
    width: 7px;
    height: 7px;
    background: #17b9a0;
    border-radius: 50%;
    display: inline-block;
}

.t-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1a2f4e;
    line-height: 1.2;
}

.t-sub {
    font-size: 14px;
    color: #888;
    max-width: 480px;
    line-height: 1.7;
}

/* ── GRID ── */
.t-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ── CARD ── */
.t-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
    border: 1.5px solid transparent;
}

.t-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.11);
}

/* Featured card */
.t-card.featured {
    border-color: #17b9a0;
    background: linear-gradient(160deg, #f0fdf9 0%, #fff 60%);
}

/* Top row: avatar + name + quote icon */
.t-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Avatar */
.t-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2.5px solid #17b9a0;
}

.t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Name & role */
.t-info {
    flex: 1;
}

.t-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1a2f4e;
    margin-bottom: 2px;
}

.t-info span {
    font-size: 12px;
    color: #17b9a0;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Large decorative quote mark */
.t-quote-icon {
    font-size: 60px;
    line-height: 1;
    color: #17b9a0;
    opacity: 0.18;
    font-family: Georgia, serif;
    margin-top: -10px;
    user-select: none;
}

.t-card.featured .t-quote-icon {
    opacity: 0.35;
}

/* Stars */
.t-stars {
    font-size: 17px;
    color: #f5a623;
    letter-spacing: 2px;
    margin-top: -4px;
}

/* Review text */
.t-text {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
    font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 780px) {
    .t-grid {
        grid-template-columns: 1fr;
    }

    .t-heading {
        font-size: 26px;
    }
}

/* testimonial close ---------------------- */

/* . contact------------------------------- */

.map {
    height: 400px;
    width: 100%;

}

/* . contact close------------------------ */

/* modern office management---------------------- */


/* modern office management close---------------- */


/* sidebar------------------------ */


/* ══ SIDEBAR ══ */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: #141f1c;
  border-right: 1px solid rgba(30,207,176,0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

/* Open state */
.sidebar.mobile-open {
  transform: translateX(0);
}

/* Logo */
.sidebar-logo {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(30,207,176,0.15);
  margin-bottom: 16px;
}

.sidebar-logo img {
  height: 40px;
  width: auto;
}

/* Nav list */
.nav-list {
  list-style: none;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Nav link */
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #7a9e97;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}

.nav-link i:first-child {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.nav-link:hover {
  background: rgba(30,207,176,0.08);
  color: #1ecfb0;
}

.nav-item.active .nav-link {
  background: rgba(30,207,176,0.12);
  color: #1ecfb0;
  font-weight: 600;
}

/* Dropdown arrow */
.drop-arrow {
  margin-left: auto;
  font-size: 11px !important;
  transition: transform 0.3s;
}

.nav-item.open .drop-arrow {
  transform: rotate(180deg);
}

/* Submenu */
.nav-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 12px;
}

.nav-item.open .nav-submenu {
  max-height: 300px;
}

.nav-submenu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #7a9e97;
  text-decoration: none;
  border-radius: 8px;
  border-left: 1px solid rgba(30,207,176,0.15);
  margin-left: 8px;
  transition: background 0.2s, color 0.2s;
}

.nav-submenu li a:hover {
  background: rgba(30,207,176,0.07);
  color: #1ecfb0;
  border-left-color: #1ecfb0;
}

.nav-submenu li a i {
  font-size: 12px;
  color: #1ecfb0;
  width: 16px;
}

/* Social */
.sidebar-social {
  display: flex;
  gap: 8px;
  padding: 16px 18px;
  margin-top: auto;
  border-top: 1px solid rgba(30,207,176,0.15);
}

.soc-link {
  width: 36px; height: 36px;
  background: rgba(30,207,176,0.08);
  border: 1px solid rgba(30,207,176,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #7a9e97;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.soc-link:hover {
  background: rgba(30,207,176,0.15);
  color: #1ecfb0;
}

/* CTA */
.sidebar-cta {
  padding: 12px 14px;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #1ecfb0;
  color: #0e1614;
  font-size: 13px;
  font-weight: 700;
  padding: 12px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
}

.cta-btn:hover { background: #2de0c2; }

/* ══ OVERLAY ══ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  z-index: 9998;
}

.sidebar-overlay.active {
  display: block;
}

/* ══ HAMBURGER BUTTON ══ */
.sidebar-toggle {
  display: none;           /* hidden on desktop */
  width: 40px; height: 40px;
  background: rgba(30,207,176,0.1);
  border: 1px solid rgba(30,207,176,0.2);
  border-radius: 8px;
  color: #1ecfb0;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Show hamburger on mobile */
@media (max-width: 992px) {
  .sidebar-toggle { display: flex; }
  .pages { display: none; }       /* hide desktop nav */
  .cnt-btn { display: none; }     /* hide desktop CTA */
}


/* sidebar close ----------------- */











/* footer--------------------------------------- */

footer {
    background-color: #0a1628;
    padding: 80px 0 20px 0;
}


.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
    gap: 80px;
}

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 22px;
    letter-spacing: .5px;
    color: #fff;
}

.bk-tp-btn button {
        background: linear-gradient(135deg, #1a2f4e, #17b9a0);
    padding: 7px 9px;
    color: #FFFFFF;
    border: none;
    border-radius: 7px;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;

}

.bk-tp-btn {
    position: fixed;
    right: 60px;
    bottom: 8%;
    z-index: 22222;

}

.srv-img-an2 {
    transform: translatey(0px);
    -webkit-animation: float2 3s ease-in-out infinite;
    animation: float2 3s ease-in-out infinite;
}


@keyframes float2 {
    0% {

        transform: translatey(0px);
    }

    50% {

        transform: translatey(-15px);
    }

    100% {
        transform: translatey(0px);
    }
}

.footer-col p,
.footer-col a {
    color: #9fb0d0;
    text-decoration: none;
    font-size: 15px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 14px;
}

/* Logo */
.logo {
    height: 50px;
    margin-bottom: 20px;
}

.logo img {
    height: 100%;
    object-fit: contain;
}


/* Social Icons */
.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.social-icons a {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    transition: .3s;
}

.social-icons a:hover {
    background: #34d1c7;
}

/* Contact */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-item span {
    color: #34d1c7;
    font-size: 18px;
    min-width: 18px;
}

.contact-item p {
    margin: 0;
}

/* Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 0;
    color: #7e91b6;
    font-size: 14px;
}

.footer-bottom img {
    margin-left: 10px;
    top: 3px;
    position: relative;
}

.footer-bottom p {
    font-size: 13px;
}

@media(max-width:992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media(max-width:768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* footer close -------------------------------- */