@media(max-width:575px) {
     .about-section {
       padding: 50px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .form-box {
        background: #F0FFF7;
      padding: 20px;
    }
    .img-fluid{
        width: 60%;
    }
}

@media (min-width:576px) and (max-width:766.99px) {
     .about-section {
       padding: 50px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .form-box {
        background: #F0FFF7;
      padding: 20px;
    }
    .img-fluid{
        width: 60%;
    }
}

@media (min-width: 767px) and (max-width: 991.99px) {
       .about-section {
       padding: 50px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 36px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .form-box {
        background: #F0FFF7;
      padding: 20px;
    }
    .img-fluid{
        width: 60%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .about-section {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 36px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .form-box {
        background: #F0FFF7;
        padding-left: 10px;
        padding-right: 0px;

    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .about-section {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 38px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }


    .form-box {
        background: #F0FFF7;
        padding-left: 10px;
        padding-right: 0px;

    }
}

@media (min-width: 1400px) {
    .about-section {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .container {
        border: 1px solid rgba(64, 101, 80, 0.20);
        background: #F0FFF7;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    body {
        background-color: #eef8f0;
        font-family: "Segoe UI", sans-serif;
    }

    .form-box h1 {
        color: var(--Primary_CL, #406550);
        font-family: "Libertinus Math";
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

    }

    input {
        color: #667085;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
    }

    .checkbox {
        color: #667085;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        /* 28.8px */
    }

    .forget {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration: none;
    }

    .button {
        background: var(--Primary_CL, #406550);
        color: var(--Typography-color3, #FFF);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        border: none;
        padding: 6px;
    }

    .account {
        color: var(--Typography-color1, #081A28);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        /* 166.667% */
        text-align: center;
    }

    .signup {
        color: var(--Primary_CL, #406550);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        /* 166.667% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }


    .form-box {
        background: #F0FFF7;
        padding-left: 10px;
        padding-right: 0px;

    }
    
}

.animate-left {
    animation: slideInLeft 1s ease forwards;
    opacity: 0;
}

.animate-right {
    animation: slideInRight 1s ease forwards;
    opacity: 0;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}