/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 1
GLOBAL STYLES + HERO
==============================================================*/


/*==============================================================
ROOT VARIABLES
==============================================================*/

:root{

    --services-primary:#0A2B1D;

    --services-primary-light:#16452F;

    --services-secondary:#B88A44;

    --services-white:#ffffff;

    --services-text:#425466;

    --services-light:#F8FAFC;

    --services-border:#E7ECEF;

    --services-shadow:0 18px 60px rgba(0,0,0,.08);

    --services-radius:22px;

    --transition:.35s ease;

    --transition-fast:.2s ease;

}


/*==============================================================
GLOBAL
==============================================================*/

.contact-page{

    overflow:hidden;

    background:var(--services-white);

    color:var(--services-text);

}

.section-padding{

    padding:120px 0;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}

button{

    transition:var(--transition);

}

.form-control,

.form-select{

    box-shadow:none !important;

}


/*==============================================================
SECTION TITLE
==============================================================*/

.section-title{

    margin-bottom:70px;

}

.section-title h2{

    font-size:46px;

    font-weight:800;

    color:var(--services-primary);

    margin-bottom:20px;

    line-height:1.2;

}

.section-title h2 span{

    color:var(--services-secondary);

}

.section-title p{

    font-size:17px;

    line-height:1.9;

    color:var(--services-text);

    margin-bottom:0;

}


/*==============================================================
SECTION BADGE
==============================================================*/

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:100px;

    background:rgba(10,43,29,.08);

    color:var(--services-primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:25px;

}

.section-badge i{

    color:var(--services-secondary);

}


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

.btn{

    border-radius:100px;

    font-weight:600;

    padding:14px 34px;

    transition:var(--transition);

}

.btn-primary{

    background:var(--services-primary);

    border:2px solid var(--services-primary);

}

.btn-primary:hover{

    background:var(--services-primary-light);

    border-color:var(--services-primary-light);

}

.btn-outline-primary{

    border:2px solid var(--services-primary);

    color:var(--services-primary);

}

.btn-outline-primary:hover{

    background:var(--services-primary);

    color:#fff;

}

.btn-warning{

    background:var(--services-secondary);

    border-color:var(--services-secondary);

    color:var(--services-primary);

    font-weight:700;

}

.btn-warning:hover{

    background:#e6b800;

    border-color:#e6b800;

    color:var(--services-primary);

}


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

.contact-hero{

    position:relative;

    padding:170px 0 120px;

    background:linear-gradient(

        180deg,

        #ffffff 0%,

        var(--services-light) 100%

    );

    overflow:hidden;

}


/*==============================================================
BACKGROUND SHAPES
==============================================================*/

.contact-hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.shape-one{

    width:520px;

    height:520px;

    background:rgba(10,43,29,.04);

    top:-220px;

    left:-180px;

}

.shape-two{

    width:420px;

    height:420px;

    background:rgba(255,204,0,.12);

    right:-150px;

    top:80px;

}

.shape-three{

    width:280px;

    height:280px;

    background:rgba(10,43,29,.05);

    bottom:-100px;

    right:20%;

}


/*==============================================================
BREADCRUMB
==============================================================*/

.contact-breadcrumb{

    margin-bottom:20px;

}

.contact-breadcrumb .breadcrumb{

    margin:0;

}

.contact-breadcrumb .breadcrumb-item{

    font-size:15px;

}

.contact-breadcrumb a{

    color:var(--services-text);

}

.contact-breadcrumb .active{

    color:var(--services-primary);

    font-weight:600;

}


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

.contact-hero-content{

    position:relative;

    z-index:5;

}

.contact-hero-content h1{

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    color:var(--services-primary);

    margin-bottom:30px;

}

.contact-hero-content h1 span{

    color:var(--services-secondary);

}

.contact-hero-content p{

    font-size:18px;

    line-height:2;

    margin-bottom:35px;

}


/*==============================================================
BUTTON GROUP
==============================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}


/*==============================================================
QUICK INFO
==============================================================*/

.hero-contact-info{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

}

.hero-info-item{

    display:flex;

    align-items:center;

    gap:18px;

    background:#ffffff;

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

    border-radius:18px;

    padding:18px 22px;

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

    transition:var(--transition);

}

.hero-info-item:hover{

    transform:translateY(-8px);

}

.hero-info-item .icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-info-item .icon i{

    font-size:22px;

    color:var(--services-primary);

}

.hero-info-item small{

    display:block;

    color:var(--services-text);

    margin-bottom:4px;

}

.hero-info-item h6{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:var(--services-primary);

}


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

.contact-hero-image{

    position:relative;

    z-index:5;

}

.contact-hero-image img{

    width:100%;

    border-radius:32px;

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

}


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

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    background:#ffffff;

    padding:18px;

    border-radius:18px;

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

    animation:floatingCard 4s ease-in-out infinite;

}

.floating-card .icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

}

.floating-card .icon i{

    color:var(--services-primary);

    font-size:22px;

}

.floating-card h5{

    font-size:16px;

    margin-bottom:4px;

    color:var(--services-primary);

}

.floating-card p{

    margin:0;

    font-size:13px;

}

.card-one{

    top:8%;

    left:-35px;

}

.card-two{

    bottom:18%;

    right:-40px;

}

.card-three{

    bottom:-20px;

    left:10%;

}


/*==============================================================
EXPERIENCE BADGE
==============================================================*/

