/*==============================================================
TRADESTONE CONSULTANCY
GLOBAL RESPONSIVE CSS
==============================================================*/


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

@media only screen and (max-width:1024px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .container{
        width:100% !important;
        max-width:100% !important;

        padding-left:28px !important;
        padding-right:28px !important;

        box-sizing:border-box !important;
    }


    /* HERO */

    .hero-content{
        max-width:760px;
    }

    .hero-content h1{
        font-size:52px !important;
        line-height:1.08 !important;
    }

    .hero-trust-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px !important;
    }


    /* ABOUT */

    .modern-about-grid{
        grid-template-columns:1fr !important;
        gap:55px !important;
    }

    .modern-about-image{
        max-width:700px;
        margin:auto;
    }


    /* SERVICES */

    .modern-services-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:20px !important;
    }

    .service-card-large,
    .service-card-wide{
        grid-column:auto !important;
        grid-row:auto !important;
    }


    /* WHY */

    .modern-why-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }


    /* PROJECTS */

    .modern-projects-grid{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    .modern-project-right{
        grid-template-columns:1fr 1fr !important;
    }


    /* INDUSTRIES */

    .industries-layout{
        grid-template-columns:1fr !important;
        gap:50px !important;
    }


    /* STATS */

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

}



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

@media only screen and (max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;

        margin:0;
        padding:0;

        overflow-x:hidden !important;
    }

    *{
        box-sizing:border-box;
    }


    /*==========================================================
    GLOBAL CONTAINER
    ==========================================================*/

    .container{
        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:18px !important;
        padding-right:18px !important;

        box-sizing:border-box !important;
    }


    .column,
    .columns{
        width:100% !important;
        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    img{
        max-width:100%;
        height:auto;
    }


    /*==========================================================
    HERO
    ==========================================================*/

    .hero-section{
        min-height:auto !important;

        padding:
            105px 0
            65px !important;
    }


    .hero-content{
        width:100% !important;
        max-width:100% !important;

        padding:0 !important;
    }


    .hero-subtitle{
        display:block;

        margin-bottom:15px;

        font-size:9px !important;
        line-height:18px !important;

        letter-spacing:1.5px !important;
    }


    .hero-content h1{
        width:100% !important;

        margin-bottom:20px !important;

        font-size:36px !important;
        line-height:1.08 !important;

        letter-spacing:-1px !important;
    }


    .hero-content p{
        width:100% !important;
        max-width:100% !important;

        font-size:14px !important;
        line-height:25px !important;
    }


    /* HERO BUTTONS */

    .hero-buttons{
        display:flex !important;

        flex-direction:column !important;

        align-items:flex-start !important;

        gap:12px !important;

        margin-top:25px !important;
    }


    .hero-buttons a{
        width:auto !important;

        min-width:175px;

        text-align:center;
    }


    /* HERO TRUST */

    .hero-trust-grid{
        display:grid !important;

        grid-template-columns:repeat(2,1fr) !important;

        width:100% !important;

        margin-top:35px !important;

        gap:12px !important;
    }


    .hero-trust-item{
        min-width:0 !important;

        padding:15px 10px !important;
    }


    .hero-trust-item strong{
        font-size:24px !important;
    }


    .hero-trust-item span{
        font-size:9px !important;
        line-height:16px !important;
    }



    /*==========================================================
    ABOUT SECTION
    ==========================================================*/

    .modern-about{
        padding:
            70px 0 !important;
    }


    .modern-about-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:40px !important;
    }


    .modern-about-image{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
    }


    .modern-about-image img{
        width:100% !important;

        border-radius:20px !important;
    }


    .modern-about-badge{
        right:15px !important;
        bottom:15px !important;

        padding:15px !important;
    }


    .modern-about-content{
        width:100% !important;
    }


    .modern-about-content h2{
        width:100% !important;

        margin-bottom:20px !important;

        font-size:32px !important;
        line-height:1.1 !important;
    }


    .modern-about-content p{
        font-size:14px !important;
        line-height:25px !important;
    }


    .modern-about-features{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:14px !important;
    }



    /*==========================================================
    SECTION HEADINGS
    ==========================================================*/

    .modern-section-heading{
        display:block !important;

        width:100% !important;

        margin-bottom:35px !important;
    }


    .modern-section-heading > div{
        width:100% !important;
        max-width:100% !important;
    }


    .modern-section-label{
        display:block;

        margin-bottom:12px !important;

        font-size:9px !important;

        letter-spacing:1.6px !important;
    }


    .modern-section-heading h2,
    .center-heading h2{
        width:100% !important;
        max-width:100% !important;

        margin:
            0 0
            18px !important;

        font-size:31px !important;
        line-height:1.1 !important;

        letter-spacing:-1px !important;
    }


    .modern-section-heading h2 span,
    .center-heading h2 span{
        display:block;
    }


    .section-link{
        display:inline-flex !important;

        margin-top:5px !important;

        font-size:10px !important;
    }



    /*==========================================================
    SERVICES — IMPORTANT FIX
    ==========================================================*/

    .modern-services{
        width:100% !important;

        padding:
            70px 0 !important;

        overflow:visible !important;
    }


    .modern-services .container{
        width:100% !important;

        padding-left:18px !important;
        padding-right:18px !important;

        overflow:visible !important;
    }


    .modern-services-grid{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        overflow:visible !important;
    }


    .modern-service-card,
    .modern-service-card.service-card-large,
    .modern-service-card.service-card-wide{

        position:relative !important;

        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        height:auto !important;
        min-height:245px !important;

        margin:
            0 0
            18px 0 !important;

        padding:
            28px 22px !important;

        box-sizing:border-box !important;

        grid-column:auto !important;
        grid-row:auto !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        transform:none !important;

        overflow:hidden !important;

        border-radius:20px !important;
    }


    .modern-service-card:last-child{
        margin-bottom:0 !important;
    }


    /* SERVICE ICON */

    .modern-service-icon{
        position:relative !important;

        width:48px !important;
        height:48px !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        margin-bottom:25px !important;

        font-size:19px !important;
    }


    /* SERVICE NUMBER */

    .service-number{
        position:absolute !important;

        top:24px !important;
        right:22px !important;

        font-size:10px !important;
    }


    /* SERVICE TITLE */

    .modern-service-card h3{
        width:100% !important;
        max-width:100% !important;

        margin:
            0 0
            14px !important;

        font-size:23px !important;
        line-height:1.2 !important;

        word-break:normal !important;
        overflow-wrap:break-word !important;
    }


    /* SERVICE DESCRIPTION */

    .modern-service-card p{
        width:100% !important;
        max-width:100% !important;

        margin:
            0 0
            20px !important;

        font-size:13px !important;
        line-height:22px !important;

        word-break:normal !important;
    }


    /* SERVICE LINK */

    .service-read-more{
        position:relative !important;

        display:inline-block !important;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:auto !important;

        margin-top:6px !important;

        font-size:9px !important;
    }



    /*==========================================================
    WHY CHOOSE TRADESTONE
    ==========================================================*/

    .modern-why{
        padding:
            70px 0 !important;
    }


    .modern-why-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:15px !important;
    }


    .why-card{
        width:100% !important;

        padding:25px 20px !important;

        box-sizing:border-box;
    }


    .why-card h3{
        font-size:35px !important;
    }



    /*==========================================================
    FEATURED PROJECTS
    ==========================================================*/

    .modern-projects{
        padding:
            70px 0 !important;
    }


    .modern-projects-grid{
        display:block !important;

        width:100% !important;
    }


    .modern-project-card,
    .modern-project-card.modern-project-large{

        display:block !important;

        width:100% !important;
        max-width:100% !important;

        min-height:330px !important;

        margin-bottom:18px !important;

        overflow:hidden !important;

        border-radius:20px !important;
    }


    .modern-project-large{
        height:380px !important;
    }


    .modern-project-right{
        display:block !important;

        width:100% !important;
    }


    .modern-project-right .modern-project-card{
        height:300px !important;
    }


    .modern-project-card img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }


    .modern-project-content{
        left:20px !important;
        right:20px !important;
        bottom:20px !important;

        width:auto !important;
    }


    .modern-project-content h3{
        font-size:22px !important;
        line-height:1.2 !important;
    }


    .modern-project-content p{
        font-size:12px !important;
        line-height:21px !important;
    }



    /*==========================================================
    INDUSTRIES
    ==========================================================*/

    .modern-industries{
        padding:
            70px 0 !important;
    }


    .industries-layout{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:40px !important;
    }


    .industries-intro h2{
        font-size:31px !important;
        line-height:1.1 !important;
    }


    .industries-intro p{
        font-size:14px !important;
        line-height:25px !important;
    }


    .industries-grid{
        display:block !important;

        width:100% !important;
    }


    .industry-card{
        display:grid !important;

        grid-template-columns:
            46px
            minmax(0,1fr)
            24px !important;

        width:100% !important;

        gap:14px !important;

        margin-bottom:14px !important;

        padding:
            20px 16px !important;

        box-sizing:border-box !important;
    }


    .industry-card h3{
        font-size:18px !important;
    }


    .industry-card p{
        font-size:12px !important;
        line-height:21px !important;
    }


    .industry-icon{
        width:44px !important;
        height:44px !important;
    }



    /*==========================================================
    ACHIEVEMENT STATS
    ==========================================================*/

    .modern-stats{
        padding:
            70px 0 !important;
    }


    .stats-grid{
        display:grid !important;

        grid-template-columns:
            repeat(2,1fr) !important;

        gap:12px !important;
    }


    .stat-card{
        width:100% !important;

        padding:
            25px 10px !important;

        box-sizing:border-box !important;
    }


    .stat-card h3{
        font-size:31px !important;
    }


    .stat-card p{
        font-size:10px !important;
        line-height:17px !important;
    }



    /*==========================================================
    CLIENTS
    ==========================================================*/

    .modern-clients{
        padding:
            70px 0 !important;

        overflow:hidden;
    }


    .modern-clients .section-subtitle{
        width:100% !important;
        max-width:100% !important;

        font-size:13px !important;
        line-height:23px !important;
    }


    .clients-marquee{
        width:100% !important;

        overflow:hidden !important;
    }


    .marquee-logo{
        width:130px !important;
        min-width:130px !important;

        padding:15px !important;
    }


    .marquee-logo img{
        max-width:100px !important;
        max-height:55px !important;
    }



    /*==========================================================
    FINAL CTA
    ==========================================================*/

    .modern-cta{
        min-height:auto !important;

        padding:
            80px 0 !important;
    }


    .cta-content{
        width:100% !important;
        max-width:100% !important;
    }


    .cta-content > span{
        font-size:8px !important;
        line-height:17px !important;
    }


    .cta-content h2{
        font-size:33px !important;
        line-height:1.1 !important;
    }


    .cta-content p{
        width:100% !important;
        max-width:100% !important;

        font-size:14px !important;
        line-height:25px !important;
    }


    .cta-buttons{
        display:flex !important;

        flex-direction:column !important;

        align-items:flex-start !important;

        gap:12px !important;
    }



}



