/* --------------------
   ROOT VARIABLES
-------------------- */
:root {
    --primary-color: #27ABB5;
    --primary-hover: #0598A3;
    --text-color: #121619;
    --text-light: #000000;
    --bg-color: #fff;
    --border-color: #eeeeeeab;

    --font-main: "Raleway", sans-serif;
    --font-secondary: "Averia Libre", sans-serif;
    --font-mindraga: "Pacifico", cursive;
    --font-size-base: 16px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --line-height: 1.6;
}

/* --------------------
   RESET + BASE
-------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    background: var(--bg-color);
    /* background-color: gray; */
    overflow-x: hidden;
    color: var(--text-color);
}

.pe-10 {
    padding-right: 80px !important;
}

/* --------------------
   TYPOGRAPHY
-------------------- */

h1 {
    font-size: var(--font-size-h1);
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--text-color);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-color);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--text-color);
}

.mb-5{
    margin-bottom: 40px !important;
}

.mb-100{
    margin-bottom: 100px ;
}




p {
    margin-bottom: 15px;
    color: var(--text-light);
    /* font-weight: 600; */
}

a {
    text-decoration: none;
    color: var(--text-color);
    ;
    transition: color 0.3s ease;
    /* font-weight: 600; */
}

a:hover {
    color: var(--primary-hover);
}

ul {
    list-style: none;
}

li {
    margin-bottom: 8px;
}

.section {
    padding: 120px 80px;
    /* default for large screens */
}



.section2 {
    padding:160px 80px 80px 80px;
    /* default for large screens */
}

.section3 {
    padding: 80px 80px;
    /* default for large screens */
}

.section4 {
    padding: 150px 80px 80px 80px;
    /* default for large screens */
}



.section5 {
    padding: 160px 80px;
    /* default for large screens */
}

.section6 {
    padding: 40px 80px;
    /* default for large screens */
}



/* Preloader Styles */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* Background color */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  #preloader.hidden {
    opacity: 0;
    visibility: hidden;
  }

  #preloader img {
    width: 300px; /* Adjust size */
    height: auto;
  }

/* --------------------
   TOP HEADER
-------------------- */
/* Header container */
.header {
    position: fixed;
    top: 0px;
    left: -7px;
    width: 102%;
    z-index: 1000;
    /* stay on top */
    background: url(../img/bg/header-bg.png) no-repeat center 100% / cover;
}

.top-header {
    padding: 10px 80px;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    font-size: 14px;
    color: var(--text-light);
}




.top-header .active {
    font-weight: bold;
    color: var(--primary-color);
}


  .top-header a.current,
.nav-links a.current {
     font-weight: 500;
    color: var(--primary-color);

}


.top-header a:hover {
    color: var(--primary-hover);
}


.header-raga:hover{
    color: purple !important;
}

.header-mind:hover{
    color: #f4d03f !important;
}

/* --------------------
   MAIN NAVBAR
-------------------- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:5px 80px 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button link */
.dropbtn {
    text-decoration: none;
    padding: 10px 0px;
    display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 8px;
}

/* Dropdown links */
.dropdown-content a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
}

/* Hover effect */
.dropdown-content a:hover {
    background-color: #f4f4f4;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.card-inner2 {
    display: flex;
    width: 285px;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.vision-card-inner {
    display: flex;
    width: 90%;
    padding: 24px 5px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.vision-title {
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 110%;
    /* 44px */
    text-transform: capitalize;
    background: linear-gradient(180deg, #CF83EC 0%, #27DBC9 91.35%, #FFE631 100%);
    background-clip: text;
    font-family: var(--font-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Top Menu container */
.top-menu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
}

/* Menu list */
.top-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.top-menu ul li {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: color 0.3s;
    padding-bottom: 5px;
    /* thoda gap text aur border ke beech */
}

/* Active state */
.top-menu ul li.active {
    border-bottom: 4px solid #F6BD0F;
}

/* Hover effect */
.top-menu ul li:hover {
    color: #F6BD0F;
}


/* Logo */
.logo {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
}

.logo img {
    width: 150px;
    margin-right: 8px;
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* Contact Button */
.contact-btn {
    border-radius: 28px;
    border: 1px solid #3FC4CE;
    background: var(--primary-color);
    color: white !important;
    padding: 6px 22px;
    font-size: 16px;
    transition: background 0.3s ease;
}

.contact-btn:hover {
    background: var(--primary-hover);
}

.contact-btn i {
    margin-left: 5px;
}

.contact-btn2 {
    border-radius: 28px;
    border: 1px solid #3FC4CE;
    background: var(--primary-color);
    color: white !important;
    padding: 10px 22px;
    font-size: 16px;
    transition: background 0.3s ease;
}

.contact-btn2:hover {
    background: var(--primary-hover);
}

.contact-btn2 i {
    margin-left: 5px;
}



.explore-button-alt2 {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    width: 50px;
    height: 50px;
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.4s ease;
    font-family: sans-serif;
    color: #555;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.explore-button-alt2 .text {
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.icon-circle {
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.icon-circle i {
    font-size: 16px;
    color: #333;
}

/* Hover ab parent par lagega */
.banner-box:hover .explore-button-alt2 {
    width: 160px;
}

.banner-box:hover .explore-button-alt2 .text {
    opacity: 1;
}

/* --------------------
   OVERLAY (when menu open)
-------------------- */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.4); */
    z-index: 1500;
}

.overlay.active {
    display: block;
}


/* --------------------
   MOBILE RESPONSIVE
-------------------- */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 2001;
}

@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        background: var(--bg-color);
        position: fixed;
        top: 0;
        right: -100%;
        /* hidden */
        align-items: start;
        width: 250px;
        height: 100vh;
        padding: 50px 20px;
        box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.1);
        border-left: 1px solid var(--border-color);
        transition: right 0.4s ease;
        z-index: 2000;
    }

    .nav-links.active {
        right: 0;
        /* slide in */
    }

    .menu-icon {
        display: block;
    }

    .top-header {
        font-size: 12px;
        text-align: center;
        padding: 10px 20px;
    }
}


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

/* hero section start */

/* Banner Container */
.split-banner {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100vh;
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


/* Each half */
.banner-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #111;
    padding: 80px 20px;
    position: relative;
}

.banner-box.left {
    position: relative;
    /* needed for pseudo-elements */
    background-image: url("../img/bg/mind-bg.png");
    /* specify image */
    background-repeat: no-repeat;
    /* prevent repetition */
    background-position: top;
    /* horizontal & vertical position */
    background-size: cover;
    /* cover entire container */
    background-attachment: scroll;
    /* scroll with page */
    background-origin: padding-box;
    /* area relative to padding box */
    background-clip: border-box;
}

/* Center overlay */
.banner-box.left::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-124%, -70%) rotate(-140deg);
    /* center */
    width: 100%;
    /* overlay size */
    height: 100%;
    background-image: url("../img/bg/image1.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    /* so it doesn’t block clicks */

}

