#img1,
 #img2 {
     width: inherit;
     height: inherit;
     background-size: cover;
 }
 
 .swiper {
     width: 32vw;
     aspect-ratio: 1 / 1;
     border-radius: 4px;
     overflow: hidden;
 }
 
 video {
     width: 100%;
     height: 100%;
 }
 
 .swiper-slide {
     background-color: black;
 }
 
 body {
     font-family: system-ui;
     margin: 0;
     color: black;
     background-color: #fff;
 }
   body{
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
      scrollbar-width: none;  /* Firefox */
   }
   body::-webkit-scrollbar { 
      display: none;  /* Safari and Chrome */
   }


 body.dark {
     background-color: rgb(48, 48, 48);
     color: #fff;
 }
 .full_wrapper{
    padding: 0 5vw ;
    display: flex;
 }
 .course_con {
     display: flex;
     flex-direction: column;
     padding: 1.3vw 0;
     width: fit-content;
     height: fit-content;
     gap: 1.3vw;
     position: sticky;
     top: 5.6vw;
 }
 
 .course_payment {
     display: flex;
     width: 100%;
     justify-content: space-between;
     overflow: hidden;
     border: 1px solid rgba(128, 128, 128, 0.463);
     box-sizing: border-box;
     border-radius: 4px;
 }
 
 .course_price {
      padding: .5vw .85vw;
      display: flex;
      flex-direction: column;
 }
 
 .course_price div {
     display: flex;
     gap: 1vw;
 }
 
 .course_price p {
     font-size: 1.1vw;
     margin: 0;
 }
 
 .course_price h1 {
     margin: 0;
     font-size: 1.5vw;
 }
 
 .course_price h1:last-child {
     color: grey;
     font-weight: 400;
     text-decoration: line-through;
 }
 
 .payment_button {
     width: 50%;
     font-size: 1.3vw;
     border: none;
     background: var(--primary-color);
     background-size: 1.3vw;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 body.dark .payment_button{
   background-color: #fff;
   color: var(--primary-color);
   font-weight: 600;
 }
 .payment_button img{
   width: 1.5vw;
   padding-right: .65vw;
   transform: translateY(10%);
 }

 body.dark .payment_button img{
   filter: drop-shadow( 2px 2px 2px #00000020);
 }
 
 .payment_button::after {
     content: "";
     background-color: rgba(0, 0, 0, 0.199);
     position: absolute;
     height: 0;
     width: 0;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
    transition: 0.3s;
     
 }
 

 .payment_button:hover:after{
    height: 20vw;
    width: 20vw;
    
 }

 .full_details{
    display: flex;
    flex-direction: column;
    padding: 1.3vw 0 1.3vw 1.3vw;
    gap: 1.3vw;
 }

   h1,p,h2{margin: 0;}


 .course_name h1{
    font-size: 1.7vw;
   
    background: linear-gradient(to right, rgb(20, 20, 78), rgb(102, 25, 25));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
 }
 body.dark .course_name h1{
   background: linear-gradient(to right, rgb(255, 255, 255),rgb(255, 255, 255));
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
   
 }
 
 body.dark p,body.dark li{
   font-weight: 400;
 }
 body.dark b{
   color: #fff;
   
 }
 .description_con{
    background: var(--primary-color-2);
    color: #fff;
    padding: 1.3vw;
    border-radius: 4px;
    
 }
 .description_con h1{
   color: var(--primary-color);
   background-color: #fff;
   width: fit-content;
   border-radius: 0 4px 4px 0;
   padding: .5vw 1.3vw .6vw 1.3vw;
   font-size: 1.3vw;
   margin: 0 0 1vw -1.3vw;
   
  
 }
 .description_con p{
    font-size: 1.1vw;
 }
 .description_wrap{
    display: flex;
    gap: 1.3vw;
 }
 .What_get_con{
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between ;
 }
 .What_get_con h2{
    font-size: 1.3vw;
    padding: 0 1.3vw 1.3vw 1.3vw;
 }

 .What_get_con p{
   font-weight: 400;
   margin: 0;
   padding-top: 1vw;
   font-size: 1.1vw;
 }
 .What_get_con ul{
    margin: 0;
    padding: 1.3vw 1.3vw 1.3vw 2.8vw;
    background-color: rgba(186, 186, 186, 0.2);;
    list-style: "📜 ";
    border-radius: 4px;
    font-size: 1.1vw;
    display: flex;
    flex-direction: column;
    gap: .65vw;
 }
 body.dark .What_get_con ul{
   background-color: rgba(0, 0, 0,0.5);
 }

 .What_get_con b{
   
   color:var(--primary-color) ;
 }
 body.dark .What_get_con b{
  
   color: var(--primary-color-5);
 }

 .detail_x_wrap{
    font-size: 1.1vw;
 }
 .duration_con,.What_you_get{

    flex: 1;
    padding: 1.3vw;
    background-color: rgba(186, 186, 186, 0.2);
    background-blend-mode: darken;
    border-radius: 4px;
 }
 .duration_con h1{
   background: linear-gradient(to right, rgb(20, 20, 78), rgb(102, 25, 25));
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
    font-size: 1.3vw;
    padding-bottom: .5vw;
 }
 .duration_con p{
    font-size: 1.1vw;
 }
 .feature_wrap{
    display: flex;
    gap: 1.3vw;
 }
 .What_you_get h1{
    font-size: 1.3vw;
    padding-bottom: .5vw;
    background: linear-gradient(to right, rgb(20, 20, 78), rgb(102, 25, 25));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
 }


 body.dark .duration_con h1{
   background: linear-gradient(to right, rgb(225, 30, 176), rgb(254, 87, 77));
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }
 body.dark .What_you_get h1{
   background: linear-gradient(to right, rgb(254, 87, 77), rgb(255, 166, 47));
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }

 .What_you_get ul{
    margin: 0;
    font-size: 1.1vw;
    padding: 0 0 0 2.6vw;
 }
 .What_get_con_li{
    padding: 1.3vw;
    background-image: linear-gradient(45deg,rgb(0, 65, 220),rgb(125, 52, 199),rgb(231, 29, 175),rgb(254, 69, 97),rgb(255, 126, 33),rgb(255, 171, 49));
    border-radius: 4px;
    color: #fff;
 }
 .What_get_con_li ul{
    margin: 0;
    padding: 0;
    font-size: 1.1vw;
 }
 .What_get_con_li h1{
   text-align: center;
   margin: auto;
   padding: .5vw 1.3vw .67vw 1.3vw;
   border-radius: 4px;
   background-color: #fff;
   font-size: 1.3vw;
   width: fit-content;
   color: black;
 }
 .What_get_con_li ul li{
    background-image: url('img/tik2.png'); /* Replace with the path to your image */
    background-size: 20px; /* Set the width of the image */
    background-repeat: no-repeat;
    background-position: left center;
    list-style: none;
    padding: .75vw 0 .75vw 30px ;
    color: #fff;
    

}
.What_get_con_li ul li:not(:last-child){
    border-bottom:1px solid rgba(255, 255, 255, 0.2) ;
}
.What_get_con_li_2 h1{
    font-size: 1.3vw;
}
.What_get_con_li_2 ul{
    font-size: 1.1vw;
    margin: 0;
    padding: .6vw 0 0 2.6vw;
}






#miniWindow {
   box-shadow: 0 1px 3px #00000083;
   width: fit-content;
   height: fit-content;
   position: fixed;
   top: 50%;
   left: 0;
   border-radius: 4px;
   transform: translate(-50%, -50%);
   background-color: inherit;
   display: block;
   z-index: -10;
   opacity: 0%;
   overflow: hidden;
   transition:  0.3s;
}
#miniWindow.open {
   left: 50%;
   z-index: 99999;
   opacity: 100%;
}