.experience-badge{

    position:absolute;

    top:50%;

    right:-25px;

    transform:translateY(-50%);

    width:150px;

    height:150px;

    border-radius:50%;

    background:var(--services-secondary);

    color:var(--services-primary);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

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

}

.experience-badge h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:6px;

}

.experience-badge span{

    font-size:14px;

    font-weight:600;

    line-height:1.4;

}


/*==============================================================
ANIMATION
==============================================================*/

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.shadow-hover{

    transition:var(--transition);

}

.shadow-hover:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 80px rgba(0,0,0,.12);

}


/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 2
CONTACT INFORMATION
==============================================================*/


/*==============================================================
CONTACT INFO SECTION
==============================================================*/

.contact-info{

    position:relative;

    background:var(--services-white);

    overflow:hidden;

}

.contact-info::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-240px;

    left:-200px;

}

.contact-info::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(255,204,0,.10);

    bottom:-180px;

    right:-120px;

}


/*==============================================================
CONTACT CARD
==============================================================*/

.contact-info-card{

    position:relative;

    background:var(--services-white);

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

    border-radius:var(--services-radius);

    padding:40px 32px;

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

    transition:var(--transition);

    overflow:hidden;

    z-index:2;

}

.contact-info-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--services-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.contact-info-card:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 70px rgba(0,0,0,.12);

}

.contact-info-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.contact-icon{

    width:78px;

    height:78px;

    border-radius:50%;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    transition:var(--transition);

}

.contact-icon i{

    font-size:30px;

    color:var(--services-primary);

}

.contact-info-card:hover .contact-icon{

    background:var(--services-primary);

}

.contact-info-card:hover .contact-icon i{

    color:var(--services-secondary);

}


/*==============================================================
LABEL
==============================================================*/

.contact-label{

    display:inline-block;

    padding:8px 18px;

    border-radius:100px;

    background:rgba(255,204,0,.18);

    color:var(--services-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:18px;

}


/*==============================================================
TITLE
==============================================================*/

.contact-info-card h4{

    color:var(--services-primary);

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.contact-info-card p{

    color:var(--services-text);

    line-height:1.9;

    margin-bottom:25px;

}


/*==============================================================
CONTACT LIST
==============================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:30px;

}

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:var(--services-text);

    line-height:1.7;

}

.contact-list li i{

    color:var(--services-secondary);

    font-size:18px;

    margin-top:2px;

}


/*==============================================================
CARD BUTTON
==============================================================*/

.contact-card-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--services-primary);

    font-weight:700;

    transition:var(--transition);

}

.contact-card-btn i{

    transition:var(--transition);

}

.contact-card-btn:hover{

    color:var(--services-primary-light);

}

.contact-card-btn:hover i{

    transform:translateX(6px);

}


/*==============================================================
HOVER DECORATION
==============================================================*/

.contact-info-card::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

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

    right:-60px;

    bottom:-60px;

    transition:.4s;

}

.contact-info-card:hover::after{

    transform:scale(1.3);

}


/*==============================================================
QUICK CONTACT BANNER
==============================================================*/

.contact-highlight{

    position:relative;

    overflow:hidden;

    background:linear-gradient(

        135deg,

        var(--services-primary),

        var(--services-primary-light)

    );

    border-radius:30px;

    padding:60px;

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

}

.contact-highlight::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.contact-highlight::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    left:-70px;

    bottom:-70px;

}


/*==============================================================
CONTENT
==============================================================*/

.highlight-content{

    position:relative;

    z-index:2;

}

.highlight-content span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:100px;

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

    color:var(--services-secondary);

    font-weight:700;

    margin-bottom:20px;

}

.highlight-content span i{

    font-size:18px;

}

.highlight-content h3{

    color:var(--services-white);

    font-size:38px;

    font-weight:700;

    margin-bottom:20px;

}

.highlight-content p{

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.9;

    margin-bottom:0;

}


/*==============================================================
BANNER BUTTON
==============================================================*/

.contact-highlight .btn{

    position:relative;

    z-index:2;

    min-width:220px;

}

.contact-highlight .btn-warning{

    box-shadow:0 15px 40px rgba(255,204,0,.35);

}

.contact-highlight .btn-warning:hover{

    transform:translateY(-4px);

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:991px){

    .contact-highlight{

        padding:45px;

        text-align:center;

    }

    .contact-highlight .text-lg-end{

        text-align:center !important;

        margin-top:30px;

    }

}

@media (max-width:767px){

    .contact-info-card{

        padding:30px 24px;

    }

    .contact-icon{

        width:68px;

        height:68px;

    }

    .contact-icon i{

        font-size:26px;

    }

    .contact-highlight{

        padding:35px 25px;

    }

    .highlight-content h3{

        font-size:30px;

    }

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 3A
ENTERPRISE CONTACT FORM
==============================================================*/


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

.contact-form-section{

    position:relative;

    overflow:hidden;

    background:var(--services-light);

}

.contact-form-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(10,43,29,.035);

    top:-220px;

    right:-220px;

}

.contact-form-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(255,204,0,.10);

    left:-140px;

    bottom:-140px;

}


/*==============================================================
LEFT CONTENT
==============================================================*/

.contact-form-content{

    position:relative;

    z-index:2;

}

.contact-form-content h2{

    font-size:48px;

    font-weight:800;

    color:var(--services-primary);

    line-height:1.2;

    margin-bottom:25px;

}