.banner-box.left::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background-image: url("../img/bg/image2.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 3;
    transform: translate(-120%, 48%) rotate(121deg);
    /* added rotation */
    transform-origin: center;
    /* rotate around center */
}


/* Right Image (Raga) */
.banner-box.right {
    background-image: url("../img/bg/raga-bg.png");
    /* specify image */
    background-repeat: no-repeat;
    /* prevent repetition */
    background-position: top;
    /* horizontal & vertical position */
    background-size: cover;
    /* cover entire container */
    background-attachment: scroll;
    /* scroll with page */
    background-origin: padding-box;
    /* area relative to padding box */
    background-clip: border-box;
    /* visible area */
}


/* Content inside */
.banner-content h1 {
    font-family: var(--font-mindraga);
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    /* 79.2px */
    letter-spacing: 2.88px;
    text-transform: capitalize;
}


.banner-content p {
    font-size: 24px;
    margin-bottom: 20px;
    color: #121619;
    font-weight: 600;
}


/* Circle Button */
.circle-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    transition: 0.3s ease;
}

.circle-btn:hover {
    background: #00a896;
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .split-banner {
        flex-direction: column;
        /* stack */
        height: auto;
    }

    .banner-box {
        height: 50vh;
        /* each half screen */
    }

    .banner-content h1 {
        font-size: 32px;
    }

    .banner-content p {
        font-size: 14px;
    }
}

/* hero section end */

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


/* About Section Start  */

.about-section {
    position: relative;
    background: url(../img/bg/main-mini-bg.png) no-repeat center 100% / contain;
    background-size: cover;
    /* height: 100vh; */
    border-radius: 10px;
    margin-top: -50px;
    z-index: 2;
}


/* Bottom Left Image */
.about-section::before {
       content: "";
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: 85%;
    background: url(../img/bg/image1.png) no-repeat center center;
    background-size: contain;
    transform: translate(15%,-10%) rotate(360deg);
    z-index: -1;

}

/* Top Right Image */
.about-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 60%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, 70%);
    z-index: -1;
}


/* mind about */

    
.mind-about-section {
    position: relative;
    background: url(../img/bg/main-mini-bg.png) no-repeat center 100% / contain;
    background-size: cover;
    /* height: 100vh; */
    border-radius: 10px;
    margin-top: -50px;
    z-index: 2;
}


/* Bottom Left Image */
.mind-about-section::before {
       content: "";
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg/image1.png) no-repeat center center;
    background-size: contain;
    transform: translate(20%,-10%) rotate(300deg);
    z-index: -1;

}

/* Top Right Image */
.mind-about-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 80%;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, 70%);
    z-index: -1;
}





.highlight {
    background-color: #45c3d2;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-secondary);
    font-weight: 600;
}

.highlight2 {
    background-color: #B9AAFE;
    color: rgb(0, 0, 0);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}

.section-title {
    font-size: 48px;
    font-weight: normal;
    font-family: var(--font-secondary);
}

.section-title2 {
    font-size: 42px;
    font-weight: normal;
    font-family: var(--font-secondary);
}

.section-title span {
    font-family: var(--font-mindraga);
    font-size: 44px;
}


.about-text {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 36.4px */
}

