@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
    --fontSize: 16px;
    --primaryColor: #011d42;
    --secenderyColor: #c9d209;
    --whiteColor: #ffffff;
    --blackColor: #011d42;
    --thirdcolor:#535353;
    --paragraphColor: #535353;
    --transition: .5s;
}

body {
    overflow-y: auto; /* Prevent vertical scrolling */
    overflow-x: hidden;   /* Allow horizontal scrolling */
    color: var(--paragraphColor);
    font-weight: 400;
    font-size: var(--fontSize);
    font-family: 'Poppins', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--blackColor);
    font-family: 'Poppins', sans-serif;
}

a {
    transition: var(--transition);
    color: var(--blackColor);
    outline: 0 !important;
}
a:hover {
    color: var(--primaryColor);
}


.bg-custom {
    background-color: #011d42 !important;
}

.navbar-nav{
    color: black !important;
}



/*    Menu css */

@media (min-width: 1200px) {
    padding-left: 182px !important;
}

@media (min-width: 1400px) {
    padding-left: 182px !important;
}
 .top-header-area {
     background-color: var(--blackColor);
     padding-top: 10px;
     padding-bottom: 10px;
 }
.top-header-area .container-fluid {
    max-width: 1680px;
    padding-left: 67px;
    padding-right: 30px;
}
.top-header-list ul li:last-child, .top-header-social-list ul li .pages-link li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.top-header-list ul li a {
    color: #fff !important;
}
.top-header-list ul li:last-child a i {
    top: 3px;
    color: white;
}



.top-header-list ul li a i {
    font-size: 16px;
    margin-right: 7px;
}
.text-end {
    text-align: right !important;
}

.top-header-social-list ul li .pages-link li a {
    font-size: 15px;
    line-height: 1;
    color: #ffff !important;
}

.top-header-social-list ul li .pages-link li {
    margin-right: 6px;
    padding-right: 12px;
}

.top-header-social-list ul li .pages-link li:not(:last-child)::before {
    top: 3px;
    right: 0;
    width: 1px;
    height: 20px;
    content: "";
    position: absolute;
    background-color: rgb(215 218 223 / 65%);
}
@media screen and (max-width: 767px) {
    .top-header-area {
        display: none;
    }
}


/*  Navigation Bar */
.nav-item {
    margin-right: 20px;
}
.navbar-brand img {
    width: 250px !important;
}

 .navbar {
     width: 100%;
     height: 101px;
     padding: 30px 80px;

 }

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(255, 255, 255);
    background-color: #011d42;
    border-radius: 5px;
}

.navbar-nav .nav-link:hover {
    color: rgb(255, 255, 255);
    background-color: #011d42;
    border-radius: 5px;
}

.bg-light {
    background-color: rgb(255, 255, 255) !important;
}

