/*=========================================================
    Samuel J. Sarullo Insurance
    Responsive Styles
=========================================================*/

/*=========================================================
    LARGE DESKTOPS
=========================================================*/

@media (max-width:1400px){

.container{

    width:94%;

}

.hero-text h1{

    font-size:3.2rem;

}

}

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

@media (max-width:1200px){

.hero-content{

    gap:40px;

}

.hero-text h1{

    font-size:3rem;

}

.service-grid{

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

}

.why-grid{

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

}

.trust-grid{

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

}

.stats-grid{

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

}

.blog-grid{

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

}

.testimonial-slider{

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

}

.footer-grid{

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

}

}

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

@media (max-width:992px){

.desktop-navigation{

    display:none;

}

.mobile-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.header-buttons .btn{

    display:none;

}

.hero{

    padding:80px 0;

}

.hero-content{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-contact{

    justify-content:center;

}

.featured-grid{

    grid-template-columns:1fr;

}

.service-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.trust-grid{

    grid-template-columns:1fr;

}

.stats-grid{

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

}

.blog-grid{

    grid-template-columns:1fr;

}

.testimonial-slider{

    grid-template-columns:1fr;

}

.contact-strip-grid{

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

}

.service-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.section-heading{

    margin-bottom:45px;

}

section{

    padding:70px 0;

}

}

/*=========================================================
    SMALL TABLETS
=========================================================*/

@media (max-width:768px){

.top-bar{

    display:none;

}

.header-wrapper{

    min-height:80px;

}

.logo img{

    max-height:60px;

}

.hero{

    min-height:auto;

}

.hero-text h1{

    font-size:2.4rem;

}

.hero-description{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn{

    width:280px;

}

.hero-contact{

    flex-direction:column;

    gap:20px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.contact-strip-grid{

    grid-template-columns:1fr;

}

.newsletter form{

    flex-direction:column;

}

.newsletter input{

    width:100%;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-links{

    justify-content:center;

}

}

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

@media (max-width:576px){

html{

    font-size:15px;

}

.container{

    width:94%;

}

section{

    padding:55px 0;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.8rem;

}

h3{

    font-size:1.3rem;

}

p{

    font-size:.95rem;

}

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

.header-wrapper{

    min-height:70px;

}

.logo img{

    max-height:50px;

}

.icon-button,
.mobile-toggle{

    width:42px;

    height:42px;

}

.mobile-navigation{

    width:100%;

    right:-100%;

}

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

.hero{

    padding:50px 0;

}

.hero-content{

    gap:35px;

}

.hero-text h1{

    font-size:2rem;

}

.hero-subtitle{

    font-size:13px;

}

.hero-description{

    font-size:.95rem;

}

.hero-buttons .btn{

    width:100%;

}

.hero-contact{

    text-align:center;

}

/*==============================
CARDS
==============================*/

.service-card,
.why-card,
.trust-item,
.testimonial,
.blog-card{

    padding:25px;

}

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

.btn{

    width:100%;

    padding:15px 20px;

    text-align:center;

}

/*==============================
SEARCH
==============================*/

.search-box{

    width:95%;

    padding:20px;

}

.search-box form{

    flex-direction:column;

}

.search-box button{

    width:100%;

}

/*==============================
NEWSLETTER
==============================*/

.newsletter-box{

    padding:0;

}

.newsletter form{

    gap:15px;

}

.newsletter input{

    width:100%;

}

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

.footer-logo{

    max-width:180px;

}

.footer-column{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-links{

    flex-direction:column;

    gap:12px;

    align-items:center;

}

.footer-copy{

    text-align:center;

}

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

.contact-strip-grid{

    gap:35px;

}

/*==============================
IMAGES
==============================*/

img{

    max-width:100%;

    height:auto;

}

}

/*=========================================================
    EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:400px){

.hero-text h1{

    font-size:1.7rem;

}

h2{

    font-size:1.5rem;

}

.btn{

    font-size:15px;

}

.logo img{

    max-height:45px;

}

}

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

@media (hover:none){

.desktop-navigation a:hover{

    color:inherit;

}

.btn:hover{

    transform:none;

}

.service-card:hover,

.why-card:hover,

.trust-item:hover,

.blog-card:hover{

    transform:none;

}

}

/*=========================================================
    LANDSCAPE PHONES
=========================================================*/

@media (max-height:500px){

.hero{

    min-height:auto;

    padding:40px 0;

}

.mobile-navigation{

    overflow-y:auto;

}

}

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

@media print{

.top-bar,

.header-buttons,

.mobile-navigation,

.mobile-backdrop,

.search-overlay,

#backToTop,

.newsletter,

.contact-strip,

.footer-social{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

a{

    color:#000;

    text-decoration:none;

}

.site-footer{

    background:#fff;

    color:#000;

}

}

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

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

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/*=========================================================
    HIGH CONTRAST
=========================================================*/

@media (prefers-contrast:more){

.btn{

    border:2px solid #000;

}

a{

    text-decoration:underline;

}

}

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