.contact-form-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:40px;

    color:var(--services-text);

}


/*==============================================================
QUOTE FEATURES
==============================================================*/

.quote-features{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:45px;

}

.quote-feature{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 20px;

    background:var(--services-white);

    border-radius:16px;

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

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

    transition:var(--transition);

}

.quote-feature:hover{

    transform:translateX(10px);

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

}

.quote-feature i{

    color:var(--services-secondary);

    font-size:22px;

}

.quote-feature span{

    font-weight:600;

    color:var(--services-primary);

}


/*==============================================================
RESPONSE BOX
==============================================================*/

.response-box{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:30px;

    border-radius:var(--services-radius);

    background:linear-gradient(

        135deg,

        var(--services-primary),

        var(--services-primary-light)

    );

    color:#ffffff;

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

}

.response-icon{

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.response-icon i{

    font-size:28px;

    color:var(--services-secondary);

}

.response-box h5{

    color:#ffffff;

    margin-bottom:10px;

    font-size:22px;

}

.response-box p{

    color:rgba(255,255,255,.86);

    margin:0;

    line-height:1.8;

}


/*==============================================================
FORM CARD
==============================================================*/

.contact-form-card{

    position:relative;

    background:var(--services-white);

    padding:50px;

    border-radius:30px;

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

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

    overflow:hidden;

}

.contact-form-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:var(--services-secondary);

}


/*==============================================================
FORM
==============================================================*/

#quoteForm{

    position:relative;

    z-index:2;

}


/*==============================================================
LABELS
==============================================================*/

#quoteForm .form-label{

    color:var(--services-primary);

    font-weight:700;

    margin-bottom:12px;

    font-size:15px;

}


/*==============================================================
INPUTS
==============================================================*/

#quoteForm .form-control,

#quoteForm .form-select{

    height:58px;

    border:2px solid var(--services-border);

    border-radius:16px;

    padding:0 20px;

    color:var(--services-primary);

    font-size:15px;

    transition:var(--transition);

    background:#ffffff;

}

#quoteForm textarea.form-control{

    min-height:180px;

    resize:vertical;

    padding:18px 20px;

    line-height:1.8;

}


/*==============================================================
PLACEHOLDER
==============================================================*/

#quoteForm .form-control::placeholder{

    color:#8b98a7;

}

#quoteForm textarea::placeholder{

    color:#8b98a7;

}


/*==============================================================
FOCUS
==============================================================*/

#quoteForm .form-control:focus,

#quoteForm .form-select:focus{

    border-color:var(--services-secondary);

    background:#ffffff;

    box-shadow:

        0 0 0 .2rem rgba(255,204,0,.20);

}


/*==============================================================
SELECT
==============================================================*/

#quoteForm .form-select{

    cursor:pointer;

}


/*==============================================================
TEXTAREA
==============================================================*/

#quoteForm textarea{

    font-size:15px;

}


/*==============================================================
FORM TEXT
==============================================================*/

#quoteForm .form-text{

    font-size:13px;

    color:var(--services-text);

    margin-top:10px;

}


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

#quoteForm .mb-4{

    margin-bottom:1.8rem !important;

}


/*==============================================================
INPUT HOVER
==============================================================*/

#quoteForm .form-control:hover,

#quoteForm .form-select:hover{

    border-color:rgba(10,43,29,.30);

}


/*==============================================================
AUTOFILL
==============================================================*/

input:-webkit-autofill,

textarea:-webkit-autofill,

select:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:var(--services-primary);

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

    .contact-form-content{

        margin-bottom:40px;

    }

    .contact-form-card{

        padding:40px;

    }

}

@media(max-width:767px){

    .contact-form-content h2{

        font-size:36px;

    }

    .contact-form-card{

        padding:30px 24px;

    }

    .response-box{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .quote-feature{

        padding:15px;

    }

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 3B
ADVANCED FORM COMPONENTS
==============================================================*/


/*==============================================================
SPECIAL REQUIREMENTS
==============================================================*/

#quoteForm .form-check{

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    background:var(--services-white);

    border:2px solid var(--services-border);

    border-radius:16px;

    transition:var(--transition);

    cursor:pointer;

    height:100%;

}

#quoteForm .form-check:hover{

    border-color:var(--services-secondary);

    background:rgba(255,204,0,.06);

}

#quoteForm .form-check-input{

    width:22px;

    height:22px;

    margin-top:0;

    cursor:pointer;

    border:2px solid var(--services-border);

}

#quoteForm .form-check-input:checked{

    background-color:var(--services-primary);

    border-color:var(--services-primary);

}

#quoteForm .form-check-input:focus{

    box-shadow:0 0 0 .2rem rgba(255,204,0,.20);

}

#quoteForm .form-check-label{

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:var(--services-primary);

    flex:1;

}


/*==============================================================
MESSAGE COUNTER
==============================================================*/

#messageCounter{

    font-weight:700;

    color:var(--services-primary);

}

#messageCounter.warning{

    color:#ff9800;

}

#messageCounter.danger{

    color:#dc3545;

}


/*==============================================================
FILE UPLOAD
==============================================================*/

#attachments{

    padding:18px;

    border:2px dashed var(--services-border);

    border-radius:18px;

    background:var(--services-light);

    cursor:pointer;

    transition:var(--transition);

}

#attachments:hover{

    border-color:var(--services-secondary);

    background:#fffdf4;

}

