* {
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: #87bef5;
  }
  
  .navbar {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #131921;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw;
    z-index: 1000;
  }
  
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .logo img {
    width: 20vmax; /* Adjust the width as needed */
    height: auto; /* This will maintain the aspect ratio */
  }
  
  .navcontent {
    display: flex;
    gap: 1vmax;
    font-size: 1.5vmax;
    font-weight: 700;
    color: #f3f3f3;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
  }
  .navcontent a {
    color: #f3f3f3;
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    position: relative;
  }
  .navcontent a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: yellow;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .navcontent a:hover:after {
    width: 100%;
    left: 0;
  }
  
  .menubar {
    display: none;
    /* font-size: 30px; */
    padding-right: 7vw;
  }
  
  .header {
    display: flex;
    justify-content: center;
    align-content: center;
    /* margin-top: 1vw; */
  }
  .banner {
    background-color: aquamarine;
    width: 100%;
    height: 45vw;
    background-image: url("images/productheader2.png");
    background-size: contain;
    margin-top: 5vw;
  }
  
  .box {
    background-color: #032c48;
    border-radius: 15px;
    color: white;
    padding: 4vmax;
    margin-top: 4vw;
    margin-left: 5vmax;
    margin-right: 5vmax;
    text-align: center;
  }
  .developer  {
    padding-top: 0.5vmax;
   
  }
  
  .developer a {
    color: #ffffff;
    text-decoration: none;
  }
  


  
  /* TOP-PRODUCT  */
  
  .top-products {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
    /* justify-content: space-evenly; */
    align-items: center;
    gap: 1rem;

    
  }

  .product-category {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
  }

  .hr-container {
    text-align: center;
  }
  
  .hr-container hr {
    width: 60%;
    margin: 0 auto;
    
    border-color: #eeefec;
    margin-bottom: 2vmax;

    
  }
  
  
  

  h1{
    font-size: 8vmax;
    padding-bottom: 2px;
    
  }
  
  h1:hover {
    color: #ef233c;
  }
  .top-products p {
    text-align: center;
    font-weight: 700;
    margin-top: 10px;
  }
  
  .hr-container-product {
    text-align: center;
  }
  .hr-container-product hr {
    width: 100%;
    margin: 0 auto;
    margin-top: 1vmax;
    border-color: #eeefec;
    margin-bottom: 2vmax;

    
  }
  
  .top-products h2 {
    margin-top: 6.5vmax;
    text-align: center;
    font-size: 2.2vmax;
  }
  
  
  .top-products h2:hover {
    color: yellow;
  }
  .product-image {
    background-size: contain;
    background-repeat: no-repeat;
    width: 20vmax;
    height: 18vmax;
   border-radius: 5px;
    border: 4px solid black;
  }

  .top-products h3 {
    margin-top: 1vmax;
    font-size: 1.6vmax;
    
  }
  
  .top-products h3:hover {
    color:#9ef01a;
  }
  
  

  /*....................... flipcard............... */

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 20vmax;
  height: 18vmax;
  /* border: 2px solid #f1f1f1; */
  border-radius: 5px;
  perspective: 1000px;
  
  margin-top: 4vmax;
  text-align: center;
  margin-bottom: 3vmax;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  
  border-radius: 5px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back h4 {
  font-size: 2vmax;
}

.flip-card-back ul {
  font-size: 1.5vmax;
  line-height: 2vmax;
  text-align: left;
  margin-top: 2vmax;
  padding-right: 1vmax;
  /* margin: 0; */
}
.flip-card-back p {
  text-align: center;
  margin: 2vmax; /* Adjust margin as needed */
  font-size: 1.5vmax;
  line-height: 2vmax;
  /* text-align: justify; */
  
}

