/* category page css  */
.pageRedHead {
    /* border: 1px solid red; */
}

.gThanIconCatPage {
    /* border: 1px solid red; */
}

.pageRedHead a {
    text-decoration: underline !important;
    font-size: 0.9rem;
    cursor: pointer;
}

.categoryPage .head {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.categoryPage .head select {
    padding: 0.5rem 1rem;
    font-weight: 400;
}

.pageHeading {
    /* border:1px solid red; */
    text-align: center;
    padding: 1rem 0rem;
}


.categoryPage .ItemShowingSection {
    /* border: 1px solid red; */
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 1rem;
}

.filterSection {
    text-transform: uppercase;
}

.ItemShowingSection .categoryPage .ItemShowingSection .filterSection {
    border: 1px solid red;
    border: 2px solid rgb(228, 227, 227);
    border-radius: 5px;
    text-transform: uppercase;
}



.categoryPage .ItemShowingSection .filterSection .filterCat {
    /* padding: 0.5rem 0.3rem; */
    /* border: 1px solid red; */
    padding: 0.2rem 0.7rem;
}

.categoryPage .ItemShowingSection .filterSection .filterCat ul {
    padding: 0px;
    padding: 0.5rem 0rem;
}

.categoryPage .ItemShowingSection .filterSection .filterCat ul li {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

.categoryPage .ItemShowingSection .filterSection .filterCat ul li input {
    /* margin: 0px 1rem; */
    margin-left: 0.5rem;
    margin-right: 0.4rem;
    margin-top: 0.3rem !important;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    outline: none;
    border: 1px solid red;
}

.categoryPage .ItemShowingSection .filterSection .filterPriceRang ul li {
    display: flex;
    flex-direction: column;
}

.categoryPage .ItemShowingSection .filterSection .filterPriceRang ul li div {
    display: flex;
    flex-direction: row;
}

.categoryPage .ItemShowingSection .filterSection .filterPriceRang ul li input {
    width: 100%;
    margin: 0px;
    margin: 0px 0.3rem;
    margin-top: 0.5rem;
    transform: scale(1);
}





.categoryPage .ItemShowingSection .filterSection .filterCat .heading {
    font-weight: 600;
    border: 1px solid rgb(230, 229, 229);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.categoryPage .ItemShowingSection .filterSection .filterCat .heading span {
    /* border: 1px solid red; */
    margin: 0px;
}

.categoryPage .ItemShowingSection .filterSection .filterCat .heading i {
    /* border: 1px solid red; */
    margin: 0px !important;
    margin-right: 0.5rem;
    ;
}

.categoryPage .ItemShowingSection .filterSection .filterCat .item {
    font-size: 0.9rem;
    font-weight: 400;
}





/* contact page  */

.contactInfoSec p {
    margin: 0px !important;
    padding: 0px !important;
}

.main1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.footerContainer1 .main1 {
    display: grid;
    grid-template-columns: 1fr;

}

@media only screen and (max-width: 992px) {
    .main1 {
        grid-template-columns: 1fr;
    }

}


.main1 .formSec {
    padding: 1rem 0rem;
}

.main1 .formSec .item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0rem;
}


.main1 .formSec .item label, .main1 .formSec .item input, .main1 .formSec .item textarea {
    padding: 0.2rem;
    border: none;
    color: var(--textColor);
}


.main1 .formSec .item input, .main1 .formSec .item textarea {
    padding: 0.4rem 0.5rem;
    outline: none;
    border-radius: 10px;
    border: none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    color: black;
}

.main1 .formSec .item button {
    color: white;
    background-color: #28a745;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.contactInfoSec .main1 .formSec .item button:hover {
    background-color: black;
}




.contactInfoSec>.item, .contactInfoSec .newItem {
    padding: 0.5rem 0rem;
}

.contactInfoSec>.item p, .contactInfoSec .newItem p {
    padding: 1rem 0rem;
}

.contactInfoSec .item, .contactInfoSec .newItems .item {
    display: flex;
    flex-direction: row;
    align-items: center;

}

.contactInfoSec .item i {
    padding: 0 0.5rem;
}



/* about page csss  */



.firstcontenar {
    padding: 7rem 0rem;
    color: white;
}

.firstcontenar p {
    /* font-family: Open Sans; */
    padding: 0rem !important;
}

.firstcontenar .lar {
    font-size: 2.5rem;
}

.firstcontenar .small {
    font-size: 1.5rem;

}




.secondcontenar {
    background-color: #fbf9f9;
    display: flex;
    align-items: center;
}

.secondf {
    width: 50%;
}


.logo {
    width: 100%;
    padding: 0rem 8rem;

}

.logo img {
    width: 195px;
    padding-left: 2rem;
}

.logo p {
    padding-top: 3rem;
    padding-bottom: 5rem;
    padding-left: 6rem;
}


.nature {
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.nature h4 {
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    padding-top: 4rem;
    padding-left: 1rem;
}

.nature span {
    padding-left: 1rem;
    color: white;
    font-size: 40px
}

.nature p {
    padding-top: 3rem;
    padding-left: 1rem;

    font-size: 17px;
}

.nature h5 {
    padding-top: 30px;
    font-size: 17px;
    padding-left: 1rem;
    font-weight: 400;
}

.nature .knowMoreBtn12 {
    color: white;
    padding: 1rem;
    text-transform: uppercase;

}


.video {
    padding: 0rem 2rem;
}

.email {
    height: 370px;
    width: 100%;
    background-color: #F2F2F2;

}

.email h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    font-size: 35px;
    font-weight: 400;
}

.email p {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    font-size: 17px;
    /* font-family: Open Sans; */
}

.email span {
    display: flex;
    margin-top: -15px;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.email2 {
    padding-top: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.myemail {
    display: flex;
    justify-content: center;
    height: 50px;
    width: 600px;
    border: 1.4px solid black;
    border-radius: 30px;

}

.email2 input {
    padding: 1rem;
    width: 600px;
    border: none;
    outline: none;
    border-radius: 30px;

}

.email2 button {
    border: none;
    margin-left: -53px;
    border-radius: 30px;
    background-color: black;
    font-weight: 400px;
    color: white;
    width: 135px;
}

.chek p {
    font-size: 16px;
    padding-left: 1rem;
    /* font-family: Open Sans; */
}

.chek input {
    margin-top: 0.2rem;
    height: 17px;
    width: 17px;

}

.chek h1 {
    /* font-family: calluna; */
    font-size: 35px;
    margin-top: -45px;
}

.chek i {
    font-size: 21px;
    margin-right: -10px;
    padding-top: 0.4rem;
}

.lastdiv {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 500px;
    width: 100%;
    list-style-type: none;
    margin-top: -50px;
}

.lastdiv li {
    padding-top: 9px;
    font-size: 15px;
}

.lastdiv p {
    font-size: 20px;
}

.pyment1 {
    height: 210px;
    width: 100%;
    background-color: #F2F2F2;
}

.pyment1 {
    display: flex;
    justify-content: space-around;
    padding-top: 2rem;
}

.pyment1 span {
    margin-right: -180px;
}

.pyment2 span {
    padding-left: 2rem;
}

.pyment2 {
    padding-left: 6rem;
    font-size: 14px;
    margin-top: -173px;
}

.pyment2 img {
    margin-top: 10px;
    margin-right: 15px;
    height: 40px;
    width: 65px;
}


.secHead {
    padding: 4rem 1rem;
    /* border: 1px solid red; */
    /* padding: 2rem 1rem !important; */

}

.secHead .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 1rem;
}



.secHead .main .part1, .secHead .main .part2 {
    flex: 1;
    /* border:1px solid red; */

}

.secHead .main img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}


.aboutSec, .valuesSec, .awardSec, .doctorSec, .flowerSec {
    background-color: #fbf9f9;
}

.knowMoreBtn {
    text-decoration: none;
    border-bottom: 1px solid rgb(125, 124, 124);
    color: black;
    text-transform: uppercase;
}

.knowMoreBtn i {
    padding-left: 0.3rem;

}



@media only screen and (max-width:993px) {
    .secHead .main {
        grid-template-columns: 1fr;
        /* background-color: blue; */
        gap: 2rem;
    }

    .logo {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


.reward-section-container .swiper-wrapper .swiper-slide img {
    /* border: 1px solid red; */
    width: 100%;
}

.reward-section-container .swiper-wrapper {
    padding: 1rem 0rem;
    padding-bottom: 3rem;
}






.itemsShowingSection {

    .seasonalIndulSection {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }


    .seasonalIndulSection p {
        padding: 0px;
        margin: 0px;
    }



    .seasonalIndulSection .swiper-slide {
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
        /* z-index: 9999; */
    }

    .seasonalIndulSection .swiper-slide .part1 {
        background: #f0f0f0;
        position: relative;
    }

    .seasonalIndulSection .swiper-slide .part1 .itemHead {
        position: absolute;
        top: 3%;
        right: 3%;
        color: white;
        background-color: #7b1b6f;
        padding: 0.2rem;
    }

    .seasonalIndulSection .swiper-slide .part1 .favHeartIcon {
        position: absolute;
        bottom: 5%;
        right: 5%;
        color: black;
        /* border: 1px solid red; */
        background-color: white;
        border-radius: 50%;
        padding: 0.4rem 0.7rem;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .seasonalIndulSection .swiper-slide .part1 img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .seasonalIndulSection .swiper-slide .part2 {
        /* border: 1px solid red; */
        padding: 1rem 0.5rem;
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .seasonalIndulSection .swiper-slide .part2 .proName {
        color: black;
        line-height: 1.1rem;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .seasonalIndulSection .swiper-slide .part2 .proDes {
        color: #666;
        font-size: 0.8rem;
        padding: 0.2rem 0rem;
    }

    .seasonalIndulSection .swiper-slide .part2 .proWeight {
        color: #575656;
        font-size: 0.75rem;
        padding: 0.5rem 0px;
    }

    .seasonalIndulSection .swiper-slide .part2 .proPrice {
        color: black;
        font-weight: 500;
        font-size: 0.95rem;
        /* font-family: 'Montserrat', sans-serif; */
        padding: 0rem 0rem;
    }

    .seasonalIndulSection .swiper-slide .part2 .iconAndReview {
        /* border: 1px solid blue; */
        display: flex;
        flex-direction: row;
        margin: 0.5rem 0rem;

    }

    .seasonalIndulSection .swiper-slide .part2 .starIconHead {
        color: gold;
        padding: 0px;
        margin-right: 0.5rem;
    }


    .seasonalIndulSection .swiper-slide .part2 .starIcon {
        font-size: 0.8rem;
    }


    .seasonalIndulSection .swiper-slide .part2 .reviews {
        color: #333;
        cursor: pointer;
    }

    .seasonalIndulSection .swiper-slide .part2 .addToCartBtn {
        border: 1px solid black;
        width: 100%;
        color: black;
        background-color: white;
        border-radius: 0.4rem;
        font-size: 1rem;
        padding: 0.4rem 0rem;
    }

    .seasonalIndulSection .swiper-slide .part2 .addToCartBtn:hover {
        color: white;
        background-color: black;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
}


.filter {
    /* text-align: center; */
    padding-left: 0.8rem;
}


.visaPage {}

.visaPage .imgSection img {
    width: 100%;
}

.visaPage .pageHeading {
    color: var(--headingThemeColor);
}

.eSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

@media only screen and (max-width: 993px) {
    .eSection {
        grid-template-columns: 1fr;
    }
}

.eSection .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0rem;
    background-color: #eee;
    border-radius: 0.5rem;
}

.visaPage .tableSection th {
    border: 1px solid black;
    padding-left: 0.2rem;
    background-color: rgb(207, 205, 205);
    color: black;

}

.visaPage .tableSection td {
    border: 1px solid black;
    padding: 0rem 0.2rem;

}

.cusGuid {
    /* border: 1px solid red; */

}



.contact2 {


    .contact {
        padding: 1rem 4rem;
        text-align: center;
        font-family: sans-serif;
    }

    .contact h1 {
        color: #bf000dbe;
    }

    .second h2 {
        padding-top: 1.3rem;
        text-align: center;
        font-family: sans-serif;
    }

    .mysecond {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3rem;
        padding: 0rem 5rem;
    }


    @media only screen and (max-width: 993px) {
        .mysecond {
            grid-template-columns: 1fr;
        }
    }

    .second h3 {
        color: #cb3904d5;
    }

    .hours {
        border-radius: 10px;
        margin: 0.7rem 3rem;
        padding: 0.3rem 1rem;
        font-family: sans-serif;
        background-color: #cccccc4a;
    }

    .time1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hours h1 {
        font-size: 1.5rem
    }

    .time1 p {
        color: #bf3502;
    }

    .time1 span {
        line-height: 1.6rem;
        color: black;
    }




    /* model css */

    .myform1 {
        display: flex;
        justify-content: center;
    }

    .form-container {
        margin: 3rem 0rem;
        background: #eaecf7;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* width: 60%; */
        width: 100%;
        font-family: Arial, sans-serif;
    }

    @media only screen and (max-width: 00px) {
        body {
            background-color: lightblue;
        }
    }

    form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .form-group.two-column {
        display: flex;
        gap: 20px;
    }

    .form-group.full-width {
        flex: 1;
    }

    .form-group span {
        color: red;
    }

    .input-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    label {
        font-weight: bold;
        margin-bottom: 0.5rem;
        font-family: Arial, sans-serif;
    }

    input, select, textarea {
        padding: 0.7rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 0.9rem;
        width: 100%;
    }

    input[type="date"] {
        font-family: Arial, sans-serif;
    }

    .phone-input {
        display: flex;
    }



    textarea {
        resize: none;
        height: 80px;
    }

    button.submit-btn {
        background-color: #ff6600;
        color: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 0.7rem;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 100%;
    }

    button.submit-btn:hover {
        background-color: #e65c00;
    }



    @media only screen and (max-width: 992px) {
        .form-group {
            display: flex;
            flex-direction: column;
        }
    }

}


.siteMap {

    .myallsection {
        padding: 2rem;
        width: 100%;
    }


    .sitemap {
        margin: 0 auto;
        text-align: center;
    }

    .sitemap h2 {
        color: #D32F2F;
        font-size: 2rem;
        padding-bottom: 2rem;
        font-weight: 500 !important;
    }

    .menu-section, .packages-section {
        background-color: #f2f2f2;
        border-radius: 8px;
        padding: 1.3rem;
        margin-bottom: 1.6rem;
    }

    .menu-section h3, .packages-section h3 {
        font-size: 1.25rem;
        padding-bottom: 1.2rem;
        text-align: left;
        color: #333;
    }

    .packages-section h3 {
        color: #428bca;
    }

    .menu-items, .package-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 15px;
    }

    .menu-items a, .package-items a {
        display: inline-block;
        padding: 0.62rem 1.25rem;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 25px;
        text-decoration: none;
        color: #333;
        font-size: 0.85rem;
        transition: all 0.3s ease;
    }

    .menu-items a:hover, .package-items a:hover {
        background-color: #ddd;
        color: #D32F2F;
    }

    .load-more {
        text-align: center;
    }

    .load-more button {
        background-color: #E64A19;
        color: #fff;
        border: none;
        padding: 0.7rem 1.7rem;
        font-size: 1rem;
        border-radius: 25px;
        cursor: pointer;
        margin-top: 1.2rem;
        transition: background-color 0.3s ease;
    }

    .load-more button:hover {
        background-color: #D84315;
    }




    .destinations {
        text-align: center;
        background-color: #f2f2f2;
        border-radius: 8px;
        padding: 1.3rem;
        text-align: left;
    }

    .destination-section span {
        font-size: 1.563rem;
        color: #D32F2F;
        border-bottom: 2px solid #D32F2F;
        display: inline-block;
        padding-top: 0.8rem;
    }

    .destination-section h3 {
        font-family: sans-serif !important;
        color: #428bca;
        font-size: 1.4rem;
        font-weight: 600;
    }

    .destination-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 15px;
        padding-top: 0.7rem;
    }

    .destination-items a {
        display: inline-block;
        padding: 0.62rem 1.25rem;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 25px;
        text-decoration: none;
        color: #333;
        font-size: 0.85rem;
        transition: all 0.3s ease;
    }

    .destination-items a:hover {
        background-color: #ddd;
        color: #D32F2F;
    }

    .load-more22 {
        text-align: center;
        margin-top: 2rem;
    }

    .load-more22 button {
        background-color: #E64A19;
        color: #fff;
        border: none;
        padding: 0.7rem 1.7rem;
        font-size: 1rem;
        border-radius: 25px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .load-more22 button:hover {
        background-color: #D84315;
    }




    .categories {
        padding-top: 1.6rem;
    }

    .category-section {
        background-color: #f2f2f2;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .category-section h3 {
        color: #428bca;
        font-size: 1.25rem;
        display: inline-block;
        padding-bottom: 1.5rem;
    }

    .category-items {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .category-items a {
        display: inline-block;
        padding: 0.62rem 1.25rem;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 25px;
        text-decoration: none;
        color: #333;
        font-size: 0.85rem;
        transition: all 0.3s ease;
    }

    .category-items a:hover {
        background-color: #ddd;
        color: #D32F2F;
    }


    @media screen and (max-width: 768px) {
        .menu-items a, .package-items a, .destination-items a, .category-items a {
            flex: 1 1 calc(50% - 20px);
        }
    }

    @media screen and (max-width: 480px) {
        .menu-items a, .package-items a, .destination-items a, .category-items a {
            flex: 1 1 100%;
        }

        button {
            width: 100%;
        }
    }
}




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

    body {
        font-family: 'Arial', sans-serif;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item {
        padding: 1rem;
    }

    .signup-container {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .signup-box {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 3.5rem;
        border-radius: 0.75rem;
        box-shadow: 0rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.245);
        text-align: center;

    }

    .signup-box h2 {
        margin-bottom: 1rem;
        color: #333;

    }

    /* Form structure */
    form .item {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.2rem;
        padding-bottom: 0.5rem;
        /* border:1px solid red; */
    }

    form .item label {
        flex-basis: 100%;
        margin-bottom: 0.7rem;
        text-align: left;
        color: #333;
    }

    form .item input {
        padding: 0.625rem;
        border-radius: 0.5rem;
        border: 0.125rem solid rgba(0, 0, 0, 0.286);
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 1rem;
        outline: none;

    }

    form .item input[type="text"],
    form .item input[type="email"],
    form .item input[type="password"] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Options section */
    .options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
    }

    .options a {
        text-decoration: none;
        font-size: 0.875rem;
        color: #333;
    }

    .options a:hover {
        text-decoration: underline;
    }

    /* Button styling */
    button {
        background-color: rgba(44, 62, 203, 0.867);
        width: 100%;
        padding: 0.625rem;
        color: #fff;
        border: none;
        border-radius: 0.5rem;
        font-size: 1rem;
        cursor: pointer;
    }

    button:hover {
        background-color: rgba(42, 16, 156, 0.827);
        transition: 0.3s;
    }

    /* Already have an account section */
    p {
        margin-top: 0.625rem;
        font-size: 0.875rem;
    }

    p a {
        font-weight: bold;
        color: #333;
    }

    p a:hover {
        text-decoration: underline;
    }

    /* Responsive Design for Smaller Screens */
    @media (max-width: 600px) {
        .signup-box {
            width: 90%;
            padding: 1.875rem;
        }

        h2 {
            font-size: 1.5rem;
        }

        button {
            padding: 0.75rem;
        }
    }


    
}






.signInPage {
    /* Base font size for easier scaling with rem */


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

    body {
        font-family: 'Arial', sans-serif;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-container {
        outline: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-box {
        background-color: rgba(255, 255, 255, 0.1);
        padding: 2.5rem;
        /* Changed from px to rem */
        border-radius: 0.75rem;
        /* 12px -> 0.75rem */
        box-shadow: 0rem 0.625rem 0.9375rem rgba(0, 0, 0, 0.245);
        /* Converted px to rem */
        text-align: center;
    }

    .login-box h2 {
        margin-bottom: 1.875rem;
        /* 30px -> 1.875rem */
        color: #333;
        /* Added color */
    }

    .input-field {
        text-align: start !important;
        position: relative;
        margin-bottom: 1.875rem;
        /* 30px -> 1.875rem */
    }

    .input-field input {
        outline: none !important;
        width: 100%;
        padding: 0.625rem 4.375rem 0.625rem 1.25rem;
        /* Padding converted from px to rem */
        border-radius: 0.5rem;
        /* 8px -> 0.5rem */
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 1rem;
        /* 16px -> 1rem */
        border: 0.125rem solid rgba(0, 0, 0, 0.312);
        /* 2px -> 0.125rem */
        margin: 0.4rem 0rem;
    }

    .input-field .icon {
        position: absolute;
        right: 0.625rem;
        /* 10px -> 0.625rem */
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.6);
    }

    .options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        /* 20px -> 1.25rem */
    }

    .options a {
        text-decoration: none;
        font-size: 0.875rem;
        /* 14px -> 0.875rem */
        color: #333;
    }

    .options a:hover {
        text-decoration: underline;
    }

    button {
        background-color: rgba(44, 62, 203, 0.867);
        width: 100%;
        padding: 0.625rem;
        /* 10px -> 0.625rem */
        color: #fff;
        border: none;
        border-radius: 0.5rem;
        /* 8px -> 0.5rem */
        font-size: 1rem;
        /* 16px -> 1rem */
        cursor: pointer;
    }

    button:hover {
        background-color: rgba(42, 16, 156, 0.827);
        transition: 0.3s;
    }

    p {
        margin-top: 0.625rem;
        /* 10px -> 0.625rem */
        font-size: 0.875rem;
        /* 14px -> 0.875rem */
    }

    p a {
        font-weight: bold;
        color: #333;
    }

    p a:hover {
        text-decoration: underline;
    }

    /* Responsive Design for Smaller Screens */
    @media (max-width: 600px) {
        .login-box {
            width: 90%;
            /* Adjust width on smaller screens */
            padding: 1.875rem;
            /* Reduced padding */
        }

        .input-field input {
            padding: 0.625rem 2.5rem 0.625rem 1.25rem;
            /* Adjusted padding for smaller screens */
        }

        h2 {
            font-size: 1.5rem;
            /* Scaled down heading for mobile */
        }

        button {
            padding: 0.75rem;
            /* Adjust button padding for mobile */
        }
    }
}