#attachments:focus{

    border-color:var(--services-secondary);

}


/*==============================================================
FILE PREVIEW
==============================================================*/

.file-preview{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.file-preview-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#ffffff;

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

    border-radius:16px;

    padding:14px 18px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.file-preview-item i{

    font-size:28px;

    color:var(--services-primary);

}

.file-preview-item .file-info{

    flex:1;

}

.file-preview-item .file-name{

    font-weight:600;

    color:var(--services-primary);

    font-size:14px;

    margin-bottom:4px;

}

.file-preview-item .file-size{

    font-size:13px;

    color:var(--services-text);

}

.file-remove{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#ffe9e9;

    color:#dc3545;

    cursor:pointer;

    transition:var(--transition);

}

.file-remove:hover{

    background:#dc3545;

    color:#ffffff;

}


/*==============================================================
RECAPTCHA
==============================================================*/

.recaptcha-placeholder{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:82px;

    border:2px dashed var(--services-border);

    border-radius:18px;

    background:var(--services-light);

    transition:var(--transition);

}

.recaptcha-placeholder:hover{

    border-color:var(--services-secondary);

}


/*==============================================================
SUCCESS ALERT
==============================================================*/

#formSuccess{

    border:none;

    border-left:6px solid #28a745;

    border-radius:16px;

    padding:18px 24px;

    font-weight:600;

}


/*==============================================================
ERROR ALERT
==============================================================*/

#formError{

    border:none;

    border-left:6px solid #dc3545;

    border-radius:16px;

    padding:18px 24px;

    font-weight:600;

}


/*==============================================================
INVALID INPUT
==============================================================*/

#quoteForm .is-invalid{

    border-color:#dc3545 !important;

}

#quoteForm .is-valid{

    border-color:#28a745 !important;

}


/*==============================================================
HELPER TEXT
==============================================================*/

#quoteForm .form-text{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}


/*==============================================================
CHECKBOX GROUP SPACING
==============================================================*/

#quoteForm .form-check+

.form-check{

    margin-top:12px;

}


/*==============================================================
CONSENT AREA
==============================================================*/

#quoteForm .form-check a{

    color:var(--services-primary);

    font-weight:700;

}

#quoteForm .form-check a:hover{

    color:var(--services-primary-light);

}


/*==============================================================
UPLOAD ICON EFFECT
==============================================================*/

#attachments:hover::file-selector-button{

    background:var(--services-secondary);

}


/*==============================================================
FILE BUTTON
==============================================================*/

#attachments::file-selector-button{

    margin-right:18px;

    border:none;

    background:var(--services-primary);

    color:#ffffff;

    padding:12px 20px;

    border-radius:12px;

    cursor:pointer;

    transition:var(--transition);

}

#attachments::file-selector-button:hover{

    background:var(--services-primary-light);

}


/*==============================================================
FORM ANIMATION
==============================================================*/

.contact-form-card{

    animation:contactFade .8s ease;

}

@keyframes contactFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:767px){

    #quoteForm .form-check{

        padding:14px;

    }

    .file-preview{

        flex-direction:column;

    }

    .file-preview-item{

        width:100%;

    }

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 3C
FORM SUBMISSION & FINAL POLISH
==============================================================*/


/*==============================================================
SUBMIT BUTTON
==============================================================*/

#submitQuote{

    position:relative;

    overflow:hidden;

    min-height:64px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--services-primary),
        var(--services-primary-light)
    );

    color:var(--services-white);

    font-size:17px;

    font-weight:700;

    letter-spacing:.4px;

    transition:var(--transition);

    box-shadow:0 18px 45px rgba(10,43,29,.20);

}

#submitQuote:hover{

    transform:translateY(-4px);

    box-shadow:0 28px 60px rgba(10,43,29,.28);

}

#submitQuote:active{

    transform:translateY(0);

}

#submitQuote:focus{

    outline:none;

    box-shadow:
        0 0 0 .25rem rgba(255,204,0,.25),
        0 18px 45px rgba(10,43,29,.20);

}


/*==============================================================
BUTTON SHINE
==============================================================*/

#submitQuote::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transition:.8s;

}

#submitQuote:hover::before{

    left:150%;

}


/*==============================================================
BUTTON CONTENT
==============================================================*/

.submit-text,

.loading-text{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:var(--transition);

}

.loading-text{

    font-weight:600;

}


/*==============================================================
LOADING STATE
==============================================================*/

#submitQuote.loading{

    pointer-events:none;

    cursor:not-allowed;

    opacity:.92;

}

#submitQuote.loading .submit-text{

    display:none;

}

#submitQuote.loading .loading-text{

    display:flex !important;

}


/*==============================================================
SPINNER
==============================================================*/

.loading-text .spinner-border{

    width:1rem;

    height:1rem;

    border-width:.16rem;

}


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

.form-footer{

    margin-top:35px;

    padding-top:25px;

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

}

.form-footer p{

    margin:0;

    font-size:14px;

    line-height:1.8;

    color:var(--services-text);

}

.form-footer i{

    color:var(--services-secondary);

}


/*==============================================================
SECURITY NOTICE
==============================================================*/

.form-footer strong{

    color:var(--services-primary);

}


/*==============================================================
FORM CARD HOVER
==============================================================*/

.contact-form-card{

    transition:var(--transition);

}

.contact-form-card:hover{

    transform:translateY(-6px);

}


