/* --------------Responsive section for max-width: 768px ------------- */
@media (max-width: 768px) {

    /* header and banner sec start */
    .hamburger {
        display: block;
        order: 2;
    }
.hero-content-h1 {
    font-size: var(--font-size-xl);
    line-height: 1.2;
    
    }
    .hero-content h1 {
        padding: 0 1em;
        text-align: center;
    }
    .sign-up-btn {
        order: 1;
        margin-left: 2em;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background-color: var(--primary-color);
        flex-direction: column;
        padding: 6rem 2rem 2rem;
        transition: right 0.3s ease;
        justify-content: flex-start;
        align-items: end;
    }

    .nav-links a {
        align-items: center;
        justify-content: end;
    }
    .header-nav-sec{
        padding: 0 .5em;
    }
    .nav-links.active {
        right: 0;
    }
    nav:has(.nav-links.active) .hamburger i {
        color: #ffffff;
        font-size: 2rem;
    }

    .blur-background::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(5px);
        z-index: 998;
        pointer-events: none;
      }
      .nav-links.active {
        z-index: 999;
        overflow-y: auto; 
        max-height: 100vh; 
      }

    .platforms-dropdown {
        width: 100%;
    }
    .home-banner-sec {
        background-position: center;
    }
    .dropdown-content {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        background-color: transparent;
        box-shadow: none;
        margin-top: 0.5rem;
        display: none;
    }

    .dropdown-content.show {
        display: block;
    }

    .dropdown-content a {
        color: var(--white) !important;
    }

    .hero {
        margin: 2rem auto;
        padding: 0 1rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: calc(var(--font-size-xxl) * 0.6);
    }

    /* header and banner sec end */





    /* home-cards-grid sec start */
    .home-cards-grid {
        grid-template-columns: 1fr;
    }

    .home-card {
        height: 250px;
    }

    .home-card-content {
        padding: 1.5rem;
    }

    .learn-smart-container {
        margin: 2em 1em;
    }

    .home-card-title {
        margin-bottom: 0.2em;
    }

    /* home-cards-grid sec end */








    /* partner-products-grid sec start */
    .partner-products-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .partner-products {
        margin-top: 1em;
    }

    .partner-container {
        padding: 1rem;
    }

    .partner-products h2 {
        /* font-size: var(--font-size-lg); */
    }

    .partner-products p {
        font-size: var(--font-size-sm);
    }
    .partner-product-title{
        width: 100%;
    }
    /* partner-products-grid sec end */






    /*market-container table sec start  */
    .market-container {
        padding: 10px;
        margin: 20px auto;
    }

    .market-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .market-tabs {
        gap: 8px;
        margin-bottom: 24px;
    }

    .market-tab {
        padding: 8px 16px;
        font-size: 12px;
    }

    .market-container {
        padding: 10px;
        margin: 20px auto;
    }

    .market-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .market-tabs {
        gap: 8px;
        margin-bottom: 24px;
    }

    .market-tab {
        padding: 8px 16px;
        font-size: 12px;
    }

    .no-data {
        line-height: 1.5em;
        font-size: 0.8em;
        border-radius: 8px;
        margin: 10px 0;
        border: 2px dashed var(--secondary-color);
    }

    /*market-container table sec end  */



    /* making-difference sec start */

    .making-difference {
        flex-direction: column;
        padding: 5px 20px;
        gap: 1.5em;
    }

    .making-difference-image {
        order: -1;
        max-width: 100%;
    }

    .making-difference-title {
        /* font-size: 24px; */
        text-align: center;
    }

    .making-difference-button {
        display: block;
        margin: 0 auto;
    }

    /* making-difference sec end */


    /* trade-card-sec stepper sec start*/
    .header__container {
        padding: 1rem;
    }

    .header__title {
        margin-top: 1em;
    }

    .steps__container {
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
        margin-top: 1em;
    }

    .steps__item {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }

    .steps__number {
        margin-bottom: 0;
        width: 30px;
        height: 30px;
    }

    .trade-card-sec {
        padding: 0em 0em 2em;
    }

    .main__phone img {
        height: auto;
    }
    .main__phone {
    width: auto;
    height: auto;
}
    .steps__arrow {
        width: 2px;
        height: 31px;
        right: auto;
        top: 101%;
        bottom: -25px;
        left: 28px;
    }


    /* trade-card-sec stepper sec end*/

    /* Platform Section  start -------------*/

    .actions__button {

        padding: 0.75rem 1rem;
    }

    .platform__title {
        margin-top: 0.5em;
    }

    .platform__container {
        flex-direction: column;
        gap: 1em;
        padding: 1rem 2em 0;
    }

    .preview__shadow--1 {
        width: 5em;
        right: 35%;
        height: 7em;
        transform: translate(-50%, -10%);
    }

    .platform__header {
        text-align: center;
        margin: 1em 0;

    }

    .platform__content {
        padding: 1rem 0;
    }
    .features__list {
        margin: 1em 0;
    }
    .platform__content__img_section {
        gap: 0;
        flex-direction: column;
    }
    
    .preview__container {
        min-height: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .preview__phone {
        position: relative;
        transform: none;
        max-width: 250px;
        margin: 0 auto;
        bottom: 0;
    }


    .preview__coin {
        display: none;
    }

    .actions__container {
        justify-content: center;
        margin: 1rem 0;

    }

    /* Platform Section  end -------------*/


    /* course detail resp start */
    .course-content {
        flex-direction: column;
        align-items: center;
        padding: 1em;
        gap: 0;
    }

    .carousel-container {
        order: 1;
        /* height: 450px; */
        /* margin-bottom: 2rem; */
    }
    .course-container {
        padding: 1em;
    }
    .course-details {
        order: 2;
        width: 100%;
        padding: 1rem;
    }

    .carousel-item {
        width: 280px;
    }

    .carousel-nav {
        width: calc(100% + 4rem);
        left: -2rem;
        top: 40%;
    }

    /* course detail resp end */

    /* journey sec  resp start */
    .journey-title {
        font-size: calc(var(--font-size-xl) * 0.8);
    }

    .stat-label {
        font-size: var(--font-size-sm);
    }

    .stat-number {
        font-size: calc(var(--font-size-xxl) * 0.7);
    }

    .stats-container {
        flex-direction: column;
    }

    .stat-card {
        min-width: 100%;

        box-shadow: none;
        border-bottom: 1px solid var(--primary-color);
    }

    .stat-card:last-child {
        border-bottom: none;
    }

    /* journey sec  resp end */
    /* account carousel start resp css */
    .account-card {
        flex: 0 0 260px;
        min-width: 260px;
        padding: 24px 16px;
    }

    .account-icon {
        width: 100px;
        height: 100px;
    }

    /* account carousel end resp css */

    /* resp for why choose us sec */
    .why-choose-grid {
        grid-template-columns: 1fr;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        display: flex;
        gap: 1rem;
        padding: 1rem;

        /* Hide the scrollbar */
        scrollbar-width: none;
        /* For Firefox */
        -ms-overflow-style: none;
        /* For Internet Explorer 10+ */
    }

    .why-choose-grid::-webkit-scrollbar {
        display: none;
        /* For Chrome, Safari, and Opera */
    }


    .why-choose-card {
        min-width: 300px;
        scroll-snap-align: start;
        padding: 2em;
    }

    .why-choose-section {
        padding: 2em;
    }

    .why-choose-header {
        margin: 1em 0;
    }

    .slider-controls {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        /* margin-top: 1rem; */
    }

    .slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--secondary-color);
        cursor: pointer;
    }

    .slider-dot.active {
        background: var(--primary-color);
    }

    /* res for why choose us section end */
    /* become ib section responsive start */
    .become-ib__container {
        flex-direction: column-reverse;
        gap: 2em;
    }

    .notifications-container {
        margin-left: 4em;

    }

    .notifications {
        top: 60%;
    }

    .become-ib__image {
        height: 80%;
    }

    .become-ib {
        margin: 3em 2em;
    }

    .become-ib__image-section {
        width: 100%;
        min-height: 300px;
    }

    /* become ib section responsive end */

    /* <!-- foundations section res start --> */

    .foundations {
        padding: 20px 0;
        /* Remove horizontal padding */
    }

    .foundations-header {
        padding: 0 20px;
        /* Keep padding for header */
    }

    .foundations-grid {
        overflow: hidden;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .foundations-track {
        display: flex;
        width: 300%;
        transform: translateX(0);
    }

    .foundations-card {
        flex: 1;
        width: 100%;
        margin: 0 2em;
        padding: 2em;
    }

    .foundations-nav {
        display: flex;
        /* padding: 20px; */
    }

    /* <!-- foundations section res end --> */
    /* <!-- news-event responsive start --> */

    .news-events__wrapper {
        padding: 1rem;
        margin: 0;
    }
    
    .news-events__card {
        margin: 5px;
    }

    .news-events__card-content {
        padding: 1rem;
    }

    .news-events__header {
        margin-top: 0;
    }

    /* <!-- news-event responsive end --> */
    /* Footer Mobile Layout start */

    .footer__nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .footer__nav-section {
        padding: 0 0.5rem;
    }
    .footer__bottom {
        gap: 0.5em ;
    }
    .footer__credit {
        order: 3;
    }
    .footer__rights {
        order: 2;
    }
    .footer__container{
        padding: 1em 0;
    }

    /* Footer Mobile Layout end */

}

