/*=========================================================
    Samuel J. Sarullo Insurance
    Master Stylesheet
    Version 2.0
=========================================================*/

/*==============================
CSS VARIABLES
==============================*/

:root{

    --primary:#003366;
    --secondary:#00509E;
    --accent:#F4B400;

    --success:#28a745;
    --danger:#dc3545;
    --warning:#ffc107;

    --white:#ffffff;
    --light:#f8f9fa;
    --lighter:#f4f7fb;
    --gray:#6c757d;
    --dark:#1b1b1b;
    --border:#e3e8ef;

    --shadow-sm:0 2px 8px rgba(0,0,0,.08);
    --shadow:0 10px 30px rgba(0,0,0,.12);
    --shadow-lg:0 20px 60px rgba(0,0,0,.18);

    --radius:10px;
    --radius-lg:18px;

    --transition:.35s ease;

    --container:1320px;

    --header-height:90px;

}

/*==============================
RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:var(--dark);

    background:var(--white);

    overflow-x:hidden;

}

/*==============================
TYPOGRAPHY
==============================*/

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:var(--primary);

    line-height:1.2;

}

h1{

    font-size:3.2rem;

}

h2{

    font-size:2.5rem;

}

h3{

    font-size:1.5rem;

}

p{

    margin-bottom:20px;

    color:#555;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

ul{

    list-style:none;

}

/*==============================
LAYOUT
==============================*/

.container{

    width:90%;

    max-width:var(--container);

    margin:auto;

}

section{

    padding:90px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--accent);

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-heading h2{

    margin:12px 0 20px;

}

.section-heading p{

    max-width:800px;

    margin:auto;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--secondary);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.btn-secondary{

    background:var(--accent);

    color:#222;

}

.btn-secondary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

/*==============================
PRELOADER
==============================*/

#preloader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

}

.loader{

    width:60px;

    height:60px;

    border:6px solid #eee;

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==============================
BACK TO TOP
==============================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:var(--transition);

}

#backToTop:hover{

    background:var(--accent);

    color:#222;

}

/*==============================
UTILITY CLASSES
==============================*/

.text-center{

    text-align:center;

}

.mb-1{

    margin-bottom:15px;

}

.mb-2{

    margin-bottom:30px;

}

.mb-3{

    margin-bottom:50px;

}

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

.bg-light{

    background:var(--lighter);

}

.bg-primary{

    background:var(--primary);

    color:#fff;

}

.bg-dark{

    background:#111;

    color:#fff;

}

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

.top-bar{

    background:var(--primary);

    color:#fff;

    font-size:14px;

    padding:10px 0;

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.top-bar-left,
.top-bar-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-bar a{

    color:#fff;

    display:flex;

    align-items:center;

    gap:8px;

    transition:var(--transition);

}

.top-bar a:hover{

    color:var(--accent);

}

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

#mainHeader{

    background:#fff;

    box-shadow:var(--shadow-sm);

    position:sticky;

    top:0;

    z-index:9999;

    transition:.35s;

}

#mainHeader.sticky{

    box-shadow:var(--shadow);

}

.header-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:90px;

}

/*=========================================================
    LOGO
=========================================================*/

.logo img{

    max-height:72px;

    width:auto;

    display:block;

}

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

.desktop-navigation{

    margin-left:auto;

    margin-right:30px;

}

.desktop-navigation ul{

    display:flex;

    align-items:center;

    gap:10px;

}

.desktop-navigation li{

    position:relative;

}

.desktop-navigation li>a{

    display:flex;

    align-items:center;

    gap:6px;

    padding:32px 18px;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.desktop-navigation li>a:hover{

    color:var(--secondary);

}

.desktop-navigation li>a.active{

    color:var(--accent);

}

/*=========================================================
    DROPDOWN
=========================================================*/

.dropdown{

    position:absolute;

    top:100%;

    left:0;

    width:260px;

    background:#fff;

    border-radius:10px;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.30s;

    overflow:hidden;

}

.has-dropdown:hover>.dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown li{

    width:100%;

}

.dropdown a{

    display:block;

    padding:14px 20px;

    color:#333;

    font-weight:500;

}

.dropdown a:hover{

    background:#f4f7fb;

    color:var(--primary);

}

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

.header-buttons{

    display:flex;

    align-items:center;

    gap:12px;

}

.icon-button{

    width:48px;

    height:48px;

    border:none;

    background:var(--light);

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

}

.icon-button:hover{

    background:var(--primary);

    color:#fff;

}

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

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:var(--primary);

    color:#fff;

    border-radius:8px;

    cursor:pointer;

}

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