/*==============================================================
REQUIRED ASTERISK
==============================================================*/

.form-label.required::after{

    content:" *";

    color:#dc3545;

    font-weight:700;

}


/*==============================================================
DISABLED FIELDS
==============================================================*/

#quoteForm input:disabled,

#quoteForm textarea:disabled,

#quoteForm select:disabled{

    background:#f4f6f8;

    opacity:.75;

    cursor:not-allowed;

}


/*==============================================================
READONLY FIELDS
==============================================================*/

#quoteForm input[readonly],

#quoteForm textarea[readonly]{

    background:#fafafa;

}


/*==============================================================
INPUT TRANSITION
==============================================================*/

#quoteForm input,

#quoteForm textarea,

#quoteForm select{

    transition:

        border-color .3s,

        box-shadow .3s,

        background .3s,

        transform .25s;

}

#quoteForm input:focus,

#quoteForm textarea:focus,

#quoteForm select:focus{

    transform:translateY(-2px);

}


/*==============================================================
INVALID FEEDBACK
==============================================================*/

.invalid-feedback{

    font-size:13px;

    margin-top:8px;

    font-weight:500;

}

.valid-feedback{

    font-size:13px;

    margin-top:8px;

    font-weight:500;

}


/*==============================================================
FORM DIVIDER
==============================================================*/

.form-divider{

    position:relative;

    margin:35px 0;

    text-align:center;

}

.form-divider::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:100%;

    height:1px;

    background:var(--services-border);

}

.form-divider span{

    position:relative;

    display:inline-block;

    padding:0 20px;

    background:#ffffff;

    color:var(--services-text);

    font-size:14px;

}


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

.cursor-pointer{

    cursor:pointer;

}

.text-primary-brand{

    color:var(--services-primary);

}

.text-secondary-brand{

    color:var(--services-secondary);

}

.bg-light-brand{

    background:var(--services-light);

}

.rounded-brand{

    border-radius:var(--services-radius);

}


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

#quoteForm input:focus-visible,

#quoteForm textarea:focus-visible,

#quoteForm select:focus-visible,

#submitQuote:focus-visible{

    outline:3px solid rgba(255,204,0,.35);

    outline-offset:3px;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:991px){

    .form-footer{

        text-align:center;

    }

}

@media (max-width:767px){

    #submitQuote{

        min-height:58px;

        font-size:16px;

        padding:16px 20px;

    }

    .submit-text,

    .loading-text{

        gap:8px;

    }

    .form-footer{

        padding-top:20px;

    }

    .form-footer p{

        font-size:13px;

    }

}

@media (max-width:575px){

    #submitQuote{

        width:100%;

    }

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 4A
OFFICE INFORMATION & GOOGLE MAP
==============================================================*/


/*==============================================================
OFFICE INFORMATION SECTION
==============================================================*/

.office-information{

    position:relative;

    overflow:hidden;

    background:var(--services-white);

}

.office-information::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    right:-220px;

}

.office-information::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,204,0,.10);

    left:-150px;

    bottom:-150px;

}


/*==============================================================
OFFICE CARD
==============================================================*/

.office-card{

    position:relative;

    background:var(--services-white);

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

    border-radius:30px;

    padding:40px;

    overflow:hidden;

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

    transition:var(--transition);

}

.office-card:hover{

    transform:translateY(-8px);

}

.office-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--services-secondary);

}


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

.office-card-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}

.office-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

    transition:var(--transition);

}

.office-icon i{

    font-size:34px;

    color:var(--services-primary);

}

.office-card:hover .office-icon{

    background:var(--services-primary);

}

.office-card:hover .office-icon i{

    color:var(--services-secondary);

}

.office-card-header span{

    display:block;

    color:var(--services-secondary);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:6px;

}

.office-card-header h3{

    color:var(--services-primary);

    font-size:30px;

    margin:0;

}


/*==============================================================
OFFICE DETAILS
==============================================================*/

.office-details{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.office-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.office-item i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:rgba(255,204,0,.18);

    color:var(--services-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    flex-shrink:0;

}

.office-item h6{

    color:var(--services-primary);

    margin-bottom:8px;

    font-weight:700;

}

.office-item p{

    margin:0;

    line-height:1.8;

    color:var(--services-text);

}


/*==============================================================
SERVICE COVERAGE
==============================================================*/

.coverage-grid{

    display:grid;

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

    gap:18px;

}

.coverage-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:16px;

    background:var(--services-light);

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

    transition:var(--transition);

}

.coverage-item:hover{

    background:var(--services-primary);

    transform:translateY(-4px);

}

.coverage-item i{

    color:var(--services-secondary);

    font-size:20px;

}

.coverage-item span{

    font-weight:600;

    color:var(--services-primary);

}

.coverage-item:hover span{

    color:var(--services-white);

}


/*==============================================================
SIDEBAR CARD
==============================================================*/

.office-sidebar-card{

    background:var(--services-white);

    border-radius:30px;

    padding:35px;

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

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

    transition:var(--transition);

}

.office-sidebar-card:hover{

    transform:translateY(-8px);

}


/*==============================================================
SIDEBAR TITLE
==============================================================*/

.sidebar-title{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:30px;

}

