@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/amoera');
  @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Slab:wght@100..900&display=swap');
 * {
    margin: 0;
    padding:0 ;
    box-sizing:border-box ;
    scroll-behavior:smooth ;
    font-family: "Poppins", sans-serif;
 }  

  

  :root{
     --primary-color: #ffffff;
      --secondary-color: #000000;
      --test2-color: rgb(11, 136, 0);;
      --footer-color:#b8b8b870;
      --footertx-color:#444444;
               --footertxHOV-color:#000000;
           --test1-color:rgb(255, 0, 0);



  }

   .hero{
      background: var(--primary-color);
      border: none;

     }
     .dark-theme{
      --primary-color: #000000;
      --secondary-color: #ffffff;
        --footer-color:#111;
        --footertx-color:#7e7e7e;
         --footertxHOV-color:#ffffff;

     }

     
 header{
    display:flex;
    align-items: center;
    max-width: 1285px;
    margin: -1rem auto;
    justify-content:space-around;
    list-style-type: none;
  }
  



 .LOGO{
  width: 100px;
  mix-blend-mode:multiply;
  margin-left: 35em;
 }
 


 
 label h1{
  color: #0044ff;
  font-weight: 800;  
  padding:10px 0 ;
  padding-right: 30px ;
  text-align: right;
  pointer-events: none;

 }

 .slide{
  height: 48em;
  width: 180px;
  background-color:var(--primary-color);
  position: relative;
  transition: 0.7s ease;
  top: -48.8em;
  transform:translateY(-1000px);
  overflow: hidden;
  z-index: 1;
  border-radius: 0px 50px 50px 0px;
 }

 ul li{
  list-style: none;
 }

  ul li a{
    color: var(--secondary-color);
    font-size: 500;
    padding: 7px 6px;
    display: block;
    text-decoration: none;
    text-transform: capitalize;
    transition: 0.2s ease-out;
  }

    ul li:hover a{
      color: #ffffff;
      background-color: #001aff;
    }

    ul li a:active{
      transform: scale(1.1);
    }
    ul li a i{
      width: 40px;
      text-align: center;
    }


    input{
      display: none;
      visibility: hidden;
    -webkit-appearance: none ;
    }
  
    .tog{
      position: absolute;
      height: 30px;
      width: 30px;
      top: 20px;
      left: 15px;
      z-index: 2;
      cursor: pointer;
      border-radius: 10px;
      background-color: transparent;
      box-shadow: 0 0 10px rgba(80, 79, 79, 0.493);
    }
 .tog .common{
  position: absolute;
  height: 2px;
  width: 20px;
  background-color: #001aff;
  border-radius: 50px;
  transition: 0.3s ease;
 }

 .tog .top-line{
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
 }

 .tog .middle-line {
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
 }

  .tog .bottom-line{
    top: 70%;
    left: 50%;
  transform: translate(-50%,-50%);
 }

 input:checked ~  .tog .top-line{
   left: 2px;
   top: 14px;
   width: 25px;
   transform: rotate(45deg);
 }
input:checked ~  .tog .bottom-line{
   left: 2px;
   top: 14px;
   width: 25px;
   transform: rotate(-45deg);
 }

 input:checked ~  .tog .middle-line{
   transform: translateX(20px);
   opacity: 0;
 }
  input:checked ~ .slide{
 transform: translateX(0);
 box-shadow: 0 0 20px rgba(0, 38, 255, 0.493);
  }

  .container{
  position:relative;
  text-align: center; 
  color: rgb(255, 253, 253);
  font-size: large;
  margin-top: -0.3em;
}
       
.container video{
  margin-inline-start: 10%;
  margin: 0;
  width: 1265px;
}






 /* From Uiverse.io by andrew-demchenk0 */ 
.switch {
  margin-left: 28em;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;

}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
  
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
  
}

.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */.sun svg {
  animation: rotate 15s linear infinite;
  
}

