/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL RESPONSIVE SYSTEM
   /assets/css/home/responsive.css

   Final Responsive Overrides

   Includes:
   - Large Screens
   - Tablets
   - Mobile Devices
   - Typography Scaling
   - Layout Fixes
   - Navigation Support
   - Forms
   - Utilities
====================================================== */


/* ======================================================
   LARGE DESKTOP
====================================================== */


@media(max-width:1400px){


.container{

    max-width:1200px;

}


}



/* ======================================================
   LAPTOPS
====================================================== */


@media(max-width:1200px){


.section{

    padding:90px 0;

}


h1{

    font-size:

    clamp(2.4rem,5vw,3.8rem);

}



.container{

    padding-left:30px;

    padding-right:30px;

}



}



/* ======================================================
   TABLETS LANDSCAPE
====================================================== */


@media(max-width:992px){


/* Global Sections */


.section{

    padding:75px 0;

}



.container{

    padding-left:25px;

    padding-right:25px;

}



/* Headings */


h1{

    font-size:

    3rem;

}



h2{

    font-size:

    2.2rem;

}



h3{

    font-size:

    1.5rem;

}



/* Common Grids */


.grid-4,
.services-grid,
.features-grid,
.projects-grid{

    grid-template-columns:

    repeat(2,1fr);

}



/* Two Column Layouts */


.about-container,
.contact-container,
.map-container,
.hero-container{

    grid-template-columns:

    1fr;

}



/* Center Content */


.about-content,
.contact-header,
.section-header{

    margin-left:auto;

    margin-right:auto;

}



/* Buttons */


.btn-group{

    justify-content:center;

}



/* Images */


img{

    max-width:100%;

}



}



/* ======================================================
   TABLETS PORTRAIT
====================================================== */


@media(max-width:768px){


html{

    font-size:15px;

}



/* Container */


.container{

    padding-left:18px;

    padding-right:18px;

}



/* Sections */


.section{

    padding:65px 0;

}



/* Typography */


h1{

    font-size:

    2.3rem;

}



h2{

    font-size:

    1.9rem;

}



h3{

    font-size:

    1.35rem;

}



p{

    font-size:.95rem;

}



/* Text Alignment */


.mobile-center{

    text-align:center;

}



/* Global Grids */


.services-grid,
.features-grid,
.projects-grid,
.about-features,
.about-boxes,
.footer-container{

    grid-template-columns:

    1fr;

}



/* Stats */


.about-stats,
.features-stats{

    grid-template-columns:

    repeat(2,1fr);

}



/* Buttons */


.btn{

    width:100%;

}



/* Button groups */


.btn-group,
.about-actions{

    width:100%;

    flex-direction:column;

}



/* Forms */


.form-row{

    grid-template-columns:

    1fr;

}



/* Cards */


.card,
.feature-card,
.project-card,
.contact-card{

    border-radius:22px;

}



/* Hide desktop only elements */


.desktop-only{

    display:none!important;

}



}



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


@media(max-width:480px){


html{

    font-size:14px;

}



/* Sections */


.section{

    padding:

    55px 0;

}



/* Container */


.container{

    padding-left:15px;

    padding-right:15px;

}



/* Headings */


h1{

    font-size:

    2rem;

}



h2{

    font-size:

    1.7rem;

}



/* Stats */


.about-stats,
.features-stats{

    grid-template-columns:

    1fr;

}



/* Cards */


.feature-card,
.project-content,
.about-box,
.contact-form-wrapper{

    padding:25px;

}



/* Images */


.about-image img,
.project-image img{

    border-radius:

    20px;

}



/* Contact */


.contact-card{

    flex-direction:column;

}



/* Footer */


.footer-socials{

    justify-content:center;

}



.footer-bottom-links{

    flex-direction:column;

    gap:10px;

}



/* Mobile Utilities */


.mobile-full{

    width:100%!important;

}



.mobile-hide{

    display:none!important;

}



}



/* ======================================================
   VERY SMALL DEVICES
====================================================== */


@media(max-width:360px){


h1{

    font-size:

    1.8rem;

}



h2{

    font-size:

    1.5rem;

}



.btn{

    padding:

    12px 20px;

}



}



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


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


.hero{

    min-height:auto;

    padding-top:100px;

    padding-bottom:60px;

}



}



/* ======================================================
   ACCESSIBILITY
====================================================== */


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


*,
*::before,
*::after{


    animation:none!important;

    transition:none!important;


}



}