/* ============================================

















   PREMIUM CONTACT SECTION - 100K LEVEL

















   ============================================ */

















.contact-section {

















    padding: 80px 0;

















    background: linear-gradient(180deg, #f8faf8 0%, #ffffff 50%, #f8faf8 100%);

















    position: relative;

















    overflow: hidden;

















}

















/* Decorative Background Elements */

















.contact-section::before {

















    content: '';

















    position: absolute;

















    top: -200px;

















    right: -200px;

















    width: 500px;

















    height: 500px;

















    background: radial-gradient(circle, rgba(62, 166, 53, 0.08) 0%, transparent 70%);

















    border-radius: 50%;

















    pointer-events: none;

















}

















.contact-section::after {

















    content: '';

















    position: absolute;

















    bottom: -150px;

















    left: -150px;

















    width: 400px;

















    height: 400px;

















    background: radial-gradient(circle, rgba(62, 166, 53, 0.05) 0%, transparent 70%);

















    border-radius: 50%;

















    pointer-events: none;

















}

















/* Section Header */

















.contact-section .section-header {

















    margin-bottom: 40px;

















    text-align: center;

















}

















.contact-section .section-title {

















    font-size: 36px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 10px;

















}

















.contact-section .section-subtitle {

















    font-size: 16px;

















    color: #666;

















}

















/* Contact Container */

















.contact-container {

















    display: grid;

















    grid-template-columns: 1fr 1.2fr;

















    gap: 50px;

















    margin-top: 40px;

















    max-width: none !important;

















    margin-left: 0 !important;

















    margin-right: 0 !important;

















    padding: 0 !important;

















    position: relative;

















    z-index: 1;

















}

















/* Contact Info Cards */

















.contact-info {

















    display: grid;

















    grid-template-columns: 1fr 1fr;

















    gap: 25px;

















}

















.contact-info-card {

















    background: white;

















    padding: 30px 25px;

















    border-radius: 20px;

















    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

















    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

















    position: relative;

















    overflow: hidden;

















    border: 2px solid transparent;

















}

















.contact-info-card::before {

















    content: '';

















    position: absolute;

















    top: 0;

















    left: 0;

















    right: 0;

















    height: 4px;

















    background: linear-gradient(90deg, var(--primary-green), var(--dark-green));

















    transform: scaleX(0);

















    transform-origin: left;

















    transition: transform 0.4s ease;

















}

















.contact-info-card:hover {

















    transform: translateY(-8px);

















    box-shadow: 0 12px 40px rgba(62, 166, 53, 0.15);

















    border-color: rgba(62, 166, 53, 0.1);

















}

















.contact-info-card:hover::before {

















    transform: scaleX(1);

















}

















/* Contact Icon */

















.contact-icon {

















    width: 65px;

















    height: 65px;

















    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));

















    border-radius: 18px;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















    color: white;

















    margin-bottom: 20px;

















    box-shadow: 0 8px 20px rgba(62, 166, 53, 0.25);

















    transition: all 0.4s ease;

















}

















.contact-icon svg {

















    width: 28px;

















    height: 28px;

















}

















.contact-info-card:hover .contact-icon {

















    transform: scale(1.1) rotate(5deg);

















    box-shadow: 0 12px 28px rgba(62, 166, 53, 0.35);

















}

















/* Card Content */

















.contact-info-card h3 {

















    font-size: 18px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 12px;

















}

















.contact-info-card p {

















    font-size: 14px;

















    color: #666;

















    line-height: 1.8;

















    margin: 0;

















}

















.contact-info-card a {

















    color: var(--primary-green);

















    text-decoration: none;

















    font-weight: 600;

















    transition: color 0.3s ease;

















}

















.contact-info-card a:hover {

















    color: var(--dark-green);

















}

















/* ============================================

















   CONTACT FORM - Premium Design

















   ============================================ */

















.contact-form-wrapper {

















    background: white;

















    padding: 45px;

















    border-radius: 24px;

















    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

















    position: relative;

















    overflow: hidden;

















    border: 2px solid rgba(62, 166, 53, 0.05);

















}

















.contact-form-wrapper::before {

















    content: '';

















    position: absolute;

















    top: 0;

















    left: 0;

















    right: 0;

















    height: 4px;

















    background: linear-gradient(90deg, var(--primary-green), #7dff6a, var(--primary-green));

















    background-size: 200% 100%;

















    animation: gradientMove 3s ease infinite;

















}

















@keyframes gradientMove {

















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

















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

















}

















/* Form Title */

















.form-title {

















    font-size: 26px;

















    font-weight: 700;

















    color: var(--text-dark);

















    margin-bottom: 35px;

















    text-align: center;

















    position: relative;

















    padding-bottom: 15px;

















}

















.form-title::after {

















    content: '';

















    position: absolute;

















    bottom: 0;

















    left: 50%;

















    transform: translateX(-50%);

















    width: 60px;

















    height: 4px;

















    background: linear-gradient(90deg, var(--primary-green), var(--dark-green));

















    border-radius: 2px;

















}

















/* Form Row */

















.contact-section .form-row {

















    display: grid;

















    grid-template-columns: 1fr 1fr;

















    gap: 24px;

















}

















/* Form Group - Premium Inputs */

















.form-group {

















    margin-bottom: 20px;

















    position: relative;

















}

















.form-group label {

















    display: block;

















    font-size: 14px;

















    font-weight: 600;

















    color: var(--text-dark);

















    margin-bottom: 8px;

















}

















.form-group input,

















.form-group select,

















.form-group textarea {

















    width: 100%;

















    padding: 12px 16px;

















    border: 2px solid #e0e0e0;

















    border-radius: 10px;

















    font-size: 14px;

















    font-family: inherit;

















    transition: all 0.3s ease;

















    outline: none;

















    background: #fafafa;

















}

















.form-group input:hover,

















.form-group select:hover,

















.form-group textarea:hover {

















    border-color: #d0d0d0;

















    background: white;

















}

















.form-group input:focus,

















.form-group select:focus,

















.form-group textarea:focus {

















    border-color: var(--primary-green);

















    background: white;

















    box-shadow: 0 0 0 3px rgba(62, 166, 53, 0.1);

















}

















.form-group input::placeholder,

















.form-group textarea::placeholder {

















    color: #aaa;

















}

















.form-group textarea {

















    resize: vertical;

















    min-height: 120px;

















}

















/* Submit Button - Premium */

















.submit-btn {

















    width: 100%;

















    padding: 16px 32px;

















    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));

















    color: white;

















    border: none;

















    border-radius: 12px;

















    font-size: 16px;

















    font-weight: 600;

















    cursor: pointer;

















    display: flex;

















    align-items: center;

















    justify-content: center;

















    gap: 10px;

















    transition: all 0.3s ease;

















    box-shadow: 0 4px 15px rgba(62, 166, 53, 0.3);

















    position: relative;

















    overflow: hidden;

















}

















