@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

*{
    font-family: "DM Sans", sans-serif;
}

p{
    margin-bottom: 0px;
}

/* Navbar */
.logo{
    width: 200px;
}

.btn-red, .btn-red:hover{
    background: #ac2623;
    color: #fff;
    border-radius: 10px;
    margin-left: 10px;
}

.btn-link, .btn-link:hover{
    text-decoration: none;
    color: #000;
}

.nav-item{
    margin-left: 20px;
}

.active{
    color: #ac2623 !important;
}

.navbar{
    border-bottom: 4px solid #ac2623;
}


/* Hero Section */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 245, 247, 0.9) 0%, rgba(255, 232, 240, 0.9) 50%, rgba(255, 217, 232, 0.9) 100%), url('../img/hero.jpeg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.hero-section h1{
    font-size: 96px;
    font-weight: 700;
    font-family: "Playfair Display", serif;
}

.hero-section h1 span{
    background: linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: "Playfair Display", serif;
}

.hero-section p{
    font-size: 24px;
    font-weight: 300;
    color: #4b5563;
    margin-top: 10px;
}

.button-grp{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
}

.btn-red-new, .btn-red-new:hover{
    background: linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    border: 1px solid linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    border-radius: 50px;
    padding: 18px 50px;
    color: #FFF;
    font-size: 18px;
    margin-right: 20px;
}

.btn-outline, .btn-outline:hover{
    background: transparent;
    border: 1px solid #000;
    border-radius: 50px;
    padding: 18px 50px;
    color: #000;
    font-size: 18px;
}

/* How It Works */
.how_it_works{
    padding-top: 4%;
    padding-bottom: 4%;
}
.works_left{
    background: url('../img/how_it_works.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.works_right{
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.subtitle{
    font-size: 14px;
    color: #ac2623;
    font-weight: 600;
}

.title{
    font-family: "Playfair Display", serif;
    font-size: 48px;
    font-weight: 700;
}

.title span{
    background: linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: "Playfair Display", serif;
}

.content{
    font-size: 18px;
    font-weight: 400;
    color: #4b5563;
}

.heading{
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-top: 20px;
    line-height: 28px;
}

.sub-content{
    font-size: 16px;
    font-weight: 400;
    color: #4b5563;
    line-height: 26px;
}

/* Why Choose Us */
.why_choose_us{
    background: #fefbfc;
    padding-top: 4%;
    padding-bottom: 4%;
}

.card{
    border-radius: 20px;
}

.no-border{
    border: none;
}

.text-pink-600{
    --tw-text-opacity: 1;
    color: #db2777;
    color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.card-height{
    height: 180px;
}

.sub-heading{
    font-size: 18px;
    font-weight: 500;
    color: #374151;
}

/* Testimonials */
.image-card img{
    border-radius: 20px 20px 0px 0px;
}

.card-padding{
    padding: 20px 40px;
}

.footer-content{
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
    margin-top: 20px;
}

/* Why Work With us */
.why_work_with_us{
    background: linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    padding-top: 3%;
    padding-bottom: 3%;
}

.numbers{
    font-size: 60px;
    font-weight: 700;
}

.number-content{
    font-size: 18px;
    font-weight: 400;
}

/* CTA */
.cta{
    padding-top: 3%;
    padding-bottom: 3%;
}

/* Footer */
footer{
    background: #121828;
    padding-top: 3%;
    padding-bottom: 3%;
}

.footer-title{
    font-size: 16px;
    font-weight: 600;
    font-family: "Playfair Display", serif;;
}

.quick-links ul li{
    list-style: none;
    color: #FFFFFF;
    padding-top: 15px;
    font-size: 15px;
    font-weight: 400;
    margin-left: -30px;
}

.quick-links i{
    color: #C1322C;
}

/* Branding */
.branding{
    background: linear-gradient(135deg, #8c1e1c 0%, #ac2623 50%, #d13834 100%);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Media Queries */

@media screen and (max-width: 768px) {
    .nav-item{
        margin-left: 0px;
    }

    .btn-link{
        width: 100%;
        border-color: rgb(218, 218, 218);
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .btn-red{
        width: 100%;
        margin-left: 0px;
        margin-bottom: 10px;
    }
    
    .hero-section h1{
        font-size: 76px;
    }

    .hero-section{
        min-height: 65vh;
    }

    .hero-section p{
        font-size: 22px;
    }
}

@media screen and (max-width: 520px) {
    .hero-section h1 {
        font-size: 48px;
    }

    .hero-section p{
        font-size: 21px;
    }

    .button-grp{
        flex-direction: column;
    }

    .btn-red-new, .btn-red-new:hover{
        margin-right: 0px;
        margin-bottom: 20px;
        padding: 18px 30px;
    }

    .mobile-margin-top{
        margin-top: 15px;
    }

    .why_work_with_us{
        padding-top: 14%;
        padding-bottom: 14%;
    }

    .title{
        font-size: 35px;
    }

    .cta{
        padding-top: 14%;
        padding-bottom: 14%;
    }

    footer{
        padding-top: 14%;
        padding-bottom: 5%;
    }
}