﻿

.section-title {
    font-weight: 800 !important;
    font-size: 38px !important;
    letter-spacing: 1px !important;
    color: #0f3661 !important;
    text-transform: uppercase;
    position: relative;
}

    .section-title::after {
        content: "";
        width: 80px;
        height: 4px;
        background: #0f3661;
        border-radius: 10px;
        display: block;
        margin: 10px auto 0;
    }

/* ✨ Contact Section Background */
.contact-section {
    background: linear-gradient(135deg, #f3f8ff, #e8f1fa) !important;
    padding-bottom: 80px !important;
}

/* 🎁 Stylish Form Box */
.contact-form {
    padding: 40px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    transition: 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

    .contact-form:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    }

.form-input {
    width: 100% !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid #c7d4e0 !important;
    background: #f2f7fb;
    transition: 0.3s !important;
    font-size: 16px !important;
}

    .form-input:focus {
        border-color: #0f3661 !important;
        background: #ffffff !important;
        box-shadow: 0 0 10px rgba(15,54,97,0.25) !important;
    }

/* Larger, Softer Textarea */
.textarea {
    height: 140px !important;
    padding-top: 15px !important;
}


.submit-btn {
    background: linear-gradient(135deg, #0f3661, #1a6fb3, #33a1ff) !important;
    background-size: 300% 300%;
    animation: gradientFlow 5s ease infinite;
    color: #fff !important;
    padding: 14px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    border: none !important;
    transition: 0.3s ease-in-out !important;
    letter-spacing: 0.5px;
}

    .submit-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 150, 255, 0.4);
    }

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.contact-info img {
    border-radius: 20px !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
    animation: fadeImg 1.3s ease forwards;
    opacity: 0;
}

@keyframes fadeImg {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 991px) {
    .contact-form {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 30px !important;
    }

    .contact-form {
        padding: 28px !important;
    }

    .form-input {
        padding: 12px 15px !important;
    }
}