.submit-btn::before {

















    content: '';

















    position: absolute;

















    top: 0;

















    left: -100%;

















    width: 100%;

















    height: 100%;

















    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

















    transition: left 0.6s ease;

















}

















.submit-btn:hover::before {

















    left: 100%;

















}

















.submit-btn:hover {

















    transform: translateY(-2px);

















    box-shadow: 0 6px 20px rgba(62, 166, 53, 0.4);

















}

















.submit-btn:active {

















    transform: translateY(0);

















}

















.submit-btn svg {

















    transition: transform 0.3s ease;

















}

















.submit-btn:hover svg {

















    transform: translateX(3px);

















}

















/* ============================================

















   MAP SECTION - Premium

















   ============================================ */

















.map-section {

















    margin-top: 80px;

















    position: relative;

















    z-index: 1;

















}

















.map-title {

















    font-size: 28px;

















    font-weight: 800;

















    color: #1a1a2e;

















    margin-bottom: 30px;

















    text-align: center;

















}

















.map-wrapper {

















    width: 100%;

















    height: 450px;

















    border-radius: 28px;

















    overflow: hidden;

















    box-shadow:

















        0 25px 80px rgba(0, 0, 0, 0.1),

















        0 0 0 1px rgba(0, 0, 0, 0.02);

















    border: none;

















    position: relative;

















}

















.map-wrapper::before {

















    content: '';

















    position: absolute;

















    top: 0;

















    left: 0;

















    right: 0;

















    bottom: 0;

















    border: 4px solid white;

















    border-radius: 28px;

















    pointer-events: none;

















    z-index: 1;

















}

















.map-wrapper iframe {

















    width: 100%;

















    height: 100%;

















    border: 0;

















    display: block;

















}

















/* ============================================

















   RESPONSIVE - Premium Contact

















   ============================================ */

















@media (max-width: 1200px) {

















    .contact-container {

















        gap: 40px;

















    }

















    .contact-form-wrapper {

















        padding: 40px;

















    }

















}

















@media (max-width: 992px) {

















    .contact-section {

















        padding: 80px 0;

















    }

















    .contact-container {

















        grid-template-columns: 1fr;

















        gap: 50px;

















    }

















    .contact-info {

















        grid-template-columns: repeat(2, 1fr);

















        gap: 20px;

















    }

















    .contact-section .form-row {

















        grid-template-columns: 1fr;

















    }

















    .map-wrapper {

















        height: 400px;

















    }

















}

















@media (max-width: 768px) {

















    .contact-section {

















        padding: 60px 0;

















    }

















    .contact-section .section-title {

















        font-size: 32px;

















    }

















    .contact-info {

















        grid-template-columns: 1fr;

















        gap: 16px;

















    }

















    .contact-info-card {

















        padding: 28px 24px;

















        border-radius: 20px;

















    }

















    .contact-icon {

















        width: 56px;

















        height: 56px;

















        margin-bottom: 20px;

















    }

















    .contact-form-wrapper {

















        padding: 32px 24px;

















        border-radius: 24px;

















    }

















    .form-title {

















        font-size: 24px;

















    }

















    .form-group input,

















    .form-group textarea {

















        padding: 14px 16px;

















    }

















    .map-wrapper {

















        height: 350px;

















        border-radius: 20px;

















    }

















    .map-title {

















        font-size: 22px;

















    }

















}

















@media (max-width: 480px) {

















    .contact-section {

















        padding: 50px 0;

















    }

















    .contact-section .section-title {

















        font-size: 26px;

















    }

















    .contact-info-card {

















        padding: 24px 20px;

















        border-radius: 16px;

















    }

















    .contact-icon {

















        width: 50px;

















        height: 50px;

















        border-radius: 14px;

















    }

















    .contact-icon svg {

















        width: 24px;

















        height: 24px;

















    }

















    .contact-info-card h3 {

















        font-size: 16px;

















    }

















    .contact-form-wrapper {

















        padding: 28px 20px;

















        border-radius: 20px;

















    }

















    .form-title {

















        font-size: 20px;

















        margin-bottom: 30px;

















    }

















    .submit-btn {

















        padding: 16px 32px;

















        font-size: 15px;

















    }

















    .map-wrapper {

















        height: 280px;

















        border-radius: 16px;

















    }

















    .map-section {

















        margin-top: 50px;

















    }

















}