/* Style the back side */
.flip-card-back {
  background-color: #212121;
  color: white;
  transform: rotateY(180deg);
   display: flex; /* Added */
    flex-direction: column; /* Added */
    justify-content: center; /* Added */
    align-items: center; /* Added */
    /* overflow: hidden; */
}
/* ......................................................................................... */
  /** Footer **/
  footer {
    margin-top: 10%;
  }
  
  .foot-panel1 {
    background-color: #294261;
    color: #f3f3f3;
    height: 4vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
  }
  .foot-panel1 a {
    color: #f3f3f3;
    text-decoration: none;
  }
  
  .foot-panel2 {
    background-color: #222f3d;
    display: flex;
    /* flex-direction: column; */
    color: #f3f3f3;
    /* flex-wrap: wrap; */
    padding: 1vmax;
    justify-content: space-between;
    padding-bottom: 1vmax;
    
  }
  .nav-clock {
    display: flex;
    flex-direction: column;
    position: sticky;
    align-content: center;
    justify-content: center;
    padding-right: 5vmax;
  }
  
  /* clock */
  
  .card {
    width: 22vmax;
    height: 11vmax;
    background: #212121;
    border-radius: 1vmax;
    display: flex;
    color: white;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
  }
  
  .time-text {
    font-size: 4vmax;
    margin-top: 0vmax;
    margin-left: 2vmax;
    font-weight: 600;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  }
  
  .time-sub-text {
    font-size: 5vmax;
    margin-left: 2vmax;
  }
  
  .day-text {
    font-size: 1.5vmax;
    margin-top: 0px;
    margin-left: 2vmax;
    font-weight: 500;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  }
  
  .fa-sun,
  .moon {
    font-size: 1.5vmax;
    position: absolute;
    right: 1.5vmax;
    top: 1.5vmax;
    transition: all 0.3s ease-in-out;
  }
  
  .card:hover > .moon {
    font-size: 1.7vmax;
  }
  
  /* ..... */
  
  .foot-col {
    display: flex;
    flex-direction: column;
  }
  .gettoknow p {
    font-weight: 500;
    margin-top: 1vmax;
    font-size: 1.5vmax;
  }
  
  .gettoknow {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .foot-heading {
    font-size: 2rem;
  }
  
  .foot-panel3 {
    background-color: #222f3d;
    color: #f3f3f3;
    border-top: 0.5px solid white;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .foot-logo {
    background-image: url("/images/logo.png");
    background-size: cover;
    height: 55px;
    width: 300px;
    border-radius: 5px;
    padding: 2px;
  }
  
  .foot-panel4 {
    background-color: #0f1111;
    color: #f3f3f3;
    /* height: 5vmax; */
    font-size: 0.7rem;
    text-align: center;
    padding-bottom: 15px;
  }
  
  .pages {
    padding: 10px;
  }
  
  .copyright {
    padding-top: 2px;
  }
  
  .copyright a {
    color: #ffffff;
    text-decoration: none;
  }

  /* ............................................................FOR MOBILE SCREEN .................................................. */

  @media (max-width: 600px) {
    * {
      margin: 0;
      box-sizing: border-box;
    }
  
    body {
      background-color: #87bef5;
    }
  
    .navbar {
      padding: 5vw;
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
  
    .navcontent {
      display: none;
    }
    .menubar {
      display: block;
    }
  
    .logo {
      display: flex;
      justify-content: center;
      align-content: center;
      width: 45vw;
      height: 5vh;
      background-size: contain;
      background-repeat: no-repeat;
    }
  
    /* hamburger menu          */
    /* ................................................. */
  
    /* Add these styles to show/hide the navigation content */
    /* Adjusted styles for the navigation content */
    .icon-large {
      font-size: 24px; /* You can adjust this value */
      /* color: #ffffff; */
    }
    .navcontent {
      display: none;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
      padding: 20px 0;
      transform: translateY(-100%);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
    }
  
    /* Styling for the navigation items */
    .navcontent p {
      margin: 10px;
      font-size: 2.5vmax;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: color 0.3s;
    }
  
    .navcontent p:hover {
      color: #f4d03f; /* Change color on hover */
    }
  
    /* Styles for the active state of the navbar */
    .navbar.active .navcontent {
      transform: translateY(0);
    }
  
    /* Add this class to the navbar when hamburger is clicked */
    .navbar.active .line:nth-child(1) {
      transform: rotate(45deg) translate(5px, 6px);
    }
  
    .navbar.active .line:nth-child(2) {
      opacity: 0;
    }
  
    .navbar.active .line:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -6px);
    }
  
    /* Default state: content is hidden */
    .navbar .navcontent {
      display: none;
    }
  
    /* When active class is applied to navbar, show the content */
    .navbar.active .navcontent {
      display: flex;
    }
  
    /* ......................................... */
  
    .header {
      display: flex;
      justify-content: center;
      align-content: center;
    }
    .banner {
      background-color: aquamarine;
      width: 100%;
      height: 25vmax;
      background-image: url("images/productheader2.png");
      background-size: contain;
      margin-top: 7vmax;
    }
  
/*    
    
  h1{
    font-size: 7vmax;
    padding-bottom: 2px;
  } */
  

   
  .box {
    background-color: #032c48;
    border-radius: 15px;
    color: white;
    padding: 4vmax;
    margin-top: 4vw;
    margin-left: 3vmax;
    margin-right: 3vmax;
    text-align: center;
  }


  
  /* TOP-PRODUCT  */
  
  .top-products {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
    /* justify-content: space-evenly; */
    align-items: center;
    gap: 1rem;

    
  }

  .product-category {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
  }

  .hr-container {
    text-align: center;
  }
  
  .hr-container hr {
    width: 60%;
    margin: 0 auto;
    
    border-color: #eeefec;
    margin-bottom: 2vmax;

    
  }
  
  
  

  h1{
    font-size: 6vmax;
    padding-bottom: 2px;
    
  }
  
  h1:hover {
    color: #ef233c;
  }
  .top-products p {
    text-align: center;
    font-weight: 700;
    margin-top: 10px;
  }
  
  .hr-container-product {
    text-align: center;
  }
  .hr-container-product hr {
    width: 100%;
    margin: 0 auto;
    margin-top: 1vmax;
    border-color: #eeefec;
    margin-bottom: 2vmax;

    
  }
  
  .top-products h2 {
    margin-top: 6.5vmax;
    /* text-align: center; */
    font-size: 2.7vmax;
    line-height: 4vmax;
    font-weight: 900;
  }
  
  
  .top-products h2:hover {
    color: yellow;
  }
  .product-image {
    background-size: contain;
    background-repeat: no-repeat;
    width: 30vmax;
    height: 28vmax;
   border-radius: 5px;
    border: 4px solid black;
  }

  .top-products h3 {
    margin-top: 1.2vmax;
    font-size: 2.4vmax;
    
  }
  
  .top-products h3:hover {
    color:#9ef01a;
  }
  
  

  /*....................... flipcard............... */

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 30vmax;
  height: 28vmax;
  /* border: 2px solid #f1f1f1; */
  border-radius: 5px;
  perspective: 1000px;
  
  margin-top: 4vmax;
  text-align: center;
  margin-bottom: 3vmax;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  
  border-radius: 5px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;

}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}
.flip-card-back h4 {
  font-size: 3.5vmax;
}

