body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0d1b2a;
    color: #fefefe;
}

header {
    background-color: #1b263b;
    padding: 10px 0;
    text-align: center;
}

.logo {
    font-size: 2em;
    font-weight: bold;
    color: #0ff6f7;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 5px;
    font-size: .75em;
    display: flex
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}

@media (max-width: 768px) {
    nav ul li {
    flex-direction: column;
    width: 100%;
    
      }
    }

@media (max-width: 480px) {
       nav ul li {
    flex-direction: column;
    width: 100%;
    
      }
}

ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: -20;       /* Remove default padding */
    margin-left: -10;        /* Remove default margin */
}

#hero {
    background: url('CET.jpg') no-repeat center center/cover;
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover; /* Ensures the image covers the entire element */
    background-position: center; /* Centers the image */
    width: 100%; /* Ensures container takes full width */
    height: 100vh; /* Sets the container height to full viewport height */
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-attachment: fixed
}


@media (max-width: 768px) {
    #hero {
    background-attachment: scroll;
    
      }
    }

@media (max-width: 480px) {
       #hero {
    background-attachment: scroll;
    
      }
}


#hero2 {
    background: url('services.jpg') no-repeat center center/cover;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed

}


@media (max-width: 768px) {
      #hero2 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}

@media (max-width: 480px) {
      #hero2 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}
#hero3 {
    background: url('about.jpg') no-repeat center center/cover;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed


}

@media (max-width: 768px) {
      #hero3 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}

@media (max-width: 480px) {
      #hero3 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}

#hero4 {
    background: url('iot.jpg') no-repeat center center/cover;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed
}

@media (max-width: 768px) {
      #hero4 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}

@media (max-width: 480px) {
      #hero4 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}



#hero5 {
    background: url('jobs.jpg') no-repeat center center/cover;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed
}

@media (max-width: 768px) {
      #hero5 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}

@media (max-width: 480px) {
      #hero5 {
    background-size: contain; /* Adjusts the image size to fit within the element */
    background-attachment: scroll;
      }
}


#hero h1 {
    font-size: 1.5em;
}

#hero p {
    font-size: 1em;
    margin: 10px 0;
}

section {
    padding: 50px 20px;
    text-align: center;
    vertical-align: middle
}

h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #0ff6f7;
}

p {
    font-size: 1.2em;
}


.rounded-shadow {
    border-radius: 50%; /* Makes the image round */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow */
    width: 20%; /* Ensures the image fits the container */
    
}

footer {
    background-color: #1b263b;
    text-align: center;
    padding: 20px 0;
    color: #fefefe;
}