.sidebar-title i{

    width:60px;

    height:60px;

    border-radius:16px;

    background:rgba(10,43,29,.08);

    color:var(--services-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.sidebar-title h4{

    margin:0;

    color:var(--services-primary);

}


/*==============================================================
WORKING HOURS
==============================================================*/

.working-hours-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.working-hours-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

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

}

.working-hours-list li:last-child{

    border-bottom:none;

}

.working-hours-list span{

    color:var(--services-text);

}

.working-hours-list strong{

    color:var(--services-primary);

    font-weight:700;

}


/*==============================================================
WHY CHOOSE
==============================================================*/

.why-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.why-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.why-item i{

    color:var(--services-secondary);

    font-size:20px;

}

.why-item span{

    color:var(--services-primary);

    font-weight:600;

}


/*==============================================================
MAP SECTION
==============================================================*/

.office-map-section{

    background:var(--services-light);

}

.office-map-card{

    overflow:hidden;

    border-radius:30px;

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

    background:var(--services-white);

}

.office-map{

    position:relative;

}

.office-map iframe{

    width:100%;

    height:550px;

    border:none;

    display:block;

}


/*==============================================================
MAP OVERLAY
==============================================================*/

.office-map-overlay{

    background:var(--services-white);

    padding:40px;

}

.map-info-card{

    text-align:center;

    padding:30px 20px;

    border-radius:20px;

    background:var(--services-light);

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

    transition:var(--transition);

    height:100%;

}

.map-info-card:hover{

    transform:translateY(-6px);

    background:var(--services-primary);

}

.map-info-card .icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

}

.map-info-card i{

    font-size:28px;

    color:var(--services-primary);

}

.map-info-card h5{

    color:var(--services-primary);

    margin-bottom:15px;

}

.map-info-card p{

    margin:0;

    line-height:1.8;

    color:var(--services-text);

}

.map-info-card:hover h5,

.map-info-card:hover p{

    color:var(--services-white);

}

.map-info-card:hover .icon{

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

}

.map-info-card:hover i{

    color:var(--services-secondary);

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 4B
MAP ACTIONS & LOCATION FEATURES
==============================================================*/


/*==============================================================
QUICK ACTION CARDS
==============================================================*/

.location-action-card{

    position:relative;

    background:var(--services-white);

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

    border-radius:var(--services-radius);

    padding:40px 30px;

    text-align:center;

    overflow:hidden;

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

    transition:var(--transition);

    height:100%;

}

.location-action-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.location-action-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--services-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.location-action-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ACTION ICON
==============================================================*/

.location-action-card .icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

    transition:var(--transition);

}

.location-action-card .icon i{

    font-size:34px;

    color:var(--services-primary);

}

.location-action-card:hover .icon{

    background:var(--services-primary);

}

.location-action-card:hover .icon i{

    color:var(--services-secondary);

}


/*==============================================================
ACTION CONTENT
==============================================================*/

.location-action-card h4{

    font-size:24px;

    font-weight:700;

    color:var(--services-primary);

    margin-bottom:18px;

}

.location-action-card p{

    font-size:15px;

    line-height:1.9;

    color:var(--services-text);

    margin-bottom:28px;

}


/*==============================================================
ACTION BUTTON
==============================================================*/

.location-action-card .btn{

    min-width:180px;

}


/*==============================================================
LOCATION FEATURES
==============================================================*/

.location-features{

    margin-top:70px;

}

.location-features .feature{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:var(--services-white);

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

    border-radius:20px;

    padding:35px 20px;

    height:100%;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    transition:var(--transition);

}

.location-features .feature:hover{

    transform:translateY(-8px);

    background:var(--services-primary);

}

.location-features .feature i{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

    color:var(--services-primary);

    font-size:28px;

    margin-bottom:20px;

    transition:var(--transition);

}

.location-features .feature:hover i{

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

    color:var(--services-secondary);

}

.location-features .feature h6{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:var(--services-primary);

    transition:var(--transition);

}

.location-features .feature:hover h6{

    color:var(--services-white);

}


/*==============================================================
MAP HOVER EFFECT
==============================================================*/

.office-map-card{

    transition:var(--transition);

}

.office-map-card:hover{

    transform:translateY(-6px);

}


/*==============================================================
MAP FRAME
==============================================================*/

.office-map{

    overflow:hidden;

}

.office-map iframe{

    transition:transform .6s ease;

}

.office-map-card:hover iframe{

    transform:scale(1.02);

}


/*==============================================================
DECORATIVE SHAPES
==============================================================*/

.office-map-section{

    position:relative;

    overflow:hidden;

}

.office-map-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(10,43,29,.035);

    left:-180px;

    top:-180px;

}

.office-map-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    right:-120px;

    bottom:-120px;

}


/*==============================================================
BUTTON HOVER
==============================================================*/

.location-action-card .btn:hover{

    transform:translateY(-3px);

}


/*==============================================================
SMALL ANIMATION
==============================================================*/

.location-action-card,

.office-card,

.office-sidebar-card,

.map-info-card,

.location-features .feature{

    animation:contactFadeUp .7s ease both;

}

@keyframes contactFadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:991px){

    .coverage-grid{

        grid-template-columns:1fr;

    }

    .office-card,

    .office-sidebar-card{

        padding:30px;

    }

    .office-map-overlay{

        padding:30px;

    }

}