@keyframes rotate {
 
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* .switch:hover */.moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {
 
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.input:checked + .slider {
  background-color: #183153;

}

.input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked + .slider:before {
  transform: translateX(30px);
}


.pr{
  letter-spacing:1px;
  position: absolute;
     font-size:xx-large;
        font-weight: 350;
    font-family:'amoera' ;
        color: var(--secondary-color);
        margin-top: -23.5em;
        margin-left: 15.5em;

}

.containerA{
    margin-top:-40em;
    margin-left: 3em;
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    position: relative;


}
.containerA img{
    width: 360px; 
      border-radius: 10%;
        transition: all 0.7s ease-in;
}
.containerA img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px  rgba(53, 52, 52, 0.479);
        filter:contrast(1.04);
}

.containerA h1 {
  letter-spacing: 3px;
    text-align: center;
    margin-top: 13px;
        font-size:x-large;
        color: #ffffff;
                font-family: Roboto Slab;
        font-weight: 350;


}
.containerA p {
    text-align: center;
    margin-top: 5px;
    color: #ffffff;
    font: 1.5em sans-serif;
}


/*container1 */



.container1{
    margin-left: 0em;

}

/* From Uiverse.io by barisdogansutcu */ 
.btn1 {
    padding: 1em 2.1em ;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
    background-image: linear-gradient(rgb(11, 30, 37) , rgb(3, 82, 62));
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #cccccc;
  font-size: 15px;
  transition: all 0.5s ease;
  margin: 1em 6em;
}

.btn1:hover {
  background-image: hsl(140, 80%, 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(24, 220, 122) 0px 7px 29px 0px;
    overflow: hidden;

}

.btn1:active {
  background-color: hsl(147, 80%, 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(24, 220, 122) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}



     .btn2{
    border: none;
    padding: 0.9em 2.5em ;
    background-color:#033f23;
   color: #f7f0f0;
    font-size: large;
    border-radius: 1000px;
    margin-top: 0.5em;
    margin-left: 6.8em;
    cursor: pointer;
     position :relative;
       transition: all 0.5s ease;



    }

    .btn2::after{
        content: '';
        position: absolute;
        height: 110%;
        width: 110%;
        z-index: -1;
        top: -3px;
        left: -5px;
        background-color: #064d3d;
        border-radius: 1000px;

    }

    .btn2:hover{
        z-index: 0;
        cursor: pointer;
  box-shadow: rgb(1, 136, 73) 0px 7px 29px 0px;

    }

    .btn2:active{
       transform: scale(0.9);
         box-shadow: rgb(24, 220, 122) 0px 7px 29px 0px;

     }

     .containerB{
    margin-top:2em;
    margin-left: 3em;
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    position: relative;

}
.containerB img{
    width: 350px; 
      border-radius: 10%;
        transition: all 0.7s ease-in;
}
.containerB img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px  rgba(49, 48, 48, 0.336);
        filter:contrast(1.04);
}

.containerB .rs6{
width: 360px;
height: 240px;
}

.containerB h1 {
    text-align: center;
    margin-top: 13px;
        font-size:x-large;
        color: #ffffff;
        font-family: Roboto Slab;
        font-weight: 350;



}
.containerB p {
    text-align: center;
    margin-top: 5px;
    color: #ffffff;
    font: 1.5em sans-serif;
}





   .bt{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to bottom right,#18572a,#507388);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.5s;
    margin-top: 1.5rem;
    font: sans-serif;


    }

    .bt::after{
        content: '';
         position :absolute;
        height: 100%;
        width: 100%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(47, 143, 67) , rgb(62, 173, 173));
        z-index: -1;

    }
    
    .bt:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #97bea9,-40px 0 100px #30b442;

    }

    .bt:active{
       transform: scale(0.9);
     }


     


.im{
  margin-inline-start: 10%;
  margin: 0;
  width: 1265px;

}

.im2{
  width: 1265px;
}

.container{
  position:relative;
  text-align: center; 
  color: rgb(0, 0, 0);
  font-size: large;

}


.tm{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
}

  
.T{ 
  transform: scale(1.5);
  font: 1em sans-serif;
}
.C{
  font-weight: 1000;
}

.container2{
  position: relative;
  text-align: center; 
  color: rgb(15, 58, 92);
  font-size: large;
  margin-top: 5px;
}

.tx3{
  position:absolute;
  top: 0px;;
  left: 2%;
  margin-top: -10px;
  right: 2%;
}

.tx3 h1{
  font-weight: 2000;
  margin-top: 20px;
  color: #000000;
}

.tx3 p{
  transform: scale(1);
  font: fallback;  
}

  .title1{
    font-family:'amoera' ;
    margin-left: 570px;
    color: var(--secondary-color);
    font-weight: 100;
  }
  

  .quattro1{
    width: 500px;
    border-radius: 15%;
    transition: 1s ease;
  }

  
  .quattro2{
    width: 500px;
    border-radius:15% ;
    transition: 1s ease;
  }

  .quattroA{
    padding-bottom: 6rem;
    padding-inline-start: 4%;
    display: flex;
    width:50rem ; 
    gap: 10rem;   
  }
  
  .quattro1:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
    border-radius: 50px 180px;
  }

    
  .quattro2:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(61, 61, 61, 0.2);
    border-radius:180px 50px;

  }

  
  .quattro3{
    width: 500px;
    border-radius:15% ;
    transition: 1s ease;

  }
  
  .quattro4{
    width: 500px;
    border-radius:15% ;
    transition: 1s ease;
    height: 500px;
  }
  
  .quattroB{

    padding-bottom: 6rem;
    padding-inline-start: 4%;
    display: flex;
    width:50rem ; 
    gap: 10rem;   
  }

  
  .quattro3:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(63, 63, 63, 0.2);
    border-radius: 50px 180px;
  }

    
  .quattro4:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(63, 61, 61, 0.2);
    border-radius: 180px 50px;
  }

  
  .quattroC{

    padding-bottom: 6rem;
    padding-inline-start: 4%;
    display: flex;
    width:50rem ; 
    gap: 10rem;   
  }

  
  .quattro5{
    width: 500px;
    border-radius:15% ;
    transition: 1s ease;

  }
  
  .quattro6{
    width: 500px;
    border-radius:15% ;
    transition: 1s ease;

  }

  
  .quattro5:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(63, 62, 62, 0.2);
    border-radius: 50px 180px;
  }

    
  .quattro6:hover{
    scale: 1.1;
    box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
    border-radius: 180px 50px;
  }

  .h2{
    margin-top:-30%;
    margin-left: 25%;
    color: #ffffff;
    font: 2.08em sans-serif;
    position:relative;

  }

  
  
  .bt2{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to bottom right,rgb(247, 54, 119) , rgb(11, 25, 224));
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.5s;
    margin-top: 9rem;
    font: sans-serif;
    margin-left: 140px;

  }

  
    .bt2{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(rgb(19, 31, 92) , rgb(22, 65, 5));
    color: #f7f0f0;
    border-radius: 1000px;
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    position : relative;
    margin-left: 140px;


    }

    .bt2::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 105%;
        border-radius: 1000px;
        background-image: linear-gradient(to bottom right,rgb(6, 151, 18) , rgb(78, 56, 7));
        z-index: -1;
    }

    .bt2:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #443004,-40px 0 100px #03800e;
    }

    .bt2:active{
       transform: scale(0.9);
     }
   




  .h3{
    margin-left:115px ;
    margin-top: 2rem;
    color: var(--secondary-color);
    font-family: Roboto Slab;
    font-size: 25px;
    font-weight: 400;
  }


     /* From Uiverse.io by JaydipPrajapati1910 */ 
