/*=========================================================
    CHEROMEGA CLEANING SERVICES
    MODERN DESIGN SYSTEM
==========================================================*/

:root{

    /* Brand Colors */
    --primary:#1E4DB7;
    --secondary:#14B5F5;
    --accent:#42C8FF;

    /* Neutral Colors */
    --white:#FFFFFF;
    --light:#F4FAFF;
    --lighter:#FAFDFF;
    --text:#2353A3;
    --border:#DCEBFA;

    /* Gradient */
    --gradient:linear-gradient(135deg,#14B5F5,#1E4DB7);

    /* Shadows */
    --shadow:0 12px 30px rgba(30,77,183,.12);

    /* Radius */
    --radius:18px;

    /* Animation */
    --transition:.35s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--lighter);

    color:var(--text);

    overflow-x:hidden;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

section{

    padding:90px 0;

}

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

.topbar{

    background:var(--gradient);

    color:#fff;

    font-size:14px;

    font-weight:500;

}

.topbar a{

    color:#fff;

}

.topbar a:hover{

    color:#E8F8FF;

}

/*========================
    NAVBAR
=========================*/

.navbar{

    background:#fff;

    padding:20px 0;

    box-shadow:0 2px 20px rgba(30,77,183,.08);

}

.navbar-brand img{

    height:90px;

}

.nav-link{

    color:var(--primary);

    font-weight:600;

    margin-left:25px;

    position:relative;

}

.nav-link:hover{

    color:var(--secondary);

}

.nav-link.active{

    color:var(--secondary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--gradient);

    transition:.3s;

    border-radius:30px;

}

.nav-link:hover::after{

    width:100%;

}

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

.btn-primary{

    background:var(--gradient);

    border:none;

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-outline-primary{

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

    color:var(--primary);

    background:#fff;

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

}

.btn-outline-primary:hover{

    background:var(--gradient);

    color:#fff;

    border-color:transparent;

}

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

h1,
h2,
h3,
h4,
h5{

    color:var(--primary);

    font-weight:700;

}

h1{

    font-size:clamp(2.2rem,5vw,4rem);

}

h2{

    font-size:clamp(1.8rem,4vw,3rem);

}

p{

    color:#5D7CB3;

    line-height:1.8;

}

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

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}



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

footer{

    background:var(--gradient);

    color:#fff;

    padding:70px 0 25px;

}

footer h5{

    color:#fff;

    font-weight:600;

    margin-bottom:20px;

}

footer p,
footer li,
footer small{

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

}

footer ul{

    list-style:none;

    padding:0;

}

footer ul li{

    margin-bottom:12px;

}

footer a{

    color:#fff;

    transition:var(--transition);

}

footer a:hover{

    color:#E8F8FF;

    padding-left:4px;

}

footer hr{

    border-color:rgba(255,255,255,.25);

}

footer .bi{

    font-size:1.1rem;

}
/*========================
    UTILITIES
=========================*/

.bg-section{

    background:#F4FAFF;

}

.text-blue{

    color:var(--primary);

}

.rounded-xl{

    border-radius:var(--radius);

}

.shadow-custom{

    box-shadow:var(--shadow);

}
.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#fff;

text-decoration:none;

z-index:999;

box-shadow:0 15px 30px rgba(0,0,0,.25);

transition:.35s;

}

.whatsapp-btn:hover{

transform:scale(1.12);

color:#fff;

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

#backToTop{

position:fixed;

bottom:100px;

right:25px;

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:30px;

text-decoration:none;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

box-shadow:0 10px 25px rgba(0,0,0,.2);

}

#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

background:var(--secondary);

transform:translateY(-5px);

color:#fff;

}