/* --------------Responsive section for max-width: 768px end ------------- */


/* --------------Responsive section for max-width: 1024px start ------------- */


@media (max-width: 1024px) {
    .nav-links {
        gap: 1.5rem;
    }

    .hero h1 {
        font-size: calc(var(--font-size-xxl) * 0.8);
    }

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

/* --------------Responsive section for max-width: 1024px end ------------- */


/* --------------Responsive section for max-width: 480px start ------------- */

@media (max-width: 480px) {
    nav {
        padding: 0 1rem;
    }

    .hero h1 {
        font-size: calc(var(--font-size-xxl) * 0.5);
    }

    .get-app-btn {
        padding: 0.8rem 2rem;
    }

    .year-tabs {
        margin-bottom: 1.5em;
    }

    .partner-products-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* --------------Responsive section for max-width: 480px end ------------- */

/* --------------Responsive section for min-width: 768px start ------------- */
/* Desktop Layout */
@media (min-width: 768px) {

    /* responsive section for footer start */
    .footer__container {
        grid-template-columns: repeat(5, 1fr);
    }

    .footer__logo-section {
        grid-column: 1;
    }

    .footer__nav {
        grid-column: 2 / 5;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer__contact {
        grid-column: 5;
    }

    .footer__bottom {
        margin-top: 2rem;
    }

    /* responsive section for footer end */


}

/* --------------Responsive section for min-width: 768px end ------------- */