.bt1 {
  background: transparent;
  position: relative;
    padding: 1em 2.1em ;
  align-items: center;
      margin-top: 0.5em;
    margin-left: 9em;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgb(255,0,0);
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  color: rgb(255,0,0);
  transition: color 0.3s 0.2s ease-out;
  text-align: center;
}



.bt1::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.9s ease-out;
  z-index: -1;
}

.bt1:hover {
  color: #ffffff;
  border: 1px solid var(--test1-color);
 box-shadow: 0 0 20px var(--test1-color);


}

.bt1:hover::before {
  box-shadow: inset 0 0 0 10em var(--test1-color);
}

    .bt1:active{
       transform: scale(0.9);
     }

     
.bt1:hover{
   box-shadow: 0 0 20px var(--test1-color);
  background-color: var(--test1-color);
  color: #ffffff;
}

.im1{
  margin-inline-start: 10%;
  margin: 0;
  width: 1265px;

}


.container3{
  position: relative;
  text-align: center; 
  font-size: large;
  margin-top: 90px;
}


  .tx2{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.tx2 h1{
  margin-top: -100px;
  margin-bottom: 1em;
  color: #ff0000;
  font-weight: 900;
  font-family: "amoera";
  font-size: xx-large;

}

.tx2 p{
  transform: scale(1.5);
  font: sans-serif;
  color: #ffffff;
  font: 1em sans-serif;

  }


.Q3{
  padding-bottom: 2rem;
  padding-inline-start: 4%;
  margin-left: 6em;
  display: flex;
  gap: 10rem;
}

.Q3 img{
  width: 400px;
  border-radius: 10%;
  transition: 3s ;
  object-fit: cover;
  overflow: hidden;
}
.Q3 img:hover{
  transform:rotateZ(360deg);
  box-shadow: 0px 0px 20px 2px rgba(3, 78, 62, 0.315);
  border-radius: 15%;
}
   .discover{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to bottom right,#072710,#0a3d5c);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.5s;
    margin-top: 28rem;
    font: sans-serif;
    left: 40%;


    }

    .discover::after{
        content: '';
         position :absolute;
        height: 100%;
        width: 100%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(3, 27, 59) , rgb(3, 48, 3));
        z-index: -1;

    }
    
    .discover:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #0a3d5c,-40px 0 100px #072710;
    }
    .discover:active{
       transform: scale(0.9);}



    .bt3{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(rgb(9, 22, 27) , rgb(3, 82, 62));
    color: #f7f0f0;
    border-radius: 1000px;
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    position : relative;
    margin-left: 30em;
    margin-bottom: 3em;

    }

    .bt3::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 105%;
        border-radius: 1000px;
        background-image: linear-gradient(rgb(5, 54, 34) , rgb(11, 90, 73));
        z-index: -1;
    }

    .bt3:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 20px 0 60px #057a5d46,-20px 0 60px #03805046;
    }

    .bt3:active{
       transform: scale(0.9);
     }


     
.container2{
  position: relative;
  text-align: center; 
  color: rgb(0, 0, 0);
  font-size: large;
  background-color: rgb(9, 53, 53);
  width: 800px;
  height: 550px;
  margin-left: 14em;
  margin-top: 9em;
  margin-bottom: 8em;
  border-radius: 50px;

}

.im5{
margin-left: -35em;
width: 580px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: -8em;
}



.im6{
margin-left: 22em;
width: 580px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: 6em;

}