@media (max-width:767px){

    .office-card-header{

        flex-direction:column;

        text-align:center;

    }

    .office-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .working-hours-list li{

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

    .sidebar-title{

        flex-direction:column;

        text-align:center;

    }

    .office-map iframe{

        height:380px;

    }

    .location-action-card{

        padding:30px 22px;

    }

    .location-features .feature{

        padding:30px 20px;

    }

}

@media (max-width:575px){

    .office-card,

    .office-sidebar-card,

    .office-map-overlay{

        padding:24px;

    }

    .office-card-header h3{

        font-size:24px;

    }

    .location-action-card h4{

        font-size:20px;

    }

    .location-action-card .btn{

        width:100%;

    }

}
/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 5A
DEPARTMENT DIRECTORY
==============================================================*/


/*==============================================================
DEPARTMENT DIRECTORY
==============================================================*/

.department-directory{

    position:relative;

    overflow:hidden;

    background:var(--services-white);

}

.department-directory::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(10,43,29,.03);

    top:-220px;

    left:-180px;

}

.department-directory::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    bottom:-120px;

    right:-120px;

}


/*==============================================================
DEPARTMENT CARD
==============================================================*/

.department-card{

    position:relative;

    background:var(--services-white);

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

    border-radius:var(--services-radius);

    padding:35px;

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

    transition:var(--transition);

    overflow:hidden;

}

.department-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--services-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.department-card:hover{

    transform:translateY(-10px);

}

.department-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.department-icon{

    width:78px;

    height:78px;

    border-radius:20px;

    background:rgba(10,43,29,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    transition:var(--transition);

}

.department-icon i{

    font-size:32px;

    color:var(--services-primary);

}

.department-card:hover .department-icon{

    background:var(--services-primary);

}

.department-card:hover .department-icon i{

    color:var(--services-secondary);

}


/*==============================================================
TITLE
==============================================================*/

.department-card h4{

    color:var(--services-primary);

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.department-card p{

    color:var(--services-text);

    line-height:1.9;

    margin-bottom:28px;

}


/*==============================================================
META
==============================================================*/

.department-meta{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:30px;

}

.department-meta li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:var(--services-text);

    line-height:1.7;

}

.department-meta i{

    color:var(--services-secondary);

    font-size:18px;

}


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

.department-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--services-primary);

    transition:var(--transition);

}

.department-btn i{

    transition:var(--transition);

}

.department-btn:hover{

    color:var(--services-primary-light);

}

.department-btn:hover i{

    transform:translateX(6px);

}


/*==============================================================
HOVER CIRCLE
==============================================================*/

.department-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

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

    right:-70px;

    bottom:-70px;

    transition:.4s;

}

.department-card:hover::after{

    transform:scale(1.3);

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:767px){

    .department-card{

        padding:28px 22px;

    }

}

/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 5B
EMERGENCY CLEANING
==============================================================*/


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

.emergency-cleaning-section{

    position:relative;

    padding-bottom:120px;

    background:var(--services-light);

    overflow:hidden;

}


/*==============================================================
WRAPPER
==============================================================*/

.emergency-cleaning-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:40px;

    background:linear-gradient(

        135deg,

        var(--services-primary),

        var(--services-primary-light)

    );

    padding:70px;

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

}


/*==============================================================
SHAPES
==============================================================*/

.emergency-shape{

    position:absolute;

    border-radius:50%;

}

.shape-one{

    width:350px;

    height:350px;

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

    top:-160px;

    right:-120px;

}

.shape-two{

    width:220px;

    height:220px;

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

    bottom:-100px;

    left:-70px;

}

.shape-three{

    width:160px;

    height:160px;

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

    right:30%;

    bottom:-70px;

}


/*==============================================================
CONTENT
==============================================================*/

.emergency-content{

    position:relative;

    z-index:2;

}

.emergency-badge{

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

    color:var(--services-secondary);

}

.emergency-content h2{

    color:#ffffff;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.emergency-content p{

    color:rgba(255,255,255,.88);

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}


/*==============================================================
SERVICES
==============================================================*/

.emergency-services{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.service-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-weight:600;

}

.service-item i{

    color:var(--services-secondary);

}


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

.emergency-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.emergency-buttons .btn{

    min-width:220px;

}


/*==============================================================
CARD
==============================================================*/

.emergency-card{

    position:relative;

    z-index:2;

    background:#ffffff;

    border-radius:30px;

    padding:40px;

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

}

.emergency-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.emergency-card-header .icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,43,29,.08);

}

.emergency-card-header .icon i{

    font-size:30px;

    color:var(--services-primary);

}

.emergency-card-header h4{

    margin-bottom:6px;

    color:var(--services-primary);

}

.emergency-card-header p{

    margin:0;

    color:var(--services-text);

}


/*==============================================================
RESPONSE BOX
==============================================================*/

.response-time-box{

    text-align:center;

    padding:30px;

    border-radius:20px;

    background:var(--services-light);

    margin-bottom:35px;

}

.response-time-box span{

    display:block;

    color:var(--services-text);

    margin-bottom:12px;

}

.response-time-box h2{

    color:var(--services-primary);

    font-size:38px;

    font-weight:800;

    margin-bottom:15px;

}

.response-time-box p{

    margin:0;

    line-height:1.8;

}


/*==============================================================
STATS
==============================================================*/

