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

body {
  font-family: "Lato", sans-serif;
  background-color: #f7fcf3;
}

/* Styling for the navigation bar */
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 8vh;
  background-color: transparent;
  padding: 10px;
  font-size: 18px;
  border-bottom: 1px solid #154f30;
}
.logo {
  font-family: "Lato", sans-serif;
  font-size: 27px;
  font-style: italic;
  font-weight: 800;
  line-height: 32.4px;
  text-align: left;
  color: #154f30;
  /* border: 1px solid black; */
  width: 5%;
}
.navebar-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: transparent;
  font-size: 16px;
  /* border: 1px solid black; */
  width: 60%;
}
.navbar a {
  font-family: "Lato", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  line-height: 27px;
  text-align: left;
  color: black;
  text-decoration: none;
}

.navbar a:hover {
  color: #154f30;
}

/* Hero Section styling */
.hero {
  background-image: url("http://connectmazjid.com/wp-content/uploads/2024/10/background.png"); /* Replace with actual image */
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding-top: 10vh;
}

.hero h1 {
  font-family: Lato;
  font-size: 8vw;
  font-style: italic;
  font-weight: 800;
  line-height: 270px;
  text-align: left;
  color: #f2c14e;
  letter-spacing: 0.2em;
}

/* Iframes section styling */
.iframe-section {
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.iframe-container1 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 90vw;
  height: 640px;
  margin-bottom: 4vh;
}
.desktop-view {
  width: 70%;
}
.mobile-view {
  width: 20%;
}

iframe {
  width: 100%;
  height: 100%;
  /* border: 1px solid #ccc; */
  border: none;
  border-radius: 10px;
}
.iframe-container2 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 85vw;
  height: 640px;
  margin-bottom: 4vh;
}
.iframe-container3 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 85vw;
  height: 640px;
  margin-bottom: 4vh;
}
.iframe-container4 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 85vw;
  height: 640px;
  margin-bottom: 4vh;
}
.iframe-container5 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 85vw;
  height: 640px;
  margin-bottom: 4vh;
}

.iframe-container6 {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 10px;
  width: 85vw;
  height: 640px;
  margin-bottom: 4vh;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .iframe-container {
    width: 100%;
    height: 300px;
  }
}

.hamburger {
  display: none; /* Hidden by default, shown in mobile */
  font-size: 30px;
  color: black;
  cursor: pointer;
}

/* Dropdown Menu Styles */
.dropdown-menu {
  display: none;
  flex-direction: column;
  justify-content: center; /* Vertically center the links */
  align-items: center;
  background-color: #f7fcf3;
  position: absolute;
      top: 65px;
  width: 90%;
  left: 20px;
  z-index: 999;
  height: 60vh;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
      border-top: 2px solid black;
}

.dropdown-menu a {
  color: #154f30;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18px;
}

.dropdown-menu a:hover {
  background-color: white;
  color:black;
}
.navbar-items {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
/* Responsive Styling */
@media (max-width: 768px) {
  .navbar-items {
    display: none; /* Hide navbar items in mobile view */
  }
  .hamburger {
    display: block; /* Show hamburger icon in mobile view */
  }
  
}

@media(max-width: 768px) {
  .mobile-view{
    display: none;
  }
  .desktop-view{
    width: 90%;
  }
  .hero h1{
    font-size: 40px;
  }
  .iframe-section {
    flex-direction: row;
  }
  .navbar{
      justify-content: space-between;
      padding-left: 30px;
        padding-right: 30px;
  }
  .logo{
      font-size:24px;
  }
}

@media (min-width:768px){
  .heading-salah-Desktop{
    display: none; 
  }
  .heading-salah-mobile{
    display: none; 
  }
  
}