/*==========================================
    AanuOre Services
    Main Stylesheet
===========================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#C9A227;
    --primary-dark:#A67C00;
    --accent:#F4E6B2;

    --white:#FFFFFF;
    --light:#FAFAFA;
    --dark:#333333;
    --gray:#666666;
    --border:#EAEAEA;

    --radius:14px;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --transition:.35s ease;

}

/*=============================
    Reset
=============================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--white);
    color:var(--dark);
    line-height:1.7;
}

img{
    max-width:100%;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

ul{
    list-style:none;
}

section{
    padding:90px 0;
}

/*=============================
    Typography
=============================*/

h1,h2,h3,h4,h5,h6{
    color:var(--dark);
    font-weight:700;
}

p{
    color:var(--gray);
}

/*=============================
    Navbar
=============================*/

.navbar{
    background:#fff!important;
    padding:18px 0;
    box-shadow:0 3px 20px rgba(0,0,0,.06);
}

.navbar-brand{
    color:var(--primary)!important;
    font-size:30px;
    font-weight:700;
}

.nav-link{
    color:var(--dark)!important;
    margin-left:20px;
    font-weight:500;
    position:relative;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;
}

.nav-link:hover,
.nav-link.active{
    color:var(--primary)!important;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}

/*=============================
    Hero
=============================*/

.hero{
    min-height:90vh;
    display:flex;
    align-items:center;
    background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),
    url("../images/hero-bg.jpg") center center/cover;
}

.hero h1{
    font-size:58px;
    font-weight:800;
    margin-bottom:25px;
}

.hero p{
    font-size:18px;
    margin-bottom:35px;
}

.hero img{
    animation:float 5s infinite ease-in-out;
}

/*=============================
    Buttons
=============================*/

.btn{
    padding:14px 32px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    border:2px solid var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-4px);
}

.btn-outline-primary{
    border:2px solid var(--primary);
    color:var(--primary);
}

.btn-outline-primary:hover{
    background:var(--primary);
    color:#fff;
}

/*=============================
    Section Title
=============================*/

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:40px;
}

.section-title h2::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:var(--primary);
    margin:18px auto;
    border-radius:50px;
}

/*=============================
    Cards
=============================*/

.card{
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:.4s;
    overflow:hidden;
    background:#fff;
}

.card:hover{
    transform:translateY(-10px);
}

.card-body{
    padding:35px;
}

.card i{
    color:var(--primary);
    transition:.4s;
}

.card:hover i{
    transform:scale(1.2);
}

/*=============================
    Service Cards
=============================*/

.service-card{

    text-align:center;
    padding:40px 25px;
    border-radius:15px;
    background:#fff;
    box-shadow:var(--shadow);
    transition:.4s;

}

.service-card:hover{

    background:var(--primary);
    transform:translateY(-8px);

}

.service-card:hover h4,
.service-card:hover p,
.service-card:hover i{

    color:#fff;

}

.service-card i{

    font-size:55px;
    margin-bottom:20px;
    color:var(--primary);

}

/*=============================
    Counter
=============================*/

.counter-box{

    text-align:center;
    padding:40px;
    border-radius:15px;
    background:#fff;
    box-shadow:var(--shadow);

}

.counter-box h2{

    color:var(--primary);
    font-size:50px;
    font-weight:700;

}

/*=============================
    Why Choose Us
=============================*/

.list-group-item{

    border:none;
    margin-bottom:15px;
    border-radius:12px!important;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
    padding:18px;

}

/*=============================
    Call To Action
=============================*/

.cta{

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    text-align:center;

}

.cta h2,
.cta p{

    color:#fff;

}

/*=============================
    Footer
=============================*/

footer{

    background:#222;
    color:#fff;
    padding:40px 0;

}

footer p{

    color:#ccc;

}

footer a{

    color:var(--accent);

}

footer a:hover{

    color:var(--primary);

}

/*=============================
    Forms
=============================*/

.form-control{

    border-radius:10px;
    padding:14px;
    border:1px solid var(--border);

}

.form-control:focus{

    border-color:var(--primary);
    box-shadow:none;

}

/*=============================
    Images
=============================*/

.rounded-img{

    border-radius:18px;

}

/*=============================
    Animations
=============================*/

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0);
}

}

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/*=============================
    Scrollbar
=============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*=============================
    Responsive
=============================*/

@media(max-width:991px){

.hero{

text-align:center;
padding:100px 0;

}

.hero h1{

font-size:42px;

}

.nav-link{

margin-left:0;
padding:12px;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.hero{

min-height:auto;

}

.hero h1{

font-size:34px;

}

.section-title h2{

font-size:32px;

}

.btn{

width:100%;
margin-bottom:12px;

}

}

@media(max-width:576px){

.hero h1{

font-size:28px;

}

.counter-box h2{

font-size:36px;

}

.section-title h2{

font-size:28px;

}

}