.about-para {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 32.4px */
    letter-spacing: 0.18px;
}

.about-para2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.18px;
}


.about-para3 {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 32.4px */
    letter-spacing: 0.18px;
}


/* Mobile */
@media (max-width: 768px) {
    .about-para2 {
        font-size: 18px;
        line-height: 150%;
    }
}



.about-1 {
    position: absolute;
    top: -100px;
    left: 10%;
    transform: rotate(-5deg);
    z-index: 1;
}

.about-2 {
    position: absolute;
    top: 100px;
    right: 0px;
    z-index: 2;
    transform: rotate(15deg);
    transform-origin: center;
}

/* For tablets and mobiles */
@media (max-width: 992px) {
    .about-1 {
        max-width: 85%;
        position: relative;
        top: auto;
        left: auto;
        margin: 120px auto 0 auto !important;
        transform: rotate(-10deg);
        display: block;
    }

    .about-2 {
        max-width: 85%;
        position: relative;
        top: auto;
        right: auto;
        margin: -50px auto 0 auto !important;
        transform: rotate(5deg);
        display: block;
    }
}

/* For very small devices (phones < 576px) */
@media (max-width: 576px) {
    .about-1,
    .about-2 {
        max-width: 95%;
        transform: none; /* keep straight images if too small */
        margin: 20px auto !important;
    }
}


.img-overlay-1 {
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 1;
}

.img-overlay-2 {
    position: absolute;
    bottom: -100px;
    right: 50px;
    z-index: 2;
    /* transform: rotate(5deg); */
    /* rotate slightly */
    transform-origin: center;
    /* rotate around center */
}

.watercolor-bg {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120%;
    height: 120%;
    background: url('https://i.imgur.com/R6m1Cdc.png') no-repeat center center;
    background-size: contain;
    z-index: 0;
    opacity: 0.3;
}


/* About section end */

/* our values start */
/* our values end */


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

/* hero2 section start */

.split-banner2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 120vh;
    position: relative;
    /* required for z-index positioning */
    margin-top: -25px;
    /* pull up to allow previous section to overlap */
    z-index: 1;
    /* make sure it’s below any floating content from above if needed */
}

.banner-content2 h1 {
    font-family: var(--font-secondary);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    /* 79.2px */
    letter-spacing: 2.88px;
    text-transform: capitalize;
}


.banner-content2 p {
    font-size: 24px;
    text-align: start;
    padding: 0px 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 31.2px */
    letter-spacing: 1px;
}

/* Tablets (max-width: 992px) */
@media (max-width: 992px) {
    .split-banner2 {
        flex-direction: column;
        /* stack instead of side-by-side */
        height: auto;
        /* let content decide height */
        padding: 40px 20px;
    }

    .banner-content2 h1 {
        font-size: 36px;
        line-height: 120%;
        text-align: center;
    }

    .banner-content2 p {
        font-size: 18px;
        padding: 0 40px;
        /* reduce padding for tablets */
        text-align: center;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    .split-banner2 {
        flex-direction: column;
        height: auto;
        padding: 0px 0px;
    }

    .banner-content2 h1 {
        font-size: 26px;
        line-height: 120%;
        text-align: center;
    }

    .banner-content2 p {
        font-size: 16px;
        padding: 0 15px;
        /* small padding for mobile */
        line-height: 140%;
        text-align: center;
    }
}


/* hero2 section end */

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

/*our vision section start */
.vision-section {
       position: relative;
    background: url(../img/bg/main-mini-bg.png) no-repeat center 100% / contain;
    background-size: cover;
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 1;
}

.vision-text {
    font-size: 24px;
}


.vision-img {
    position: absolute;
    bottom: -40px;
    right: 100px;
    z-index: 2;
    /* transform: rotate(5deg); */
    /* rotate slightly */
    transform-origin: center;
    /* rotate around center */
}

/* our vision section end */


/* our value sectoin start*/
.our-value-section {
    padding: 80px 0px;
}

.our-values-about{
    position: relative;
    z-index: 5;
    overflow: visible;
}

/* Bottom Left Image */
.our-values-about::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 80%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(-60%, 0%) rotate(234deg);
    z-index: -1;
}

/* Top Right Image */
.our-values-about::after {
    content: "";
    position: absolute;
    top: -10%;
    right: 0;
    width: 100%;
    height: 80%;
    background: url(../img/bg/image5.png) no-repeat center center;
    background-size: contain;
   transform: translate(53%, 0%) rotate(235deg);
    z-index: -1;
}





.values-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 180px 0px 0px 0px;
}

/* Center butterfly */
.values-flower {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    z-index: 2;
}

.values-flower img {
    width: 100%;
    height: auto;
    display: block;
}

