* {
    margin: 0;
    padding: 0%;
}

/* for removing scrol bar */
html,
body {
    overflow: -moz-scrollbars-none;
    /* Firefox only */
    scrollbar-width: none;
    /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    /* Hides scrollbar */
}



body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* Adjust according to your needs */
}

header {
    height: 5rem;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
}


.mainSection {
    /* height: 90vh; */
    width: 100%;
    background: #E8FBF4;
    
}


footer {
    height: 3rem;
    width: 100vw;
    /* background-color: black; */

}

.footerDIv {
    height: 3rem;
    width: 100%;
    font-size: small;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* below code is responsive for all devices */
@media (max-width: 768px) {
    header img {
        height: 3.5rem;
        /* Resize logo for smaller screens */
    }

    .mainSection {
        padding: 0rem;
        /* Reduce padding on smaller screens */
    }
}

@media (max-width: 480px) {
    header img {
        height: 3rem;
        /* Further resize logo on very small screens */
    }
}


/* for img selletment  */

/* General Styling */
.image-container {
    position: relative;
    width: 100%;
}

/* Desktop Image (hidden on mobile/tablet) */
.desktop-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile/Tablet Image (hidden on desktop) */
.mobile-img {
    width: 100%;
    height: auto;
    display: none;
    /* Initially hide mobile image */
}

/* For Desktop: Form positioned on top-left */
@media (min-width: 1024px) {
    .desktop-img {
        display: block;
        /* Show desktop image */
    }

    .mobile-img {
        display: none;
        /* Hide mobile image */
    }

    .mainDiv {
        position: absolute;
        top: 16%;
        left: 63%;
        transform: translate(-10%, 0);
        /* Position form on the left of the screen */
        z-index: 10;
        margin: 4rem 0;
    }
    #contact{
   width: 25rem;
    }
}

/* For Mobile/Tablet: Form positioned below the mobile image */
@media (max-width: 1023px) {
    .desktop-img {
        display: none;
        /* Hide desktop image */
    }

    .mobile-img {
        display: block;
        /* Show mobile image */
        width: 100%;
    }

    .mainDiv {
        position: relative;
        /* Position form below the mobile image */
        margin-top: 20px;
    }
    #contact {
        width: 50%;
         margin: 20px 0;
     }
   
     .mainSection {
      padding-bottom: 2rem;
        
    }
}


@media (max-width: 767px) {
    #contact {
       width: 70%;
        margin: 20px 0;
    }

    #contact input,
    #contact textarea {
        font-size: 12px;  /* Optional: Adjust input font size for mobile */
        /* width: 90%; */
    }
.inputDiv, .buttonDiv{
    padding: 0px;
}
    h2 {
        font-size: 1rem;  /* Optional: Adjust heading font size for mobile */
    }
}

@media (max-width: 500px) {
    #contact {
       width: 80%;
        margin: 20px 0;
    }

    #contact input,
    #contact textarea {
        font-size: 12px;  /* Optional: Adjust input font size for mobile */
        /* width: 90%; */
    }
.inputDiv, .buttonDiv{
    padding: 0px;
}
    h2 {
        font-size: 1rem;  /* Optional: Adjust heading font size for mobile */
    }
}

@media (max-width: 375px) {
    #contact {
       width: 95%;
        margin: 20px 0;
    }

    #contact input,
    #contact textarea {
        font-size: 12px;  /* Optional: Adjust input font size for mobile */
        /* width: 90%; */
    }
.inputDiv, .buttonDiv{
    padding: 0px;
}
    h2 {
        font-size: 1rem;  /* Optional: Adjust heading font size for mobile */
    }
}