/*==================================================
SECUEASY INTERGRATED SYSTEMS
RESPONSIVE STYLESHEET
==================================================*/

/*==================================================
01. TABLET / SMALL LAPTOPS
==================================================*/

@media (max-width:991px){

    :root{
        --header-height:72px;
    }

    .container{
        padding-left:18px;
        padding-right:18px;
    }

    /* HEADER */
    .header-wrapper{
        grid-template-columns:1fr auto;
        height:72px;
    }

    .site-logo img{
        max-height:48px;
    }

    .main-navigation{
        display:none;
        position:absolute;
        top:72px;
        left:0;
        width:100%;
        background:var(--white);
        border-top:1px solid var(--border);
        box-shadow:0 8px 20px rgba(0,0,0,.08);
        padding:10px 18px 15px;
    }

    .main-navigation.is-open,
    .main-navigation.active,
    .main-navigation.menu-open{
        display:block;
    }

    .main-menu{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        width:100%;
    }

    .main-menu li{
        width:100%;
        border-bottom:1px solid var(--border);
    }

    .main-menu li:last-child{
        border-bottom:none;
    }

    .main-menu li a{
        display:block;
        padding:12px 5px;
        font-size:13px;
    }

    .main-menu li a::after{
        display:none;
    }

    .main-menu ul{
        position:static;
        display:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        min-width:0;
        padding:0 0 5px 12px;
    }

    .main-menu li:hover>ul{
        display:none;
    }

    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border:1px solid var(--border);
        border-radius:var(--radius);
        color:var(--dark);
        background:var(--white);
        font-size:18px;
    }

    .header-action{
        justify-content:flex-end;
        gap:10px;
    }

    .header-action .btn-primary{
        padding:10px 16px;
        font-size:12px;
    }

    /* TYPOGRAPHY */
    h1{
        font-size:40px;
    }

    h2{
        font-size:30px;
    }

    h3{
        font-size:22px;
    }

    /* HERO */
    .hero{
        padding-top:var(--header-height);
    }

    .hero__grid{
        grid-template-columns:1fr;
        min-height:auto;
        gap:25px;
        padding:45px 0;
    }

    .hero__content{
        padding:0;
        text-align:center;
        align-items:center;
    }

    .hero__title{
        font-size:40px;
    }

    .hero__text{
        max-width:680px;
        font-size:14px;
        margin-bottom:24px;
    }

    .hero__buttons{
        justify-content:center;
    }

    .hero__image{
        height:auto;
        justify-content:center;
    }

    .hero__image img{
        width:100%;
        max-width:700px;
        object-position:center;
    }

    /* HOMEPAGE SOLUTIONS */
    .solutions__grid{
        grid-template-columns:repeat(4,1fr);
        gap:14px;
    }

    .why__grid{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .partners__image img{
        max-width:100%;
    }

    /* CTA */
    .cta__wrapper{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .cta__content{
        justify-content:center;
    }

    .cta__button{
        width:100%;
    }

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

    /* ABOUT HERO */
    .page-hero{
        min-height:500px;
        padding:100px 0 50px;
    }

    .about-hero{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-hero__left{
        max-width:760px;
    }

    .about-hero__right{
        justify-content:flex-start;
    }

    .about-cta-card{
        max-width:360px;
    }

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

    /* ABOUT CONTENT */
    .about-company__grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-company__left{
        padding-right:0;
        border-right:none;
        padding-bottom:25px;
        border-bottom:1px solid var(--border);
    }

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

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

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

    /* CONTACT */
    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .contact-left{
        border-right:none;
        border-bottom:1px solid var(--border);
    }

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

    .business-hour-item:nth-child(2){
        border-right:none;
    }

    .business-hour-item:nth-child(1),
    .business-hour-item:nth-child(2){
        border-bottom:1px solid var(--border);
    }

    .contact-cta .cta-wrapper{
        grid-template-columns:1fr;
        text-align:center;
    }

    .contact-cta .cta-icon{
        margin:0 auto;
    }

    .contact-cta .cta-button{
        margin-top:5px;
    }

    .map-card{
        width:280px;
    }

    /* SOLUTIONS PAGE */
    .solutions-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* SOLUTION DETAIL PAGES */
    .consultancy-grid,
    .software-grid,
    .web-grid,
    .ict-grid,
    .networking-grid,
    .security-grid,
    .av-grid,
    .automation-grid,
    .solar-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .approach-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

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

    /* REQUEST A QUOTE */
    .request-quote-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .request-quote-contact{
        padding-right:0;
    }

}


/*==================================================
02. MOBILE PHONES
==================================================*/

@media (max-width:767px){

    :root{
        --header-height:68px;
        --container-padding:15px;
    }

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

    section{
        padding:35px 0;
    }

    /* HEADER */
    .header-wrapper{
        height:68px;
        grid-template-columns:1fr auto;
    }

    .site-logo img{
        max-height:44px;
        max-width:170px;
    }

    .main-navigation{
        top:68px;
        padding:8px 15px 12px;
    }

    .header-action .btn-primary{
        display:none;
    }

    .mobile-toggle{
        width:40px;
        height:40px;
        font-size:17px;
    }

    /* TYPOGRAPHY */
    h1{
        font-size:30px;
    }

    h2{
        font-size:25px;
    }

    h3{
        font-size:19px;
    }

    h4{
        font-size:17px;
    }

    p{
        font-size:12px;
        line-height:1.7;
    }

    .section-heading{
        margin-bottom:22px;
    }

    .section-title{
        font-size:25px;
        line-height:1.25;
    }

    .section-description{
        font-size:12px;
    }

    .section-subtitle{
        font-size:11px;
    }

    /* BUTTONS */
    .btn-primary,
    .btn-secondary,
    .btn-white{
        padding:11px 18px;
        font-size:12px;
    }

    /* HERO */
    .hero{
        padding-top:var(--header-height);
    }

    .hero__grid{
        padding:35px 0 30px;
        gap:20px;
    }

    .hero__title{
        font-size:31px;
        line-height:1.18;
        margin-bottom:16px;
    }

    .hero__subtitle{
        font-size:11px;
        letter-spacing:1px;
        margin-bottom:10px;
    }

    .hero__text{
        font-size:12px;
        line-height:1.7;
        margin-bottom:20px;
    }

    .hero__buttons{
        width:100%;
        flex-direction:column;
        gap:10px;
    }

    .hero__buttons .btn-primary,
    .hero__buttons .btn-secondary{
        width:100%;
        max-width:280px;
    }

    .hero__image{
        width:100%;
    }

    /* HOMEPAGE SOLUTIONS */
    .solutions__grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .solutions__card{
        padding:16px 10px;
    }

    .solutions__icon{
        width:48px;
        height:48px;
        margin-bottom:10px;
    }

    .solutions__icon i{
        font-size:20px;
    }

    .solutions__card h3{
        font-size:13px;
    }

    .solutions__card p{
        font-size:11px;
    }

    .why__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .why__item{
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:15px 10px;
    }

    .why__item:last-child{
        border-bottom:none;
    }

    /* CTA */
    .cta{
        padding:35px 0;
    }

    .cta__content{
        flex-direction:column;
        gap:12px;
    }

    .cta__icon{
        width:52px;
        height:52px;
    }

    .cta__icon i{
        font-size:22px;
    }

    .cta__text h2{
        font-size:24px;
    }

    .cta__text p{
        font-size:12px;
    }

    .cta__button{
        width:100%;
    }

    .cta__button .btn-white{
        width:100%;
    }

    /* FOOTER */
    .site-footer{
        padding:28px 0 10px;
    }

    .footer__grid{
        grid-template-columns:1fr;
        gap:22px;
        margin-bottom:15px;
    }

    .footer__logo{
        width:145px;
    }

    .footer__title{
        font-size:14px;
    }

    .footer__links a,
    .footer__contact li{
        font-size:12px;
    }

    .footer__bottom{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:5px;
    }

    .footer__bottom p{
        font-size:11px;
    }

    /* PAGE HERO */
    .page-hero{
        min-height:390px;
        padding:85px 0 45px;
    }

    .page-hero__content{
        padding:0;
        text-align:center;
    }

    .about-hero{
        grid-template-columns:1fr;
        gap:25px;
    }

    .about-hero__left{
        max-width:none;
    }

    .page-hero__subtitle{
        font-size:11px;
        letter-spacing:1.5px;
        margin-bottom:12px;
    }

    .page-hero__title{
        font-size:31px;
        line-height:1.18;
        margin-bottom:15px;
    }

    .page-hero__text{
        font-size:12px;
        line-height:1.7;
        margin-bottom:20px;
    }

    .about-features{
        grid-template-columns:1fr;
        max-width:none;
        gap:7px;
    }

    .about-feature{
        padding:9px 10px;
    }

    .about-hero__right{
        justify-content:center;
    }

    .about-cta-card{
        max-width:100%;
        padding:20px;
    }

    .about-cta-card h3{
        font-size:21px;
    }

    .about-cta-card p{
        font-size:12px;
    }

    .about-stats{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .about-stat{
        padding:13px 8px;
    }

    .about-stat h3{
        font-size:20px;
    }

    .about-stat span{
        font-size:10px;
    }

    /* ABOUT */
    .about-company{
        padding:35px 0;
    }

    .about-company__grid{
        gap:25px;
    }

    .about-company__left{
        padding-bottom:20px;
    }

    .about-company__left .section-title{
        font-size:25px;
    }

    .about-company__left p{
        font-size:12px;
        line-height:1.7;
    }

    .feature-card{
        gap:12px;
        padding-bottom:13px;
    }

    .feature-icon{
        width:44px;
        height:44px;
    }

    .feature-icon i{
        font-size:16px;
    }

    .feature-card h3{
        font-size:16px;
    }

    .feature-card p{
        font-size:11px;
    }

    .mission{
        padding:35px 0;
    }

    .mission__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .mission__card{
        padding:18px 15px;
    }

    .mission__card h3{
        font-size:17px;
    }

    .mission__card p{
        font-size:11px;
    }

    .about-why{
        padding:35px 0;
    }

    .about-why__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .about-why__item{
        padding:15px;
    }

    .industries{
        padding:35px 0;
    }

    .industries__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    /* CONTACT */
    .contact-intro{
        padding:35px 0 25px;
    }

    .contact-intro .section-title{
        font-size:27px;
    }

    .contact-intro__text{
        font-size:12px;
        line-height:1.7;
    }

    .contact-section{
        padding:15px 0 35px;
    }

    .contact-left,
    .contact-right{
        padding:20px;
    }

    .contact-left h2,
    .contact-right h2{
        font-size:21px;
    }

    .contact-left>p,
    .contact-right>p{
        font-size:12px;
        margin-bottom:20px;
    }

    .contact-info-item{
        gap:12px;
        padding:13px 0;
    }

    .contact-info-icon{
        width:42px;
        height:42px;
    }

    .contact-info-icon i{
        font-size:16px;
    }

    .contact-info-content h4{
        font-size:15px;
    }

    .contact-info-content p{
        font-size:11px;
    }

    .contact-social{
        text-align:center;
    }

    .contact-social-icons{
        justify-content:center;
        flex-wrap:wrap;
    }

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

    .contact-form-actions .btn{
        width:100%;
        min-width:0;
    }

    .contact-map-section{
        padding-bottom:35px;
    }

    .contact-map-wrapper iframe{
        height:260px;
    }

    .map-card{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        border-radius:0;
        box-shadow:none;
        border-bottom:1px solid var(--border);
    }

    .business-hours{
        padding:10px 0 35px;
    }

    .business-hours-grid{
        grid-template-columns:1fr;
    }

    .business-hour-item{
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:16px;
    }

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

    .contact-cta{
        padding-bottom:35px;
    }

    .contact-cta .cta-wrapper{
        padding:25px 18px;
        gap:15px;
    }

    .contact-cta h2{
        font-size:26px;
    }

    .contact-cta p{
        font-size:12px;
        line-height:1.7;
    }

    .contact-cta .cta-button .btn{
        width:100%;
    }

    /* SOLUTIONS PAGE */
    .page-intro{
        padding:35px 0 20px;
    }

    .page-intro-content h1{
        font-size:30px;
    }

    .page-intro-content p{
        font-size:12px;
    }

    .solutions-overview{
        padding:35px 0;
    }

    .section-heading.center{
        margin-bottom:22px;
    }

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

    .section-heading.center p{
        font-size:12px;
    }

    .solutions-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .solution-card{
        padding:18px 15px;
    }

    .solution-icon{
        width:48px;
        height:48px;
    }

    .solution-icon i{
        font-size:19px;
    }

    .solution-card h3{
        font-size:16px;
    }

    .solution-card p{
        font-size:11px;
    }

    /* ALL SOLUTION DETAIL GRIDS */
    .consultancy-grid,
    .software-grid,
    .web-grid,
    .ict-grid,
    .networking-grid,
    .security-grid,
    .av-grid,
    .automation-grid,
    .solar-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .approach-grid,
    .benefits-grid,
    .process-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .consultancy-intro,
    .software-intro,
    .web-intro,
    .ict-intro,
    .networking-intro,
    .security-intro,
    .av-intro,
    .automation-intro,
    .solar-intro{
        padding:35px 0 20px;
    }

    .consultancy-services,
    .software-services,
    .web-services,
    .ict-services,
    .networking-services,
    .security-services,
    .av-services,
    .automation-services,
    .solar-services{
        padding:10px 0 35px;
    }

    .consultancy-card,
    .software-card,
    .web-card,
    .ict-card,
    .networking-card,
    .security-card,
    .av-card,
    .automation-card,
    .solar-card{
        padding:18px 15px;
    }

    .consultancy-icon,
    .software-icon,
    .web-icon,
    .ict-icon,
    .networking-icon,
    .security-icon,
    .av-icon,
    .automation-icon,
    .solar-icon{
        width:48px;
        height:48px;
        margin-bottom:12px;
    }

    .consultancy-card h3,
    .software-card h3,
    .web-card h3,
    .ict-card h3,
    .networking-card h3,
    .security-card h3,
    .av-card h3,
    .automation-card h3,
    .solar-card h3{
        font-size:16px;
    }

    .consultancy-card p,
    .software-card p,
    .web-card p,
    .ict-card p,
    .networking-card p,
    .security-card p,
    .av-card p,
    .automation-card p,
    .solar-card p{
        font-size:11px;
        line-height:1.65;
    }

    /* REQUEST A QUOTE */
    .request-quote-intro{
        padding:35px 0 20px;
    }

    .request-quote-intro-content h1{
        font-size:30px;
    }

    .request-quote-intro-content p{
        font-size:12px;
    }

    .request-quote-section{
        padding:15px 0 35px;
    }

    .request-quote-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .request-quote-contact{
        padding:0;
    }

    .request-quote-contact h2{
        font-size:24px;
    }

    .request-quote-contact > p{
        font-size:12px;
        margin-bottom:20px;
    }

    .request-contact-items{
        gap:13px;
    }

    .request-contact-item{
        gap:12px;
    }

    .request-contact-icon{
        width:44px;
        height:44px;
    }

    .request-contact-content span{
        font-size:10px;
    }

    .request-contact-content a{
        font-size:12px;
    }

    .request-quote-form-wrapper{
        padding:20px 16px;
    }

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

    .request-quote-form .form-group{
        margin-bottom:14px;
    }

    .request-quote-form label{
        font-size:11px;
        margin-bottom:6px;
    }

    .request-quote-form input,
    .request-quote-form select,
    .request-quote-form textarea{
        font-size:11px;
    }

    .request-quote-form input,
    .request-quote-form select{
        height:40px;
    }

    .request-quote-form textarea{
        min-height:115px;
    }

    .request-quote-submit{
        width:100%;
    }

    .quote-form-message{
        font-size:11px;
        padding:12px;
    }

}


/*==================================================
03. SMALL PHONE REFINEMENTS
==================================================*/

@media (max-width:480px){

    .container{
        padding-left:13px;
        padding-right:13px;
    }

    .site-logo img{
        max-width:150px;
    }

    .hero__title{
        font-size:28px;
    }

    .page-hero__title{
        font-size:28px;
    }

    .page-intro-content h1{
        font-size:27px;
    }

    .section-title{
        font-size:23px;
    }

    .solutions__card{
        padding:14px 8px;
    }

    .solutions__card h3{
        font-size:12px;
    }

    .solutions__card p{
        font-size:10px;
    }

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

    .contact-left,
    .contact-right{
        padding:17px;
    }

    .request-quote-form-wrapper{
        padding:18px 13px;
    }

}