.emergency-stats{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.stat{

    text-align:center;

}

.stat h3{

    color:var(--services-secondary);

    font-size:34px;

    font-weight:800;

    margin-bottom:8px;

}

.stat span{

    display:block;

    font-size:14px;

    color:var(--services-text);

}


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

.emergency-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.contact-row{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:600;

    color:var(--services-primary);

}

.contact-row i{

    color:var(--services-secondary);

    font-size:20px;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

    .emergency-cleaning-wrapper{

        padding:50px;

    }

}

@media(max-width:767px){

    .emergency-cleaning-wrapper{

        padding:35px 25px;

    }

    .emergency-content h2{

        font-size:38px;

    }

    .emergency-services{

        grid-template-columns:1fr;

    }

    .emergency-stats{

        grid-template-columns:1fr;

    }

    .emergency-buttons{

        flex-direction:column;

    }

    .emergency-buttons .btn{

        width:100%;

    }

    .emergency-card{

        margin-top:40px;

        padding:30px 24px;

    }

    .emergency-card-header{

        flex-direction:column;

        text-align:center;

    }

}
/*==============================================================
CONTACT PAGE
CONTACT.CSS
PART 6
FINAL RESPONSIVE & PRODUCTION POLISH
==============================================================*/


/*==============================================================
SECTION OVERFLOW FIXES
==============================================================*/

.contact-hero,
.contact-info,
.contact-form-section,
.office-information,
.office-map-section,
.department-directory,
.emergency-cleaning-section{

    position:relative;

    overflow:hidden;

}


/*==============================================================
SMOOTH TRANSITIONS
==============================================================*/

.contact-page *{

    transition:

        color .3s ease,

        background-color .3s ease,

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}


/*==============================================================
FOCUS STATES
==============================================================*/

button:focus-visible,

a:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible{

    outline:3px solid rgba(255,204,0,.35);

    outline-offset:3px;

}


/*==============================================================
TEXT SELECTION
==============================================================*/

::selection{

    background:var(--services-secondary);

    color:var(--services-primary);

}


/*==============================================================
SCROLL MARGIN
==============================================================*/

#contact-form,
#office-location{

    scroll-margin-top:120px;

}


/*==============================================================
IMAGE RESPONSIVENESS
==============================================================*/

.contact-page img{

    max-width:100%;

    height:auto;

}


/*==============================================================
IFRAME RESPONSIVENESS
==============================================================*/

iframe{

    max-width:100%;

}


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

.bg-brand{

    background:var(--services-primary);

}

.bg-light-brand{

    background:var(--services-light);

}

.text-brand{

    color:var(--services-primary);

}

.text-gold{

    color:var(--services-secondary);

}

.border-brand{

    border-color:var(--services-primary);

}

.shadow-brand{

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

}

.rounded-brand{

    border-radius:var(--services-radius);

}


/*==============================================================
HOVER UTILITIES
==============================================================*/

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-shadow:hover{

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}


/*==============================================================
COMMON CARD STYLING
==============================================================*/

.contact-info-card,
.office-card,
.office-sidebar-card,
.department-card,
.location-action-card,
.map-info-card,
.contact-form-card{

    will-change:transform;

}


/*==============================================================
AOS IMPROVEMENTS
==============================================================*/

[data-aos]{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}


/*==============================================================
BUTTON ACTIVE
==============================================================*/

.btn:active{

    transform:scale(.98);

}


/*==============================================================
LINK ANIMATION
==============================================================*/

a{

    text-underline-offset:4px;

}


/*==============================================================
TABLET
==============================================================*/

@media (max-width:1199px){

    .section-padding{

        padding:100px 0;

    }

    .section-title h2{

        font-size:40px;

    }

    .contact-hero-content h1{

        font-size:54px;

    }

}


/*==============================================================
992PX
==============================================================*/

@media (max-width:991px){

    .section-padding{

        padding:90px 0;

    }

    .section-title{

        margin-bottom:50px;

        text-align:center;

    }

    .contact-hero{

        padding:140px 0 90px;

    }

    .contact-hero-content{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-contact-info{

        justify-content:center;

    }

    .floating-card{

        display:none;

    }

    .experience-badge{

        right:20px;

        top:auto;

        bottom:20px;

        transform:none;

    }

}


/*==============================================================
768PX
==============================================================*/

@media (max-width:767px){

    .section-padding{

        padding:80px 0;

    }

    .section-title h2{

        font-size:34px;

    }

    .contact-hero-content h1{

        font-size:42px;

    }

    .contact-hero-content p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-contact-info{

        flex-direction:column;

    }

    .hero-info-item{

        width:100%;

        justify-content:center;

    }

    .experience-badge{

        width:120px;

        height:120px;

    }

    .experience-badge h2{

        font-size:32px;

    }

}


/*==============================================================
576PX
==============================================================*/

@media (max-width:575px){

    .section-title h2{

        font-size:30px;

    }

    .contact-hero{

        padding:120px 0 70px;

    }

    .contact-hero-content h1{

        font-size:34px;

    }

    .section-badge{

        font-size:12px;

        padding:8px 18px;

    }

    .btn{

        padding:14px 24px;

    }

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


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

@media print{

    .btn,

    .floating-card,

    .contact-highlight,

    .emergency-cleaning-section{

        display:none !important;

    }

    body{

        background:#ffffff;

    }

    .section-padding{

        padding:25px 0;

    }

}


/*==============================================================
SCROLLBAR (WEBKIT)
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f4f6;

}

::-webkit-scrollbar-thumb{

    background:var(--services-primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--services-primary-light);

}


/*==============================================================
END OF CONTACT.CSS
==============================================================*/