.text3{
  position: absolute;
  top: 66%;
  left: 5%;
  display: block;
}


  
.pr10{
  color: #ffffff;
  font-weight: 900;
  font-family:'amoera' ;
font-size:120%;
margin-top: -8.5em;
margin-left: -2em;

}

  
.pr11{
  color: #d3d3d3;
  font-weight: 350;
font-size:100%;
margin-left: -2em;
padding:-20em ;

}



   .discover2{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to right,#02614c ,#032b50);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.9s;
    margin-top: -16em;
    margin-left: -11em;
    font: sans-serif;
    left: 40%;


    }

    .discover2::after{
        content: '';
         position :absolute;
        height: 100%;
        width: 100%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(3, 27, 59) , rgb(0, 99, 82));
        z-index: -1;

    }
    
    .discover2:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #0a3d5c,-40px 0 100px #066e5d;

    }
    .discover2:active{
       transform: scale(0.9);}







.container4 {
  display: flex;
  width: 50%;
  height: 100vh;
  align-items: center;
  justify-content: center;
   margin-top:8em;
   aspect-ratio: 1/0.9;
   margin-bottom: -15em;
}

.Q3suv {
  position: relative;
}

.on-pc{
  height: 400px;
  display: block;
  margin-left: 60%;
  margin-top: -50%;
}

.on-mobile{
display: none;
}
.tx4{
  position: absolute;
  background-image: linear-gradient(rgba(0, 0, 0, 0.219),rgba(0, 0, 0, 0.699), rgba(0, 0, 0, 0.815) );
  height: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left:60%;
    margin-right:-60%;
      margin-top: -75%;
    opacity: 0;
  transition: 0.9s ease;
  padding: 50px 0 0 0;


}




.tx4:hover{
  transition: 1s ease;
  opacity: 1;
}

.tx4>*{
  transform: translateY(-20px);
  transition: transform 0.9s;
}

.tx4:hover>*{
  transform: translateY(-50px);
}

      .tx4 h1{
        font-weight: 2000;
        margin-top: 3em;
        margin-bottom: 1em;
        font-family:'amoera' ;
          color: #ffffff;}
          
      .tx4 p{
            font-family:'Roboto Slab' ;
        color: #ffffff;
        font: sans-serif;
              font-weight: 400;

      }

    .bt4{
    border: none;
    padding: 1em 3em ;
        background-image: linear-gradient(to bottom,rgb(170, 189, 2) ,rgb(107, 80, 5));

    color: #f7f0f0;
    border-radius: 1000px;
    font-size: large;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.1s;
    margin-bottom: -8px;
    }

   .bt4::after{
        content: '';
         position :absolute;
        height: 85%;
        width: 95%;
        border-radius: 1000px;
    background-image: linear-gradient(to bottom,rgb(88, 72, 1) ,rgb(63, 47, 3));
        z-index: -1;
        margin-left: -8.5em;
        margin-top: -0.82em;

    }

    .bt4:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #58500250,-40px 0 100px #05461349;

    }

    .bt4:active{
       transform: scale(-0.0009)
     }

     
.carousel {
  width: 100%;
  height: 100%; /* adjust */
  overflow: hidden;
  position: relative;
}
.carousel p{
    font-family:'amoera' ;
    margin-left: 570px;
    color: var(--secondary-color);
    font-weight: 100;  
    font-size: xx-large;
}

.carousel-track {
  display: flex;
  transition: transform 1s ease-in;
}

.carousel-track img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  flex-shrink: 0;
}



     
.container5{
  position: relative;
  text-align: center; 
  color: rgb(0, 0, 0);
  font-size: large;
  background-image:linear-gradient(#ff0000 ,#b30202);
  width: 800px;
  height: 550px;
  margin-left: 14em;
  margin-top: 15em;
  margin-bottom: 8em;
  border-radius: 50px;

}

.im7{
margin-left: -33.3em;
width: 500px;
height: 350px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: -8em;
}



.im8{
margin-left: 25em;
width: 500px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: 6em;

}

.text4{
  position: absolute;
  top: 74%;
  left: 5%;
  display: block;
}


  
.pr12{
  color: #ffffff;
  font-weight: 900;
font-size:120%;
margin-top: -8.5em;
font-family:'amoera' ;
margin-left: -2em;

}

  
.pr13{
  color: #ffb1b1;
  font-weight: 350;
font-size:100%;
margin-left: -2em;
padding:-20em ;

}



   .discover3{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to right,#ff0000 ,#d30505);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.9s;
    margin-top: -16em;
    margin-left: -11em;
    font: sans-serif;
    left: 40%;


    }

    .discover3::after{
        content: '';
         position :absolute;
        height: 100%;
        width: 100%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(231, 5, 5) , rgb(230, 7, 37));
        z-index: -1;

    }
    
    .discover3:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #ff0000,-40px 0 100px #6e0606;

    }
    .discover3:active{
       transform: scale(0.9);}



.carousel1 {
  width: 100%;
  max-width: 1265px;
  margin: 0 auto;
  position: relative;
}
.carousel1 p{
    font-family:'amoera' ;
    margin-left: 570px;
    color: var(--secondary-color);
    font-weight: 100;  
    font-size: xx-large;
}


.carousel-container1 {
  position: relative;
  overflow: hidden;
}