.mobile-navigation{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    height:100vh;

    background:#fff;

    z-index:99999;

    overflow-y:auto;

    transition:.35s;

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

}

.mobile-navigation.open{

    right:0;

}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-bottom:1px solid var(--border);

}

.mobile-header button{

    background:none;

    border:none;

    font-size:24px;

    cursor:pointer;

}

.mobile-item{

    border-bottom:1px solid var(--border);

}

.mobile-item>a{

    display:block;

    padding:18px 25px;

    color:#333;

    font-weight:600;

}

.mobile-expand{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border:none;

    background:#fff;

    font-size:16px;

    cursor:pointer;

    font-weight:600;

}

.mobile-submenu{

    display:none;

    background:#f8f9fa;

}

.mobile-submenu.open{

    display:block;

}

.mobile-submenu a{

    display:block;

    padding:14px 40px;

    color:#555;

}

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

.mobile-backdrop{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:99998;

    display:none;

}

.mobile-backdrop.show{

    display:block;

}

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

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;

    align-items:flex-start;

    padding-top:120px;

    z-index:99999;

}

.search-overlay.show{

    display:flex;

}

.search-box{

    background:#fff;

    width:90%;

    max-width:700px;

    padding:35px;

    border-radius:12px;

    position:relative;

}

.search-box form{

    display:flex;

    gap:10px;

}

.search-box input{

    flex:1;

    padding:16px;

    border:1px solid var(--border);

    border-radius:8px;

    font-size:16px;

}

.search-box button{

    padding:16px 24px;

    border:none;

    background:var(--primary);

    color:#fff;

    border-radius:8px;

    cursor:pointer;

}

#closeSearch{

    position:absolute;

    top:15px;

    right:15px;

    width:40px;

    height:40px;

    border:none;

    background:#f5f5f5;

    border-radius:50%;

    cursor:pointer;

}

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

.header-alert{

    background:var(--accent);

    color:#222;

    padding:12px 0;

    font-weight:600;

}

.header-alert .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.alert-content{

    display:flex;

    align-items:center;

    gap:10px;

}

#closeAlert{

    background:none;

    border:none;

    cursor:pointer;

    font-size:18px;

}

/*=========================================================
    CLIENT PORTAL
=========================================================*/

.client-portal-link{

    display:none;

}

/*=========================================================
    MOBILE QUICK ACTIONS
=========================================================*/

.mobile-quick-actions{

    display:none;

}

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

.hero{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:linear-gradient(135deg,#003366 0%,#00509E 100%);

    color:#fff;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-text h1{

    color:#fff;

    font-size:3.5rem;

    margin:20px 0;

}

.hero-subtitle{

    display:inline-block;

    padding:8px 18px;

    background:rgba(255,255,255,.15);

    border-radius:40px;

    font-weight:600;

}

.hero-description{

    color:#f0f0f0;

    font-size:1.15rem;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.hero-contact{

    display:flex;

    gap:50px;

    flex-wrap:wrap;

}

.hero-contact div{

    display:flex;

    flex-direction:column;

}

.hero-contact strong{

    font-size:1.1rem;

}

.hero-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow-lg);

}

/*=========================================================
    TRUST BAR
=========================================================*/

.trust-bar{

    background:#fff;

    padding:70px 0;

}

.trust-grid{

    display:grid;

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

    gap:30px;

}