/* Value Cards */
.values-card {
    position: absolute;
    width: 350px;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.values-card p {
    font-size: 14px;
}

/* Card Positions (Desktop / Large screens) */
.card-top-center {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.card-top-left {
    top: 40%;
    left: 0;
    text-align: right;
}

.card-top-right {
    top: 40%;
    right: 0;
    text-align: left;
}

.card-bottom-left {
    top: 100%;
    left: 10%;
    text-align: right;
}

.card-bottom-right {
    top: 100%;
    right: 10%;
    text-align: left;
}

/* -------- RESPONSIVE -------- */

/* our value section end */

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

/* team section start */



.team-section {
    position: relative;
    background: url('../img/bg/main-bg.png') repeat-x center top;
    background-size: auto 100%;
    z-index: 5;
    /* margin: 100px 0; */
    overflow: visible;
}

/* Bottom Left Image */
.team-section::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image5.png') no-repeat center center;
    background-size: contain;
    transform: translate(-60%, 20%) rotate(290deg);
    z-index: -1;
}

/* Top Right Image */
.team-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: url(../img/bg/image4.png) no-repeat center center;
    background-size: contain;
    transform: translate(55%, -40%) rotate(120deg);
    z-index: -1;
}


.team-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 40px;
}


.team-card {
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.team-card .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    opacity: 0.95;
}

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

.team-photo {
    width: 100%;
    /* fill parent width */
    max-width: 270px;
    /* limit max width for large screens */
    height: auto;
    /* auto height for aspect ratio */
    object-fit: contain;
    /* fit image inside box */
    border-radius: 0% 0% 20% 0%;
    margin-bottom: 20px;
}

.team-name {
    font-weight: bold;
    font-size: 18px;
    text-align: start;
    /* padding-top: 15px; */
    margin-left: 10%;
}

.team-role {
    font-size: 14px;
    color: #444;
    text-align: start;
    margin-left: 10%;
    font-weight: 600;

}

.team-role p {
    text-align: start;
    margin-left: 15%;
}

.linkedin-icon {
    margin-left: 5%;
    font-size: 15px;
}

/* team section end */


/* blog section start */


/* Blog - Case study Section Styling */


.blog-section {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: contain; */
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 5;
}


.blog-detail-section {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') repeat center top;
    /* background-size: contain; */
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 5;
}

/* Bottom Left Image */
.blog-section::before {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 700px;
    /* responsive width */
    max-width: 700px;
    /* desktop limit */
    height: auto;
    aspect-ratio: 1/1;
    /* maintain square */
    background: url('../img/bg/image4.png') no-repeat center center;
    background-size: contain;
    transform: translate(-30%, 0) rotate(172deg);
    z-index: -1;
}

/* Top Right Image */
.blog-section::after {
    content: "";
    position: absolute;
    top: -50px;
    right: 0;
    width: 700px;
    max-width: 700px;
    height: auto;
    aspect-ratio: 1/1;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(20%, 0) rotate(90deg);
    z-index: -1;
}





/* ---------------- CASE STUDY ---------------- */
.case-study-section {
    position: relative;
    margin: 100px 0;
    z-index: 1;
    /* lower than blog */
}

.case-study-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(-40%, 30%) rotate(-15deg);
    z-index: -1;
}

.case-study-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, 30%) rotate(201deg);
    z-index: -1;
}



/* Blog Card with Background Image */
.card-section {
    background: url('../img/bg/blog_card.png') no-repeat center top;
    background-size: cover;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    height: 100%;
    z-index: 1;
    position: relative;
}

.card-section3 {
    background: url(../img/bg/blog_card.png) no-repeat center center;
    background-size: 100% 100%;
    /* frame hamesha poora dikhai de */
    background-color: transparent;
    border-radius: 0;
    /* frame ka apna radius hai */
    /* box-shadow: 0 0 4px 0 rgba(117, 117, 117, 0.25); */
    padding: 20px;
    /* thoda andar space for edges */
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}

.vision-card-section {
    background: url(../img/bg/blog_card.png) no-repeat center center;
    background-size: 100% 100%;
    /* frame hamesha poora dikhai de */
    background-color: transparent;
    border-radius: 0;
    /* frame ka apna radius hai */
    /* box-shadow: 0 0 4px 0 rgba(117, 117, 117, 0.25); */
    /* padding: 20px; */
    /* thoda andar space for edges */
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}

/* Inner wrapper for content */
.card-inner {
    /* background: #fff;    */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Blog image */
.card-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Content */
.card-content {
    padding: 15px;
    flex-grow: 1;
}

.card-badge {
    display: inline-block;
    background: #f5e4a1;
    color: #000;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.read-more-btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1.5px solid teal;
    border-radius: 8px;
    text-decoration: none;
    color: teal;
    font-weight: 600;
    transition: 0.3s;
}

.read-more-btn:hover {
    background: teal;
    color: #fff;
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
    .card-title {
        font-size: 18px;
    }

    .card-desc {
        font-size: 13px;
    }
}


.card-section2 {
    background: url('../img/bg/blog_card.png') no-repeat center center;
    background-size: contain;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    height: 100%;
    z-index: 1;
    position: relative;
}


.card-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 12px;
    /* margin-bottom: 12px; */
    padding: 0px 5px 10px 5px;
}

.card-icon {
    width: 72px;
height: 72px;
flex-shrink: 0;
aspect-ratio: 9/8;
    margin: 22px 0px;
}

.icon-raga {
    width: 70px;
    height: 70px;
    margin: 16px 0px;
}