@media screen and (max-width: 767px) {
    .navbar {
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .navbar-brand img{
        width: 214px !important;
        padding: 10px;
    }

    .navbar .navbar-brand {
        margin: 0 auto;
        width: 250px;
        height: 83px;
        flex: none;
        flex-grow: 0;
        order: 0;
    }
}


/* Footer Widget*/

 .footer-area {
     background-color: #011d42 !important;
     margin-top: 50px;
     padding-top: 50px;
 }
.ri-arrow-right-double-fill {
    color: white;
}
.single-footer-widget ul li a {
    color: #fff !important;
    line-height: 31px;
}
.single-footer-widget ul li a:hover {
    color: #c9d209 !important;

}


.desktop-only {
    display: none;  /* Hide by default */
}

@media (min-width: 768px) { /* Target tablets and desktops */
    .desktop-only {
        display: block;  /* Show on tablets and desktops */
    }



}
.mobile-only {
    display: block;  /* Show by default */
}

@media (min-width: 767px) { /* Target tablets and desktops */
    .mobile-only {
        display: none;  /* Hide on tablets and desktops */
    }


}

@media (max-width: 767px) {
    .footer-area {
        background-color: #011d42 !important;
    }

    .copyright-area {
        margin-left: 0 !important;
    }
    .copyright-title p{
        color: #011d42;
        font-size: 13px;
        margin-top: 5px;
    }
    .social {
        display: flex;
        grid-gap: 10px;
    }
    .justify-content-center {
        justify-content: center !important;
    }

    .fa-brands, .flaticon-instagram, .flaticon-twitter {
        color: #fff;
        font-size: x-large;
        margin: 10px;
    }
    .social h6 {
        padding-left: 24px;
    }
}

.single-footer-widget ul.social-link li a i {
    margin-right: 0;
    color: #ccd408;
}


.single-footer-widget ul.social-link li a i {
    margin: 4px;
    color: #ccd408;
    text-align: center;
    font-size: 22px;
}
.copyright-area {
    padding-top: 15px;
    padding-bottom: 15px;
}



/* Banner */


.home-banner {
    height: 859px;
    background: radial-gradient(77.26% 247.83% at 10.28% 29.85%, #FFFFFF 0%, #E5F1C6 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    width: 100%;
}

.left-panel-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    position: absolute;
    width: 100%;
    height: 349px;
    top: 306px;
}
.left-panel-banner h1 {
    width: 568px;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 54px;
    display: flex;
    align-items: center;
    text-align: justify;
    color: #011D42;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.left-panel-banner p {
    width: 471px;
    height: 54px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    display: flex;
    align-items: center;
    text-align: justify;
    color: #011D42;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.request-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    gap: 8px;
    width: 260px;
    height: 59px;
    background: #B5D04A;
    border: 2px solid #011D42;
    border-radius: 4px;
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 9;
}

.vector-section {

    /* Vector 151 */

    position: absolute;
    width: 100%;
    height: 369px;
    left: calc(50% - 1436px/2 + 2px);
    top: 625px;
}

.banner-image{
    position: absolute;
    top: 170px;
    z-index: 9;
    width: 653px;
}

.responsive-img{
    max-width: 100%;  /* Ensures the image scales within its container */
    height: auto;     /* Maintains aspect ratio */
    display: block;   /* Removes extra space below the image */
}

.text {
    flex: 1; /* Takes available space */
    min-width: 250px; /* Prevents text from shrinking too much */
}


.canada {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2.86593px 7.16483px;
    gap: 7.16px;
    position: absolute;
    width: 157.63px;
    height: 53.74px;
    right: 527px;
    top: 84px;
    background: #FFFFFF;
    border-radius: 5.73187px;
    z-index: 9;
}

.canada img {
    width: 48px;
    height: 48px;
    background: #011D42;
    border: 0.716483px solid #011D42;
    border-radius: 71.6484px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.canada span {
    width: 72px;
    height: 26px;
    font-style: normal;
    font-weight: 600;
    font-size: 17.1956px;
    line-height: 26px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}


.singapore {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2.86593px 7.16483px;
    gap: 7.16px;
    position: absolute;
    width: 157.63px;
    height: 53.74px;
    right: 526px;
    top: 442px;
    background: #FFFFFF;
    border-radius: 5.73187px;
    z-index: 9;
}

.singapore img {
    width: 48px;
    height: 48px;
    background: #011D42;
    border: 0.716483px solid #011D42;
    border-radius: 71.6484px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.singapore span {
    width: 72px;
    height: 26px;
    font-style: normal;
    font-weight: 600;
    font-size: 17.1956px;
    line-height: 26px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}


.australia {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2.86593px 7.16483px;
    gap: 7.16px;
    position: absolute;
    width: 157.63px;
    height: 53.74px;
    right: 505px;
    top: 735px;
    background: #FFFFFF;
    border-radius: 5.73187px;
    z-index: 9;
}

.australia img {
    width: 48px;
    height: 48px;
    background: #011D42;
    border: 0.716483px solid #011D42;
    border-radius: 71.6484px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.australia span {
    width: 72px;
    height: 26px;
    font-style: normal;
    font-weight: 600;
    font-size: 17.1956px;
    line-height: 26px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}


.uk {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2.86593px 7.16483px;
    gap: 7.16px;
    position: absolute;
    width: 157.63px;
    height: 53.74px;
    right: 94px;
    top: 122px;
    background: #FFFFFF;
    border-radius: 5.73187px;
    z-index: 9;
}

.uk img {
    width: 48px;
    height: 48px;
    background: #011D42;
    border: 0.716483px solid #011D42;
    border-radius: 71.6484px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.uk span {
    width: 72px;
    height: 26px;
    font-style: normal;
    font-weight: 600;
    font-size: 17.1956px;
    line-height: 26px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}


.usa {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2.86593px 7.16483px;
    gap: 7.16px;
    position: absolute;
    width: 157.63px;
    height: 53.74px;
    right: 48px;
    top: 254px;
    background: #FFFFFF;
    border-radius: 5.73187px;
    z-index: 9;
}

.usa img {
    width: 48px;
    height: 48px;
    background: #011D42;
    border: 0.716483px solid #011D42;
    border-radius: 71.6484px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.usa span {
    width: 72px;
    height: 26px;
    font-style: normal;
    font-weight: 600;
    font-size: 17.1956px;
    line-height: 26px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.desktop-only {
    display: none;  /* Hide by default */
}

@media (min-width: 768px) { /* Target tablets and desktops */
    .desktop-only {
        display: block;  /* Show on tablets and desktops */
    }



}
.mobile-only {
    display: block;  /* Show by default */
}

@media (min-width: 767px) { /* Target tablets and desktops */
    .mobile-only {
        display: none;  /* Hide on tablets and desktops */
    }


}

@media (max-width: 767px) {
    .container-fluid.mobile-only.banner {
        max-width: 100%;
        background: radial-gradient(77.26% 247.83% at 10.28% 29.85%, #FFFFFF 0%, #E5F1C6 100%) !important;
        height: 864px;
        padding-bottom: 30px;
        padding-top: 20px;
    }


    .left-panel-section {


    }

    br {
        display: none;
    }
    .left-panel-section h1 {
        margin-top: 20px;
        width: 100%;
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 29px;
        display: flex;
        text-align: left !important;
        color: #011D42;
        flex: none;
        flex-grow: 0;
        order: 0;
        word-wrap: break-word;
        word-break: break-word;

    }

    .left-panel-section p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        width: 100%;
        height: 36px;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        align-items: center;
        text-align: left !important;
        color: #011D42;
    }

    .request-button {
        margin-top: 65px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px 32px;
        gap: 8px;
        width: 260px;
        height: 59px;
        background: #B5D04A;
        border: none;
        border-radius: 4px;
        flex: none;
        flex-grow: 0;
        order: 1;
        z-index: 9;
    }
}



/* About Section */


 .about-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
     gap: 12px;

     position: absolute;
     width: 1092px;
     height: 204px;
     left: calc(50% - 1092px/2);
     top: 948px;
     border-radius: 20px;
     background-color: #B5D04A;
     text-align: center;
 }
.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1052px;
    margin: auto;
    background: #B5D04A;
    border: 1px solid #EBF6C9;
}


.divider {
    width: 1px;
    background: #ccc;
    height: 60px;
    border: 1px solid #FFF;
}
.about-box-1,.about-box-2,.about-box-3 p {
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    letter-spacing: 0.2px;
    color: #011D42;

}

.about-section h2 {
    font-size: 24px;
    font-weight: 500;
    color: #011D42;
}

.img-div {
    width: 72px;
    height: 72px;

}

.text-details-1 {
    width: 137px;
    height: 45px;
}

.text-details-2 {
    width: 254px;
    height: 45px;

}

.text-details-3 {
    width: 231px;
    height: 23px;

}
.about-box-1 {
    display: flex;
    align-items: center;
    flex: 1;
    width: 265px;
    height: 116px;
    max-width: 360px;
    border-radius: 8px;
    gap: 4px;
    padding: 22px 12px;

}

.about-box-2 {
    display: flex;
    align-items: center;
    width: 360px;
    height: 116px;
    max-width: 360px;
    border-radius: 8px;
    gap: 4px;
    padding: 22px 12px;
}

.about-box-3 {
    display: flex;
    align-items: center;
    width: 339px;
    height: 116px;
    max-width: 360px;
    border-radius: 8px;
    gap: 4px;
    padding: 22px 12px;
}
.desktop-only {
    display: none;  /* Hide by default */
}

@media (min-width: 768px) { /* Target tablets and desktops */
    .desktop-only {
        display: block;  /* Show on tablets and desktops */
    }



}
.mobile-only {
    display: block;  /* Show by default */
}

@media (min-width: 767px) { /* Target tablets and desktops */
    .mobile-only {
        display: none;  /* Hide on tablets and desktops */
    }
}


@media (max-width: 767px) {
    .about-section-mobile{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 12px;
        gap: 12px;

        position: absolute;
        width: 343px;
        height: 374px;
        left: calc(50% - 343px/2);
        top: 887px;
        /* Primary/Green-100 */
        background: #B5D04A;
        border-radius: 20px;


    }

    .about-section-mobile h2{
        /* About Resonance Global Studies */

        width: 100%;
        height: 24px;
        font-style: normal;
        font-weight: 700;
        font-size: 19px;
        line-height: 24px;
        color: #011D42;
    }

    .about-mobile-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 4px;
        gap: 8px;

        width: 319px;
        height: 290px;

        /* Primary/Green-5 */
        border: 1px solid #EBF6C9;
        border-radius: 8px;

        /* Inside auto layout */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

    }

    .mobile-box-1{


        /* div.TeachersSection_single-teacher-quality__2MZCU */

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 4px;
        gap: 4px;

        width: 257px;
        max-width: 360px;
        height: 58px;

        /* Primary/Green-100 */
        background: #B5D04A;
        border-radius: 8px;

        /* Inside auto layout */
        flex: none;
        order: 0;
        flex-grow: 0;

    }
    .img-div {


    }
    .mobile-box-2{
        /* div.TeachersSection_single-teacher-quality__2MZCU */

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 4px;
        gap: 4px;

        width: 291px;
        max-width: 360px;
        height: 80px;

        /* Primary/Green-100 */
        background: #B5D04A;
        border-radius: 8px;

        /* Inside auto layout */
        flex: none;
        order: 2;
        flex-grow: 0;

    }

    .mobile-box-3{
        /* div.TeachersSection_single-teacher-quality__2MZCU */

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 4px;
        gap: 4px;

        width: 311px;
        max-width: 360px;
        height: 56px;

        /* Primary/Green-100 */
        background: #B5D04A;
        border-radius: 8px;

        /* Inside auto layout */
        flex: none;
        order: 4;
        align-self: stretch;
        flex-grow: 0;
        padding-top: 45px;
        padding-left: 15px;
    }

    .mobile-box-1 p {

    }
    .line-1{
        /* Line 3 */

        width: 311px;
        height: 0;

        /* Neutral/White-100 */
        border: 1px solid #FFFFFF;
        transform: rotate(-180deg);

        /* Inside auto layout */
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;

    }

    .line-2{
        width: 311px;
        height: 0;
        border: 1px solid #FFFFFF;
        transform: rotate(-180deg);

        /* Inside auto layout */
        flex: none;
        order: 3;
        align-self: stretch;
        flex-grow: 0;


    }


    .img-div img{
        /* Frame 14 */

        width: 54px;
        height: 54px;


        /* Inside auto layout */
        flex: none;
        order: 0;
        flex-grow: 0;

    }

    .mobile-details-1 p {
        height: 42px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        display: flex;
        align-items: center;
        color: #011D42;

    }

    .mobile-details-2 p {
        height: 42px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        display: flex;
        align-items: center;
        color: #011D42;
        padding-top: 10px;
    }

}
.mobile-details-3 p {
    height: 42px;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 21px;
    display: flex;
    color: #011D42;
    text-align: left;

}



/* About Section*/


 .details-sections {
     padding: 80px 20px;
     width: 100%;
     background: #F2F5EB;
     text-align: left;
 }
.right-side-texts h2{
    font-size: 34px;
    color: #011d42;
    font-weight: 600;
    margin-top: 54px;
}


.right-side-texts p{
    color: #000;
    font-size: 18px;
    font-weight: 400;
}


.right-side-text h2 {
    /* Resonance: Guiding ambitious minds towards their global aspirations */
    margin-top: 35px;
    width: 581px;
    height: 72px;

    /* Heading/H-7 */
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    display: flex;
    text-align:  left;

    /* Secondary/Blue-100 */
    color: #011D42;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.right-side-text p {
    /* The world is a vast classroom, and there’s no reason to limit your learning to one corner. Driven by the spirit of imagination and innovation, today’s young minds are ready to step beyond familiar boundaries and immerse themselves in new cultures, ideas, and opportunities. For those eager to start their global educational journey from their Undergraduate years, Resonance Global is a trusted guide to help them navigate the road ahead. 
The reliability and quality of Resonance Global stems from the solid foundation and legacy of Resonance, which has stood as a beacon of academic excellence for over two decades. What began as a modest coaching centre in Kota, Rajasthan in 2001, founded by the visionary Mr. R.K. Verma has evolved into one of India’s most trusted names in education. The institution’s growth from a regional institution to a national giant stands as a testament to the exceptional quality of education it imparts. With R.K. Verma's leadership, Resonance has not only mentored over 1 million students, but also continues to uphold its mission of transforming lives through education. The core of Resonance’s success lies in its dedicated and highly-skilled faculty, comprising some of the country's most accomplished educators, whose expertise spans across various disciplines. The systematically-developed study programs offered at Resonance ensure that students are not only well-prepared for exams but also equipped with skills that last a lifetime. This commitment to excellence is reflected in the institution’s stellar track record of placing over 15,000 students in top-tier universities both within India and internationally. */

    width: 581px;
    height: 356px;

    /* Body/B-1 */
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: left;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 1;

}
.read-more-button:hover {
    color: #011d42;
    background: #B5D04A;
}


.read-more-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 32px;
    gap: 10px;
    height: 52px;
    background: #011D42;
    border-radius: 4px;
    color: white;
    flex: none;
    flex-grow: 0;
    order: 1;
    margin-top: 0;
    width: 153px;
    text-decoration: none;

}
.read-more-button p {
    /* Label */

    width: 89px;
    height: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height */
    display: flex;
    align-items: center;
    text-align: center;

    /* Neutral/White-100 */
    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}


.left-side-text{
    /* Frame 27 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;

    width: 560px;
    height: 533px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;

}


.left-side-text h2 {
    /* Think global, think Resonance! */

    width: 560px;
    height: 36px;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    /* identical to box height */
    display: flex;
    align-items: center;

    /* Secondary/Blue-100 */
    color: #011D42;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}


.left-side-text p {
    /* With Resonance Global, success won’t just come from our country, but also from stories on a national level in your mind, but also on a global stage. As the landscape of education becomes increasingly globalised, Resonance recognised the need to provide students with opportunities beyond borders. In response, the Resonance Global Division was established to cater to the growing demand for international education. This division provides students with the teaching, tools, resources, and support needed to succeed in a range of globally recognized standardized tests such as the SAT, IELTS, and AP. With a focus on preparing students not just for competitive exams in India but also for the rigorous demands of international academic institutions, the Resonance Global Division has created a pathway that enables its students to be well-prepared for a globalised career. */

    width: 560px;
    height: 405px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: left;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}


@media (max-width: 768px) {
    .details-sections {
        background: #F2F5EB;
        padding: 20px;
    }

    .right-side-texts h2 {
        font-size: 22px;
        color: #011d42;
        font-weight: 600;
        margin-top: 25px;
    }

    .right-side-texts p {
        font-size: 16px;
        font-weight: 400;
        text-align: justify;
    }

    .container.details-sections {
        margin-top: 337px !important
    }
}




/*  Careers section */
.accordion-button.collapsed:hover:active:focus:focus-visible {
    --bs-accordion-btn-focus-border-color: #f0f3e9 !important;
}
.career-sections {
    height: 812px;
    background: #F2F5EB;
    margin-top: 60px;
}


.career-title {
    /* Double your career opportunities with Resonance Global Studies. */
    height: 53px;

    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 53px;
    /* identical to box height, or 166% */
    align-items: center;
    text-align: center;

    /* Secondary/Blue-100 */
    color: #011D42;
    margin-top: 50px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}



.dot-line {
    position: absolute;
    width: 1436px;
    height: 369px;
    left: calc(50% - 1436px / 2 + 2px);
    top: 2942px;
}


.card-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 18px;
    gap: 8px;
    height: 400px;
    position: absolute;
    width: 264px;
    left: calc(50% - 264px/2);
    top: 188px;
    background: #ffffff;
    border-radius: 14px;
}

.card :hover{
    background: #B5D04A;
}

.card-body h5 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    color: #011D42;
}


.card-body p {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
}



.card {
    background-color: #f2f5eb;
    border: none;
}



.career-opportunitys {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 40px;

}

.career-boxess.row {
    z-index: 9;
}

@media screen and (max-width: 767px) {
    .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 18px;
        gap: 8px;
        position: absolute;
        width: 300px;
        height: 337px;
        left: calc(50% - 300px/2);
        top: 188.5px;
        background: #ffffff;
        border-radius: 14px;
    }
    .card{
        height: 550px;
    }

    .dot-line{
        display: none;
    }

    .career-sections {
        height: auto;
        margin-top: 60px;
    }

    .career-title.text-center h2{
        font-size: 22px;
    }

    .points li {
        font-size: 15px;
    }
}


/*  International Hubs */




.international-education {
    position: relative;
    width: 1280px;
    height: 679px;
    top: 0;
    left: calc(50% - 1280px/2);
    background: #F2F5EB;
    margin-top: 40px;
}




.world-map h2 {
    padding-top: 35px;
    /* International Education Hubs */
    margin-top: 60px;
    height: 54px;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    /* identical to box height */
    align-items: center;
    text-align: center;

    /* Secondary/Blue-100 */
    color: #011D42;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;

}


.countries {


    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 20px;
    gap: 40px;

    height: 730px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;


}


.world-map img {
    /* Vector */

    position: absolute;
    width: 350.82px;
    height: 26px;
    left: calc(50% - 350.82px/2 + 1.41px);
    top: 95px;
    transform: rotate(-2.06deg);

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;

}


.world-box {
    /* Frame 121 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 4px;

    width: 326px;
    height: 200px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 9;

}


.world-box p {

    width: 310px;
    height: 48px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}


.world-box a {
    /* Read more */

    width: 79px;
    height: 21px;

    /* Body/B-3 */
    text-decoration: none;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
    display: flex;
    align-items: center;
    text-align: justify;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;
    margin-top: 10px;

}



/* Media Query for Smaller Screens */
@media (max-width: 767px) {


    .world-map img {
        position: absolute;
        width: 350.82px;
        height: 26px;
        left: calc(50% - 350.82px/2 + 1.41px);
        top: 112px;
        transform: rotate(-2.06deg);
        flex: none;
        flex-grow: 0;
        order: 2;
        z-index: 2;
    }
    .countries {
        grid-template-columns: 1fr; /* Single column for mobile */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        padding: 20px;
        gap: 40px;
        height: auto;
    }


    .international-education {
        position: relative;
        width: 100%;
        height: 1403px;
        left: 0;
        background: #F2F5EB;
        padding-bottom: 40px;
    }

    .world-map {
        margin-bottom: 100px !important;
    }
    .world-map h2 {
        padding-top: 7px;
    }
}

.desktop-only {
    display: none;  /* Hide by default */
}

@media (min-width: 768px) { /* Target tablets and desktops */
    .desktop-only {
        display: block;  /* Show on tablets and desktops */
    }



}
.mobile-only {
    display: block;  /* Show by default */
}

@media (min-width: 767px) { /* Target tablets and desktops */
    .mobile-only {
        display: none;  /* Hide on tablets and desktops */
    }


}



/* success stories section*/


.success-stories {
    /* Frame 132 */
    width: 1280px;
    height: 606px;
    left: calc(50% - 1280px/2);
    background: #F2F5EB;
    margin-top: 80px;
}

.small-heading {
    height: 27px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    display: flex;
    align-items: center;
    color: #000000;
    padding-top : 46px;
    padding-left: 16px;
}

.success-stories-title h6 {
    width: 550px;
    height: 106px;
    top: 71px;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 53px;
    display: flex;
    align-items: center;
    color: #000000;
    padding-top : 46px;
    padding-left: 16px;
}

.stories-slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 20px;
    position: absolute;
    width: 1096px;
    height: 385px;
    left: calc(50% - 1096px/2);
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    /* Frame 134 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 26px;

    width: 344px;
    height: 385px;

    background: #FFFFFF;
    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Custom Navigation Buttons */
.custom-swiper-button {
    position: relative;
    top: 33%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
}

.custom-swiper-prev {
    left: 17px; /* Adjust the position */

}

.custom-swiper-next {
    right: -1154px; /* Adjust the position */
}

.card-img-up{
    /* Frame 138 */

    width: 312px;
    height: 280px;

    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.card-img-up img{
    /* Frame 90 */

    position: absolute;
    width: 218px;
    height: 233px;
    top: 31px;
    border-radius: 100px;


}

.card {
    border-color: white;
}

.card-title-1 {
    width: 242px;
    height: 30px;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;

    display: flex;
    align-items: center;

    color: #000000;



    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.card-text-1 {

    width: 212px;
    height: 21px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;

    display: flex;
    align-items: center;

    color: #000000;



    flex: none;
    order: 1;
    flex-grow: 0;

}
@media (max-width: 767px) {
    .success-stories {
        position: relative;
        width: 100%;
        height: 606px;
        left: 0;
        top: 0;
        background: #F2F5EB;
        margin-top: 35px;

    }
    .small-heading {
        position: static;
        width: 100%;
        height: 27px;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 27px;
        display: flex;
        align-items: center;
        color: #000000;
        padding-top: 50px;
    }
    .success-stories-title h6 {
        width: 100%;
        height: 66px;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 35px;
        display: flex;
        align-items: center;
        color: #000000;
        padding-top: 38px;
        text-align: left;
    }

    .stories-slider {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        position: initial;
        width: 100%;
        height: 404px;
        padding-left: 33px;
        padding-right: 33px;
        padding-top: 35px;
    }
    .card-img-up img {
        position: absolute;
        width: 218px;
        height: 233px;
        left: 27px;
        top: 31px;
        border-radius: 100px;
    }
    .card-title-1 {
        width: 100%;
        height: 30px;
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        display: flex;
        align-items: center;
        color: #000000;
    }


    /* Custom Navigation Buttons */
    .custom-swiper-button {
        position: absolute;
        top: 53%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;
        width: 40px;
        height: 40px;
    }

    .custom-swiper-prev {
        left: 2px; /* Adjust the position */

    }

    .custom-swiper-next {
        right: 1px; /* Adjust the position */
    }
    .card-img-up {
        display: flex;
        justify-content: center;
    }
}


.card-img-up {
    display: flex;
    justify-content: center;
}



/* testimonials section */
.testimonials-section {
    width: 1280px;
    height: 465px;
    background: #F2F5EB;
    margin-top: 50px;
    position: relative;
}

.left-section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 12%;
    padding-left: 20px;
}



.left-section h5 {
    width: 410px;
    height: 27px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    display: flex;
    align-items: center;
    color: #011D42;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.left-section h2 {
    /* What Students Think and Say about Resonance */

    width: 410px;
    height: 107px;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 53px;
    /* or 166% */
    align-items: center;

    /* Secondary/Blue-100 */
    color: #011D42;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}


.vector-image-1 {
    position: relative;
    width: 183px;
    height: 26px;
    left: 175px;
    top: 127px;
    transform: rotate(-1.79deg);
}


.right-section{
    position: relative;
    width: 656px;
    height: 286px;
    left: 549px;
    top: -241px;
}

.highlight {
    color: #B5D04A; /* Change this to your preferred color */
}
.carousel-container {
    position: relative;
    width: 571px;
    height: 286px;
    border-radius: 20px;
}

.swiper-slide {
    border-radius: 0;

}
.custom-swiper-button-1 {
    position: absolute;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    margin-top: -115px
}

.custom-swiper-prev-1 {
    left: 542px; /* Adjust the position */

}

.custom-swiper-next-1 {
    right: 17px; /* Adjust the position */
}

.background-image {
    position: absolute;
    top: 17px;
    right: 9px;
}


.slider-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;

    position: absolute;
    width: 446px;
    height: 217px;
}

.slider-text-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 446px;
    height: 138px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}


.slider-text-box h8 {
    /* Testimonials Title and heading */

    width: 100%;
    height: 30px;

    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    /* identical to box height */
    display: flex;
    align-items: center;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}


.slider-text-box p {
    width: 100%;
    height: 104px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}


.slider-image-box {
    /* Frame 92 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;

    width: 211px;
    height: 55px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.slider-image-box img{
    position: absolute;
    bottom: -34px;
    width: 54px;
    height: 54px;
    border-radius: 100px;
    flex: none;
    order: 0;
    flex-grow: 0;

}

.slider-image-box .text-display{
    /* Frame 91 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 147px;
    height: 55px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    position: absolute;
    right: 222px;
    bottom: -38px;
}

.text-display h8 {
    /* Student Name */

    width: 300px;
    height: 30px;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    /* identical to box height */
    display: flex;
    align-items: center;

    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.text-display p{
    width: 300px;
    height: 21px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
    display: flex;
    align-items: center;
    color: #000000;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

@media (max-width: 767px) {
    .slider-text-box {
        width: 100%;
    }
    .slider-text-box p {
        width: 250px;
        height: 104px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }
    .text-display h8 {
        /* Student Name */

        width: 300px;
        height: 30px;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 30px;
        color: #000000;
    }

    .text-display p{
        width: 100%;
        height: 21px;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 21px;
    }


    .testimonials-section {
        position: relative;
        width: 100%;
        left: 0;
        height: 665px;
        background: #F2F5EB;
    }
    .left-section {
        width: 100%;
        height: 134px;
        position: relative;
        left: 0;
        padding: 10px;
        margin-top: 20px;
        top: 0;
    }
    .left-section h2 {
        width: 100%;
        font-size: 28px !important;
        line-height: 37px;
    }
    .left-section h5 {
        width: 100%;

    }
    .vector-image-1 {
        position: relative;
        width: 183px;
        height: 26px;
        left: 0;
        top: 128px;
        transform: rotate(-1.79deg);
    }

    .slider-text-box h8 {
        width: 100%;
        height: 30px;
        font-style: normal;
        font-weight: 600;
        font-size: 19px;
        line-height: 30px;
        word-wrap: break-word;     /* Legacy, but still works */
        overflow-wrap: break-word; /* Modern */
        overflow: hidden;
    }






    .carousel-container {
        position: relative;
        width: 100%;
        height: 409px;
        border-radius: 20px;
        margin-top: 40px;
    }

    .right-section {
        position: relative;
        width: 100%;
        height: 286px;
        left: 0;
        top: 0;
        padding: 36px;
    }

    .swiper-slide {
        border-radius: 20px;
        width: 100%;
    }

    .background-image {
        position: absolute;
        top: 88px;
        right: 22px;
        height: 389px;
        width: 250px;
    }

    .slider-image-box img {
        position: absolute;
        bottom: -162px;
        width: 54px;
        height: 54px;
        border-radius: 100px;
    }
    .text-display {
        position: absolute !important;
        bottom: -155px !important;
        right: 235px !important;
    }



    .custom-swiper-next-1 {
        right: 8px;
    }

    .custom-swiper-prev-1 {
        left: 8px;
    }
    .custom-swiper-button-1 {
        position: absolute;
        top: 84%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;
        width: 34px;
        height: 34px;
    }


}




/* Awards section */

.awards{
    position: relative;
    height: 422px;
    left: 0;
    right: 0;
    background: #011D42;
    margin-top: -67px;
}
.slider-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}


.awards-title h6{
    position: absolute;
    width: 100%;
    height: 53px;
    top: 36px;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 53px;
    display: flex;
    align-items: center;

    color: #C9D209;
    z-index: 9999;

}


.slider-title {
    /* Frame 147 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;

    position: absolute;
    width: 751px;
    height: 137px;

}

.slider-title h6{

    left: -15px;
    position: absolute;
    width: 751px;
    height: 53px;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 53px;
    /* identical to box height, or 166% */
    display: flex;
    align-items: center;
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.slider-title p{

    position: absolute;
    left: -14px;
    top: 97px;
    width: 749px;
    height: 72px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.awards-carol {
    width: 1280px;
    height: 385px;
    margin-top: 119px;
}

.slider-image{
    /* Best Engineering Entrance Institute of the Year */
    position: absolute;
    width: 468.8px;
    height: 308.27px;
    border-radius: 30px;
    top: -52px;
    right: 0px;
}

.own-slide{
    top: 111px;
}

.swiper-pagination-bullet-active {
    background: #C9D209;
}


@media (max-width: 767px) {


    .awards-carol {
        width: 100%;
        height: 655px;
        margin-top: 119px;
    }

    .awards {
        position: relative;
        height: 672px;
        left: 0;
        right: 0;
        top: -10px;
        background: #011D42;
    }

    .awards-title h6 {
        position: absolute;
        width: 100%;
        height: 53px;
        top: 36px;
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 35px;
        display: flex;
        color: #C9D209;
        z-index: 9999;
        align-text: left;
        padding-bottom: 10px;
    }

    .slider-title h6 {
        left: -15px;
        position: absolute;
        width: 100%;
        height: 53px;
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 35px;
        display: flex;
        align-items: center;
        color: #FFFFFF;
        flex: none;
        order: 0;
        top: 0;
    }

    .slider-title p {
        position: absolute;
        left: -14px;
        top: 120px;
        width: 100%;
        height: 72px;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        display: flex;
        align-items: center;
        color: #FFFFFF;
    }


    .slider-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 12px;
        position: absolute;
        width: 100%;
        height: 137px;
    }

    .slider-image {
        position: absolute;
        width: 100%;
        height: auto;
        border-radius: 30px;
        top: 250px;
        right: 0;
    }
}