.carousel-track1 {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track1 img {
  width: 100%;
  height:100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background:rgba(255, 255, 255, 0);
  border-radius: 50%;
  color: rgb(255, 255, 255);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
}


.prev1 {
  left: 10px;
}

.next1 {
  right: 10px;
}

.carousel-dots1 {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: -2em;

}

.dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #a8a8a8;
  cursor: pointer;
    z-index: 1;

}

.dot.active {
  background: rgb(255, 0, 0);
}


     
.container6{
  position: relative;
  text-align: center; 
  font-size: large;
  background-image:linear-gradient(#272424 ,#888686);
  width: 800px;
  height: 550px;
  margin-left: 14em;
  margin-top: 15em;
  margin-bottom: 15em;
  border-radius: 50px;

}

.im9{
margin-left: -33.3em;
width: 500px;
height: 350px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: -8em;
}



.im10{
margin-left: 25em;
width: 500px;
border-radius: 50px;
box-shadow: 20px  10px 25px rgba(0, 0, 0, 0.288);
transition: 1s ease;
margin-top: 6em;

}

.text5{
  position: absolute;
  top: 74%;
  left: 5%;
  display: block;
}


  
.pr14{
  color: #000000;
  font-weight: 700;
font-size:120%;
margin-top: -8.5em;
font-family:'amoera' ;
margin-left: -2em;

}

  
.pr15{
  color: #ffffff;
  font-weight: 100;
font-size:100%;
margin-left: -2em;
padding:-20em ;

}



   .discover4{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to right,#9b9999 ,#5e5b5b);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    font-weight: 600;
    transition: background-color 4s;
    margin-top: -16em;
    margin-left: -11em;
    font: sans-serif;
    left: 40%;

    }

    .discover4::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 100%;
        border-radius: 50rem;
         background-image: linear-gradient(to right,#413f3f ,#9c9c9c);
        z-index: -1;

    }
    
    .discover4:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #949494,-40px 0 100px #2c2c2c;

    }
    .discover4:active{
       transform: scale(0.9);}

     
       .container7{
  position: relative;
  text-align: center; 
  font-size: large;
  background-color: #d1d1c5;
  margin-top: 90px;
  border-radius: 0px 0px 50px 50px;
  overflow: hidden;
  margin-bottom: 4em;
}


       
.RS6{
  padding-inline-start: 4%;
  margin-left: 1em;
  display: flex;
  gap: 8rem;

}

.RS6 img{
    margin-top: 10em;
  width: 500px;
  height: 600px;
  border-radius: 10%;
  transition: 1.5s ;
  object-fit: cover;
}

.RS6 img:hover{
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.37);
  border-radius: 15%;
  transform:translateY(-50px);
  filter:contrast(1.1);
}
   .discover5{
    position: relative;
    border: none;
    padding: 1em 3.1em ;
  background-image:linear-gradient(to right,#000000 ,#000000);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.5s;
    margin-top: 2rem;
    margin-bottom:2em;
    font: sans-serif;
    left: 41%;


    }

    .discover5::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 105%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(136, 136, 136) , rgb(65, 65, 65));
        z-index: -1;

    }
    
    .discover5:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 10px 0 100px #5c5c5c,-10px 0 100px #5a5a5a;
    }
    .discover5:active{
       transform: scale(0.9);}

       .pr16{
        position: absolute;
  color: #1f3a6d;
  font-weight: 900;
font-family:'amoera' ;
margin-left: 13em;
margin-top: 3em;
font-size: xx-large;
       }

       .pr17{
        font-family:'amoera sans-serif ' ;
        margin-top: 3em;
       font-size:x-large;
       padding: 0px 80px;
       }


       
     
