.row {
    background-color: var(--lightColor);
    border-radius: 2rem;
}

.general_img,
.contact_img {
    width: 4rem;
}

.rigth-form,
.left-form {
    width: 100%;
    height: 61rem;
}

.left-form {
    background-color: var(--secondaryColor);
    padding: 3rem;
}

.left-form .title h2,
.left-form label,
.left-form p {
    color: var(--lightColor);
}

.left-form input::placeholder {
    color: var(--primaryColor);
}

.rigth-form {
    background-color: var(--lightColor);
    padding: 3rem;
}

.rigth-form .title h2,
.rigth-form label {
    color: var(--secondaryColor);
}

.title h2 {
    font-size: 3rem;
}

.lead,
.form-check span a {
    color: var(--secondaryColor);
}

.form-check span a:hover {
    color: var(--tertiaryColor);
}

.form-group input,
textarea,
select {
    background-color: var(--boxColor);
    font-size: 1.5rem;
    border: 2px solid #bcc3ce;
    border-radius: 1rem;
    padding: 1rem;
    color: var(--primaryColor);
}

.fees-btn {
    background-color: var(--secondaryColor);
    color: var(--lightColor);
    font-family: var(--ffPrimary);
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    font-weight: 600;
    padding: 1rem 1.3rem;
    border: 2px solid #bcc3ce;
}

.fees-btn:hover {
    background-color: var(--tertiaryColor);
    color: var(--lightColor);
    border: 2px solid #bcc3ce;
}

.btn {
    background-color: var(--tertiaryColor);
    font-family: var(--ffPrimary);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lightColor);
    border-radius: 1rem;
    padding: 1rem 3.2rem;
}

.btn:hover {
    background-color: var(--secondaryColor);
    color: var(--lightColor);
}


/* ::::: RESPONSIVE DESIGN DEVICE SIZES ::::: */

/* for Responsive Target the ROW Code (display:grid) */

/* Small devices (landscape phones, upto 576px and below) */
/* @media (width <=576px) */
@media (max-width: 576px) {

    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .rigth-form,
    .left-form {
        width: 100%;
        height: fit-content;
    }

    .general_img,
    .contact_img {
        width: 2.8rem;
    }

    .title h2 {
        font-size: 2.4rem;
        font-weight: 600;
    }
}

/* Medium devices (tablets, upto 768px and above) */
/* @media (min-width: 577px) and (max-width: 768px) */
@media (width >=577px) and (width <=768px) {

    .rigth-form,
    .left-form {
        width: 100%;
        height: fit-content;
    }
}


/* Large devices (Laptops, upto 992px and above) */
/* @media (min-width: 769px) and (max-width: 992px) */
@media (width >=769px) and (width <=992px) {

    .rigth-form,
    .left-form {
        width: 100%;
        height: 58rem;
    }
}


/* X-Large devices (large desktops, upto 1200px and above) */
/* @media (min-width: 993px) and (max-width: 1200px) */
@media (width >=993px) and (width <=1200px) {
    /* write code here */
}


/* XX-Large devices (larger desktops, upto 1400px and above) */
/* @media (min-width: 1200px)  */
@media (width >=1200px) {
    /* write code here */
}