.slider{
  height:100%;
  min-height:100vh;
  width:100%;
  background: url('../images/background/banner_bg1.jpg');
  background-size: cover;
  background-position: center;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom:solid 2px rgba(255,255,255,0.1);
  overflow: hidden;
}

.swiper-wrapper{
  height:100%;
  margin-top: 5vmin;
  width:100%;
}

.swiper-slide{
  height:100%;
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
}

.banner_text{
  font-style: italic;
  color:white;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
  margin-bottom: 5%;
  padding-left: 10%;
}

.banner_text>*{
  margin:0;
  white-space: nowrap;
  line-height: 100%;
  filter:drop-shadow(2px 2px 0 black);
}

.banner_text h1{
  font-size: clamp(30px,8vmin,80px);
  margin:2vmin 0 5vmin 0;
}
.banner_text h2{
  font-size: clamp(15px,5vmin,40px);
}

.banner_text h3{
  font-size: clamp(3vmin,3vmin,24px);
  line-height: normal;
}

.banner_join{
  padding:3% 5%;
  background: linear-gradient(#1883b4 55%, #18a8e2 56% ,#5bcef8);
  font-size: clamp(20px,4vmin,30px);
  margin-top: 5vmin;
  color:#5b3118;
  font-weight: bold;
  border-radius: 5px;
}

.banner_img{
  width:40%;
  margin-left: -10%;
}

.swiper-pagination{
  bottom:5% !important;
}

.swiper-pagination-bullet{
  width:12px !important;
  height:12px !important;
  margin:0 10px;
}

.swiper-pagination-bullet-active{
  background: var(--color3_2) !important;
}

/*------------------------Commison Plan-----------------------------------------------*/

.commission{
  background: var(--color1_3);
  background: url('../images/background/commission_bg.jpg');
  background-size: cover;
  background-position: center;
  color:white;
  padding-bottom: 50px;
}

.commission_cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 30px;
  margin-bottom:3vmin;
  width:100%;
}

.com_card{
  background: rgb(200,200,200);
  padding:2%;
  box-shadow: 2px 2px 0 black;
  border-radius: 10px;
  color:var(--color1_2);
}

.com_card h3{
  text-align: center;
  color:var(--color1_3);
  margin:1vmin 0 2vmin 0;
}

.commission li{
  font-size:clamp(12px, 3vmin, 15px);
  margin-bottom: 1vmin;
}

.commision ul, .commision ol{
    padding-left:5%;
}

.com_card ul, .com_card ol, .com_eg ul, .com_eg ol{
  padding:0 10%;
}

.commission p{
  margin:0;
}

.com_examples{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 30px;
  margin:3vmin 0;
  width:100%;
}

.com_eg{
  background: rgba(25, 25, 25,0.8);
  padding:2%;
  box-shadow: 2px 2px 0 black;
  border-radius: 10px;
  color:white;
}

.com_eg h3{
  color:var(--color3_2);
  margin:2vmin 0;
  text-align: center;
}

/*-------------------Reason to Join---------------------------------------------*/

.reason{
  background: var(--color1_3);
  background: url('../images/background/reason_bg.jpg');
  background-size: cover;
  background-position: center;
  color:white;
  padding-bottom: 0;
}

.reason_row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  grid-gap: 30px;
}

.reason_col{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding:2vmin;
}

.reason_col img{
  width:50%;
  max-width: 120px;
}

.reason_col p{
  margin:0;
  text-align: center;
}

.reason_row2{
  margin-top: 10vmin;
  display:flex;
  justify-content: center;
}

.reason_text{
  margin-bottom: 5vmin;
}

.reason_text h1{
  font-size:clamp(15px, 4vmin, 30px);
  color:var(--color3_2);
}

.reason_list{
  display:flex;
  flex-direction: column;
  padding-left: 5%;
}

.reason_list_item{
  display:flex;
  align-items: flex-end;
  margin-bottom: 2vmin;
}

.reason_list_item img{
  width:5vmin;
}

.reason_list_item b{
  color:var(--color2);
}

.reason_model{
  height:50vmin;
}

/*-----------------------How it works---------------------------------------------*/

.how{
  background-size: cover;
  background-position: center;
  color:white;
  min-height: inherit;
  padding-bottom: 80px;
}


.how_content{
  display:flex;
  justify-content: center;
  position:relative;
}

.how_step{
  padding:2% 3%;
  padding-left: 5%;
  background: var(--color1_3);
  clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
  width:33%;
  position:relative;
  z-index: 2;
  margin:0 -1%;
  display:flex;
  align-items: flex-start;
}

.how_step p{
  flex:1;
  font-size: 13px;
}

.how_step_icon{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-right: 8%;
  width:40%;
}

.how_step_icon img{
  width:80%;
  margin-bottom: 1vmin;
}