#close_myIframe{
  
   margin: 1vw .6vw .6vw .3vw;
   
   font-size: 1.1vw;
   border:none;
   background-image: url("img/back.png");
   background-repeat: no-repeat;
   background-size: 1vw;
   background-position: 20%;
   background-color: transparent;
   color: transparent;
   
  
}
#close_myIframe::after{
   content: "back";
   color: black;
   position: relative;
   font-size: 1.1vw;
   padding: .5vw 0;
   
}
body.dark #close_myIframe{
   filter: invert();
}
#close_myIframe:hover{
   scale: 1.05;
}

#shareButton{
   -webkit-tap-highlight-color: transparent;
   border: none;
   background-color: #fff;
   position: absolute;
   z-index: 50;
   padding: .65vw;
   border-radius: 50%;
   width: 1.5vw;
   height: 1.5vw;
   box-sizing: content-box;
   right: 1vw;
   top: 2.3vw;
   
}

body.dark #shareButton{
   background-color: rgb(48, 48, 48);
}
#shareButton img{
   width: inherit;
   height: inherit;
}
body.dark #shareButton img{
   filter: invert();
}





@media (max-width:480px){
   .course_con{
      padding: 0 0 18px 0;
      border-radius: 0;
      width: 100%;
      position: relative;
      top: auto;
   }
   .full_wrapper{
      padding: 0;
      
      flex-direction: column;
   }
   .swiper {
      width: inherit;
      border-radius: 0;
   }
   .course_payment{
      width: 100vw;
      position: sticky;
      margin: 0 -20px;
      bottom: 0;
      z-index: 99;
      border-radius: 0;
      background-color: rgb(255, 255, 255);
      border: none;
      border-top: 1px solid gray;
   }
   body.dark .course_payment{
      background-color: rgb(48, 48, 48);
   }
   .course_price{
      padding: 15px 20px;
      
   }
   .course_price p{
      font-size: 3.5vw;
      line-height: 1.2;
   }
   .course_price h1{
      font-size: 4.5vw;
   }
   .payment_button{
      font-size: 4.5vw;
   }
   .payment_button:hover::after {
      width: 60vw;
      height: 60vw;
   }
   .payment_button img{
      width: 4.5vw;
      padding-right: 5px;
   }
   
   .full_details{
      padding: 0 20px;
      gap: 20px;
      border-bottom: 1px solid gray;
   }
   .course_name h1{
      font-size:5.5vw;
      padding-left: 0;
   }
   body.dark .course_name h1{
     
      background: none;
      -webkit-text-fill-color: #fff;
      -webkit-background-clip: text;
   }
   .description_con {
      padding: 15px;
      
   }
   .description_con h1{
      font-size: 4.5vw;
      margin: 0 0 10px -15px;
      padding:8px 15px;
      
   }
   .description_con p{
      font-size: 3.5vw;
   }

   .description_wrap{
      flex-direction: column;
      gap: 20px;
   }

   .What_get_con h2{
      font-size: 4.5vw;
      padding: 0 15px 10px 15px;
   }

   .What_get_con p{
      margin: 0;
      padding-top: 10px;
      padding-bottom: 5px;
      font-size: 3.5vw;
    }
   .What_get_con ul{
      padding: 15px 15px 15px 33px;
      
      font-size: 3.5vw;
      gap: 10px;
   }



   .detail_x_wrap{
      padding: 0;
      font-size: 3.5vw;
   }
   .feature_wrap{
      flex-direction: column;
      gap: 20px;
   }
   .duration_con{
      padding: 15px;
      width: auto;
   }
   .duration_con h1{
      font-size: 4.5vw;
      padding-bottom: 10px;
      width: fit-content;
   }
   .duration_con p{
      font-size: 3.5vw;
   }

   .What_you_get{
      padding: 15px;
      width: auto;
   }
   .What_you_get h1{
      font-size: 4.5vw;
      padding-bottom: 10px;
      width: fit-content;
   }
   .What_you_get ul{
      font-size: 3.5vw;
      padding-left: 15px;
   }


   .What_get_con_li{
      padding: 15px 15px 7px 15px;
   }
   .What_get_con_li h1{
      font-size: 4.5vw;
      padding: 8px 15px ;
      margin-bottom: 7px;
   }
   .What_get_con_li ul{
      font-size: 3.5vw;
   }
   .What_get_con_li ul li{
      padding: 8px 0 8px 30px;
   }
   .What_get_con_li_2 h1{
      font-size: 4.5vw;
      padding-bottom: 10px;
   }
   .What_get_con_li_2 ul{
      font-size: 3.5vw;
      padding-left: 15px;
   }

   p,ul,.detail_x_wrap{
      line-height: 1.4;
   }

   #shareButton{
      top:15px;
      right: 15px;
      width: 25px;
      height: 25px;
      padding: 10px;
   }



   #miniWindow {
      width:100vw;
      position: fixed;
      top: 0;
      left: -100vw;
      transform: translate(0%, 0%);
      background-color: #ffffff;
      display: block;
      z-index: -10;
      opacity: 0%;
      overflow: hidden;
      transition: 0.3s;
      border-radius: 0;
   }
   #miniWindow.open {
      left: 0;
      z-index: 99999;
      opacity: 100%;
   }

   #close_myIframe{
      position: absolute;
      right: 20px;
      top:20px;
      background-size: 3.5vw;
      padding: 10px 20px;
      font-size: 3vw;
      background-color: rgba(121, 121, 121, 0.3);
      border-radius: 4px;
   }
   #close_myIframe::after{
      font-size: 3.5vw;
      
   }
   body.preventScroll{
      overflow: hidden;
   }

}