/*==================================================
 UNIVERSAL SEVA SANKALP HELPING FOUNDATION
 Responsive CSS
 Version : 1.0
 Part 1
==================================================*/

/*=========================================
 Responsive Variables
=========================================*/

:root{

    --container-xxl:1320px;
    --container-xl:1140px;
    --container-lg:960px;
    --container-md:720px;
    --container-sm:540px;

}

/*=========================================
 Large Desktop
 1400px and Below
=========================================*/

@media (max-width:1400px){

    .container{

        max-width:var(--container-xl);

    }

    .hero-title{

        font-size:56px;

    }

    .section-title{

        font-size:42px;

    }

    .counter-card{

        padding:30px;

    }

    .event-card,
    .cause-card,
    .project-card{

        padding:28px;

    }

}

/*=========================================
 Laptop Devices
 1200px and Below
=========================================*/

@media (max-width:1199px){

    .container{

        max-width:var(--container-lg);

    }

    section{

        padding:90px 0;

    }

    .section-title{

        font-size:38px;

    }

    .hero-title{

        font-size:48px;

        line-height:1.2;

    }

    .hero-subtitle{

        font-size:18px;

    }

    .hero-image{

        max-width:95%;

        margin:auto;

    }

    .about-image img{

        width:100%;

    }

    .about-content{

        padding-left:25px;

    }

    .gallery-grid{

        gap:20px;

    }

    .project-grid{

        gap:25px;

    }

    .causes-grid{

        gap:25px;

    }

    .testimonial-slider{

        padding:10px;

    }

}

/*=========================================
 Tablet Landscape
 992px and Below
=========================================*/

@media (max-width:991px){

    .container{

        max-width:var(--container-md);

    }

    section{

        padding:80px 0;

    }

    .row{

        row-gap:35px;

    }

    .hero-section{

        text-align:center;

    }

    .hero-content{

        margin-bottom:50px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-image{

        max-width:80%;

    }

    .about-content{

        padding-left:0;

        text-align:center;

    }

    .about-image{

        margin-bottom:35px;

    }

    .counter-card{

        margin-bottom:20px;

    }

    .cause-card{

        margin-bottom:30px;

    }

    .project-card{

        margin-bottom:30px;

    }

    .event-card{

        margin-bottom:30px;

    }

    .contact-wrapper{

        gap:35px;

    }

}

/*=========================================
 Navigation Responsive
=========================================*/

@media (max-width:991px){

    .navbar{

        padding:15px 0;

    }

    .navbar-brand img{

        max-height:55px;

    }

    .navbar-nav{

        margin-top:20px;

    }

    .navbar-nav .nav-item{

        margin:0;

    }

    .navbar-nav .nav-link{

        padding:14px 18px;

        border-bottom:1px solid rgba(0,0,0,.05);

    }

    .navbar-toggler{

        border:none;

        box-shadow:none;

    }

    .navbar-toggler:focus{

        box-shadow:none;

    }

    .dropdown-menu{

        border:none;

        box-shadow:none;

        padding-left:18px;

    }

}

/*==================================================
 UNIVERSAL SEVA SANKALP HELPING FOUNDATION
 Responsive CSS
 Version : 1.0
 Part 2
==================================================*/

/*=========================================
 Mobile Devices
 767px and Below
=========================================*/

@media (max-width:767px){

    .container{

        max-width:540px;

    }

    section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:40px;

    }

    .section-title{

        font-size:32px;

        line-height:1.3;

    }

    .section-subtitle{

        font-size:15px;

    }

}

/*=========================================
 Hero Section
=========================================*/

@media (max-width:767px){

    .hero-section{

        padding:140px 0 80px;

        text-align:center;

    }

    .hero-title{

        font-size:38px;

        line-height:1.25;

        margin-bottom:20px;

    }

    .hero-subtitle{

        font-size:17px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

        align-items:center;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:300px;

    }

    .hero-image{

        margin-top:45px;

    }

    .hero-image img{

        width:100%;

        height:auto;

    }

}

/*=========================================
 About Section
=========================================*/

@media (max-width:767px){

    .about-image{

        margin-bottom:30px;

    }

    .about-content{

        text-align:center;

    }

    .about-content .btn{

        margin-top:20px;

    }

}

/*=========================================
 Causes & Projects
=========================================*/

@media (max-width:767px){

    .causes-grid,

    .projects-grid,

    .gallery-grid,

    .events-grid,

    .blog-grid,

    .volunteer-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .cause-card,

    .project-card,

    .gallery-item,

    .event-card,

    .blog-card,

    .volunteer-card{

        margin:0 auto;

        width:100%;

    }

}

/*=========================================
 Counter Section
=========================================*/

@media (max-width:767px){

    .counter-card{

        text-align:center;

        padding:25px;

    }

    .counter-number{

        font-size:36px;

    }

}

/*=========================================
 Testimonials
=========================================*/

