body, html {
    padding: 0;
    margin: 0;
}
/* -- navigation icon styling -- */

#headerContainer {
  height: 160px;
}

#mainHeader {
    width: 100%;
    height: 160px;
    text-align: center;
    transition: height 0.3s ease;
    overflow: hidden;
}

#menu_icon {
	height: 30px;
	width: 50px;
	clear: left;
	cursor:pointer;
	right: 45px;
	position: fixed;
	z-index: 1000; 
	top: 50px;
	transform: scale(.95);
	transition: ease-in-out .3s;
	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
  border: solid 1px #ffffff;
  background-color: #f13223;
  border-radius: 10px;
  padding: 20px 10px;
}

#menu_icon span {
  display: block;
  width: 100%; /* Full width of the container */
  height: 4px; /* Thickness of each bar */
  background-color: #ffffff; /* Bar color */
  border-radius: 2px; /* Slight rounding for aesthetics */
  transition: transform 0.3s, opacity 0.3s; /* Smooth animation for transformations */
}

#menu_icon:hover {
	transform: scale(.99);
}

#menu_icon.active span:nth-child(1) {
	transform: rotate(45deg) translate(13px, 13px);
	background-color: #ffffff; /*changing top bar color*/
}

#menu_icon.active span:nth-child(2) {
	opacity: 0; /* Hide the middle bar */
}

#menu_icon.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
	background-color: #ffffff; /*changing bottom bar color*/
}
/* -- navigation icon styling end -- */



/* --- Navigation element styling -- */

#myNav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  border: none;
  background-color: transparent;
  z-index: 1000;

  /* Hidden state */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  pointer-events: none;
}

#myNav.open {
  transform: translateX(0%);
  opacity: 1;
  pointer-events: auto;
}

/* Navigation element styiling end */


/*universal iframe styling start*/

iframe {
  display: block;
  border: none;
}

/* universal iframe styling end */


/*Footer iframe styling start*/

#mainFooter {
  width: 100%;
  height: 100px;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.sectionHeaders {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  background-color: #b30000;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  font-size: 3.5rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* Responsive Design */


@media (max-width: 820px) {
  #menu_icon {
    top: 40px;
    width: 45px;
    height: 35px;
    padding: 10px;
  }

    #menu_icon.active span:nth-child(3) {
	transform: rotate(-45deg) translate(10px, -10px);
	background-color: #ffffff; /*changing bottom bar color*/
  }

  #servicesHeader {
    height: 75px;
  }

}
/*medium screens*/



@media (max-width: 767px) and (min-width: 641px) {

  #headerContainer {
    overflow: hidden;
    height: 150px;
  }

  #mainHeader {
    height: 150px;
  }
}


/*small screens*/
@media (max-width: 600px) {

   #mainHeader {
    width: 100%;
    height: 200px;
    transition: ease-in-out 0.3s;
  }


  #headerContainer {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    transition: ease-in-out 0.3s;
  }
  #headerContainer.scrolled {
    height: 0px; /* Reduced height for smaller screens */
  }

  .sectionHeaders {
    margin-top: 130px;
    height: 50px;
    font-size: 2.5rem;
  }

  #aboutUsHeader {
    margin-top: 180px;
  }

  #servicesHeader {
    margin-top: 181px;
  }


/* Navigation icon styling */

  #myNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    border: none;
    background-color: transparent;
    z-index: 1000;

    /* Hidden state */
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    pointer-events: none;
  }

  #myNav.open {
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
  }

  #menu_icon {
    width: 40px;
    height: 30px;
    right: 15px; /* Adjusted for smaller screens */
    top: 30px; /* Adjusted for smaller screens */
    border:solid 1px #ffffff; /* Added border for visibility */
    border-radius: 5px; /* Added border radius for aesthetics */
    padding: 10px; /* Added padding for better touch target */
  }


    #menu_icon.active span:nth-child(1) {
	transform: rotate(45deg) translate(10px, 8px);
    }

    #menu_icon.active span:nth-child(2) {
	opacity: 0; /* Hide the middle bar */
    }

    #menu_icon.active span:nth-child(3) {
	transform: rotate(-45deg) translate(10px, -10px);
    }

  /* Navigation element styling end */

    .contact-item a {
        font-size: medium;
    }
    
}


@media (max-width: 580px) {

  #menu_icon {
    top: 10px;
    right: 5px;
  }

  #servicesHeader {
    margin-top: 177px;
  }
}

@media (max-width: 550px) {
  #servicesHeader {
    margin-top: 169px;
  }
}

@media (max-width: 500px) {
  #aboutUsHeader {
    margin-top: 160px;
  }

  #servicesHeader {
    margin-top: 169px;
  }
}

@media (max-width: 480px) {


    #mainHeader {
      height: 200px;
    }

  #servicesHeader {
    margin-top: 163px;
  }
}

@media (max-width: 430px) {

  #mainHeader {
    height: 200px;
  }

  #servicesHeader {
    margin-top: 157px;
  }
}

@media (max-width: 414px){

    #mainHeader {
      height: 300px;
    }

    #servicesHeader {
      margin-top: 151px;
    }
  }

@media (max-width: 400px) {
  #aboutUsHeader {
    margin-top: 149px;
  }

  #servicesHeader {
    margin-top: 148px;
  }
}

  @media (max-width: 390px) {

    #mainHeader {
      height: 300px
    }

    #servicesHeader {
      margin-top: 145px;
    }
  }

  @media (max-width: 375px) {

    #mainHeader {
      height: 300px;
    }

    #servicesHeader {
      margin-top: 134px;
    }

}

@media (max-width: 360px) {

  #mainHeader { 
    height: 200px;
  }

  #servicesHeader {
    margin-top: 130px;
  }

}

@media (max-width: 359px) and (min-width: 0px) {
  

  #headerContainer{
    height: 150px;
  }
  
  #servicesHeader {
    margin-top: 125px;
  }

}