@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tienne:wght@400;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tienne:wght@400;700;900&display=swap');

.hero-section {

    background-color: #0B1E3F;

    padding-top: 150px;

    padding-bottom: 80px;

    overflow: hidden;

}



.hero-bg-img {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

    width: 100%;

    max-width: 100%;

    height: auto;

    pointer-events: none;

}





.hero-heading {

    position: relative;

    z-index: 1;



}





.hero-heading p {

    font-weight: 700;

    font-size: 76px;

    color: #ffffff !important;

    line-height: 1.2;

}



.hero-heading-effect {

    color: #ec4899;

}

.email-markatingheader{

    font-weight: 400 !important;

    font-size: 24px !important;

    color: #FFFFFF !important;

    font-family: "DM Sans", sans-serif;

}

/* Responsive text */

@media (max-width: 992px) {

    .hero-heading p {

        font-size: 48px;

    }

}



@media (max-width: 576px) {

    .hero-heading p {

        font-size: 36px;

    }

}



/* Button styles */

.hero-btn {

    margin-top: 60px;

}

/* 

.btn-get-started {

    background-color: #EC4899;

    color: white;

    border: none;

    border-radius: 25px;

    padding: 10px 20px;

    font-weight: 500;

}



.btn-get-started:hover {

    background-color: #e91e63;

    color: white;

} */



.btn-learn-more {

    color: white;

    border: 2px solid #ff4081;

    border-radius: 25px;

    padding: 10px 20px;

    font-weight: 700;

}



.btn-learn-more:hover {

    background-color: #ff4081;

    color: white;

}



.hero-text {

    margin-top: 12%;

    color: white;

    text-align: center;

    margin-top: 100px !important;

}



/* Company Logos */

.hero-image {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 24px;

    /* margin-top: 80px; */

    /* padding: 0 10px; */

   

    /* margin: 0% !important; */

}



.hero-image img {

    max-width: 120px;

    height: auto;

}



@media (min-width: 768px) {

    .hero-image {

        justify-content: space-evenly;

    }



    .hero-image img {

        max-width: 140px;

    }

}



@media (min-width: 992px) {

    .hero-image img {

        max-width: 160px;

    }

}



.bg-svg img {

    top: 0;

    left: 0;

    height: 50%;

}



/* ---------------------------------------------- */





.email-form {

    max-width: 400px;

    margin: 30px auto 0;

    background-color: #f3f4ff;

    border-radius: 50px;

    padding: 6px;

    margin-top: 50px !important;

    display: flex;

    align-items: center;

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);

}



.email-form input {

    border: none;

    outline: none;

    background: transparent;

    flex-grow: 1;

    padding: 10px 15px;

    font-size: 14px;

    border-radius: 50px;

    color: #333;

}



.email-form button {

    background: #EC4899;

    color: #fff;

    border: none;

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 500;

    /* margin-top: 10px !important; */

}

.email-marketing-hero-subtext{

    width: 90% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding-left: 10% !important;

}

@media (max-width: 576px) {



    .email-form {

        padding: 1%;

        border-radius: 30px;

    }



    .email-form input[type="email"],

    .email-form button {

        padding: 0.6rem 1rem;

        font-size: 0.9rem;

        border-radius: 25px;

    }

}



@media screen and (max-width: 320px) {



    .email-form {

        /* padding: 1%; */

        border-radius: 30px;

    }



    .email-form input[type="email"],

    .email-form button {

        padding: 8px 8px;

        font-size: 0.9rem;

        border-radius: 25px;

    }

}