.card-icon2 {
    width: 100%;
    height: 100px;
    margin: 10px 0px;
}


/* Blog Content */
.card-content {
    padding: 00px 20px 0px 20px;
    text-align: left;
    position: relative;
}

.card-content2 {
    padding: 0px 20px 48px 20px;
    text-align: left;
    position: relative;
}

/* Badge */
.card-badge {
    display: inline-block;
    background-color: #f9e79f;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.card-badge2 {
    display: inline-block;
    background-color: #B9AAFE;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.card-badge3 {
    display: inline-block;
    background: linear-gradient(90deg, #f9e79f, #B9AAFE);
    /* 2 colors */
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}


/* Title & Description */
.card-title {
    font-size: 20px;
    font-weight: bold;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-color);
}

.card-title2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--text-color);
    text-align: center;
}

.card-desc {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 100;
    color: var(--text-color);
    margin-bottom: 15px;
}

.card-desc2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    text-align: center;
    letter-spacing: 0.18px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 15px;
}


.card-section {
    display: flex;
    flex-direction: column;
    /* sab content top to bottom */
    height: 100%;
    /* column ko equal height kare */
}


.read-more-btn {
    margin-top: auto;
    /* button ko push karke bottom le jayega */
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #00a78e;
    font-weight: 600;
    border: 2px solid #00a78e;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}


.read-more-btn:hover {
    background-color: #00a78e;
    color: white;
}


.read-more-btn2 {
    margin-top: auto;
    /* button ko push karke bottom le jayega */
    width: 100%;
    text-align: center;
    font-size: 16px;
    background: #00A7B4;
    color: #ffffff;
    font-weight: 600;
    border: 2px solid #00a78e;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.read-more-btn2:hover {
    background-color: white;
    color: #00a78e;
}






/* Responsive Design */
@media (max-width: 768px) {
    .blog-img {
        height: 180px;
    }


}

@media (max-width: 576px) {
    .blog-content {
        padding: 15px;
    }

    .read-more-btn {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* blog section end */


/* contact section start */
.contact-section {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: cover;  */
    /* background-position: center top; */
    margin-top: -180px;
    border-radius: 10px;
    align-items: stretch;
    width: 100%;
    z-index: 5;
}

.our-course {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: cover; */
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 2;
}


.course-banner {
    position: relative;
    z-index: 0;
    margin: 100px 0 0 0;
    padding: 120px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}


.course-text-box {
    padding: 25px 20px 25px 80px;
    max-width: 40%;
    border-radius: 0px 6px 6px 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.course-text-box h2 {
    font-size: 48px;
    margin-bottom: 15px;
}

.course-text-box p {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
}


.course-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #EDE7F6;
    /* light purple */
    display: flex;
    align-items: center;
    justify-content: center;
   
text-align: center;
  margin: 20px 0;
}

.course-icon img {
    width: 35px;
    height: 35px;
}


/* Bottom Left Image */
.contact-section::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 100%;
    height: 900px;
    background: url(../img/bg/image2.png) no-repeat center center;
    background-size: contain;
    transform: translate(-45%, 47%) rotate(-349deg);
    z-index: -1;
}

/* Top Right Image */
.contact-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image3.png) no-repeat center center;
    background-size: contain;
    transform: translate(40%, 0%);
    z-index: -1;
}



.contact-heading {
    font-size: 28px;
    font-family: var(--font-secondary);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    /* 30.8px */
    text-transform: capitalize;
}

.contact-text {
    font-size: var(--font-main);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 32.4px */
    letter-spacing: 0.18px;
}

.contact-info strong {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 16px */
    font-family: var(--font-main);
}

.contact-info {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    font-family: var(--font-main);
}

/* Optional: Style overrides for better alignment */
.contact-left i,
.contact-right i {
    color: #000;
}

.contact-right {
    background: url('../img/bg/contact-form-bg.png') no-repeat center center;
    background-size: 100% 100%;
    /* frame edges always visible */
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 25px;
}

.contact-inner {
    background: #fff;
    /* white content box inside */
    border-radius: 16px;
    padding: 25px 20px;
    width: 100%;
}

.contact-heading {
    font-size: 1.4rem;
    font-weight: bold;
}

.contact-text {
    font-size: 0.9rem;
    color: #444;
}

/* Inputs */
.custom-input,
.form-select {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
}

textarea.custom-input {
    resize: none;
}

/* Button */
.submit-btn {
    border-radius: 28px;
    border: 1px solid #3FC4CE;
    background: #27ABB5;
    padding: 10px 25px;
    font-weight: 600;
    color: #fff;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #3FC4CE;
    border-color: #27ABB5;
}

/* ✅ Responsive */
@media (max-width: 768px) {
    .contact-inner {
        padding: 20px 15px;
    }

    .contact-heading {
        font-size: 1.2rem;
    }

    .contact-text {
        font-size: 0.85rem;
    }
}