.how_step_icon h1{
  font-size: clamp(15px,3vmin,20px);
  margin:0;
  white-space: nowrap;
  color:var(--color3_2);
}

.how_bar{
  background-color: var(--color3_2);
  background-image: linear-gradient(to right, var(--color2) , var(--color3_2), var(--color2), var(--color3_2), var(--color2));
  background-size: 400% 100%;
  animation:gradient_anim linear 15s infinite;
  position:absolute;
  z-index: 1;
  left:20%;
  top:0;
  height:100%;
  width:60%;
  border:solid 3px var(--color1_3);
}

/*-------------------Our Products-------------------------*/

.products{
  background: var(--color0);
  background: url('../images/background/products_bg.jpg');
  background-size: cover;
  background-position: center;
  color:white;
}

.product_subtitle{
  margin:0;
  width:80%;
  text-align: center;
}
.products_content{
  display:grid;
  grid-template-columns: repeat(auto-fit, 320px);
  justify-content: center;
  padding:5vmin 0;
  grid-gap:2vmin;
}

.product{
  display:flex;
  flex-direction: column;
  text-align: center;
  background: var(--color1_3);
  padding:10px;
  overflow:hidden;
  border-radius: 5px;
  cursor:pointer;
  position:relative;
}

.product img{
  width:100%;
  border-radius: 3px;
}

.product span{
  padding:1vmin 0;
  color:var(--color3);
  font-size: clamp(15px,3vmin,20px);
}

.product_hover{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.2);
  opacity: 0;
  transition:0.2s;
}

.product_hover img{
  width:20%;
  transition: 0.2s;
}

.product_hover img:hover{
  transform:scale(1.3);
}

.product:hover .product_hover{
  opacity: 1;
}



/*-------------------FAQ-------------------------*/


.faq{
  background: var(--color0);
  background: url('../images/background/faq_bg.jpg');
  background-size: cover;
  background-position: center;
  color:white;
}

.faq_content{
  display:flex;
  flex-direction: column;
}

.faq_content ol{
  padding-left:5%;
}

.faq_content li{
  margin-top:1vmin;
  padding-left: 1vmin;
}

.faq_content h1{
  font-size: clamp(15px,4vmin,30px);
  margin:0;
  white-space: nowrap;
  color:var(--color3_2);
  margin-bottom: 2vmin;
  border-bottom: 2px solid var(--color3_2);
}

.faq_content b{
  color:var(--color3_2);
}

/*-------------------Register-------------------------*/

.register{
  color:white;
  padding:5vmin 0;
}

.register_content{
  display:flex;
  flex-direction: column;
  max-width: 1000px;
  width:100%;
}

.register_content h3{
  margin:0;
}

.register_form{
  display:flex;
  flex-direction: column;
}

.input_grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  justify-content: center;
  column-gap: 3vmin;
  width:100%;
}

/*-------------------Login Popout-------------------------*/

.login{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 999;
  display:none;
  background-color: rgba(0,0,0,0.1);
}


.login_window{
  width:90%;
  background: var(--color1);
  margin:0 auto;
  max-width: 500px;
  position:relative;
  top:50%;
  left:0;
  transform:translateY(-50%);
  border-radius: 5px;
  overflow: auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  color:white;
  z-index: 2;
}

.login h1{
  color:var(--color3_2);
  margin-top:3vmin;
}

.login_close{
  position:absolute;
  right:3%;
  top:3%;
  color:var(--color3_2);
  cursor:pointer;
}

.login_close:hover{
  color:white;
}

.login_form{
  width:80%;
  display:flex;
  flex-direction: column;
  margin-bottom: 5vmin;
}

.login_hightlight{
  color:var(--color3_2);
  margin-left: 1vmin;
  text-decoration: underline;
}

.forgot_link{
  padding:2vmin 0;
  width:100%;
  background: var(--color1_4);
  text-align: center;
  margin-bottom: 8%;
}


/*-------------------Product detail Popout-------------------------*/

.product_detail{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 900;
  background-color: rgba(0,0,0,0.5);
  display:none;
  overflow: auto;
}

.product_window{
  position:relative;
  margin:auto;
  width:90%;
  max-width: 600px;
  height:auto;
  top:10%;
  left:0;
  margin-bottom: 5%;
  display:flex;
  flex-direction: column;
  align-items: center;
  background: rgb(220,220,220);
  padding:1vmin;
  border-radius: 5px;
}

.product_detail_img{
  width:100%;
}

.product_detail_name{
  position:absolute;
  left:1vmin;
  bottom:2vmin;
}

.product_close{
  align-self: flex-end;
  text-align: center;
  background: linear-gradient(rgb(200,200,200), grey);
  padding:1% 5%;
  margin-top: 2%;
  border-radius: 3px;
  border:solid 1px grey;
  cursor:pointer;
  font-weight: bold;
}