/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 1
  Global Responsive, Header & Navigation
==================================================*/


/*======================================
  DESKTOP (≤1200px)
======================================*/

@media (max-width:1200px){

    :root{

        --container:1140px;

    }

    .container{

        padding:0 30px;

    }

    h1{

        font-size:48px;

    }

    h2{

        font-size:38px;

    }

}


/*======================================
  LAPTOP (≤992px)
======================================*/

@media (max-width:992px){

    :root{

        --container:960px;

    }

    body{

        font-size:15px;

    }

    .section{

        padding:80px 0;

    }

    .container{

        padding:0 25px;

    }

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    h3{

        font-size:26px;

    }

    p{

        font-size:15px;

    }

}


/*======================================
  TABLET (≤768px)
======================================*/

@media (max-width:768px){

    .section{

        padding:70px 0;

    }

    h1{

        font-size:36px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:24px;

    }

    .section-header{

        margin-bottom:50px;

    }

}


/*======================================
  MOBILE (≤576px)
======================================*/

@media (max-width:576px){

    .container{

        padding:0 18px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:26px;

    }

    h3{

        font-size:22px;

    }

    h4{

        font-size:18px;

    }

    p{

        font-size:15px;

    }

}


/*======================================
  SMALL MOBILE (≤420px)
======================================*/

@media (max-width:420px){

    h1{

        font-size:26px;

    }

    h2{

        font-size:22px;

    }

}


/*======================================
  TOP BAR
======================================*/

@media (max-width:992px){

    .topbar{

        display:none;

    }

}


/*======================================
  HEADER
======================================*/

@media (max-width:992px){

    header .container{

        height:80px;

    }

    .logo img{

        width:150px;

    }

}


/*======================================
  NAVIGATION
======================================*/

@media (max-width:992px){

    nav{

        position:fixed;

        top:80px;

        right:-100%;

        width:320px;

        height:calc(100vh - 80px);

        background:#fff;

        box-shadow:-10px 0 30px rgba(0,0,0,.10);

        transition:.35s;

        overflow-y:auto;

        z-index:999;

    }

    nav.active{

        right:0;

    }

    nav ul{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:30px;

    }

    nav ul li{

        width:100%;

        border-bottom:1px solid #ececec;

    }

    nav ul li:last-child{

        border:none;

    }

    nav ul li a{

        display:block;

        width:100%;

        padding:18px 0;

    }

}


/*======================================
  MENU BUTTON
======================================*/

@media (max-width:992px){

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    header .btn-primary{

        display:none;

    }

}


/*======================================
  BUTTON
======================================*/

@media (max-width:768px){

    .btn-primary,

    .btn-outline{

        padding:13px 24px;

        font-size:15px;

    }

}


/*======================================
  GRID
======================================*/

@media (max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

}


/*======================================
  IMAGE
======================================*/

@media (max-width:768px){

    img{

        max-width:100%;

        height:auto;

    }

}


/*======================================
  TEXT
======================================*/

@media (max-width:576px){

    .text-center-mobile{

        text-align:center;

    }

}


/*======================================
  SPACING
======================================*/

@media (max-width:576px){

    .mt-50{

        margin-top:35px;

    }

    .mb-50{

        margin-bottom:35px;

    }

}
/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 2
  Hero Section Responsive
==================================================*/


/*======================================
  HERO - DESKTOP
======================================*/

@media (max-width:1200px){

    .hero{

        padding:100px 0 90px;

    }

    .hero-grid{

        gap:50px;

    }

    .hero-content{

        max-width:100%;

    }

}


/*======================================
  HERO - LAPTOP
======================================*/

@media (max-width:992px){

    .hero{

        padding:90px 0 80px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

        max-width:520px;

        margin:auto;

    }

    .hero-content p{

        max-width:700px;

        margin:0 auto 35px;

    }

}


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

@media (max-width:992px){

    .hero-button{

        justify-content:center;

        margin-bottom:45px;

    }

}


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

@media (max-width:992px){

    .hero-counter{

        justify-content:center;

    }

    .hero-counter div{

        min-width:160px;

    }

}


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