.trust-item{

    text-align:center;

    padding:35px;

    border-radius:14px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.trust-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.trust-item i{

    font-size:48px;

    color:var(--primary);

    margin-bottom:20px;

}

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

.service-grid{

    display:grid;

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

    gap:35px;

}

.service-card{

    background:#fff;

    padding:40px;

    border-radius:16px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.service-card i{

    font-size:56px;

    color:var(--primary);

    margin-bottom:25px;

}

.service-card h3{

    margin-bottom:15px;

}

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

.why-us{

    background:#f8f9fb;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    border-radius:16px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card i{

    font-size:52px;

    color:var(--accent);

    margin-bottom:20px;

}

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

.statistics{

    background:var(--primary);

    color:#fff;

}

.stats-grid{

    display:grid;

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

    gap:25px;

    text-align:center;

}

.stat-box h2{

    color:#fff;

    font-size:3rem;

}

.stat-box p{

    color:#ddd;

    margin-top:12px;

}

/*=========================================================
    CARRIER LOGOS
=========================================================*/

.carrier-slider{

    background:#fff;

}

.logo-slider{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:40px;

    align-items:center;

}

.logo-slider img{

    max-height:70px;

    opacity:.75;

    transition:.35s;

    filter:grayscale(100%);

}

.logo-slider img:hover{

    opacity:1;

    filter:none;

    transform:scale(1.08);

}

/*=========================================================
    FEATURED SECTION
=========================================================*/

.featured-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.featured-image img{

    border-radius:18px;

    box-shadow:var(--shadow);

}

.featured-content ul{

    margin:30px 0;

}

.featured-content li{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    gap:12px;

}

.featured-content i{

    color:var(--success);

}

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

.testimonials{

    background:#f8f9fb;

}

.testimonial-slider{

    display:grid;

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

    gap:30px;

}

.testimonial{

    background:#fff;

    border-radius:16px;

    padding:35px;

    box-shadow:var(--shadow-sm);

}

.testimonial img{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

}

.testimonial h4{

    margin-top:20px;

}

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

.cta-banner{

    background:linear-gradient(135deg,#003366,#00509E);

    color:#fff;

    text-align:center;

}

.cta-banner h2{

    color:#fff;

    margin-bottom:20px;

}

.cta-banner p{

    color:#f0f0f0;

    max-width:800px;

    margin:0 auto 35px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*=========================================================
    LEARNING CENTER
=========================================================*/

.learning-center-preview{

    background:#fff;

}

.blog-grid{

    display:grid;

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

    gap:35px;

}

.blog-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.blog-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.blog-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}

.blog-content{

    padding:30px;

}

.blog-content h3{

    margin-bottom:15px;

}

.blog-content p{

    margin-bottom:20px;

}

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

.faq-preview{

    background:#f8f9fa;

}

.faq-item{

    background:#fff;

    border-radius:10px;

    margin-bottom:15px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.faq-question{

    width:100%;

    border:none;

    background:#fff;

    text-align:left;

    padding:22px 25px;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-answer{

    display:none;

    padding:0 25px 25px;

}

.faq-item.active .faq-answer{

    display:block;

}

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

.newsletter{

    background:var(--primary);

    color:#fff;

}

.newsletter-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.newsletter h2{

    color:#fff;

}

.newsletter p{

    color:#f0f0f0;

}

.newsletter form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}

.newsletter input{

    width:450px;

    max-width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    font-size:16px;

}

/*=========================================================
    SERVICE AREA
=========================================================*/

.service-area{

    background:#fff;

}

.service-grid{

    display:grid;

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

    gap:60px;

    align-items:center;

}

.service-area img{

    border-radius:18px;

    box-shadow:var(--shadow);

}

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

.contact-strip{

    background:var(--accent);

    padding:45px 0;

}

.contact-strip-grid{

    display:grid;

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

    gap:25px;

    align-items:center;

    text-align:center;

}

.contact-strip i{

    font-size:38px;

    margin-bottom:15px;

    color:var(--primary);

}

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

.site-footer{

    background:#0f1f34;

    color:#ddd;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.2fr;

    gap:50px;

}

.footer-logo{

    max-width:240px;

    margin-bottom:25px;

}

.footer-column h3{

    color:#fff;

    margin-bottom:25px;

}

.footer-column p{

    color:#c8d2dd;

}

.footer-column ul li{

    margin-bottom:12px;

}

.footer-column ul li a{

    color:#c8d2dd;

    transition:var(--transition);

}

.footer-column ul li a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-social{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--accent);

    color:#222;

}

.site-footer hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.12);

    margin:60px 0 30px;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-links{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.footer-links a{

    color:#c8d2dd;

}

.footer-links a:hover{

    color:#fff;

}

.footer-copy{

    color:#b9c3ce;

}

/*=========================================================
    DISCLAIMER
=========================================================*/

.footer-disclaimer{

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.10);

}

.footer-disclaimer p{

    color:#9daab8;

    font-size:14px;

    line-height:1.8;

    margin-bottom:12px;

}

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

input,
select,
textarea{

    width:100%;

    padding:15px;

    border:1px solid var(--border);

    border-radius:8px;

    font-family:inherit;

    font-size:16px;

}

textarea{

    resize:vertical;

    min-height:180px;

}

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

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

.card{

    background:#fff;

    border-radius:16px;

    box-shadow:var(--shadow-sm);

    padding:35px;

}

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

.mt-1{margin-top:15px;}
.mt-2{margin-top:30px;}
.mt-3{margin-top:50px;}

.pb-1{padding-bottom:15px;}
.pb-2{padding-bottom:30px;}
.pb-3{padding-bottom:60px;}

/*=========================================================
    END OF STYLE.CSS
=========================================================*/