/* Reset and basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100%;
    background-image: url('./page1web/dy1.png');  /* Background image for the entire body */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;  /* Ensure the background image covers the entire body */
}

@media (max-width: 768px) {
    body {
        background-image: url('./page1mob/bodymob.png'); /* Mobile background */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 900px; /* Ensure the background height fills at least 800px */
        height: auto; /* Allows the content to extend beyond 800px if needed */
    }
}





/* Hide section on mobile devices */
/* Default margin styles (for mobile devices) */
.sec1-image {
    margin-top: 0px; /* Default margin for mobile */
}

.webbtn-image {
    margin-top: 0px; /* Default margin for mobile */
}

/* Media query for tablet, desktop, and laptop screens */
@media (min-width: 768px) {
    .sec1-image {
        margin-top: 65px; /* Margin for tablets and larger devices */
    }

    .webbtn-image {
        margin-top: -20px; /* Margin for tablets and larger devices */
    }
}

/* Hide section on mobile devices */
@media (max-width: 768px) {
    .hideinmob {
        display: none !important; /* Hide the section on devices smaller than 768px */
    }
    .showinmob {
        display: block !important; /* Show mobile-specific section on mobile */
        text-align: center;
    }

    .showinmob {
      display: flex !important; /* Flexbox for centering */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      height: 100vh; /* Full viewport height */
      text-align: center; /* Center text alignment */
   }
   .mobcls{
     margin-top:
   }
}

.showinmob {
   display: none; /* Show mobile-specific section on mobile */

}


/* Section 1 styling */
.section-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Make the section full height of the viewport */
}

.container-fluid {
    text-align: center;
    max-width: 100%;
        margin-top: 50px;

}

/* Image styling */
.centered-image {
    max-width: 85%;  /* Image will never exceed the width of its container */
    height: auto;     /* Maintain aspect ratio */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .centered-image {
        max-width: 80%;  /* Adjust image width for tablets */
    }
}

@media (max-width: 480px) {
    .centered-image {
        max-width: 90%;  /* Adjust image width for mobile devices */
    }
}