.flip-card-back ul {
  font-size: 2.5vmax;
  line-height: 3vmax;
  text-align: left;
  margin-top: 2vmax;
  padding-right: 1vmax;
  /* margin: 0; */
}
.flip-card-back p {
  text-align: center;
  margin: 2vmax; /* Adjust margin as needed */
  font-size: 2.5vmax;
  line-height: 3vmax;
  /* text-align: justify; */
  
}

/* Style the back side */
.flip-card-back {
  background-color: #212121;
  color: white;
  transform: rotateY(180deg);
   display: flex; /* Added */
    flex-direction: column; /* Added */
    justify-content: center; /* Added */
    align-items: center; /* Added */
    /* overflow: hidden; */
}
  
  
  
    /** Footer **/
    footer {
      margin-top: 25%;
    }
  
    .foot-panel1 {
      background-color: #294261;
      color: #f3f3f3;
      height: 15vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5vw;
    }
    .foot-panel1 a {
      color: #f3f3f3;
      text-decoration: none;
    }
  
    .foot-panel2 {
      background-color: #222f3d;
      display: flex;
  
      color: #f3f3f3;
      
      padding: 2vmax;
      padding-right: 5vmax;
  
      padding-bottom: 5vw;
    }
  
    .gettoknow p {
      font-weight: 500;
      margin-top: 10px;
      font-size: 1.7vmax;
    }
  
    .gettoknow {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
    }
  
    .foot-heading {
      font-size: 2rem;
    }
  
    .foot-panel3 {
      background-color: #222f3d;
      color: #f3f3f3;
      border-top: 0.5px solid white;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .foot-logo {
      background-image: url("/images/logo.png");
      background-size: cover;
      height: 55px;
      width: 300px;
      border-radius: 5px;
      padding: 2px;
    }
  
    .foot-panel4 {
      background-color: #0f1111;
      color: #f3f3f3;
      height: 75px;
      font-size: 0.7rem;
      text-align: center;
    }
  
    .pages {
      padding: 10px;
    }
  
    .copyright a {
      color: #ffffff;
      text-decoration: none;
    }
  
    .nav-clock {
      display: none;
    }
  }