/*==============================================================
VERY SMALL PHONES
==============================================================*/

@media only screen and (max-width:420px){

    .container{
        padding-left:15px !important;
        padding-right:15px !important;
    }


    .hero-content h1{
        font-size:32px !important;
    }


    .modern-section-heading h2,
    .modern-about-content h2,
    .industries-intro h2{
        font-size:28px !important;
    }


    .modern-service-card{
        padding:
            25px 19px !important;
    }


    .modern-service-card h3{
        font-size:21px !important;
    }


    .modern-project-content h3{
        font-size:20px !important;
    }


    .stats-grid{
        grid-template-columns:1fr 1fr !important;
    }


    .cta-content h2{
        font-size:29px !important;
    }

}

/*==============================================================
MOBILE HAMBURGER HEADER
==============================================================*/

.mobile-menu-toggle{
    display:none;
}

@media only screen and (max-width:768px){

    #menu-wrap{
        position:relative !important;
        width:100% !important;
        background:#ffffff !important;
        z-index:9999;
    }

    #menu-wrap .container{
        width:100% !important;
        max-width:100% !important;
        padding:0 18px !important;
    }

    .modern-header-inner{
        position:relative;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;

        min-height:82px;

        padding:0 !important;
        margin:0 !important;
    }

    /* LOGO */

    .logo-link{
        position:relative;
        z-index:10002;
    }

    .logo{
        transform:none !important;
    }


    /* HAMBURGER */

    .mobile-menu-toggle{
        position:relative;

        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        width:46px;
        height:46px;

        padding:0;

        border:0;
        border-radius:12px;

        background:#f4f5f8;

        cursor:pointer;

        z-index:10002;
    }

    .mobile-menu-toggle span{
        display:block;

        width:22px;
        height:2px;

        margin:3px 0;

        background:#292d68;

        border-radius:10px;

        transition:
            transform .3s ease,
            opacity .3s ease;
    }


    /* HAMBURGER -> X */

    .mobile-menu-toggle.active span:nth-child(1){
        transform:
            translateY(8px)
            rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-toggle.active span:nth-child(3){
        transform:
            translateY(-8px)
            rotate(-45deg);
    }


    /* MAIN MOBILE MENU */

    #menu-wrap .slimmenu{
        position:absolute !important;

        top:82px;
        left:0;

        display:none !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:16px 18px 24px !important;

        box-sizing:border-box;

        background:#ffffff;

        border-top:1px solid #edf0f4;

        box-shadow:
            0 22px 45px rgba(18,28,48,.12);

        z-index:10000;
    }

    #menu-wrap .slimmenu.mobile-menu-open{
        display:block !important;
    }


    /* TOP LEVEL ITEMS */

    #menu-wrap .slimmenu > li{
        display:block !important;

        width:100% !important;

        margin:0 !important;

        border-bottom:1px solid #edf0f4;
    }

    #menu-wrap .slimmenu > li:last-child{
        border-bottom:0;
    }

    #menu-wrap .slimmenu > li > a{
        display:block !important;

        width:100% !important;

        padding:15px 5px !important;

        box-sizing:border-box;

        color:#172033 !important;

        font-size:12px !important;
        font-weight:700 !important;

        text-align:left !important;
    }


    /* REMOVE DESKTOP ACTIVE LINE */

    #menu-wrap .slimmenu > li > a::before,
    #menu-wrap .slimmenu > li > a::after{
        display:none !important;
    }


    /* ACTIVE PAGE */

    #menu-wrap .slimmenu > li > a.active-menu{
        color:#292d68 !important;
    }


    /* SUBMENUS */

    #menu-wrap .submenu-back{
        position:static !important;

        display:none !important;

        width:100% !important;

        margin:0 !important;

        padding:
            0 0
            12px 14px !important;

        background:#f8f9fb !important;

        box-shadow:none !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }

    #menu-wrap li.mobile-submenu-open > .submenu-back{
        display:block !important;
    }

    #menu-wrap .submenu-back li{
        width:100% !important;
    }

    #menu-wrap .submenu-back a{
        display:block !important;

        padding:11px 10px !important;

        color:#626b7b !important;

        font-size:11px !important;

        text-align:left !important;
    }


    /* CONTACT BUTTON */

    .header-contact-item{
        margin-top:12px !important;
    }

    .header-contact-btn{
        display:block !important;

        width:100% !important;

        padding:14px 18px !important;

        border-radius:12px !important;

        background:#332f7c !important;

        color:#ffffff !important;

        text-align:center !important;
    }

}
/* =========================================
   MOBILE SERVICES DROPDOWN CLICK FIX
========================================= */

