/* Header Section */

.header-section {
    background-image: url('../assets/backgrounds/contact-bg.png'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    height: 400px; /* Adjust the height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--red); /* Text color set to var(--red) */
    text-align: center;
     margin-top:-10px;
    z-index:-16;
}

/* Centered Heading */
.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Overlay */
.header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: -1; /* Place the overlay behind the text */
}
/* Section Heading */
.section-heading {
    font-family: var(--font-main-heading); /* Font-family set to var(--font-main-heading) */
    font-size: 4rem; /* Adjust font size as needed */
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
}


/* Max-width: 2560px */
@media (max-width: 2560px) {
    .header-section {
        height: 500px; /* Adjust height for large screens */
    }

    .section-heading {
        font-size: 7rem; /* Larger font for bigger screens */
    }
}

/* Max-width: 1024px */
@media (max-width: 1024px) {
    .header-section {
        height: 360px; /* Adjust height for tablets and smaller screens */
    }

    .section-heading {
        font-size: 4rem; /* Slightly smaller font for tablets */
    }
}

/* Max-width: 768px */
@media (max-width: 768px) {
    .header-section {
        height: 300px; /* Adjust height for smaller tablets */
    }

    .section-heading {
        font-size: 4rem; /* Smaller font for tablets */
    }
}

/* Min-width: 425px and max-width: 690px */
@media (min-width: 425px) and (max-width: 690px) {
    .header-section {
        height: 250px; /* Adjust height for smaller devices */
    }

    .section-heading {
        font-size: 2.3rem; /* Font size for small devices */
    }
}

/* Min-width: 315px and max-width: 430px */
@media (min-width: 315px) and (max-width: 430px) {
    .header-section {
        height: 200px; /* Adjust height for smaller screens */
    }

    .section-heading {
        font-size: 2.2rem; /* Font size for very small devices */
    }
}


/*----------------------------Contaact Scroll-----------------------------------*/
.scroll-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: white;
}

.scroll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    animation: scrollUp 10s linear infinite;
    white-space: nowrap;
}

/* Duplicated the content inside */
.scroll-container::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.text {
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
}

.hollow {
    color: transparent;
    -webkit-text-stroke: 1px #5a5a5a;
}

.solid {
    color: #010144;
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* Adjust based on text length */
}

/* Responsive Styles */

/* For large screens (max-width 2560px) */
@media screen and (max-width: 2560px) {
    .text {
        font-size: 5rem;
    }
}

/* For laptops and tablets (max-width 1024px) */
@media screen and (max-width: 1024px) {
    .text {
        font-size: 3.5rem;
    }
}

/* For tablets (max-width 768px) */
@media screen and (max-width: 768px) {
    .text {
        font-size: 3rem;
    }
    .scroll-section {
        height: 300px;
    }
}

/* For small devices (425px - 690px) */
@media screen and (min-width: 425px) and (max-width: 690px) {
    .text {
        font-size: 2.5rem;
    }
    .scroll-section {
        height: 240px;
    }
}