@media (max-width:767px){

    .testimonial-card{

        padding:30px 25px;

    }

    .testimonial-content{

        font-size:15px;

    }

    .testimonial-author{

        flex-direction:column;

        text-align:center;

    }

}

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

@media (max-width:767px){

    .accordion-button{

        font-size:16px;

        padding:18px;

    }

    .accordion-body{

        padding:18px;

    }

}

/*=========================================
 Contact Section
=========================================*/

@media (max-width:767px){

    .contact-wrapper{

        display:block;

    }

    .contact-info{

        margin-bottom:35px;

    }

    .contact-form{

        padding:30px 25px;

    }

    .contact-form .form-control{

        height:52px;

    }

    textarea.form-control{

        min-height:140px;

    }

}

/*=========================================
 Footer
=========================================*/

@media (max-width:767px){

    .footer{

        text-align:center;

    }

    .footer-widget{

        margin-bottom:35px;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-links{

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

    }

}

/*=========================================
 Small Mobile
 576px and Below
=========================================*/

@media (max-width:576px){

    .container{

        width:100%;

        padding-left:18px;

        padding-right:18px;

    }

    section{

        padding:60px 0;

    }

    .section-title{

        font-size:28px;

    }

    .hero-title{

        font-size:32px;

    }

    .hero-subtitle{

        font-size:16px;

    }

    .btn{

        width:100%;

    }

    .form-control{

        font-size:15px;

    }

    .contact-form{

        padding:22px;

    }

    .footer-logo img{

        max-width:170px;

    }

}

/*==================================================
 UNIVERSAL SEVA SANKALP HELPING FOUNDATION
 Responsive CSS
 Version : 1.0
 Part 3 (Final)
==================================================*/

/*=========================================
 Extra Small Devices
 400px and Below
=========================================*/

@media (max-width:400px){

    html{

        font-size:15px;

    }

    .container{

        padding-left:15px;

        padding-right:15px;

    }

    .section-title{

        font-size:24px;

        line-height:1.35;

    }

    .hero-title{

        font-size:28px;

        line-height:1.3;

    }

    .hero-subtitle{

        font-size:15px;

    }

    .hero-buttons{

        gap:12px;

    }

    .btn{

        width:100%;

        padding:14px 20px;

        font-size:15px;

    }

    .counter-card,

    .cause-card,

    .project-card,

    .event-card,

    .testimonial-card,

    .contact-form{

        padding:20px;

    }

    .footer{

        padding-top:60px;

    }

}

/*=========================================
 Mobile Navigation Improvements
=========================================*/

@media (max-width:991px){

    .navbar-collapse{

        margin-top:15px;

        padding:20px;

        background:#ffffff;

        border-radius:20px;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }

    .navbar-nav{

        gap:6px;

    }

    .navbar-nav .nav-link{

        border-radius:10px;

        transition:all .3s ease;

    }

    .navbar-nav .nav-link:hover,

    .navbar-nav .nav-link.active{

        background:rgba(11,99,206,.08);

        color:var(--primary);

    }

    .dropdown-menu{

        background:transparent;

    }

}

/*=========================================
 Landscape Phones
=========================================*/

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

    .hero-section{

        padding:120px 0 70px;

    }

    section{

        padding:60px 0;

    }

    .hero-image{

        max-width:60%;

        margin:auto;

    }

}

/*=========================================
 Large Landscape Tablets
=========================================*/

@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){

    .hero-title{

        font-size:46px;

    }

    .section-title{

        font-size:36px;

    }

}

/*=========================================
 Print Styles
=========================================*/

@media print{

    *{

        background:transparent !important;

        color:#000 !important;

        box-shadow:none !important;

        text-shadow:none !important;

    }

    body{

        font-size:12pt;

        line-height:1.5;

    }

    header,
    footer,
    .topbar,
    .navbar,
    .btn,
    .social-links,
    .scroll-top,
    .preloader{

        display:none !important;

    }

    a{

        color:#000 !important;

        text-decoration:underline;

    }

    img{

        max-width:100% !important;

        page-break-inside:avoid;

    }

    section{

        padding:20px 0 !important;

        page-break-inside:avoid;

    }

}

/*=========================================
 High Resolution Displays
=========================================*/

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

    img{

        image-rendering:auto;

    }

}

/*=========================================
 Performance Optimization
=========================================*/

img,
.card,
.btn,
.navbar,
.form-control{

    max-width:100%;

    backface-visibility:hidden;

    transform:translateZ(0);

    will-change:auto;

}

/*=========================================
 Accessibility
=========================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

:focus-visible{

    outline:3px solid rgba(11,99,206,.35);

    outline-offset:3px;

}

/*=========================================
 Utility Responsive Helpers
=========================================*/

.hide-mobile{

    display:block;

}

.show-mobile{

    display:none;

}

@media (max-width:767px){

    .hide-mobile{

        display:none !important;

    }

    .show-mobile{

        display:block !important;

    }

}

/*=========================================
 End Of File
=========================================*/