/* Colors */
:root {
      --primary-color: #e66414;
      --secondary-color: #282c35;
      --background-color: white;
  }
  
  body {
      font-family: 'Comic Sans MS', 'Comic Sans', cursive;
      background-color: white;
      color: var(--secondary-color);
      margin: 0;
      padding: 0;
  }
  
  header {
      background-color: var(--secondary-color);
      color: var(--background-color);
      padding: 20px 0;
      text-align: center;
  }
  
  header h1 {
      margin: 0;
      font-size: 36px;
  }
  
  nav ul {
      list-style-type: none;
      padding: 0;
  }
  
  nav ul li {
      display: inline;
      margin: 0 15px;
  }
  
  nav ul li a {
      color: var(--background-color);
      text-decoration: none;
      font-weight: bold;
      font-size: 20px;
  }
  
  main {
      padding: 20px;
  }
  
  section {
      margin-bottom: 40px;
      background-color: var(--primary-color);
      color: var(--background-color);
      padding: 20px;
      border-radius: 15px;
  }
  
  h2 {
      font-size: 28px;
      margin-top: 0;
  }
  
  footer {
      background-color: var(--secondary-color);
      color: var(--background-color);
      text-align: center;
      padding: 10px 0;
      position: fixed;
      bottom: 0;
      width: 100%;
  }
  
  .contact-link {
      color: var(--primary-color);
      text-decoration: none;
  }
  
  /* Preloader Styles */
  .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
  }
  
  .preloader img {
      width: 100px;
      height: 100px;
      animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

            /* Add Logo Styles */
.logo {
    position: absolute;
    top: -25px; /* Adjust the top position as needed */
    left: 20px; /* Set left position to move the logo to the left */
}


.logo img {
    width: 150px; /* Increase the width as needed */
    height: auto; /* Let the height adjust automatically to maintain aspect ratio */
}
  
  .logo img {
      width: 200px; /* Adjust size as needed */
      height: auto; /* Maintain aspect ratio */
  }
  


/* Navigation Styles */
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Center the navigation items */
}

nav ul li {
    display: inline-block; /* Display the list items as blocks */
    margin: 0 15px;
}

nav ul li a {
    color: var(--background-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

/* Dropdown Menu Styles */
.dropdown {
    display: none; /* Initially hide the dropdown menu */
}

/* Media Query for Mobile Screens */
@media screen and (max-width: 768px) {
    .logo {
        position: relative;
        top: auto;
        left: auto;
        text-align: center; /* Center the logo on mobile screens */
    }

    .logo img {
        height: 40px; /* Decrease the logo height for mobile screens */
    }

    nav ul {
        display: none; /* Hide the navigation on mobile screens */
    }

    /* Show the dropdown menu on mobile screens */
    .dropdown {
        display: block;
        text-align: center;
    }
}


* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}