.form-bg {
    background-image: url('right-bg.png');
    /* Replace with your actual image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

/* Match the underline-only input style */
.custom-input {
    border: none;
    border-bottom: 1px solid #aaa;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Remove blue highlight on focus */
.custom-input:focus {
    box-shadow: none;
    border-bottom: 1px solid #000;
}

/* Optional: consistent label spacing */
.form-label {
    margin-bottom: 5px;
    font-size: 0.95rem;
}


/* contact section end */


/* footer section start */

.footer-section {
    position: relative;
    /* background-color: #ffffff; */
    background: url(../img/bg/main-bg.png) top center repeat;
    padding: 0px 80px;
    background-size: cover;
    z-index: 1;
    overflow: hidden;
}

/* Bottom Left Image */
.footer-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image4.png') no-repeat center center;
    background-size: contain;
    transform: translate(-45%, 50%) rotate(-15deg);
    /* shifted + rotated */
    z-index: -1;
}

/* Top Right Image */
.footer-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: url('../img/bg/image5.png') no-repeat center center;
    background-size: contain;
    transform: translate(50%, -15%) rotate(201deg);
    /* shifted + rotated */
    z-index: -1;
}





.footer-section ul {
    padding-left: 0;
}

.footer-section ul li {
    list-style: none;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
}

.footer-section ul li a {

    font-weight: 500;
}

.footer-section h6 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-section p {
    margin: 0 0 0.5rem 0;
    font-size: 16px;
    font-weight: 500;
}

.footer-bottom {
    background: transparent;
    font-size: 0.85rem;
    color: #333;
}

.footer-section .social-icons i {
    font-size: 1.5rem;
    margin-right: 15px;
    cursor: pointer;
    color: #000;
}

.footer-section .social-icons i:hover {
    color: #555;
}

@media (max-width: 768px) {


    .footer-section .social-icons {
        margin-top: 10px;
    }
}

/* footer section end */


/* Mind Page CSS Start */
/* Mind Page CSS Start */
.hero {
    position: relative;
    background: url(./assets/img/bg/mind-hero.png) no-repeat center center;
    background-size: cover;
    height: 131vh;
    padding: 150px 50px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    border-radius: 10px;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* max-width: 900px; */
    margin: auto;
    /* padding: 20px; */
}

.hero-content h1 {
    font-family: var(--font-secondary);
    font-weight: 700;
    line-height: 1.3;
    color: white;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 20px;
    font-size: 60px;
    /* default desktop */
}

.hero-content h1 span {
    color: #f4d03f;
}

.author {
    margin-bottom: 30px;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #ddd;
    text-align: center;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
        display: inline-block;
}


.btn-group2 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
/* Hero Section End */


/* what we do start */
.what-we-do-section {
    position: relative;
    background: url('../img/bg/yellow-bg.svg') no-repeat center 100% / cover;
    z-index: 0;
    margin: -25px 0;
    padding: 120px 0px 180px 0px;
    overflow: visible;
}

/* Bottom Left Image */
.what-we-do-section::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 70%;
    background: url('../img/bg/image4.png') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -10%) rotate(172deg);
    z-index: -1;
}

/* Top Right Image */
.what-we-do-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 70%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, 0%) rotate(201deg);
    z-index: -1;
}

/* what we do end */



/* our approach start */
.our-approach-section {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: cover; */
    margin-top: -130px;
    border-radius: 10px;
    z-index: 2;
    min-height: 60vh;
    /* height flexible but minimum maintain */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* center align vertically */
}


/* Bottom Left Image */
.our-approach-section::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image4.png') no-repeat center center;
    background-size: contain;
    transform: translate(50%, -30%) rotate(172deg);
    z-index: -1;
}

/* Top Right Image */
.our-approach-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(-57%, 20%);
    z-index: -1;
}

/* ou approach end */

/* why-we-exist-section start */

.why-we-exist-section {
    position: relative;
    background: url('../img/bg/yellow-bg.svg') no-repeat center center;
    background-size: cover;
    /* make sure image covers the container */
    height: 120vh;
    /* height of the section = 50% of viewport height */
        padding: 180px 80px;
    margin-top: -120px;
    border-radius: 10px;
    z-index: 1;
}


/* Bottom Left Image */
.why-we-exist-section::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image1.png') no-repeat center center;
    background-size: contain;
    transform: translate(18%, -15%) rotate(290deg);
    z-index: -1;
}

/* Top Right Image */
.why-we-exist-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(50%, 30%);
    z-index: -1;
}

.img-overlay-3 {
    position: absolute;
    bottom: -50px;
    right: 100px;
    width: 300px;
    z-index: 2;
    transform: rotate(6deg);
    object-fit: none;
    transform-origin: center;
}

/* why-we-exist-section end */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 50px; /* yaha gap control karo */
  justify-items: center; /* center align */
}

.partner-card {
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

.partner-card:hover {
  transform: translateY(-5px);
}



.breadcrums {
    position: relative;
    background: no-repeat center center / cover;
    z-index: 0;
    margin: 100px 0;
    padding: 120px 20px;
    display: flex;
    /* display: grid; */
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* ensures overlay doesn't leak */
}

/* Black overlay */
.breadcrums::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0%);
    /* adjust opacity */
    z-index: 1;
}

/* Make sure text/content stays above overlay */
.breadcrums>* {
    position: relative;
    z-index: 2;
}

