/** {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {*/
    /*background-color: #f0f0f0;*/
    /*min-height: 100vh;
    flex-direction: column;
    align-items: center;*/
    /*padding: 20px;*/
/*}

h1 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.certificate-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;*/ /* full viewport height */
    /*background-color: #f0f0f0;*/ /* optional background */
/*}

.certificate-container {
    background: url('../rimg/22.png') no-repeat center center / contain;
    width: 100%;
    max-width: 850px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    margin-top: 6rem;
    margin-bottom: 2rem;*/
    /*    padding: 60px;*/
    /*    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);*/
    /*background-color: white;*/ /* fallback */
    /*}*/


    /*.title

{
    text-align: center;
}

.left-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
}

    .left-image img {
        max-width: 100%;
        max-height: 200px;
        object-fit: contain;
    }

.form-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;*/ /* works in Firefox 63+, Chrome, Edge, Safari */
    /*max-width: 415px;
    margin-left: auto;*/ /* safer centering across browsers */
    /*margin-right: auto;*/
    /* Ensure consistent box model */
    /*box-sizing: border-box;*/
    /* Optional: force alignment inside the flex container */
    /*align-items: center;
}



    .form-section form-control,
    .form-section textarea {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 1px solid #ccc !important;
        border-radius: 15px !important;
        font-size: 16px !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }

    .form-section textarea {
        resize: vertical;
        min-height: 100px;
    }*/

/*.button {
    background: linear-gradient(to right, #fbc14c, #ff914d);
    color: white;
    padding: 5px;
    border: none;
    width: auto;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    margin: 0 auto;
}

    .button:hover {
        background: linear-gradient(to right, #ffaa00, #ff6a00);
    }*/

/*.simple-button {
    padding: 12px 25px;
    color: #FFF5EE;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #B2DFDB, #009688);
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: 0.4s;
    font-weight: 600;
    cursor: pointer;
}

.simple-button:hover {
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}


@media (max-width: 768px) {
    h1 {
        font-size: 28px;
    }

    .certificate-container {
        flex-direction: column;
        aspect-ratio: auto;
        padding: 70px 20px;
        background-size: contain;
    }

    .left-image {
        margin-bottom: 20px;
    }

    .title {
        font-size: 24px;
        margin-top: 2rem;
    }

    .form-section {
        max-width: 260px;
        height: 70vh
    }

        .form-section button {
            width: 100%;
        }
}

@media (max-width: 480px) {
    h1 {
        font-size: 28px;
    }

    .certificate-container {
        flex-direction: column;
        aspect-ratio: auto;
        padding: 85px 0px;
        background-size: cover;
    }

    .left-image {
        margin-bottom: 20px;
    }

    .title {
        font-size: 24px;
        margin-top: 2rem;
    }

    .form-section {
        max-width: 260px;
        height: 70vh
    }

        .form-section button {
            width: 100%;
        }
}

@media (max-width: 320px) {
    h1 {
        font-size: 5px;
    }

    .title {
        font-size: 20px;
        margin-top: 2rem;
    }

    .form-section {
        max-width: 260px;
        height: 70vh
    }
}*/

/* ==== RESET ==== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

/*body {
    background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}*/

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* ==== MAIN CONTAINER ==== */
.modern-contact-section {
    width: 100%;
    padding: 60px 20px;
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffffaa;
    backdrop-filter: blur(10px);
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* ==== LEFT SIDE ==== */
.contact-info-side {
    flex: 1;
    background: linear-gradient(135deg, #64b3a9, #26a69a);
    color: white;
    padding: 25px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .contact-info-side h2 {
        font-size: 32px;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .contact-info-side p {
        font-size: 15px;
        margin-bottom: 15px;
        line-height: 1.6;
    }

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    margin-bottom: 18px;
    color: #fff;
}

    .info-item i {
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        padding: 10px;
        border-radius: 50%;
        font-size: 18px;
        transition: all 0.3s ease;
    }

        .info-item i:hover {
            background: #fff;
            color: #009688;
            transform: scale(1.1);
        }

/* Social Links */
.social-links {
    margin-top: 35px;
}

    .social-links a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        margin-right: 12px;
        transition: 0.3s;
    }

        .social-links a:hover {
            background: #fff;
            color: #009688;
            transform: translateY(-3px);
        }

/* ==== RIGHT FORM SIDE ==== */
.contact-form-side {
    flex: 1.2;
    padding: 60px 40px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .contact-form-side h3 {
        font-size: 26px;
        color: #00695c;
        margin-bottom: 20px;
        font-weight: 600;
    }

.form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    transition: 0.3s ease;
}

    .form-control:focus {
        border-color: #26a69a;
        box-shadow: 0 0 5px rgba(38, 166, 154, 0.3);
        outline: none;
    }

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.char-counter {
    font-size: 12px;
    color: #888;
    text-align: right;
    margin-bottom: 10px;
}

/* ==== BUTTON ==== */
.btn-send {
    background: linear-gradient(45deg, #26a69a, #004d40);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-send:hover {
        background: linear-gradient(45deg, #00796b, #003d33);
        transform: translateY(-2px);
    }

/* ==== RESPONSIVE ==== */
@media (max-width: 900px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-info-side, .contact-form-side {
        padding: 40px 25px;
    }

        .contact-info-side h2 {
            font-size: 26px;
        }
}

.simple-button {
    padding: 11px 0px;
    color: #FFF5EE;
    text-transform: uppercase;
    letter-spacing: 0px;
    background: linear-gradient(45deg, #B2DFDB, #009688);
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    font-weight: 600;
    cursor: pointer;
    width: 180px;
}


    .simple-button:hover {
        color: #fff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        transform: translateY(-2px);
    }