/* ==========================================================
   Color Palette
========================================================== */

:root {

    /* Brand */
    --primary: #0F3D7A;
    --primary-dark: #0B2E5B;
    --primary-light: #2A5FA8;

    /* Accent */
    --accent: #C8A45A;
    --accent-dark: #B18E46;
    --accent-light: #D8BB80;

    /* Background */
    --bg-body: #F3F3F4;
    --bg-white: #FFFFFF;
    --bg-light: #F8F8F8;

    /* Text */
    --text-dark: #222222;
    --text: #333333;
    --text-light: #666666;

    /* Border */
    --border: #DDDDDD;

    /* Shadow */
    --shadow: 0 10px 30px rgba(0,0,0,.08);

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

    /* Transition */
    --transition: all .3s ease;
}


/* ==========================================================
   General
========================================================== */

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg-body);
    line-height: 1.8;
    font-size: 16px;
}

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

img {
    max-width: 100%;
}

.container {
    max-width: 1320px;
}


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

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

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

    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;

}

.section {
    padding: 100px 0;
}

.section-title {

    margin-bottom: 60px;

}

.section-title small {

    display: inline-block;

    text-transform: uppercase;

    color: var(--accent);

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 10px;

}

.section-title h2 {

    font-size: 52px;
    font-weight: 600;
    color: var(--primary);

}

.section-title p {

    color: var(--text-light);

    max-width: 700px;

    margin: auto;

}


/* ==========================================================
   Header
========================================================== */

.header-top {

    background: var(--bg-body);

    padding: 25px 0;

}

.logo img {

    width: 340px;

    height: auto;

}


.navbar {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.navbar-nav .nav-link {

    position: relative;

    padding: 1em 0;

    margin-right: 60px;

    font-size: 1em;

    font-weight: 600;

    letter-spacing: 1px;

    color: var(--text-dark);

}

.navbar-nav .nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 0;

    height: 3px;

    background: var(--accent);

    transition: .3s;

}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {

    width: 100%;

}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {

    color: var(--primary);

}


.navbar-toggler{

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

    border-radius:8px;

    padding:10px 12px;

    box-shadow:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    width:1.2em;
    height:1.2em;

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

.hero {

    position: relative;

    overflow: hidden;

}

.hero picture,
.hero-image {

    display: block;

    width: 100%;

}

.hero-image {

    width: 100%;

    height: 100%;

}



.hero-content {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    z-index: 2;

}
.carousel-caption {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    text-align: left;

}

.carousel-caption h1 {

    font-size: 72px;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 30px;

}

.carousel-caption p {

    font-size: 20px;

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

    max-width: 560px;

    margin-bottom: 35px;

}


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

.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

    padding: 14px 30px;

    border-radius: 0;

}

.btn-primary:hover {

    background: var(--accent);

    border-color: var(--accent);

}

.btn-warning {

    background: var(--accent);

    border-color: var(--accent);

    color: #fff;

    padding: 14px 30px;

    border-radius: 0;

}

.btn-warning:hover {

    background: var(--accent-dark);

    border-color: var(--accent-dark);

    color: #fff;

}


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

.card {

    border: 0;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.card:hover {

    transform: translateY(-8px);

}

.card-body {

    padding: 40px;

}

.card i {

    color: var(--primary);
    transition: var(--transition);

}

.card:hover i {

    color: var(--accent);

}
.card h5 {

    margin-top: 25px;

    margin-bottom: 18px;

}


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

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

.why-card {

    padding: 40px 25px;

    background: var(--bg-white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    height: 100%;

    transition: var(--transition);

}

.why-card:hover {

    transform: translateY(-8px);

}

.why-card i {

    color: var(--primary);

    transition: var(--transition);

}

.why-card:hover i {

    color: var(--accent);

}

.why-card h5 {

    margin-bottom: 0;

}

/* ==========================================================
   Team
========================================================== */

.team-card {

    border-radius: var(--radius);

    overflow: hidden;

    transition: var(--transition);

}

.team-card:hover {

    transform: translateY(-8px);

}

.team-avatar {

    width: 100px;

    height: 100px;

    margin: auto;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 34px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

}

.team-card h4 {

    margin-top: 30px;

}

.team-card .text-primary {

    color: var(--accent) !important;

}


/* ==========================================================
   CTA
========================================================== */

.cta {

    padding: 110px 0;

    background: var(--primary);

    color: #fff;

}

.cta h2 {

    color: #fff;

    font-size: 46px;

    margin-bottom: 20px;

}

.cta p {

    font-size: 18px;

    opacity: .9;

}

.cta .btn {

    border-radius: 0;

    font-weight: 600;

    padding: 16px 38px;

}


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

@media (max-width:991px) {

     .logo img{
        width:220px;
    }

    .header-top{
        padding:15px 0;
    }

    .header-top .col-lg-7{
        display:none;
    }

    .carousel-caption h1 {

        font-size: 42px;

    }

    .hero img {

        height: 500px;

    }

    .navbar-nav .nav-link {

        margin-right: 0;

        padding: 15px 0;

    }

}