@media (max-width:768px){

    .hero{

        padding:70px 0;

    }

    .hero-content h1{

        font-size:36px;

        line-height:1.25;

    }

    .hero-content h2{

        font-size:22px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-image{

        max-width:420px;

    }

}


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

@media (max-width:576px){

    .hero{

        padding:60px 0;

    }

    .hero-content .subtitle{

        font-size:13px;

        padding:8px 16px;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-content h2{

        font-size:20px;

    }

    .hero-content p{

        font-size:15px;

    }

    .hero-button{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .hero-button .btn-primary,

    .hero-button .btn-outline{

        width:100%;

    }

}


/*======================================
  HERO COUNTER - MOBILE
======================================*/

@media (max-width:576px){

    .hero-counter{

        display:grid;

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

        gap:15px;

    }

    .hero-counter div{

        min-width:auto;

        padding:18px;

    }

    .hero-counter h3{

        font-size:28px;

    }

    .hero-counter p{

        font-size:14px;

    }

}


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

@media (max-width:420px){

    .hero-content h1{

        font-size:26px;

    }

    .hero-content h2{

        font-size:18px;

    }

    .hero-image{

        max-width:300px;

    }

    .hero-counter{

        grid-template-columns:1fr;

    }

}


/*======================================
  HERO BACKGROUND SHAPES
======================================*/

@media (max-width:768px){

    .hero::before,

    .hero::after{

        display:none;

    }

}


/*======================================
  HERO FLOAT ANIMATION
======================================*/

@media (max-width:768px){

    .hero-image img{

        animation:none;

    }

}
/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 3
  About, Vision, Values & Statistics
==================================================*/


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

@media (max-width:1200px){

    .about-grid{

        gap:50px;

    }

}

@media (max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-image{

        max-width:650px;

        margin:0 auto;

        order:1;

    }

    .about-content{

        order:2;

        text-align:center;

    }

    .about-content p{

        max-width:720px;

        margin:0 auto 30px;

    }

    .about-list{

        max-width:700px;

        margin:0 auto 35px;

    }

}

@media (max-width:768px){

    .about-content h3{

        font-size:30px;

    }

    .about-item{

        padding:16px;

    }

}

@media (max-width:576px){

    .about-content h3{

        font-size:26px;

    }

    .about-item{

        align-items:flex-start;

        text-align:left;

    }

}


/*======================================
  VISION & MISSION
======================================*/

@media (max-width:992px){

    .vision-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .vision-card{

        padding:35px 28px;

    }

    .vision-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

}

@media (max-width:576px){

    .vision-card{

        padding:28px 22px;

    }

}


/*======================================
  CORE VALUES
======================================*/

@media (max-width:1200px){

    .value-grid{

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

    }

}

@media (max-width:768px){

    .value-grid{

        grid-template-columns:1fr;

    }

    .value-card{

        padding:30px;

    }

}

@media (max-width:576px){

    .value-card{

        padding:26px 22px;

    }

    .value-card i{

        width:70px;

        height:70px;

        font-size:28px;

    }

}


/*======================================
  STATISTICS
======================================*/

@media (max-width:1200px){

    .stats-grid{

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

    }

}

@media (max-width:768px){

    .stats-grid{

        gap:20px;

    }

    .stats-box{

        padding:30px 20px;

    }

    .stats-box h2{

        font-size:40px;

    }

}

@media (max-width:576px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stats-box{

        padding:28px 18px;

    }

    .stats-box h2{

        font-size:34px;

    }

    .stats-box p{

        font-size:15px;

    }

}


/*======================================
  SECTION HEADER
======================================*/

@media (max-width:768px){

    .section-header{

        max-width:100%;

    }

    .section-description{

        font-size:16px;

    }

}

@media (max-width:420px){

    .section-title{

        font-size:24px;

    }

    .section-subtitle{

        font-size:13px;

        letter-spacing:1px;

    }

}
/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 4
  Business Units, Services & Featured Products
==================================================*/


/*======================================
  BUSINESS UNITS
======================================*/

@media (max-width:1200px){

    .business-grid{

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

        gap:28px;

    }

}

@media (max-width:992px){

    .business-grid{

        grid-template-columns:1fr;

        max-width:720px;

        margin:0 auto;

    }

    .business-card{

        max-width:100%;

    }

}

@media (max-width:768px){

    .business-content{

        padding:24px;

    }

    .business-content h3{

        font-size:26px;

    }

    .business-content p{

        min-height:auto;

    }

    .business-card img{

        height:220px;

    }

}

@media (max-width:576px){

    .business-content{

        padding:20px;

    }

    .business-content h3{

        font-size:22px;

    }

    .business-card img{

        height:200px;

    }

    .business-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

}


/*======================================
  SERVICES
======================================*/

@media (max-width:1200px){

    .services-grid{

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

    }

}

@media (max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .service-box{

        padding:32px 24px;

    }

}

@media (max-width:576px){

    .service-box{

        padding:28px 20px;

    }

    .service-box i{

        font-size:36px;

    }

}


/*======================================
  FEATURED PRODUCTS
======================================*/

@media (max-width:1200px){

    .product-grid{

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

    }

}

@media (max-width:992px){

    .product-grid{

        grid-template-columns:1fr;

        max-width:720px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .product-card img{

        height:220px;

    }

    .product-content{

        padding:24px;

    }

}

@media (max-width:576px){

    .product-card img{

        height:200px;

    }

    .product-content{

        padding:20px;

    }

    .product-content h3{

        font-size:22px;

    }

}


/*======================================
  CARD SPACING
======================================*/

@media (max-width:768px){

    .business-units .section-header,

    .services .section-header,

    .featured-products .section-header{

        margin-bottom:45px;

    }

}


/*======================================
  BUTTONS INSIDE CARDS
======================================*/

@media (max-width:576px){

    .business-btn,

    .product-content a{

        font-size:15px;

    }

}


/*======================================
  IMAGE SCALING
======================================*/

@media (max-width:576px){

    .business-card img,

    .product-card img{

        object-fit:cover;

        object-position:center;

    }

}


/*======================================
  TOUCH DEVICES
======================================*/

@media (hover:none){

    .business-card:hover,

    .service-box:hover,

    .product-card:hover{

        transform:none;

    }

    .business-card:hover img,

    .product-card:hover img{

        transform:none;

    }

}
/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 5
  Why Choose Us, Process, Portfolio,
  Clients & Testimonials
==================================================*/


/*======================================
  WHY CHOOSE US
======================================*/

@media (max-width:1200px){

    .why-grid{

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

        gap:28px;

    }

}

@media (max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .why-card{

        padding:30px 24px;

    }

    .why-card i{

        width:70px;

        height:70px;

        font-size:30px;

    }

}

@media (max-width:576px){

    .why-card{

        padding:24px 20px;

    }

}


/*======================================
  BUSINESS PROCESS
======================================*/

@media (max-width:1200px){

    .process-grid{

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

    }

}

@media (max-width:768px){

    .process-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .process-item{

        padding:30px 24px;

    }

    .process-item span{

        width:58px;

        height:58px;

        font-size:22px;

    }

}

@media (max-width:576px){

    .process-item{

        padding:24px 20px;

    }

}


/*======================================
  PORTFOLIO
======================================*/

@media (max-width:1200px){

    .portfolio-grid{

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

    }

}

@media (max-width:768px){

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .portfolio-item img{

        height:240px;

    }

}

@media (max-width:576px){

    .portfolio-item img{

        height:210px;

    }

}


/*======================================
  CLIENT LOGOS
======================================*/

@media (max-width:992px){

    .client-grid{

        grid-template-columns:repeat(3,1fr);

        gap:24px;

    }

}

@media (max-width:576px){

    .client-grid{

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

        gap:20px;

    }

    .client-grid img{

        max-width:120px;

    }

}


/*======================================
  TESTIMONIALS
======================================*/

@media (max-width:992px){

    .testimonial-grid{

        grid-template-columns:1fr;

        max-width:760px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .testimonial-card{

        padding:32px 24px;

    }

    .testimonial-card::before{

        font-size:48px;

        top:16px;

        right:20px;

    }

}

@media (max-width:576px){

    .testimonial-card{

        padding:24px 20px;

    }

    .testimonial-card p{

        font-size:15px;

    }

}


/*======================================
  SECTION SPACING
======================================*/

@media (max-width:768px){

    .why-us .section-header,

    .process .section-header,

    .portfolio .section-header,

    .clients .section-header,

    .testimonial .section-header{

        margin-bottom:45px;

    }

}


/*======================================
  REDUCE HOVER ON TOUCH DEVICES
======================================*/

@media (hover:none){

    .why-card:hover,

    .process-item:hover,

    .portfolio-item:hover,

    .testimonial-card:hover{

        transform:none;

    }

    .portfolio-item:hover::before{

        opacity:0;

    }

    .client-grid img:hover{

        transform:none;

    }

}
/*==================================================
  BRIMA Corporate Website
  responsive.css - Part 6
  FAQ, CTA, Contact, Footer & Utilities
==================================================*/


/*======================================
  FAQ
======================================*/

@media (max-width:768px){

    .faq-list{

        max-width:100%;

    }

    .faq-item{

        padding:24px;

    }

    .faq-item h3{

        font-size:20px;

    }

}

@media (max-width:576px){

    .faq-item{

        padding:20px;

    }

    .faq-item h3{

        font-size:18px;

    }

    .faq-item p{

        font-size:15px;

    }

}


/*======================================
  CALL TO ACTION
======================================*/

@media (max-width:992px){

    .cta{

        padding:80px 0;

    }

    .cta h2{

        font-size:38px;

    }

}

@media (max-width:768px){

    .cta{

        padding:70px 0;

    }

    .cta h2{

        font-size:32px;

    }

    .cta p{

        font-size:16px;

    }

}

@media (max-width:576px){

    .cta{

        padding:60px 0;

    }

    .cta h2{

        font-size:28px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .cta-buttons .btn-primary,

    .cta-buttons .btn-outline{

        width:100%;

    }

}


/*======================================
  CONTACT
======================================*/

@media (max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}

@media (max-width:576px){

    .contact iframe{

        height:280px;

    }

}


/*======================================
  FOOTER
======================================*/

@media (max-width:1200px){

    .footer-grid{

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

        gap:40px;

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 20px;

    }

    .social-icons{

        justify-content:center;

    }

}

@media (max-width:576px){

    footer{

        padding-top:60px;

    }

    .footer-bottom{

        padding:20px 15px;

    }

    .footer-bottom p{

        font-size:14px;

    }

}


/*======================================
  FLOATING BUTTONS
======================================*/

@media (max-width:768px){

    .whatsapp-float{

        width:56px;

        height:56px;

        right:18px;

        bottom:18px;

        font-size:26px;

    }

    .back-to-top{

        width:48px;

        height:48px;

        right:18px;

        bottom:88px;

    }

}

@media (max-width:420px){

    .whatsapp-float{

        width:52px;

        height:52px;

        font-size:24px;

    }

    .back-to-top{

        width:44px;

        height:44px;

    }

}


/*======================================
  FORMS
======================================*/

@media (max-width:576px){

    input,

    textarea,

    select{

        font-size:16px;

    }

}


/*======================================
  UTILITIES
======================================*/

@media (max-width:768px){

    .hide-tablet{

        display:none !important;

    }

    .text-center-tablet{

        text-align:center !important;

    }

}

@media (max-width:576px){

    .hide-mobile{

        display:none !important;

    }

    .text-center-mobile{

        text-align:center !important;

    }

    .w-mobile-100{

        width:100% !important;

    }

}


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

@media (max-width:900px) and (orientation:landscape){

    .hero{

        padding:60px 0;

    }

    .section{

        padding:60px 0;

    }

}


/*======================================
  REDUCED MOTION
======================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*======================================
  PRINT
======================================*/

@media print{

    .topbar,

    header,

    .whatsapp-float,

    .back-to-top,

    .cta,

    footer{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    .section{

        padding:20px 0;

    }

}


/*==================================================
  END OF RESPONSIVE.CSS
==================================================*/