@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
*{
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  
}
.darkmodeswitch{
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
}
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
    scale: 0.5;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    --background: #28096b;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    transition: .5s;
    border-radius: 30px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 8px -4px 0px 0px #fff000;
    background: var(--background);
    transition: .5s;
  }
  
  input:checked + .slider {
    background-color: #522ba7;
  }
  
  input:checked + .slider:before {
    transform: translateX(100%);
    box-shadow: inset 15px -4px 0px 15px #fff000;
  }


.darkmodeswitch .nav{
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 15px;
    margin: auto;
}
.darkmodeswitch .nav a{
    text-decoration: none;
    font-weight: 300;
    color: black;

}
.darkmodeswitch .nav a:hover{
   text-decoration: underline;
   text-underline-offset: 3px;

}
.darkmodeswitch .nav a:active{
  
  scale: 0.8;
  transition: 0.5s;

}
.header{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr  ;
    font-weight: 300;
    margin-bottom: 30px;
overflow: hidden;


  
}
.nav{
  
  background: linear-gradient(to right,rgba(229, 72, 125,0.5),rgb(111, 89, 216));
  padding: 5px 25px;
overflow: hidden;
z-index: 99999;

}
  /* Section one */

.one{ 
    min-height: 100vh;
font-size: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;


}
.one-img{
  z-index: -1;
}
.one .one-txt{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    text-align :left;
    gap: 10px;
}
.one-txt h1,h5, .btn-grp{
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 20px;
  font-weight: 300;
}


.btn {
  font-size: 17px;
  background: transparent;
  padding: 1em 1.5em;
  color: #131313;
  text-transform: uppercase;
  position: relative;
  transition: .5s ease;
  border-radius: 0 15px 0 0;
}

.btn::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: #ffc506;
  transition: .5s ease;
  border-radius: 0 15px 0 0;
}

.btn:hover {
  color: #1e1e2b;
  transition-delay: .5s;
}

.btn:hover::before {
  width: 100%;
}

.btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background-color: #ffc506;
  transition: .4s ease;
  z-index: -1;
  border-radius: 0 15px 0 0;

}

.btn:hover::after {
  height: 100%;
  transition-delay: 0.4s;
  color: aliceblue;
}

/* Button end */
.one-img{
    display: flex;
    justify-content: center;
    align-items: center;

}

.two{
  min-height: 40vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #ffc506;
overflow: hidden;


  
}
.two .trust-txt{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.two .trust-box{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;

}

.trust-box > div{
  
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center ;
  border-radius: 15px;
  box-shadow: 9px 13px 7px 0px rgba(0,0,0,0.1);
  gap: 20px;
}
.trust-box  div >p{
  font-size: 12px;
}

.three{
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 20px;
overflow: hidden;
padding-bottom: 30px;


}
.shopbtn-grp{
  display: flex;
  gap: 30px;
}

/* button start */

.shopbtn {
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #212121;
  z-index: -1;
  background: #e8e8e8;
  position: relative;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
 }
 
 .shopbtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #ffc506;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
 }
 
 .shopbtn:hover {
  color: black;
 }
 
 .shopbtn:hover::before {
  width: 100%;
 }

/* button end */
.card-grp{
  
  width: 100%;
  min-height: 50vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
 column-gap: 30px;
 align-items: center;

}
.card{
 
  height: 70%;
  width: 50%;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap:10px;
  
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);

  
}
.card img{
  border-radius: 10px 10px 0 0;
}



@media (max-width:900px) {
  .one{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    
  }  
  .two{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .card-grp{
    grid-template-columns: 1fr;
    grid-template-rows: (3,1fr);
    gap:30px;
    
  }
  .card{
    width: 300px;
    height: auto;
    padding-bottom: 15px  ;
    
  }
  .shopbtn-grp{
    flex-direction: column;
  }
}

@media (max-width:460px) {
  .one-txt{
    width: 80%;
  }
  
}