/*Css style for index, footer and header page*/

/* Global Styles for margin and padding*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*General style for the body section*/
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

/*Dark mode style for body*/
body.dark_mode {
  background-color: #1b1717;
}

/*Header tag style*/
header {
  background-color: #2aaeb4;
  width: 100%;
  color: white;
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

/*Dark mode for header style*/
header.dark_mode {
  background-color: #333;
}

/*Navigation bar style*/
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/*The lefet and right nave menu ul style*/
.left_nav ul,
.right_nav ul {
  list-style-type: none;
  display: flex;
}

/*The lefet and right nave menu li style*/
.left_nav li,
.right_nav li {
  margin: 0 15px;
}

/*The lefet and right nave menu ancher style*/
.left_nav a,
.right_nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

/* The humberger button style*/
.hamburger {
  display: none;
  cursor: pointer;
  font-size: 30px;
}

/*The hover effect of left and right nave menu and umberger button*/
.left_nav a:hover,
.right_nav a:hover,
.hamburger:hover {
  color: #ff6b6b;
}

/* Dark mode for left nave menu*/
.left_nav.dark_mode {
  background-color: #333;
}

/* Image (icon) size of the right nave menu*/
.right_nav img {
  width: 40px;
}

/*The top ad style*/
#carousel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/*The top ad style abimation effect*/
.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/*The top ad style the slide*/
.carousel-slide {
  min-width: 100%;
  max-height: 400px;
  overflow: hidden;
}

/*The top ad style slide image*/
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/*Style for the landing page three process*/
.process {
  display: flex;
  justify-content: space-around;
  padding: 40px 0;
  background-color: #fff;
}

/*The dark mode effect of the process section*/
.process.dark_mode {
  background-color: #0c0a0a97;
  color: white;
}

/*The alignment and animation effet of step*/
.step {
  text-align: center;
  animation: fadeIn 1.5s ease-out;
}

/*The step img style*/
.step img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

/*The step paragrap style*/
.step p {
  font-size: 16px;
}

/*Style for the landing page the card button container style*/
.cards {
  display: flex;
  justify-content: space-around;
  padding: 40px 0;
  background-color: #f9f9f9;
  z-index: 10;
}

/*For the dar mode style of the card container*/
.cards.dark_mode {
  background-color: #0c0a0a97;
}

/*The card button style*/
.card {
  background-color: #fff;
  padding: 60px 0px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/*The dark mode style of the card button*/
.card.dark_mode {
  background-color: #ffffffc7;
}

/*The title of the card button*/
.card h3 {
  margin-bottom: 10px;
}

/*The hover style of the card button*/
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/*Style for the landing page the bottom registration button*/
.cta-button {
  display: block;
  background-color: #e5533c;

  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  margin: 20px auto;
  width: 200px;
}

/*The hover style of landing page the bottom registration button*/
.cta-button:hover {
  background-color: #ff6b6b;
}

/* Footer style */
footer {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 20px;
  background-color: #2aaeb4;
  color: white;
}

/* Dark Mode of the footer*/
footer.dark_mode {
  background-color: #333;
}

/*Footer heading 2 style*/
footer h2 {
  margin-bottom: 10px;
}

/*Footer unorder list style*/
footer ul,
a {
  list-style-type: none;
  text-decoration: none;
  color: white;
}

/*Footer ancher tag hover style*/
footer a:hover {
  color: #ff6b6b;
}

/* Footer social media icons style */
footer img {
  width: 30px;
  height: 30px;
}

/* Social media unorder list style */
.social ul {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/*Margin bottom for footer list*/
footer ul li {
  margin-bottom: 5px;
}

/*Horizontal line style for fotter*/
.hr {
  border: none;
  border-top: 1px solid #1fbfc8;
  margin-bottom: 10px;
}

/* Dark mode of the horizontal line */
.hr.dark_mode {
  border: none;
  border-top: 1px solid #555;
}

/* Media Query for small screens, screen width up to 768 pixel */

@media (max-width: 768px) {
  /* Hide the right_nav on small screens */
  .left_nav {
    display: none;
  }

  /* Show the hamburger button on small screens */
  .hamburger {
    display: block;
    position: absolute;
    top: 00px;
    left: 10px;
    font-size: 30px;
    cursor: pointer;
  }

  /* Toggle left_nav when the hamburger is active */
  .left_nav.active {
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background-color: #16a5acef;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1;
  }

  /* Dark mode of the left_nav when the hamburger is active */
  .left_nav.active.dark_mode {
    background-color: #333333f5;
  }

  /* Stack items vertically in the left nav on small screens */
  .left_nav ul {
    flex-direction: column;
    text-align: center;
  }

  /*left_nav ul margin bottom for small screens */
  .left_nav li {
    margin-bottom: 10px;
  }

  /* right_nav in the small screen layout */
  .right_nav {
    display: block;
    position: absolute;
    top: 00px;
    right: 0px;
    font-size: 30px;
    cursor: pointer;
  }

  /*style the three process style for small screen*/
  #process {
    flex-direction: column;
    align-items: center;
  }

  /*Style the cards container for small screen*/
  #cards {
    flex-direction: column;
    align-items: center;
  }

  /*style the card button for small screen*/
  .card {
    margin-bottom: 20px;
  }

  /*Footer style for small screen*/
  footer {
    display: block;
    text-align: center;
  }

  /*Margin bottom for footer in small screen*/
  footer div {
    margin-bottom: 10px;
  }

  footer h2 {
    font-size: 25px;
  }
}