.breadcrums .section-title {
    font-size: 42px;
    line-height: 1.3;
    color: #fff;
}


.newsletter {
    position: relative;
    /* background: repeat center center / contain; */
    z-index: 0;
    margin: 0px 0;
    padding: 110px 80px;
}

;

/* Mind Page CSS End */


/* What We Think CSS start */
/* -------------------- Base Styles (Desktop/Laptop) -------------------- */

.mindraga-tree {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center center;
    border-radius: 10px;
    z-index: 2;
}

/* Bottom Left Image */
.mindraga-tree::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 500px;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -30%) rotate(-60deg);
    z-index: -1;
}

/* Top Right Image */
.mindraga-tree::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 500px;
    background: url('../img/bg/image4.png') no-repeat center center;
    background-size: contain;
    transform: translate(50%, -10%) rotate(79deg);
    z-index: -1;
}

/* ---------- Hide images on mobile ---------- */
@media (max-width: 768px) {
    .mindraga-tree::before,
    .mindraga-tree::after {
        content: none;
        display: none;
    }
}

.tree-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.tree-image {
    text-align: center;
    position: relative;
    z-index: 2;
}

.tree-image img {
    max-width: 100%;
    width: 700px;
    height: auto;
}

/* Text Boxes */
.tree-box {
    position: absolute;
    width: 350px;
    padding: 15px 20px;
    text-align: left;
    z-index: 3;
}

.tree-box h3 {
    background-color: #fded7e;
    padding: 8px 15px;
    border-radius: 3px;
    display: inline-block;
}

.tree-box p {
    font-size: 12px;
    font-weight: 100;
    line-height: 1.4;
}

/* Default (Desktop) */
.left-top {
    top: 0%;
    left: 0;
}

.left-middle {
    top: 50%;
    left: 0;
}

.left-bottom {
        bottom: -20%;
    left: 15%;
}

.right-top {
    top: 0%;
    right: 8%;
}

.right-middle {
    top: 30%;
    right: 0;
}

.right-bottom {
    bottom: 0%;
    right: 0%;
}

/* Laptop / Large Tablets */
@media (max-width: 1200px) {
    .left-top { top: 8%; left: 2%; }
    .left-middle { top: 25%; left: 2%; }
    .left-bottom { bottom: -20%; left: 10%; }
    .right-top { top: -5%; right: 2%; }
    .right-middle { top: 12%; right: 2%; }
    .right-bottom { bottom: 2%; right: 2%; }
}

/* Tablets */
@media (max-width: 992px) {
    .left-top { top: 5%; left: 0%; }
    .left-middle { top: 20%; left: 0%; }
    .left-bottom { bottom: -10%; left: 0%; }
    .right-top { top: 0; right: 5%; }
    .right-middle { top: 10%; right: 5%; }
    .right-bottom { bottom: 5%; right: 5%; }
}

/* Mobiles */
@media (max-width: 768px) {
    .left-top,
    .left-middle,
    .left-bottom,
    .right-top,
    .right-middle,
    .right-bottom {
        position: static;
        margin: 10px auto;
    }
}

/* Extra Small Mobiles */
@media (max-width: 480px) {
    .left-top,
    .left-middle,
    .left-bottom,
    .right-top,
    .right-middle,
    .right-bottom {
        position: static;
        margin: 5px auto;
    }
}

.tree-box .arrow {
    position: absolute;
    top: 30%;
}

.tree-box .arrow img {
    width: 100%;
    height: auto;
}

/* Position arrows */
.left-top .arrow { right: -220px; }
.left-middle .arrow { right: -100px; }
.left-bottom .arrow { right: -100px; }
.right-top .arrow { left: -100px; }
.right-middle .arrow { left: -100px; }
.right-bottom .arrow { left: -130px; }


/* Ladder Section */
.ladder-section {
    position: relative;
    z-index: 1;
}

/* Bottom Left Image */
.ladder-section::before {
    content: "";
    position: absolute;
    /* bottom: -100px; */
    left: 0;
    width: 500px;
    height: 500px;
    background: url(../img/bg/image3.png) no-repeat center center;
    background-size: contain;
    transform: translate(-60%, -30%) rotate(60deg);
    z-index: -1;
}

/* Top Right Image */
.ladder-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: url('../img/bg/image2.png') no-repeat center center;
    background-size: contain;
    transform: translate(60%, 0%);
    z-index: -1;
}

/* Activities */
.activity {
    position: relative;
    border-radius: 10px;
    z-index: 2;
}

.activity ul {
    list-style-type: disc;
    /* show dots */
    padding-left: 20px;
    /* thoda space for dots */
    margin: 0;
    /* reset unwanted margin */
}

.activity ul li {
    margin-bottom: 8px;
    /* spacing between items */
}


/* Activity overlay images */
.img-overlay-4 {
    position: absolute;
    bottom: -100px;
    left: 150px;
    z-index: 2;
    width: 320px;
    object-fit: none;
    transform: rotate(5deg);
    transform-origin: center;
}