.container8{
  position: relative;
  text-align: center; 
  font-size: large;
  background-image:linear-gradient(rgb(16, 102, 5),#1eff00 ,#0f0e0e );
  width: 800px;
  height: 550px;
  margin-left: 14em;
  margin-top: 15em;
  margin-bottom: 15em;
  border-radius: 50px;

}


.pr18{
  color: #ffffff;
  font-weight: 900;
font-size:x-large;
margin-top: -7.4em;
font-family:'amoera' ;
margin-left: -2em;

}

  
.pr19{
  color: #0b2915;
  font-weight: 100;
font-size:100%;
margin-left: -2em;
padding:-20em ;

}


   .discover6{
    border: none;
    padding: 1em 3.1em ;
    background-image: linear-gradient(to right,#0c4614 ,#17dd06);
    border-radius: 50rem;
    color: #ffffff;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    font-weight: 600;
    transition: background-color 4s;
    margin-top: -16em;
    margin-left: -11em;
    font: sans-serif;
    left: 40%;

    }

    .discover6::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 100%;
        border-radius: 50rem;
         background-image: linear-gradient(to right,#39d809,#0c4614);
        z-index: -1;

    }
    
    .discover6:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 40px 0 100px #18bd12,-40px 0 100px #0c531c;

    }
    .discover6:active{
       transform: scale(0.9);}



       
       
       .container9{
  position: relative;
  text-align: center; 
  font-size: large;
  background-color: #616264;
  margin-top: 90px;
      border-radius: 0px 250px;
  overflow: hidden;
  margin-bottom: 4em;
}


       
.RS3{
  padding-inline-start: 4%;
  margin-left: 1em;
  display: flex;
  gap: 8rem;

}

.RS3 img{
    margin-top: 10em;
  width: 500px;
  height: 600px;
  border-radius: 10%;
  transition: 1.5s ;
  object-fit: cover;
}

.RS3 img:hover{
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.212);
  border-radius: 15%;
   scale: 1.1;  
   filter:contrast(1.1);
}
   .discover5{
    position: relative;
    border: none;
    padding: 1em 3.1em ;
  background-image:linear-gradient(to right,#616264 ,#84848b);
    border-radius: 50rem;
    color: #f7f0f0;
    font-size: medium;
    display:flex;
    justify-content: center;
    align-items: center;
    position : relative;
    transition: background-color 0.5s;
    margin-top: 2rem;
    margin-bottom:2em;
    font: sans-serif;
    left: 41%;


    }

    .discover5::after{
        content: '';
         position :absolute;
        height: 110%;
        width: 105%;
        border-radius: 50rem;
        background-image: linear-gradient(to bottom right,rgb(150, 150, 150) ,#626364);
        z-index: -1;

    }
    
    .discover5:hover{
        z-index: 0;
        cursor: pointer;
        box-shadow: 10px 0 120px #5c5c5c,-10px 0 120px #5a5a5a;
    }
    .discover5:active{
       transform: scale(0.9);}

       .pr20{
        position: absolute;
  color: var(--primary-color);
  font-weight: 900;
font-family:'amoera' ;
margin-left: 16em;
margin-top: 3em;
font-size: xx-large;
       }

       .pr21{
        color: #dbdbdb;
        margin-top: 3em;
        font-family: "poppins";
       font-weight: 200;
       font-size:100%;
       padding: 0px 80px;
       }



.tx h1{
  color: var(--secondary-color);
}

.tx p{
    color: var(--secondary-color);
}


.footer {
  margin-top: 5em;
    background-color: var( --footer-color);
    color: #fff;
    padding: 40px 0;
    border-radius: 50px 50px 0px 0px ;
}

.footer-content {
    width: 1265px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.footer-section {
    flex: 1;
    margin: 0 15px;
}

.footer-section h3 {
    color: var(--secondary-color);
    font-size: 16px;
    margin-bottom: 20px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--footertx-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color:  var(--footertxHOV-color);
    background-color: transparent;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a{
    color: var(--secondary-color);
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #464646;
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 20px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--footertx-color);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--footertx-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color:  var(--footertxHOV-color);
}







      @media screen and (max-width: 393px){
       

        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }
    
    body {
        max-width: 393px;
    }


.switch {
  margin-left: 5em;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  align-items: center;
}

        .LOGO{
              margin-left: 8em;
              width: 80px;
                align-items: center;
                  mix-blend-mode:multiply;

         }
         

         .tog{
          margin-top:-0.2em ;
         }

         ul{
              margin-top: 0em;
         }
      

         .container video{
          max-width: 393px;
              border: none;
         }

    header {
        align-items: center;
        padding: 10px;
        z-index: 1;
    }

    .slide {
        margin-top: 0em; /* Changed from positive to negative */
        border-radius: 0px 50px 50px 0px;
        overflow: scroll;
        position: absolute; /* Changed from absolute to fixed */
        background-color: var(--primary-color);
        z-index: 999; /* Higher z-index to appear above everything */
        width: 180px;
        left: -180px; /* Hide by default */
        top: 0;
        height:20em; /* Full viewport height */
        transition: 0.7s ease-in-out; /* Smooth transition */
    }

    .slide::-webkit-scrollbar {
        display: none;
    }

    /* Show slide when checkbox is checked */
    input:checked ~ .slide {
        left: 0; /* Show slide */
        box-shadow: 2px 0 20px rgba(0, 81, 255, 0.555);
    }

    .tog {
        margin-top: 1px;
        z-index: 1000; /* Higher than slide */
        position: absolute; /* Changed to fixed */
        left: 15px;
        top: 15px;
    }

    .hero {
        flex-direction: column;
        align-items: center;
        width: 393px;
        overflow: hidden;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
         .pr{
          margin-left: 1.4em;
          font-size: xx-large;
          margin-top: -24em;
         }

         .containerA{
             margin-top:3em;
          display: block;
          margin-left: -2em;
         }

          .containerA .container1 img{
           width: 300px;
          height: 300px;
         border-radius: 15%;
         transition: 0.9s ease;
         margin-left: 4.5em;
         }

         .btn1{
            margin-bottom: 2em;
            margin-left:3em;
          padding: 1em 2.1em ;
         }
         
         .btn2{
            margin-bottom: 2em;
            margin-left:-2em;
          padding: 0.9em 1.9em ;
         }

         
         .containerB{
          display: block;
          margin-left: -2em;
          margin-bottom: -5em;
         }

          .containerB .container1 img{
           width: 300px;
          height: 300px;
         border-radius: 15%;
         transition: 0.9s ease;
         margin-left: 4.5em;
         }

         .container3{
          margin-top: -3em;
         }
         .im1{
          width: 393px;
         }


        .tx2 h1{
        font-size: x-large;
          margin-top: 3em;
        }

        .tx2 P{
         color: #ddd4d4;
        font-size: 65%;
        margin-top:10em;
        padding: 20px;

        }


        
         .h3{
          font-size: x-large;
          margin-left:4em ;
          justify-content: center;
          align-items: center;
          
         }
         .title1{
           font-size: xx-large;
           margin-left: 4em;
           margin-top: -5em;
         }
         .quattroA{
          display: block;
          margin-left: -3.5em;
          
          justify-content: center;
          align-items: center;
         }

          .quattroA .ts2 img{
           width: 320px;
          height: 320px;
         transition: 0.9s ease;
         margin-left: 4.5em;
         }

      .quattroA .ts2 button{
        margin-bottom: 2em;
        margin-top: 1em;
        margin-left: 8em;
      }
      
            .quattroA .ts2 img:hover{
                 scale: 1.1;
                box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
                  border-radius: 30px 130px;

                   }



          .quattroB{
          display: block;
        margin-top: -5em;
          margin-left: -3.5em;
          justify-content: center;
          align-items: center;
         }

          .quattroB .ts2 img{
           width: 320px;
          height: 320px;
         transition: 0.9s ease;
         margin-left: 4.5em;
         }
         
      .quattroB .ts2 button{
        margin-bottom: 2em;
        margin-top: 1em;
         margin-left: 8em;
      }

      
            .quattroB .ts2 img:hover{
                 scale: 1.1;
                box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
                  border-radius: 130px 30px;

                   }

  .h2{
    margin-top:-9%;
    margin-left: 17%;
    color: #ffffff;
    font: 2.08em sans-serif;
    position:relative;

  }

          .quattroC{
          display: block;
          margin-left: -3.5em;
          margin-top: -4em;
         }

          .quattroC .ts2 img{
           width: 330px;
          height: 450px;
         transition: 0.9s ease;
         margin-left: 4.5em;
         }

            .quattroC .ts2 .quattro5:hover{
                 scale: 1.1;
                box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
                  border-radius: 150px 30px;

                   }
            .quattro6:hover{
                 scale: 1.1;
                box-shadow: 11px 11px 25px rgba(59, 59, 59, 0.2);
                  border-radius: 30px 150px;

                   }

                   
          .quattroC .ts2 button{
            margin-top: 3.5em;
            margin-bottom: 2em;

          }


                  
.container2{
  position:relative;
  text-align: center; 
  font-size: large;
  width: 300px;
  height: 250px;
 margin-left:2.5em;
  border-radius: 20px;
  margin-top: 3em;
}

.im5{
  width: 250px;
  margin-left: -7em;
  margin-top: -50em;
  border-radius: 30px;
}

.im6{
  width: 250px;
    margin-left: 5em;
  margin-top: 10em;
    border-radius: 30px;

}



.pr10{
  color: #ffffff;
  margin-left:-1em ;
  font-weight: 350;
font-size:85%;
margin-top: -8.5em;

}
.pr11{
  margin-left:-1em ;
  margin-right: 1em;
  font-weight: 350;
font-size:70%;
}
         
.discover2{
  margin-left: -1.5em;
  margin-top: -15em;
    padding: 0.8em 1.5em ;
    font-size: 70%;
}


                  
.container3{
  position:relative;
  text-align: center; 
  font-size: large;
  width: 600px;
  height: 400px;
 margin-left:-6em;
  border-radius: 20px;
  margin-top: 3em;
}

.Q3{
  padding-bottom: 2rem;
  padding-inline-start: 4%;
  display: flex;
  gap: 1rem;
}

.Q3 img{
  width: 170px;
  border-radius: 10%;
  transition: 1s ;
  object-fit: cover;
  overflow: hidden;
}
.Q3 img:hover{
  transform:translateY(-20px);
  box-shadow: 0px 0px 20px 2px rgba(3, 78, 62, 0.315);
  border-radius: 15%;
}

.bt3{
  margin-left: 15.5em;
    padding: 0.8em 1.5em ;
    font-size: 90%;
}

.container4{
  width: 393px;
  margin-bottom: -5em;
  margin-top: -9em;
  overflow: hidden;
}
.on-pc{
display: none;
}
.on-mobile{
  display: flex;
  width: 393px;
}
.tx4{
  position:relative;
  width: 393px;
  height: 294.80px;
  margin-left: 0em;
  margin-top: -18.46em;
  background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.699), rgba(0, 0, 0, 0.815) );
}
.tx4 h1{
  font-size: x-large;
  margin-top: 2em;

}
.tx4 p{
  margin-top: -2em;
  font-size: 92%;
  padding: 8px;
}

.bt4{
  font-size: 90%;
  margin-top: -1em;
}
.carousel1 p{
font-size: xx-large;
margin-left: 4em;
margin-top: 1em;
}

.dot{
  width: 9px;
  height: 9px;
  margin-top: 1em;
}



                  
.container5{
  position:relative;
  text-align: center; 
  font-size: large;
  width: 300px;
  height: 250px;
 margin-left:2.5em;
  border-radius: 20px;
  margin-top: 13em;
  margin-bottom: 9em;
}


.im7{
  width: 250px;
height:180px ;
  margin-left: -7em;
  margin-top: -7em;
  border-radius: 30px;
}

.im8{
  width: 250px;
  height:180px ;
    margin-left: 5em;
  margin-top: 8em;
    border-radius: 30px;

}




.pr12{
  color: #ffffff;
  margin-left:-1em ;
  font-weight: 350;
font-size:85%;
margin-top: -8em;

}
.pr13{
  margin-left:-1em ;
  margin-right: 1em;
  font-weight: 350;
font-size:70%;
}
         
.discover3{
  margin-left: -1.5em;
  margin-top: -18.5em;
    padding: 0.8em 1.5em ;
    font-size: 70%;
}


  
.container6{
  position:relative;
  text-align: center; 
  font-size: large;
  width: 300px;
  height: 250px;
 margin-left:2.5em;
  border-radius: 20px;
  margin-top: 13em;
  margin-bottom: 9em;
}


.im9{
  width: 250px;
height:180px ;
  margin-left: -7em;
  margin-top: -7em;
  border-radius: 30px;
}

.im10{
  width: 250px;
  height:180px ;
    margin-left: 5em;
  margin-top: 8em;
    border-radius: 30px;

}




.pr14{
  color: #000000;
  margin-left:-1em ;
  font-weight: 700;
font-size:95%;
margin-top: -7em;

}
.pr15{
  margin-left:-1em ;
  margin-right: 1em;
  font-weight: 350;
font-size:70%;
}
         
.discover4{
  margin-left: -1.5em;
  margin-top: -18.5em;
    padding: 0.8em 1.5em ;
    font-size: 70%;
}




  
.container8{
  position:relative;
  text-align: center; 
  font-size: large;
  width: 300px;
  height: 250px;
 margin-left:2.5em;
  border-radius: 20px;
  margin-top: 13em;
  margin-bottom: 9em;
}


.im9{
  width: 250px;
height:180px ;
  margin-left: 5em;
  margin-top: -7em;
  border-radius: 30px;
}

.im10{
  width: 250px;
  height:180px ;
    margin-left: -7em;
  margin-top: 8em;
    border-radius: 30px;

}

.pr18{
  margin-left:-1em ;
  font-weight: 700;
font-size:95%;
margin-top: -7em;

}
.pr19{
  margin-left:-1em ;
  margin-right: 1em;
  font-weight: 350;
font-size:70%;
}
         
.discover6{
  margin-left: -1.5em;
  margin-top: -18.5em;
    padding: 0.8em 1.5em ;
    font-size: 70%;
}


.RS6{  
  margin-top: -4em;
  padding-bottom: 2rem;
  padding-inline-start: 4%;
  display: flex;
  margin-left: -0.1em;
  gap: 1.5rem;
}

.RS6 img{
    width: 170px;
    height: 180px;
  border-radius: 10%;
  transition: 1s ;
}

.RS6 img:hover{
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.37);
  border-radius: 20px 70px;
  transform:translateY(-20px);
  filter:contrast(1.1);
}

   .discover5{
     margin-left: -2.5em;
    padding: 0.8em 1.5em ;
    font-size: 90%;
    }


       .pr16{
      font-size: x-large;
      margin-top: 2em;
      margin-left: 1.3em;
       }

       .pr17{
        font-family:'amoera sans-serif ' ;
        margin-top: -1em;
       font-size:105%;
       padding: 0px 30px;
       }


       .container9{
      border-radius: 0px 150px;
       }
       
.RS3{  
  margin-top: -4em;
  padding-bottom: 2rem;
  padding-inline-start: 4%;
  display: flex;
  margin-left: -0.1em;
  gap: 1.5rem;
}

.RS3 img{
    width: 170px;
    height: 180px;
  border-radius: 10%;
  transition: 1s ;
}

.RS3 img:hover{
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.37);
  border-radius: 20px 70px;
  transform:translateY(-20px);
  filter:contrast(1.1);
}

   .discover5{
     margin-left: -2.5em;
    padding: 0.8em 1.5em ;
    font-size: 90%;
    }


       .pr20{
      font-size: x-large;
      margin-top: 2em;
      margin-left: 3.5em;
       }

       .pr21{
        margin-top: -1em;
       font-size:90%;
       padding: 0px 30px;
       }

       

    .footer {
        width: 393px;
        margin-left: 0;
        padding: 20px 0;
        border-radius: 0px;
    }

    .footer-content {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
        margin: 0;
    }

    .footer-section {
        margin: 15px 0;
        text-align: center;
    }

    .footer-section h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .footer-section ul li {
        margin-bottom: 8px;
    }

    .footer-section ul li a {
        font-size: 12px;
    }

    .social-icons {
        justify-content: center;
        margin-top: 10px;
    }

    .social-icons a {
        font-size: 18px;
    }

    .footer-bottom {
        margin: 20px auto 0;
        padding: 15px;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .footer-links {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .footer-links a {
        font-size: 11px;
    }




        }