@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


 /* CSS HEX
--white: #fffeffff;
--fuchsia: #ff01fbff;
--picton-blue: #02a9eaff;
--yellow: #faff00ff;
--black: #000300ff;


/* SCSS RGB */
/* $white: rgba(255, 254, 255, 1);
$fuchsia: rgba(255, 1, 251, 1);
$picton-blue: rgba(2, 169, 234, 1);
$yellow: rgba(250, 255, 0, 1);
$black: rgba(0, 3, 0, 1); */

/* SCSS Gradient */
/* $gradient-top: linear-gradient(0deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-right: linear-gradient(90deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-bottom: linear-gradient(180deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-left: linear-gradient(270deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-top-right: linear-gradient(45deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-bottom-right: linear-gradient(135deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-top-left: linear-gradient(225deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-bottom-left: linear-gradient(315deg, #fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff);
$gradient-radial: radial-gradient(#fffeffff, #ff01fbff, #02a9eaff, #faff00ff, #000300ff); */ */

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
body {
  font-family: Poppins;
}

.header {
  position: sticky;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 200;

  color: aliceblue;
}

.upper-header {
  overflow: hidden;
  padding: 1rem;
  background:#02a9eaff;
;
  max-height: 8rem;
  transition: all 0.3s ease;
  color: black;
}
.info-header {
  display: flex;
  align-items: center;

  justify-content: space-between;
}
.info-header-left {
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
}
.info-header-left-div {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.info-logo1 {
  width: 1.3rem;

  display: inline-block;
}
.info-logo1:hover {
  width: 1.5rem;
  color:  #02a9eaff
;
}


    .info-logo1:hover{

      animation: shake 0.4s;
    }

    @keyframes shake {
        0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1px, 1px); }
  20%  { transform: translate(1px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -2px); }
  70%  { transform: translate(-1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  90%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
    }













.info-logo2 {
  width: 1.8rem;

  display: inline-block;
}
.info-logo2:hover {
  width: 2.2rem;
  color:  #02a9eaff
;
}


    .info-logo2:hover{

      animation: shake 0.4s;
    }

    @keyframes shake {
        0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1px, 1px); }
  20%  { transform: translate(1px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -2px); }
  70%  { transform: translate(-1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  90%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
    }
.info-header-right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 15rem;
  min-height: 7rem;
}
.sm-logo {
  width: 2.2rem;
}
    .sm-logo:hover{
width: 3rem;
      animation: shake 0.4s;
    }

    @keyframes shake {
        0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1px, 1px); }
  20%  { transform: translate(1px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -2px); }
  70%  { transform: translate(-1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  90%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
    }








.sm-logo:active {
  width: 3.5rem;

  color: #02a9eaff;
}
.lower-header {
  overflow: hidden;

  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  transition: all 1s ease;
  z-index: 100;
}
.lower-header-left {
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  display: flex;
  min-width: 20rem;
  align-items: center;
  gap: 0.5rem;
  z-index: 100;
  justify-content: space-evenly;

  color: #08C2FF;
  background: linear-gradient(to top left, #ffffff, #ffffff, #ffffff, #ffffff);
  font-size: 80%;
  transition: color 0.3s, background-color 1s;
}
.lower-header-left:hover {
  color: #000000;
  background: linear-gradient(to top left, #f3c910, #ffffff, #ffffff, #ffffff);
}

   .logo {
  width: 30%;
  max-width: 6.5rem;
  min-width: 4rem;
  object-fit: contain;
}

.logo:hover {


  filter: brightness(0) saturate(100%);



}

.logo-text {
  font-size: 1.5rem;
}
.lower-header-middle {
  display: flex;
  flex: 9;
  align-items: center;
  background-color: rgb(255, 255, 255);
  justify-content: space-evenly;

  border-width: 0.25rem;
}

.menu-btn {
  color:   #02a9eaff
;
  width: 15rem;
  background: white;
  height: 5rem;
  display: flex;
  border: none;
  border-radius: none;
  align-items: center;
  justify-content: space-evenly;
  transition: color 0.3s, background-color 0.5s;
}
a {
  color:  #02a9eaff
;
  text-decoration: none;
  font-size: 0.8rem;
}
.menu-btn:hover {
  color: rgb(255, 255, 255);

  background:    #02a9eaff
;
}
.menu-btn:hover a {
  color: rgb(255, 255, 255);
}
.menu-btn:active {
  color: rgba(238, 192, 39, 0.767);
  border-bottom-style: solid;
  border-bottom-width: 0.25rem;
  border-bottom-color: #FAFF00;
}

.lower-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  flex: 1.5;
  background-color:  #02a9eaff
;
  font-size: 80%;
  min-width: 15rem;
  max-width: 25rem;
  height: 100%;
  color:   #02a9eaff
;

  transition: color 0.25s, background-color 0.6s;
}

.lower-header-right a {
  color: rgb(255, 255, 255);
}
.lower-header-right:hover a {
  color: #F9DB0F;
}
.lower-header-right:active a {
  color: rgb(255, 255, 255);
}
.lower-header-right:hover {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}
.lower-header-right:active {
  color: greenyellow;
  background-color: rgb(0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 0.25rem;
  border-bottom-color: greenyellow;
}

.hamBurger {
  display: none;
}

.hidden {
  display: none;
}
.navbar-right {
  transform: translateY(-101%);
}

@media screen and (max-width: 1100px) {
  .sm-logo {
    width: 3rem;
  }
  .sm-logo:hover {
    width: 3.3rem;
  }
  .sm-logo:active {
    width: 3.9rem;
    color:  #02a9eaff
;
  }
  .upper-header {
    display: none;
  }
  .lower-header {
    height: 6rem;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    z-index: 100;
    font-size: 1.5rem;
  }

  .lower-header-middle {
    display: none;
  }

  .lower-header-right {
    display: none;
  }
  /* ham */

  .hamBurger {
    display: block;
    position: relative;
    height: 3.6rem;
    width: 2.5rem;
    margin-left: auto;
    z-index: 100;
  }

  .hamBurger span {
    position: absolute;
    background: linear-gradient(
      to top left,
      #ff0000,
      #e06a0a,
      #ddad11,
      #cc790c,
      rgb(226, 169, 10)
    );
    width: 100%;
    height: 0.4rem;
    top: 50%;
    border-radius: 2%;
    transform: translate(-50%, -50%);
  }

  .hamBurger span:nth-child(1) {
    top: 25%;
    transition: 0.5s;
  }

  .hamBurger span:nth-child(3) {
    top: 75%;
    transition: 0.5s;
  }

  .hamBurger:hover {
    opacity: 0.8;
    transition: 0.5s;
  }

  .hamBurger:active {
    opacity: 0.6;
  }

  .hamBurger.active span:nth-child(1) {
    top: 50%;
    border-radius: 2%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: orangered;
  }
  .hamBurger.active span:nth-child(2) {
    display: none;
  }
  .hamBurger.active span:nth-child(3) {
    background-color: orangered;
    border-radius: 25%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .navbar-right {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    transition: 0.6s ease-in-out;
    top: 0;
    right: 0;
    height: 56rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: #ffffff;
    color: black;
    background: linear-gradient(
      to right,
      rgb(255, 255, 255),
      rgb(255, 255, 255)
    );
    z-index: 94;
    border-bottom-style: solid;
    border-color: rgb(255, 255, 255);
  }

  .navbar-drops {
    position: relative;
    border-bottom-style: solid;
    border-width: 0.1rem;
    border-color: black;
  }
  .navbar-drops::before {
    content: "";
    height: 2rem;

    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to right,
      rgb(235, 193, 8) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    transition: 0.5s ease;
    display: block;
    z-index: 100;
  }
  .navbar-drops:hover::before {
    width: 5rem;
  }

  .navbar-right a {
    font-size: 0.69rem;
  }
}

@media screen and (max-width: 600px) {
  .hidden {
    display: none;
  }
  .lower-header-right {
    display: none;
  }

  .upper-header {
    display: none;
  }

  .hamBurger {
    display: block;
    position: relative;
    height: 3.6rem;
    width: 2.5rem;
    margin-left: auto;
    z-index: 100;
  }

  .hamBurger span {
    position: absolute;
    background: linear-gradient(
      to top left,
      #ff0000,
      #e06a0a,
      #ddad11,
      #cc790c,
      rgb(226, 169, 10)
    );
    width: 100%;
    height: 0.4rem;
    top: 50%;
    border-radius: 2%;
    transform: translate(-50%, -50%);
  }

  .hamBurger span:nth-child(1) {
    top: 25%;
    transition: 0.5s;
  }

  .hamBurger span:nth-child(3) {
    top: 75%;
    transition: 0.5s;
  }

  .hamBurger:hover {
    opacity: 0.8;
    transition: 0.5s;
  }

  .hamBurger:active {
    opacity: 0.6;
  }

  .hamBurger.active span:nth-child(1) {
    top: 50%;
    border-radius: 2%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: orangered;
  }
  .hamBurger.active span:nth-child(2) {
    display: none;
  }
  .hamBurger.active span:nth-child(3) {
    background-color: orangered;
    border-radius: 25%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .navbar-right {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    transition: 0.6s ease-in-out;
    top: 0;
    right: 0;
    height: 56rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: #ffffff;
    color: black;
    background: linear-gradient(
      to right,
      rgb(255, 255, 255),
      rgb(255, 255, 255)
    );
    z-index: 94;
    border-bottom-style: solid;
    border-color: rgb(255, 255, 255);
  }

  .navbar-drops {
    position: relative;
    border-bottom-style: solid;
    border-width: 0.1rem;
    border-color: black;
  }
  .navbar-drops::before {
    content: "";
    height: 2rem;

    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to right,
      rgb(235, 193, 8) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    transition: 0.5s ease;
    display: block;
    z-index: 100;
  }
  .navbar-drops:hover::before {
    width: 5rem;
  }

  .navbar-right a {
    font-size: 0.69rem;
  }
}

.whatsapp-float{
position: fixed;
right:2rem;
z-index: 500;
bottom: 10%;

}

.whatsapp-float  .whatsapp-img{


width: 8.5rem;
height: 8.5rem;


}

    

    .whatsapp-float:hover{

      animation: shake 0.4s;
    }

    @keyframes shake {
        0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1px, 1px); }
  20%  { transform: translate(1px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -2px); }
  70%  { transform: translate(-1px, 1px); }
  80%  { transform: translate(1px, -1px); }
  90%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
    }