.img-overlay-5 {
    position: absolute;
    bottom: -80px;
    z-index: 2;
    width: 320px;
    object-fit: none;
    /* transform: rotate(5deg); */
    transform-origin: center;
}

/* Overlay backgrounds */
.activity-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 700px;
    background: url('../img/bg/image1.png') no-repeat center center;
    background-size: contain;
    transform: translate(-10%, -30%) rotate(-67deg);
    z-index: -1;
}

.activity-right::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
    height: 800px;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, -25%) rotate(23deg);
    z-index: -1;
}

.activity-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 700px;
    background: url('../img/bg/image1.png') no-repeat center center;
    background-size: contain;
    transform: translate(-10%, -30%) rotate(67deg);
    z-index: -1;
}

.activity-left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 800px;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(-50%, -20%) rotate(23deg);
    z-index: -1;
}

/* -------------------- Responsive Styles -------------------- */




/* Tablets & below */
@media (max-width: 992px) {

    /* Tree Section */
    .tree-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .tree-box {
        position: relative;
        width: 100%;
        max-width: 320px;
        margin: 20px auto;
        text-align: center;
    }

    .tree-box .arrow {
        display: none;
    }

    .tree-image img {
        max-width: 350px;
    }

    .tree-title {
        font-size: 1.5rem;
    }

    /* Ladder Section */
    .ladder-section {
        padding: 60px 20px;
    }

    .ladder-section .card-content {
        text-align: center !important;
        margin: 20px 0;
    }

    .ladder-section .card-title {
        font-size: 1.2rem;
    }

    .ladder-section .card-desc {
        font-size: 0.95rem;
    }


    /* overlay images adjust */
    .img-overlay-4,
    .img-overlay-5 {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 20px auto;
        display: block;
        width: 80% !important;
        max-width: 100%;
        transform: rotate(10deg);
    }

    .about-para {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Newsletter buttons */

}

/* Small Mobile */
@media (max-width: 576px) {
    .tree-title {
        font-size: 24px;
    }

    .ladder-section .card-title {
        font-size: 18px;
    }

    .ladder-section .card-desc {
        font-size: 16px;
    }
}

/* What we think Css END */


/* Raga pages start */

.stats-box {
    background: #fff;
    padding: 20px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.stats-box:hover {
    transform: translateY(-5px);
}

.stats-box i {
    font-size: 40px;
    color: #aaa;
    /* icon color */
    margin-bottom: 15px;
    display: block;
}

.stats-box h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stats-box p {
    font-size: 16px;
    color: #555;
    margin: 0;
}


.our-course {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: cover; */
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 2;
}



/* Bottom Left Image */
.our-course::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0%;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image4.png) no-repeat center center;
    background-size: contain;
    transform: translate(50%, 0%) rotate(-108deg);
    z-index: -1;
}

/* Top Right Image */
.our-course::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 500px;
    background: url(../img/bg/image2.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, 0%);
    z-index: -1;
}


.our-course-raga {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center top;
    /* background-size: cover; */
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 2;
}



/* Bottom Left Image */
.our-course-raga::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image2.png) no-repeat center center;
    background-size: contain;
    transform: translate(50%, 0%) rotate(-108deg);
    z-index: -1;
}

/* Top Right Image */
.our-course-raga::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image4.png) no-repeat center center;
    background-size: contain;
    transform: translate(-50%, 0%);
    z-index: -1;
}



.learning-section {
    position: relative;
    z-index: 2;
}


/* Bottom Left Image */
.learning-section::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image1.png) no-repeat center center;
    background-size: contain;
    transform: translate(45%, 0%) rotate(-108deg);
    z-index: -1;
}

/* Top Right Image */
.learning-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 600px;
    background: url(../img/bg/image4.png) no-repeat center center;
    background-size: contain;
    transform: translate(-40%, 30%);
    z-index: -1;
}


.learning-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid var(--CoolGray-20, #DDE1E6);
    background: var(--Default-White, #FFF);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learning-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

/* Flex container for icon + text */
.learning-header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* spacing between icon and text */
    margin-bottom: 15px;
}

.learning-text h5 {
    font-weight: 600;
}

.learning-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #EDE7F6;
    /* light purple */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.learning-icon img {
    width: 24px;
    height: 24px;
}

.subtitle {
    color: #777;
    display: block;
    margin-bottom: 10px;
}

.learning-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.learning-card ul li {
    /* margin-bottom: 8px; */
    position: relative;
    padding-left: 20px;
    line-height: 250%;
}

.learning-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #000000ff;
    font-size: 14px;
}



.raga-activity-section {
    position: relative;
    background: url('../img/bg/main-mini-bg.png') no-repeat center center;
    background-size: cover;
    /* height: 100vh; */
    border-radius: 10px;
    z-index: 2;
}


/* Bottom Left Image */
.raga-activity-section::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image1.png') no-repeat center center;
    background-size: contain;
    transform: translate(20%, -10%) rotate(-60deg);
    z-index: -1;
}

/* Top Right Image */
.raga-activity-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg/image3.png') no-repeat center center;
    background-size: contain;
    transform: translate(40%, 30%);
    z-index: -1;
}

/* Raga Pages end */