@media (max-width: 767px){

    ul.slimmenu.collapsed li{
        position: relative !important;
    }

    /* Dropdown arrow only on parent menu row */
    ul.slimmenu.collapsed li .sub-collapser{
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;

        width: 48px !important;
        height: 48px !important;

        z-index: 20 !important;
    }

    /* Submenu must remain clickable */
    ul.slimmenu.collapsed li ul{
        position: static !important;

        width: 100% !important;

        z-index: 30 !important;
    }

    ul.slimmenu.collapsed li ul li{
        position: relative !important;

        width: 100% !important;
    }

    ul.slimmenu.collapsed li ul li a{
        position: relative !important;

        display: block !important;

        width: 100% !important;

        padding: 13px 20px !important;
        margin: 0 !important;

        z-index: 50 !important;

        pointer-events: auto !important;
    }

    /* Child items do not need another overlay */
    ul.slimmenu.collapsed li ul li .sub-collapser{
        display: none !important;
    }

}

@media (max-width: 767px){

    ul.slimmenu.collapsed li ul li{
        position: relative !important;
        z-index: 100 !important;
    }

    ul.slimmenu.collapsed li ul li a{
        position: relative !important;
        z-index: 101 !important;

        display: block !important;
        width: 100% !important;

        pointer-events: auto !important;
    }

    ul.slimmenu.collapsed li ul li .sub-collapser{
        display: none !important;
        pointer-events: none !important;
    }

}

/* =========================================
   MOBILE CONTACT US MENU FIX
========================================= */

@media (max-width: 768px) {

    /* Contact Us normal state */
    #menu-wrap .slimmenu .header-contact-item .header-contact-btn {
        background: transparent !important;
        color: #17213a !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Contact Us hover / touch state */
    #menu-wrap .slimmenu .header-contact-item .header-contact-btn:hover,
    #menu-wrap .slimmenu .header-contact-item .header-contact-btn:focus {
        background: #43358f !important;
        color: #ffffff !important;
    }

}