/*
=====================================================
MIR RABBY OFFICIAL
Version 2026 Edition

Responsive Design System
Human Rights • Social Service • Public Affairs
=====================================================
*/


/* =========================================
   LARGE DESKTOP
   (1400px and below)
========================================= */

@media (max-width:1400px){

    .container{

        max-width:1140px;

    }

}


/* =========================================
   LAPTOP
   (1200px and below)
========================================= */

@media (max-width:1200px){

    .container{

        max-width:960px;

        padding-inline:24px;

    }

}


/* =========================================
   TABLET
   (992px and below)
========================================= */

@media (max-width:992px){

    .container{

        max-width:720px;

    }

    section{

        padding-top:80px;

        padding-bottom:80px;

    }

    .section-title{

        margin-bottom:40px;

    }

    .section-title h2{

        font-size:2rem;

    }

}


/* =========================================
   MOBILE
   (768px and below)
========================================= */

@media (max-width:768px){

    .container{

        max-width:100%;

        padding-inline:20px;

    }

    section{

        padding-top:70px;

        padding-bottom:70px;

    }

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:1.8rem;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    img{

        width:100%;

        height:auto;

    }

}


/* =========================================
   SMALL MOBILE
   (576px and below)
========================================= */

@media (max-width:576px){

    .container{

        padding-inline:16px;

    }

    .section-title h2{

        font-size:1.6rem;

    }

    .section-title p{

        font-size:.95rem;

    }

    .btn{

        padding:14px 20px;

        font-size:.95rem;

    }

}


/* =========================================
   EXTRA SMALL DEVICES
   (400px and below)
========================================= */

@media (max-width:400px){

    html{

        font-size:15px;

    }

    .container{

        padding-inline:14px;

    }

    .section-title h2{

        font-size:1.4rem;

    }

}


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

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:120px 0 80px;

    }

}


/* =========================================
   HIGH RESOLUTION DISPLAY
========================================= */

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}