/* For very small devices (315px - 430px) */
@media screen and (min-width: 315px) and (max-width: 430px) {
    .text {
        font-size: 2rem;
    }
    .scroll-section {
        height: 230px;
    }
}
/*------------------------------------Contact Form----------------------------------------*/
    .contact-section {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: white;
        }
        .contact-container {
            display: flex;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 100%;
            padding: 20px;
        }
        .contact-details {
            background: var(--lilac);
            color: white;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 40%;
            border-radius: 10px;
        }
        .contact-details h2 {
            margin-bottom: 15px;
        }
        .contact-details p {
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .contact-details p i {
            margin-right: 10px;
            font-size: 18px;
        }
        .contact-form {
            padding: 20px;
            width: 60%;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-row {
            display: flex;
            gap: 20px;
        }
        .form-group label {
            display: block;
            font-weight: 300;
            font-size:12px;
            margin-bottom: 5px;
        }
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: none;
            border-bottom: 1px solid var(--light-grey);
            font-size: 12px;
            background: transparent;
            outline: none;
        }
        .form-group textarea {
            resize: none;
            height: 100px;
        }
        .radio-group {
            display: flex;
            gap: 15px;
            align-items: left;
        }
        .radio-group input {
            transform: scale(0.7);
        }
        .submit-btn {
            background: var(--red);
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin-left: auto;
        }
        .submit-btn:hover {
            background: #c9302c;
        }
       /* Responsive Styles */

/* For large screens (max-width 2560px) */
@media screen and (max-width: 2560px) {
    .contact-container {
        max-width: 1000px;
    }
    .contact-details, .contact-form {
        padding: 30px;
    }
}

/* For laptops and tablets (max-width 1024px) */
@media screen and (max-width: 1024px) {
    .contact-container {
        max-width: 700px;
        flex-direction: column;
    }
    .contact-details {
        width: 100%;
        text-align: center;
        border-radius: 10px 10px 0 0;
    }
    .contact-form {
        width: 100%;
        padding: 25px;
    }
}

/* For tablets (max-width 768px) */
@media screen and (max-width: 768px) {
    .contact-container {
        max-width: 600px;
    }
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* For small devices (425px - 690px) */
@media screen and (min-width: 425px) and (max-width: 690px) {
    .contact-container {
        max-width: 90%;
        flex-direction: column;
     
    }
    .contact-details, .contact-form {
        width: 100%;
        padding: 20px;
    }
}

/* For very small devices (315px - 430px) */
@media screen and (min-width: 315px) and (max-width: 430px) {
    .contact-container {
        max-width: 95%;
        flex-direction: column;
        padding: 15px;
       
    }
    .contact-details, .contact-form {
        width: 100%;
        padding: 15px;
    }
    .form-group input, 
    .form-group textarea {
        font-size: 10px;
    }
    .submit-btn {
        width: 100%;
        text-align: center;
    }
}
        
        /*-----------------------------------Subscribe Newsletter---------------------------------------*/

.newsletter-section {
    text-align: center;
    padding: 50px 20px;
    background:white;
    margin-bottom:5vw;
}

.newsletter-section h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #222278;
    margin-bottom: 10px;
}

.newsletter-section p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222278;
    border-radius: 50px;
    max-width: 600px;
    margin: auto;
    padding: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: white;
    font-size: 1rem;
    outline: none;
}

.newsletter-form input::placeholder {
    color: white;
    opacity: 0.7;
}

.newsletter-form button {
    background-color: white;
    color: #222278;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.newsletter-form button:hover {
    background-color: #e6e6e6;
}


/* Responsive styles */

@media (max-width: 1024px) {
    .newsletter-section {
        padding: 40px 15px;
    }
    .newsletter-section h2 {
        font-size: 1.6rem;
    }
    .newsletter-form {
        max-width: 500px;
        padding: 8px;
    }
}

@media (max-width: 768px) {
    .newsletter-section {
        margin-top:25vw;
        padding: 30px 10px;
    }
    .newsletter-section h2 {
        font-size: 1.4rem;
    }
    .newsletter-form {
        /*flex-direction: column;*/
        border-radius: 30px;
        padding: 12px;
    }
    .newsletter-form input {
        width: 100%;
        border-radius: 30px;
        margin-bottom: 10px;
    }
    .newsletter-form button {
        width: 30%;
        border-radius: 30px;
    }
}

@media (min-width: 425px) and (max-width: 690px) {
    
     .newsletter-section {
        margin-top:30vw;
              margin-bottom:10vw;
       
    }.newsletter-section h2 {
        font-size: 1.3rem;
    }
    .newsletter-form {
        max-width: 400px;
    }
    .newsletter-form input,
    .newsletter-form button {
        padding: 12px;
        font-size: 0.9rem;
    }
}

@media (min-width: 315px) and (max-width: 430px) {
    .newsletter-section {
        padding: 20px 10px;
       margin-bottom:10vw;
        margin-top:40vw;
       
    
    }
    .newsletter-section h2 {
        font-size: 1.2rem;
    }
    .newsletter-form {
        flex-direction: column;
        max-width: 350px;
        padding: 8px;
    }
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        padding: 10px;
        font-size: 0.85rem;
    }
}