/*Default Styling*/
* { margin: 0; padding: 0; box-sizing: border-box;}
a{ text-decoration: none; }
#main-wrapper-100vh { width: 100%; height: 100vh; }

#blankDiv{ margin-top: 130px; }

@font-face {
	font-family: CenturyGothicPaneuropeanBold;
	src: url("../font/CenturyGothicPaneuropeanBold.ttf");
}

@font-face {
	font-family: CenturyGothicPaneuropeanSemiBold;
	src: url("../font/CenturyGothicPaneuropeanSemiBold.ttf");
}

@font-face {
	font-family: CenturyGothicPaneuropeanLight;
	src: url("../font/CenturyGothicPaneuropeanLight.ttf");
}
@font-face {
	font-family: CenturyGothicPaneuropeanSemiBoldItalic;
	src: url("../font/CenturyGothicPaneuropeanSemiBoldItalic.ttf");
}

@font-face {
	font-family: CenturyGothicPaneuropeanRegular;
	src: url("../font/CenturyGothicPaneuropeanRegular.ttf");
}

@font-face {
	font-family: CenturyGothicPaneuropeanThin;
	src: url("../font/CenturyGothicPaneuropeanThin.ttf");
}

body{
	background-color: #0546A5;
	font-family: CenturyGothicPaneuropeanSemiBold;
}

/************************  NAVBAR overlay START HERE ************************/
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;  
  background-image: linear-gradient(#013D94, #011F4A);
  /*background-color: rgba(0, 0, 255, 0.3);*/
  /*background: rgba(1, 63, 148, 0.8); 
  background: rgba(1, 31, 74, 0.8);  #011F4A with 70% opacity 
  background: linear-gradient(to right, rgba(1, 63, 148, 0.8), rgba(1, 31, 74, 0.8));*/
  overflow-y: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 16%;
  width: 100%;
  text-align: center;
  margin-top: 0px;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.overlay-content::-webkit-scrollbar {
  width: 0; /* Hide scrollbar in WebKit browsers */
  height: 0;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  /*color: #818181;*/
  color: #fff;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 16px;
  right: 26px;
  font-size: 60px;
}
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

/************************  NAVBAR START HERE ************************/
header{ width: 100%; height: 100%; }

.navbar {
	position: fixed;
    transition: all 0.3s ease-in-out;    
    background-image: linear-gradient(#192C78, #2B4D8F, #569AC4);
    width: 100%;
    min-height: 16vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
    border-bottom: 2px solid black;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 20px 20px;
    z-index: 8;
}
.navbar.scrolled{	
    min-height: 14vh;    
    background-image: linear-gradient(#192C78, #2B4D8F, #569AC4);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
}
.navbar img {    
    width: 160px;
    transition: width 0.3s ease-in-out;    
}
.navbar #navbar-rightside{
	max-width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;	
}
.navbar #navbar-rightside ul {
    display: flex;    
    margin-right: 2rem;
    transition: margin-top 0.3s ease-in-out;
    margin-bottom: 0px;    
}
.navbar #navbar-rightside ul li {
    list-style: none;
}
.navbar #navbar-rightside ul li a {
    color: #ffffff;
    margin-left: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}
.navbar #navbar-rightside ul li a:hover {
    color: #E71011;
}

.navbar #navbar-rightside #playstore {
    width: 165px;
    margin-right: 16px;    
}
.navbar #navbar-rightside #profile-detail{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;		
}
.navbar #navbar-rightside #profile-detail *{
	margin: 0; padding: 0;
} 
.navbar #navbar-rightside #profile-detail img{
	width: 55px;
	height: 55px;
	border-radius: 50%;	
} 
.navbar #navbar-rightside #profile-detail a{
	font-size: 12px;
	color: #fff;		
}
.navbar #navbar-rightside #signup-btn {    
    background-image: linear-gradient(#013D94, #011F4A);
    color: #ffffff;
    padding: 0px 30px;
    border: 2px solid #B8CBFE;    
    border-radius: 20px;
    outline: none;
    font-size: 16px;
    letter-spacing: 1px;    
    height: 32px;
    line-height: 32px;    
}
#toogleBar{
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  margin-left: 30px;
  display: none;
}
@media only screen and (max-width: 1227px){
    .navbar{ padding: 0px 37px; }	
	.navbar #navbar-rightside ul { margin-right: 30px; }
	.navbar #navbar-rightside ul li a {    
       margin-left: 25px;    
    }
}
@media only screen and (max-width: 1162px){	
	.navbar #navbar-rightside #playstore{
		display: none;
	}
}
@media only screen and (max-width: 992px) {
	.navbar{
		padding: 0px 30px;
	}
	.navbar img{		
		width: 132px;
	}
	.navbar #navbar-rightside ul{
		margin-right: 16px;
	}
    .navbar #navbar-rightside ul li a {
        margin-left: 14px;
    }
}
@media only screen and (max-width: 860px) {	
	/*.navbar img{	
	}
    .navbar #navbar-rightside #playstore{
    	display: none;
    }*/
    .navbar #navbar-rightside ul{
    	display: none;
    }
    .navbar #navbar-rightside #toogleBar{
    	display: block;
    }    
}
@media only screen and (max-width: 768px) {
	.navbar{
		padding: 0px 26px;
	}
	.navbar img{		
		width: 130px;
	}
	.navbar #navbar-rightside #signup-btn{
		display: none;
	}
	#toogleBar{
    	font-size: 30px;
    	margin-left: 20px;
    }
    .navbar #navbar-rightside #profile-detail img{
    	width: 50px;
    	height: 50px;
    }
}

/************************  main-content-wrappe ************************/
#main-content-wrapper{
	padding-top: 16vh;
	width: 100%;
	height: auto;
	min-height: calc(100vh - 6vh);
}

/************************  Banner code start here ************************/
#banner{	
	width: 100%;
	height: 100%;
	z-index: 0;
}
#banner .owl-carousel img{
	width: 100%;
	height: auto;
}
/*@media only screen and (max-width: 992px) {
	#banner .owl-carousel img{
		height: 450px;
	}	
}
@media only screen and (max-width: 768px) {
	#banner .owl-carousel img{
		height: 400px;
	}	
}
@media only screen and (max-width: 576px) {
	#banner .owl-carousel img{
		height: 300px;
	}	
}*/

/************************  Video Section code start here ************************/
#video-secion{
	width: 100%;
	height: auto;
	padding: 30px 50px;		
	min-height: calc(100vh - 22vh);	
	/*background-color: red;*/	
}
#video-secion #video-secion-top-header{
	text-align: center;
	color: #ffffff;	
}
#video-secion #video-secion-top-header h2{
	margin-bottom: 20px;
	letter-spacing: 2px;
}
#video-secion #video-secion-top-header .horizental-line{
	width: 	60%;
	height: 2px;
	background-color: #fff;
	margin: 0px auto;
}
#video-secion #video-list{    	
	display: grid;	
	grid-template-columns: repeat(4, 24%);		
	justify-content: center;
	align-items: center;
	padding: 40px 10px 40px 10px;		
	gap: 1.5rem 1rem;
	/*background-color: yellowgreen;	*/
}
#video-secion #video-list .video-list-container{    
	text-align: center;
	color: #ffffff;
	position: relative;
	cursor: pointer;
}
#video-secion #video-list .video-list-container .playbtn{
	width: 22%;
	z-index: 1;
	position: absolute;
	top: 40%;
    left: 50%;
    transform: translate(-40%, -50%);
    cursor: pointer;
}

#video-secion #video-list .video-list-container img:nth-of-type(2){
    width: 90%;
    height: 45vh !important;  
    border-radius: 10px;
    z-index: 0;    	
	height: auto;
	object-fit: cover;        	
}

#video-secion #video-list .video-list-container h5{
	margin-top: 20px;
	margin-bottom: 0px;	
}

#video-secion #video-list .video-list-container p{
	margin-top: 5px;
	font-family: CenturyGothicPaneuropeanRegular;
	font-size: 12px;		
	letter-spacing: 1px;
	color: #B8CBFE;
	width: 90%;	
	min-height: 3rem;
	margin: 0px auto;		
}
/*@media only screen and (max-width: 1200px){
    #video-secion #video-list .video-list-container img:nth-of-type(2){
        height: 42vh !important;    
    }
}*/
@media only screen and (max-width: 1035px){
    #video-secion #video-list .video-list-container p{
    	min-height: 4rem;
    }
}
@media only screen and (max-width: 992px) {
    #video-secion #video-list{
    	/*grid-template-columns: auto auto auto;*/	
    	grid-template-columns: repeat(3, 33%);
    	/*gap: 1.5rem 1rem;*/
    } 
    #video-secion #video-list .video-list-container img:nth-of-type(2){
        height: 42vh !important;    
    }
}
@media only screen and (max-width: 768px) {
	#video-secion #video-secion-top-header .horizental-line{
	     width: 100%;
    }
    #video-secion #video-list{
    	grid-template-columns: auto auto;	
    	/*gap: 1rem 1rem;*/
    	/*gap: 3% 0%;*/
    } 
    #video-secion #video-list .video-list-container img:nth-of-type(2){
        min-height: 40vh !important;    
    }
}
@media only screen and (max-width: 576px) {
	#video-secion{
	    padding: 40px 20px 0px 20px;	
    }
    #video-secion #video-secion-top-header .horizental-line{
	     width: 90%;
    }
    #video-secion #video-list{
    	grid-template-columns: auto;	
    	gap: 1.5rem 0px;    	
    }     
    #video-secion #video-list .video-list-container p{
    	min-height: auto;
    }
}

/************************  Registration code start here ************************/
#register {	
	height: 740px;
	margin-top: 150px;	
}
#register img.register-now {
	margin-left: 40%;
	align-items: center;
}
#register button.register-signup {
	margin-left: 17%;
	height: 90%;
	width: 200px;
	align-items: center;
}
#register button.register-signup-via {	
	height: 100%;
	width: 200px;
	align-items: center;
}
#registerspan {
	color: white; font-size: 20px;
	margin-left: 24px;
}
#register-form {
	border-top: 3px solid rgb(255, 255, 255);
	width: 40%;
	margin-top: 15px;
	margin-left: 29%;
}
#register-form form {
	/* background-color: yellow; */
	margin-top: 25px;
	/* max-width: 200px; */
}
.custom-input {
	margin-left: 16%;
	background-color: #002E6D;	
	border: 2px solid #ffffff;	
	border-radius: 15px;	
	color: #FFFFFF;	
	padding: 10px 20px;	
	font-size: 14px;	
	width: 100%;	
	max-width: 500px;
	height: 59px;	
}
.custom-input::placeholder {
	color: #8FA5C5;	
}
#sign-in-now {
	font-family: CenturyGothicPaneuropeanSemiBold;
	color: rgb(87, 191, 87);
} 

/************************  Registration code start here ************************/
/*#login{	
	margin-top: 9px;
	height: 821px;	
}
#login img.register-now {
	margin-left: 42%;
	margin-top: 200px;
	align-items: center;
}
#login-form {	
	border-top: 3px solid rgb(255, 255, 255);
	width: 40%;
	margin-top: 15px;
	margin-left: 29%;
}
#login-form form {
	margin-top: 25px;	
}

#login button.login-signin {
	margin-left: 20%;
	height: 100%;
	width: 200px;
	align-items: center;
}
#login-now-button {
	margin-top: 65px;
}
#login img.register-signup-via {
	height: 100%;
	width: 200px;
	align-items: center;
}

#not-a-member{
	color: rgb(255, 255, 255);
	font-size: 16px;
	margin-left:32%;
	margin-top: 20px;

}
#sign-up-now {
	font-family: CenturyGothicPaneuropeanSemiBold;
	color: rgb(87, 191, 87);	
}*/

/************************  Footer code start here ************************/
#footer-section {
	padding: 0px 50px;
	color: #ffffff;
	font-size: 12px;
	width: 100%;
	height: auto;	
}
#footer-section #footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 6vh;
	border-top: 2px solid #ffffff;	
}
#footer-section #footer-container p {
	margin: 0px;
	padding: 0px;
}
#footer-section p a {
	color: #ffffff;
	letter-spacing: 0.5px;
}
@media only screen and (max-width: 768px) {
    #footer-section #footer-container{
    	padding: 32px 0px;
    }
}
@media only screen and (max-width: 576px) {
	#footer-section {
	   padding: 0px 20px;
    }
    #footer-section #footer-container{
    	display: block;
    	text-align: center;
    	padding: 16px 0px 80px 0px;
    }
    #footer-section #footer-container p:first-child{
    	margin-bottom: 10px;
    }
}

/************************  Contact Us code start here ************************/
#contact-us {
    width: 100%;    
    margin-top: 100px;
    height: 100%;    
}
#main-div-contact-us {    
    padding: 20px;    
}
#contactus-title {    
    margin-top: 20px;
    text-align: center;
    color: white;
    padding: 10px 0;    
}
.custom-hr {
    border: none;
	color: white;
	background-color: white;
    width: 800px;
	padding: 0px;
	margin: 0px;
}
.contact-us form {	
	margin-top: 40px;	
}
.custom-input1 {
	margin-left: 16%;
	background-color: #0546A5;	
	border: 2px solid #d5d3d3;
	border-radius: 7px;	
	color: #FFFFFF;	
	padding: 10px 20px;
	font-size: 14px;	
	width: 100%;	
	max-width: 500px;	
}
.custom-input1::placeholder {
	color: #8FA5C5;	
}
.custom-input1:focus {
	background-color: #0546A5;
	color: white;
	outline: none;
	border-color: #fae9e9;
}

/************************* comman code **********************/
#page-title{
	padding: 20px 0px;
	text-align: center;
	color: #ffffff;	
}
#page-title h1{			
	letter-spacing: 1px;
}
#page-title #horizental-line{
	width: 45%;
	height: 3px;
	background-color: #ffffff;
	margin: 0px auto;
}

/************************  download code start here ************************/

#download-container{
	padding: 20px 50px;
	display: grid;	
	grid-template-columns: 1fr 1fr;	
	gap: 1.5rem 100px;	
	/*background-color: red;*/		
}
/*#download-container .video-container{	
	display: flex;
    justify-content: space-between;
	align-items: center;			
}*/
#download-container .video-container .video-detail{
	display: flex;
	align-items: center;				
	width: 100%;
	/*background-color: green;*/	
}
#download-container .video-container .video-detail img{		
	width: 260px !important;	
	height: 180px !important;
	border-radius: 12px;
	object-fit: fill;		
}
#download-container .video-container .video-detail div{	
	/*margin-left: 16px;*/
	color: #ffffff;	
	width: calc(100% - 260px);		
	padding-left: 1rem;
	/*background-color: yellowgreen;*/
}
#download-container .video-container .video-detail div h5,p{
    padding: 0px;
    margin-bottom: 5px;       
}
#download-container .video-container .video-detail div p{
	font-family: CenturyGothicPaneuropeanRegular;
	font-size: 12px;	
	color: #B8CBFE;
}
/*#download-container .video-container button{
	background-color: #012F71;
	color: #fff;
	padding: 10px 30px;
	border-radius: 5px;
	outline: none;	
	font-size: 12px;
	border: 1px solid #B8CBFE;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}*/
@media only screen and (max-width: 1200px) {
    #download-container{
    	gap: 1.5rem 2rem;
    }
    #download-container .video-container .video-detail img{
        width: 220px !important;
        height: 170px !important;
    }
    #download-container .video-container .video-detail div{
    	width: calc(100% - 220px);
    }    
}
@media only screen and (max-width: 1100px) {   
    #download-container .video-container .video-detail img{
        width: 200px !important;
        height: 150px !important;
    }
    #download-container .video-container .video-detail div{
    	width: calc(100% - 200px);
    }    
}
@media only screen and (max-width: 992px) {
    #download-container{
    	grid-template-columns: auto;
    	gap: 1.5rem 0px;
    }    
    #download-container .video-container .video-detail img{
        width: 260px !important;
        height: 180px !important;
    }    
}
@media only screen and (max-width: 576px){
    #download-container{
    	padding: 20px 20px;
    }
    #download-container .video-container .video-detail img{
        width: 200px !important;
        height: 150px !important;
    }
    #download-container .video-container .video-detail div{
    	width: calc(100% - 200px);
    }
}
/************************  subcription code start here ************************/
#subcription-container{
	padding: 30px 50px;
	display: grid;
	grid-template-columns: 1.9fr 1.1fr;
	justify-content: center;
	/*align-items: stretch;*/
	align-items: center;
	min-height: calc(100vh - 22vh);	
	/*background-color: red;*/	
}
#subcription-left{
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: yellowgreen;*/				
}
#subcription-left img{  	
	width: 80%;	
	object-fit: cover;	
}
#subcription-right{
	text-align: center;	
	color: #fff;
	padding-right: 80px;
	/*background-color: greenyellow;*/			
}
/*#subcription-right h3{
	margin-top: 90px;
}*/
#subcription-container #subcription-right .horizental-line{
	width: 90%;
	height: 3px;
	margin: 0px auto;
	background-color: #fff;
	margin-bottom: 60px;
}
#subcription-container #subcription-right a{	
	border: 4px solid #B8CBFE;
	font-size: 38px;
	color: #fff;	
	font-family: CenturyGothicPaneuropeanSemiBold;
	border-radius: 50px;
	display: inline-block;
	width: 75%;
	height: 75px;	
	line-height: 75px;
	/*padding-top: 5px;*/
	background-image: linear-gradient(#013D94, #011F4A);
	letter-spacing: 2px;
}
/*#subcription-container #subcription-right a{
	border: 3px solid silver;
	font-size: 38px;
	color: #fff;	
	font-family: CenturyGothicPaneuropeanSemiBold;
	border-radius: 50px;
	display: inline-block;
	width: 75%;
	padding-top: 5px;
	background-image: linear-gradient(#013D94, #011F4A);
	letter-spacing: 2px;
}*/
@media only screen and (max-width: 1200px) {
   #subcription-container #subcription-right{
   	   padding-right: 40px;
   }
   #subcription-container #subcription-right a{
   	   width: 80%;
   }
}
@media only screen and (max-width: 992px) {  
   #subcription-container #subcription-left img{
   	   width: 100%;
   	   height: auto;
   	   margin-right: 50px;
   }	
   #subcription-container #subcription-right{
   	   padding-right: 20px;
   }
   #subcription-container #subcription-right .horizental-line{	
   	   width: 100%;	   
    }
   /*#subcription-right h3{
	   margin-top: 100px;
   }*/
   #subcription-container #subcription-right a{
   	   width: 95%;
   }
}
@media only screen and (max-width: 768px) {
   #subcription-container{
   	   grid-template-columns: 1fr;	
   }
   #subcription-container #subcription-left img{
   	   width: 100%;
   	   /*height: 400px;*/ 
   }
   #subcription-container #subcription-right{
   	   padding-right: 0px;
   } 
   #subcription-container #subcription-right .horizental-line{
   	   width: 100%;
   	   margin-bottom: 40px;
   }
}
@media only screen and (max-width: 576px) {
      #subcription-container{
	     padding: 10px 0px 30px 0px;
      }
	  #subcription-container #subcription-left img{
   	     margin-right: 0px;
      }	
      #subcription-right{
      	 padding: 0px 0px;
      	 /*margin-right: 0px;*/
      	 /*background-color: red;*/
      }	
      #subcription-container #subcription-right .horizental-line{
   	     width: 90%;
   	     margin-bottom: 40px;
       }
}

/************************  subcription Option code start here ************************/
#subcription-option-container{
	width: 100%;
	padding: 0px 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	/*background-color: red;*/
	min-height: calc(100vh - 35.5vh);	
}
#subcription-option-container #subcription-option-left{ 
	display: flex;
	justify-content: center;
	align-items: center;  	
	width: 40%;	
	/*background-color: orange;*/	
}
#subcription-option-container #subcription-option-left img{	
	width: 75%;	
}
#subcription-option-container #subcription-option-right{ 	
	width: 60%;
	text-align: center;
	/*background-color: cyan;	*/
}
#subcription-option-container #subcription-option-right .box-container{
	display: flex;
	justify-content: space-around;	
	align-items: center; 
	flex-wrap: wrap;
}
#subcription-option-container #subcription-option-right  .box-container .box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 22px;
	margin-top: 60px;
	width: 45%;
	border: 3px solid #B8CBFE;
	border-radius: 10px;
	color: #fff;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
	cursor: pointer;
	position: relative;
}
.rightBtnSubscription{
    position: absolute;
    right: -5%;
    top: -35%;
}
.selectedBoxDesign{
	background-image: linear-gradient(#013D94, #011F4A);
}
/*#subcription-option-container #subcription-option-right  .box-container .box:nth-child(2){
	background-image: linear-gradient(#013D94, #011F4A);
}*/
#subcription-option-container #subcription-option-right  .box-container .box h6{
    letter-spacing: 1px;    
    font-family: CenturyGothicPaneuropeanBold;
}
#subcription-option-container #subcription-option-right  .box-container .box div p{
	margin: 0px; padding: 0px;
	font-size: 12px;
	font-family: CenturyGothicPaneuropeanRegular;
}
#subcription-option-container #subcription-option-right  .box-container .box p{
	font-size: 24px;
	/*font-family: CenturyGothicPaneuropeanBold;*/
}
#subcription-option-container #subcription-option-right  .box-container .box div{
	text-align: left;
}
#subcription-option-container #subcription-option-right a{	
	font-size: 32px;
	/*padding: 10px 0px;*/
	/*font-family: CenturyGothicPaneuropeanBold;*/
	color: #fff;
	background-image: linear-gradient(#E71011, #740809);
	border: 2px solid #fff;
	border-radius: 40px;
	letter-spacing: 2px;
	margin: 50px auto 0px auto;
	display: block;
	width: 54%;
	height: 56px;
	line-height: 56px;	
	font-weight: 900;	
	/*display: flex;
    align-items: center;
    justify-content: center;*/
}
@media only screen and (max-width: 1245px) {
    #subcription-option-container #subcription-option-right  .box-container .box{
    	padding: 14px 12px;
    }
}
@media only screen and (max-width: 1200px) {
	/*#subcription-option-container{
		margin-bottom: 16px;
	}*/
	#subcription-option-container #subcription-option-left{
		/*width: 30%;*/
		/*background-color: red;*/
	}
	#subcription-option-container #subcription-option-right{
		/*width: 70%;*/
		/*background-color: green;*/
	}
}
@media only screen and (max-width: 1180px) {
	#subcription-option-container #subcription-option-left{
		width: 45%;
	}
	#subcription-option-container #subcription-option-right{
		width: 65%;
	}
	#subcription-option-container #subcription-option-left img{		
		width: 85%;	
    }
	#subcription-option-container #subcription-option-right  .box-container{
		display: block;

	}
	#subcription-option-container #subcription-option-right  .box-container .box{
		width: 90%;
		padding: 14px 18px;
		margin: 20px auto;
	}
	#subcription-option-container #subcription-option-right a{
		width: 90%;
		/*margin: 30px auto 0px auto;
		padding: 8px 0px;*/
	}
}
@media only screen and (max-width: 992px) {
	/*#subcription-option-container #subcription-option-right a{
		font-size: 28px;
		width: 90%;
	}*/
	#subcription-option-container #subcription-option-left img{		
		width: 90%;	
    }
}
@media only screen and (max-width: 768px){
    #subcription-option-container{
    	display: block;
    }
    #subcription-option-container #subcription-option-left{
    	width: 100%;
    }
    #subcription-option-container #subcription-option-left img{
    	width: 80%;
    }
    #subcription-option-container #subcription-option-right{
    	width: 100%;
    }
    #subcription-option-container #subcription-option-right  .box-container .box{
    	width: 100%;
    }
    #subcription-option-container #subcription-option-right a{
		width: 100%;
		margin: 26px auto 26px auto;
		font-size: 28px;
		/*margin: 30px auto 0px auto;
		padding: 8px 0px;*/
	}

}
@media only screen and (max-width: 567px){
	#subcription-option-container{
		padding: 0px 20px;
	}
	#subcription-option-container #subcription-option-left img{
    	width: 80%;
    }
	#subcription-option-container #subcription-option-right a{
		font-size: 24px;	
	}
}


/************************* Subscription payment code start here *************************/
#subscription-video-container{	
	text-align: center;
	padding: 40px 50px 40px 50px;	
	/*background-color: red;	*/
	min-height: calc(100vh - 22vh);
	/*padding: 40px 0px 10px 0px;*/	
}
#subscription-video-container #subscription-video-list{
	display: grid;	
	grid-template-columns: repeat(4, 24%);
	justify-content: center;
	align-items: center;	
	gap: 1.5rem 1rem;	
	/*background-color: yellowgreen;*/ 
	padding: 20px 0px;
}

#subscription-video-container #subscription-video-list .video-list-container{	
	/*background-color: orange;*/
	text-align: center;
	color: #ffffff;
	position: relative;	
	cursor: pointer;	
	/*width: 90%;*/
}
#subscription-video-container #subscription-video-list .video-list-container .thumbnails{
	width: 90%;
	height: 42vh !important;
	/*height: auto;*/
	border-radius: 10px;
	object-fit: cover;	
}
#subscription-video-container #subscription-video-list .video-list-container .playbtn{
	width: 22%;
	z-index: 1;
	position: absolute;
	top: 40%;
    left: 50%;
    transform: translate(-40%, -50%);
    cursor: pointer;
}
#subscription-video-container #subscription-video-list .video-list-container .playbtnText{
	width: 22%;
	z-index: 1;
	position: absolute;
	top: 40%;
    left: 40%;
    transform: translate(-40%, -50%);
    cursor: pointer;
    color: #03C03C;
}
#subscription-video-container #subscription-video-list .video-list-container .playbtnText + img{
	 opacity: 0.4;	 
}
#subscription-video-container #subscription-video-list .video-list-container .allIcon{
     width: 50px; height: 50px;
     z-index: 1;
	 position: absolute;
	 top: -5%;
     right: 0%;
	 /*transform: translate(+100%, -450%);*/
}
#subscription-video-container #subscription-video-list .video-list-container .blankIcon{
     width: 50px; height: 50px;
     z-index: 1;
	 position: absolute;
	 top: -5%;
     right: 0%;
	 /*transform: translate(+100%, -45%);*/
}
#subscription-video-container #subscription-video-list .video-list-container .rightIcon{
     width: 50px; height: 50px;
     z-index: 1;
	 position: absolute;
	 top: -5%;
     right: 0%;
	 /*transform: translate(+100%, -45%);*/
}
/*#subscription-video-container #subscription-video-list .video-list-container img{
    width: 90%;    
    border-radius: 10px;
    z-index: 0;        
}*/
#subscription-video-container #subscription-video-list .video-list-container h5{
	margin-top: 8px;
	margin-bottom: 0px;
}
#subscription-video-container #subscription-video-list .video-list-container p{	
	margin-top: 5px;
	font-family: CenturyGothicPaneuropeanRegular;
	font-size: 12px;		
	letter-spacing: 1px;
	color: #B8CBFE;
	width: 85%;
	min-height: 2rem;
	margin: 0px auto;	
}
#subscription-video-container #proceed-payment-btn{
	margin-top: 24px;
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	border-radius: 16px;
	padding: 10px 36px;
	font-size: 26px;
	color: #fff;
	letter-spacing: 1px;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);	
}

@media only screen and (max-width: 1100px) {
	#subscription-video-container #subscription-video-list{    
    	gap: 1.5rem 0rem; 
    }     
    #subscription-video-container #subscription-video-list .video-list-container .thumbnails{
		width: 80%;
		height: 38vh !important;		
    }
}
@media only screen and (max-width: 992px) {
    #subscription-video-container #subscription-video-list{    	
    	grid-template-columns: repeat(3, 33%);
    	gap: 1.5rem 1rem; 
    } 
    #subscription-video-container #subscription-video-list .video-list-container .thumbnails{
		width: 90%;
		height: 40vh !important;		
    }
}
@media only screen and (max-width: 768px) {	
    #subscription-video-container #subscription-video-list{    	
    	grid-template-columns: repeat(2, 50%);    	    	
    }     
}
@media only screen and (max-width: 576px) {
	#subscription-video-container{
        padding: 40px 20px 40px 20px
	}	
    #subscription-video-container #subscription-video-list{
    	grid-template-columns: auto;    	    	
    }     
}
/************************  Login code start here ************************/
#login-container{
	width: 100%;	
	height: calc(100vh - 22vh);		
	/*background-color: red;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
#login-container #login-form-container{
	width: 580px;
	padding: 36px 70px;	
	margin: 0px auto;	
	/*background-color: yellowgreen;*/
}
#login-form-container .heading-container{
    color: #ffffff;
	font-family: CenturyGothicPaneuropeanBold;
	text-align: center;
	letter-spacing: 2px;
	border-bottom: 3px solid #fff;
	margin-bottom: 30px;
}
#login-form-container .heading-container h2{
    padding-bottom: 16px;
}
#login-form-container input{
	display: block;
	width: 100%;
	height: 50px;	
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;	
	border-radius: 10px;
	font-size: 15px;
	padding-left: 16px;
	padding-top: 5px;
	color: #B8CBFE !important;	
}
#login-form-container #forget-password-div{
	text-align: right;
	margin-top: 5px;	
}
#login-form-container #forget-password-div a{
	color: #fff;
	font-size: 14px;
	font-family: CenturyGothicPaneuropeanSemiBoldItalic;
}
#login-form-container #button-container{    
	margin: 30px 0px 20px 0px;
	padding: 0px 20px;
	color: #fff;	
	display: flex;
    align-items: center;
    justify-content: center;     
    /*background-color: red;*/   
}
#login-form-container #button-container button{
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	height: 38px;
	line-height: 38px;
	width: 170px;
	font-size: 16px;
	/*padding: 0px 20px;*/
	color: #fff;
	border-radius: 50px;	
}
/*#login-form-container #button-container a{	    		
	background-image: linear-gradient(#B00C0D, #740809);
	border: 2px solid #B8CBFE;
	height: 38px;
	line-height: 38px;	
	font-size: 16px;
	width: 170px;	
	color: #fff;
	border-radius: 50px;	
	display: flex;
	justify-content: space-between;
	padding-left: 1.5rem;
	letter-spacing: 1px;	
}
#login-form-container #button-container a img{
	width: 40px;
	height: 40px;
	margin: 0; padding: 0;
}*/
#signup-link-div{
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-family: CenturyGothicPaneuropeanSemiBoldItalic;
}
#signup-link-div a{
	color: rgb(87, 191, 87);
}

@media only screen and (max-width: 576px) {
    #login-container #login-form-container{
    	padding: 36px 40px;	
    } 
    #login-form-container #button-container{
    	padding: 0px 0px;
    }   
	#login-form-container #button-container button{
		width: 145px;
		font-size: 14px;		
	}
	#login-form-container #button-container a{
		width: 145px;
		font-size: 14px;								
	}
	#login-form-container #button-container a img{
	   width: 35px;
	   height: 35px;	
    }
    #login-form-container #button-container a{
    	letter-spacing: 0px;
    }
    /*#login-form-container #button-container button{
    	width: 100px;
    	font-size: 10px;
    	padding: 0px 10px;
    	height: 32px;
    	line-height: 26px;
    }
    #login-form-container #button-container a{
    	width: 100px;
    	font-size: 10px;
    	padding: 0px 10px;
    	height: 32px;
    	line-height: 26px;    	
    }
    #login-form-container #button-container a img{
	   width: 24px;
	   height: 24px;	
    }*/
}

@media only screen and (max-width: 400px) {
	#login-container #login-form-container{
    	padding: 36px 30px;	
    }     
	#login-form-container #button-container button{
		width: 125px;
		font-size: 12px;		
	}
	#login-form-container #button-container a{
		width: 125px;
		font-size: 12px;								
	}
	/*.or-txt{
		font-size: 10px;
	}
	#login-form-container #button-container button{
    	width: 80px;
    	font-size: 8px;
    	padding: 0px 10px;
    	height: 32px;
    	line-height: 26px;
    }
    #login-form-container #button-container a{
    	width: 80px;
    	font-size: 8px;
    	padding: 0px 10px;
    	height: 32px;
    	line-height: 26px;
    }
    #login-form-container #button-container a img{
	   width: 20px;
	   height: 20px;	
    }	*/

}

/************************  Register code start here ************************/
/*#top-title-register{	
	color: #ffffff;
	font-family: CenturyGothicPaneuropeanBold;
	text-align: center;
	padding: 20px 0px 10px 0px;
	letter-spacing: 2px;
}*/
#register-container{
	width: 100%;
	/*background-color: red;	*/
	display: flex;
	align-items: center;
	min-height: calc(100vh - 22vh);	
}
#register-form-container{
	width: 580px;
	/*border-top: 3px solid #ffffff;	*/
	padding: 20px 70px;	
	margin: 0px auto;
	/*background-color: yellowgreen;*/
}
#register-form-container #top-title-register{
    color: #ffffff;
	font-family: CenturyGothicPaneuropeanBold;
	text-align: center;
	letter-spacing: 2px;
	border-bottom: 3px solid #fff;
	margin-bottom: 30px;
}
#register-form-container input{
	display: block;
	width: 100%;
	height: 50px;	
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	border-radius: 10px;
	font-size: 15px;
	padding-left: 16px;
	padding-top: 5px;
	margin-bottom: 14px;
	/*font-family: CenturyGothicPaneuropeanBold;*/	
	color: #B8CBFE;
}
#register-form-container #button-container{	
	margin: 30px 0px 20px 0px;
	padding: 0px 10px;	
	color: #fff;	
	display: flex;
    align-items: center;
    justify-content: center;	    
}
#register-form-container #button-container button{
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	height: 38px;
	line-height: 38px;
	width: 180px;
	font-size: 16px;
	/*padding: 0px 10px;*/
	color: #fff;
	border-radius: 50px;	
}
/*#register-form-container #button-container a{	    		
	background-image: linear-gradient(#B00C0D, #740809);
	border: 2px solid #B8CBFE;
	height: 38px;
	line-height: 38px;	
	font-size: 16px;
	width: 180px;	
	color: #fff;
	border-radius: 50px;
	display: flex;
	justify-content: space-between;
	padding-left: 1.5rem;
	letter-spacing: 1px;	
}
#register-form-container #button-container a img{
	width: 38px;
	height: 38px;		
	margin: 0; padding: 0;		
}*/
#signup-link-div{
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-family: CenturyGothicPaneuropeanSemiBoldItalic;
}
#signup-link-div a{
	color: rgb(87, 191, 87);
}
@media only screen and (max-width: 576px) {	
    #register-form-container{
    	width: 90%;    	
    	padding: 20px 0px;
    }    
    #register-form-container #button-container{ 
       padding: 0px 0px;	   	
    }
    #register-form-container #button-container button{
    	width: 150px;
    	font-size: 14px;
    	height: 36px;
    	line-height: 36px;
    	/*padding: 0px;*/
    }
    #register-form-container #button-container a{
    	width: 150px;
    	font-size: 14px;
    	height: 36px;
    	line-height: 36px;
    	/*padding: 0px;*/
    }
    #register-form-container #button-container a img{
    	width: 35px; height: 35px;
    }
    #register-form-container #button-container a{
    	letter-spacing: 0px;
    }
}

@media only screen and (max-width: 376px){
    #register-form-container #button-container button{
    	width: 130px;
    	font-size: 12px;
    	height: 36px;
    	line-height: 36px;
    }
    #register-form-container #button-container a{
    	width: 130px;
    	font-size: 12px;
    	height: 36px;
    	line-height: 36px;
    }
    #register-form-container #button-container a img{
    	width: 35px; height: 35px;
    }
}

/************************  Contact Us code start here ************************/
#contact-wrapper{	
	display: flex;
	padding: 20px 50px;	
}
.contact-left{width: 50%;}
.contact-left img{display: block; margin: 0px auto;}
.contact-left #firstimg{ width: 46%; height: auto; text-align: right;}
.contact-left #secondimg{ width: 50%; margin-top: 25px;}
.contact-right{width: 50%;text-align: left;}

#form-container{	
	width: 60%;
	padding: 30px 0px;
	text-align: center;
}
#form-container input,textarea{
	display: block;
	background-color: transparent;
	width: 100%;	
	margin-bottom: 20px;
	border: 2px solid #B8CBFE;
	border-radius: 5px;	
	padding-left: 10px;	
	font-size: 14px;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}
#form-container input{
	height: 50px;
	color: #FFFFFF !important;	
}
#form-container textarea{
	padding-top: 5px;
	height: 150px;
	color: #FFFFFF !important;
}
#form-container button{
	outline: none;
	border: none;	
}
#form-container button img{
	width: 180px;
}

#contactDetail{
	display: flex; align-items:center; justify-content: center; 
	color:#fff; padding: 20px 0px; font-family: CenturyGothicPaneuropeanRegular;
	font-size: 16px;
}

@media only screen and (max-width: 1200px) {
	.contact-left{ padding-top: 25px; }
    .contact-left #firstimg{ width: 55%; height: auto;}
    .contact-left #secondimg{ width: 60%; height: auto;}
    #form-container{	
	   width: 70%;	
    }
}
@media only screen and (max-width: 992px) {
	.contact-left{ padding-top: 25px; }
    .contact-left #firstimg{ width: 68%; height: auto;}
    .contact-left #secondimg{ width: 73%; height: auto;}
    #form-container{	
	   width: 80%;	
    }
}
@media only screen and (max-width: 768px) {
	#contact-wrapper{ flex-direction: column; padding: 20px 20px;}
	.contact-left{width: 100%;}
	.contact-right{width: 100%;}
	.contact-left{ padding-top: 0px; }
    .contact-left #firstimg{ width: 65%; height: auto;}
    .contact-left #secondimg{ width: 70%; height: auto;}
    #form-container{	
	   width: 100%;	
    }
    #page-title #horizental-line{
	  width: 75%;	  
    }
    #main-wrapper-100vh{
    	height: 100%;
    }
}

/************************  Forget Password code start here ************************/
#forget-password-wrapper{
	padding: 40px 0px 50px 0px;
	display: flex;
	flex-direction: row;
	align-items: center;	
	min-height: calc(100vh - 22vh);
}
#forget-password-wrapper .forget-left{
	width: 40%;
	text-align: center;	
}
#forget-password-wrapper .forget-left img{
	width: 58%;
}
#forget-password-wrapper .forget-right{
	width: 60%;
	text-align: center;
}
#forget-form-container{
	color: #fff;
	margin-right: 50px;
}
#forget-form-container h1{
	letter-spacing: 1px;
}
#forget-form-container #horizental-line{
	width: 80%;
	height: 2px;
	background-color: #fff;
	margin: 0px auto;
}
#forget-form-container p{
   margin-top: 30px;
   font-size: 20px;
   font-family: CenturyGothicPaneuropeanRegular;
   letter-spacing: 1px;   
}
#forget-form-container form{
	margin-top: 30px;
	/*background-color: red;*/
}
#forget-form-container form input{
	width: 55%;
	height: 50px;
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	border-radius: 10px;
	font-size: 14px;
	letter-spacing: 1px;
	padding-left: 16px;
	padding-top: 3px;
	margin-bottom: 20px;	
	font-family: CenturyGothicPaneuropeanBold;	
	color: #fff;
}

#forget-form-container form button{
	background-image: linear-gradient(#013D94, #011F4A);
	color: #fff;
	padding: 4px 50px 2px 50px;
	border-radius: 15px;
	outline: 2px solid #B8CBFE;
	font-size: 18px;	
	letter-spacing: 1px;
	margin-top: 20px;
	font-family: CenturyGothicPaneuropeanBold;	
}

@media only screen and (max-width: 1200px) {
    #forget-password-wrapper .forget-left img{
        width: 65%;
    }
    #forget-form-container form input{
    	width: 60%;
    }
}
@media only screen and (max-width: 992px) {
    #forget-password-wrapper .forget-left img{
    	margin-top: 20px;
        width: 75%;
    }
    #forget-form-container form input{
    	width: 70%;
    }
}

@media only screen and (max-width: 768px) {
	#forget-password-wrapper{
		display: block;
		padding: 0px 0px 30px 0px;
	}
	#forget-password-wrapper .forget-left{
		width: 100%;
		padding-bottom: 20px;
	}
	#forget-password-wrapper .forget-left img{
        width: 40%;
    }
    
	#forget-password-wrapper .forget-right{
		width: 100%;
	}
	#forget-form-container{
		margin-right: 0px;
	}
	#forget-form-container form input{
    	width: 90%;
    }
}

/************************  user profile code start here ************************/
#profile-container{
	padding: 30px 50px;		
	width: 100%;		
	/*background-color: red;*/
	/*min-height: calc(100vh - 22vh);	*/	
}
#profile-container #top-section{
	padding: 0px 0px 20px 0px;
	/*background-color: green;	*/
}
#profile-container #top-section #profile-left{
	text-align: right;
	border-right: 1px solid #fff;	
	/*background-color: yellow;*/
}
#profile-container #top-section #profile-left #profile-left-content{
	width: auto;
	display: inline-block;
	text-align: center;
	/*background-color: yellowgreen;*/
	margin-right: 40px;
}
#profile-container #top-section #profile-left #profile-left-content p{
	color: #fff;
	font-size: 22px;	
	margin-top: 18px;
	letter-spacing: 1px;
}

#profile-container #top-section #profile-right{
	/*background-color: pink;*/
}

#profile-container #top-section #profile-right #profile-form-container{
	padding-top: 5px;
	margin-left: 40px;
	width: 50%;		
	/*background-color: orange;*/
}

#profile-container #top-section #profile-right #profile-form-container .input-container{
   color: #fff;  
   margin-bottom: 35px;
}
#profile-container #top-section #profile-right #profile-form-container .input-container span{
   font-size: 14px;
   font-family: CenturyGothicPaneuropeanThin;
   letter-spacing: 1px;
}
#profile-container #top-section #profile-right #profile-form-container .input-container p{   
   margin-top: 8px;
   letter-spacing: 1px;
   font-size: 12px;
   border-bottom: 1px solid #fff;
}
#profile-container #top-section #profile-right #profile-form-container #edit-profile-btn{	
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	background-image: linear-gradient(#013D94, #011F4A);
	color: #fff;
	font-size: 12px;	
	border-radius: 14px;		
	border: 2px solid #B8CBFE;
	height: 35px;
	line-height: 35px;
	width: 120px;
	margin: 0px auto;
	font-family: CenturyGothicPaneuropeanRegular;	
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}
#profile-container #top-section #profile-right #profile-form-container #edit-profile-btn i{
	font-size: 28px;
	margin-left: 10px;	
}

#bottom-section{
	width: 100%;
    height: auto;    
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: yellowgreen;*/
}

#bottom-section #subscription-plan-box{
	/*width: 35%;*/
	width: 420px;
	background-color: #2974BE;	
	border: 5px solid #4C3F3F;
	border-radius: 15px;
	padding: 12px 30px;
	text-align: center;
	color: #fff;
	position: relative;
	z-index: 0000;
}
#bottom-section #subscription-plan-box p{
	font-size: 16px;
}
#bottom-section #subscription-plan-box .plan-title{
	background-color: #011F4A;	
	border: 3px solid silver;
	border-radius: 12px 12px 0px 0px;
	margin-top: 8px;		
}
#bottom-section #subscription-plan-box .plan-title p{
	padding-top: 10px;
}
#bottom-section #subscription-plan-box .plan-description{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #011F4A;
   padding: 10px 30px;
   border-left: 3px solid silver;  
   border-right: 3px solid silver; 
   border-bottom: 3px solid silver;
   border-top: none;
   border-radius: 0px 0px 10px 10px;
   margin-bottom: 12px;
}
#bottom-section #subscription-plan-box .plan-description span:first-child{
	font-size: 10px;
}
#bottom-section #subscription-plan-box .plan-description span:last-child{
	font-size: 22px;
}

#bottom-section #subscription-plan-box button{
	background-image: linear-gradient(#013D94, #011F4A);
	color: #fff;
	font-size: 12px;
	width: 136px;
	height: 28px;
	line-height: 28px;
	font-family: CenturyGothicPaneuropeanRegular;
	border:  1px solid #B8CBFE;
	border-radius: 20px;
	z-index: 1111;
	position: absolute;
	top: 94%;
	right: 30%;
}
@media only screen and (max-width: 1200px) {
	/*#bottom-section #subscription-plan-box{
		width: 42%;
	}*/
}
@media only screen and (max-width: 992px) {
	#profile-container #top-section #profile-right #profile-form-container{
		width: 65%;
	}
	/*#bottom-section #subscription-plan-box{
		width: 55%;
	}*/
}

@media only screen and (max-width: 767px) {
	#profile-container{
       /*min-height: calc(100vh - 22vh)*/
       padding: 50px 50px;
	}
	#profile-container #top-section #profile-left{
		border: none;
		text-align: center;		
	}
	#profile-container #top-section #profile-left #profile-left-content{
		margin-right: 0px;
	}
	#profile-container #top-section #profile-right #profile-form-container{
		width: 100%;
		margin-left: 0px;
	}
	#bottom-section #subscription-plan-box{
		width: 100%;
	}
	#bottom-section #subscription-plan-box button{
		right: 38%;
	}
	#profile-main-container{
		min-height: auto;
	}
}
@media only screen and (max-width: 600px){
    #bottom-section #subscription-plan-box button{
		right: 35%;
	}
}
@media only screen and (max-width: 560px) {
	#profile-container{
	   padding: 50px 20px 50px 20px;	
	}
    #bottom-section #subscription-plan-box{
		width: 100%;
		padding: 12px 20px;
	}
	/*#bottom-section #subscription-plan-box button{
		right: 35%;
	}*/
}
@media only screen and (max-width: 400px){
	#profile-container #top-section #profile-left #profile-left-content img{
	    width: 200px;
	    height: 200px;
    }
    #bottom-section #subscription-plan-box button{
		right: 26%;
	}
	#bottom-section #subscription-plan-box .plan-description{
		padding: 10px 16px;
	}

}

/************************  Edit profile code start here ************************/
#edit-profile-container{
	padding: 20px 50px 70px 50px;
	width: 100%;
	/*background-color: red;*/
	/*display: flex;
	flex-direction: column;
	justify-content: center;*/
	/*min-height: calc(100vh - 22vh);			*/
}
#edit-profile-container #edit-profile-left{
	text-align: center;
	position: relative;
}
#edit-profile-container #edit-profile-left .edit-profile-img{
	/*padding: 20px 0px;*/
	margin-top: 50px;	
	border-right: 1px solid #B8CBFE;
	position: relative;
	/*background-color: deeppink;*/
}
#edit-profile-container #edit-profile-left .edit-profile-img img:first-child{
	width: 320px;
	height: 320px;
}
#edit-profile-container #edit-profile-left #uploadImage{
   width: 70px; 
   height: 70px;
   position: relative;
   bottom: 70px;
   left: 85px;
   cursor: pointer;
}
/*#edit-profile-container #edit-profile-left .edit-profile-img #uploadImage{
   width: 65px; 
   height: 65px;
   position: absolute;
   bottom: 10%;
   right: 13%;
}*/

#edit-profile-right form{
	margin-top: 25px;	
}
#edit-profile-right .edit-profile-form{
	padding: 0px 40px;
	display: grid;
	grid-template-columns: auto auto;
	gap: 50px 0px;	
}

#edit-profile-right .edit-profile-form .custom-edit-input *{
	display: block;
}
#edit-profile-right .edit-profile-form .custom-edit-input label{
	margin-left: 10px;
    color: #fff;
    font-size: 14px;
}
#edit-profile-right .edit-profile-form .custom-edit-input input{
	width: 90%;
	background-color: transparent;
	border: 2px solid silver;
	height: 50px;
	border-radius: 10px;
	padding-left: 10px;
	color: #fff;
	font-size: 14px;
	box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.8);
}

#edit-profile-right .edit-profile-form .button-container{	    
    grid-column: span 2;
    width: 100%;	    
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#edit-profile-right .edit-profile-form .button-container button{
	text-align: center;
	background-image: linear-gradient(#013D94, #011F4A);
	color: #fff;
	letter-spacing: 1px;
	padding: 10px 30px;
	border-radius: 10px;
	border: 2px solid #B8CBFE;
	font-size: 12px;
	width: 50%;
	margin-bottom: 16px;	
}

@media only screen and (max-width: 1200px) {
    #edit-profile-container #edit-profile-left .edit-profile-img{
    	border-right: none;
    }
    #edit-profile-container #edit-profile-left .edit-profile-img img:first-child{
	   width: 300px;
	   height: 300px;
    }
    #edit-profile-right .edit-profile-form{
    	padding: 0px 10px; 
    	gap: 40px 20px;  
    	background-color: orange; 	
    }
    #edit-profile-right .edit-profile-form .custom-edit-input input{
    	width: 100%;
    } 
    /*#edit-profile-container #edit-profile-left .edit-profile-img #uploadImage{
    	right: 22px;
    }   */
}

@media only screen and (max-width: 992px){
	#edit-profile-container{
	   padding: 10px 50px 20px 50px;		   
    }
    #edit-profile-container #edit-profile-left .edit-profile-img{
    	margin-top: 100px;
    }    
    #edit-profile-right .edit-profile-form{
    	display: block;    	    	    	
    }    
    #edit-profile-right .edit-profile-form .custom-edit-input{
    	width: 90%;
    	margin: 16px auto;
    }  
    #edit-profile-right .edit-profile-form .button-container{
    	padding-top: 16px;
    }
    #edit-profile-right .edit-profile-form .button-container button{
    	width: 70%;
    }
}

@media only screen and (max-width: 767px){
   /* #edit-profile-container #edit-profile-left .edit-profile-img #uploadImage{	   
	   bottom: 10%;
	   right: 28%;
    }	*/
    #edit-profile-container #edit-profile-left .edit-profile-img{
    	margin-top: 2rem;
    }  
    #edit-profile-right form{
    	margin-top: 0px;
    }      
}

@media only screen and (max-width: 576px){
    #edit-profile-container{
	   padding: 10px 20px 20px 20px;		   
    }
    #edit-profile-container #edit-profile-left .edit-profile-img{
    	margin-top: 0px;
    }
    #edit-profile-right form{
       margin-top: 0px;
    }
    #edit-profile-right .edit-profile-form{	
	   padding: 0px 0px;
    }
    #edit-profile-right .edit-profile-form .custom-edit-input{
    	width: 100%;
    }
    #edit-profile-right .edit-profile-form .custom-edit-input input{
	   width: 100%;
    }
    /*#edit-profile-container #edit-profile-left .edit-profile-img #uploadImage{
       bottom: 10%;
       right: 20%;
    }*/
}

/************************  Change Password Modal code start here ************************/
#changePasswordModal .modal-body{
    background-color: #0546A5;    
    text-align: right;    
}
#changePasswordModal .modal-body .edit-profile-form{	
	padding: 10px 16px;
}
#changePasswordModal .modal-body .edit-profile-form #updatePasswordBtn{
    text-align: center;
	background-color: #011F4A;
	color: #fff;
	letter-spacing: 1px;
	padding: 10px 30px;
	border-radius: 10px;
	border: 2px solid silver;
	font-size: 12px;
	width: 100%;
	height: 50px;
	margin-top: 10px;	
}

#changePasswordModal .modal-body .edit-profile-form .custom-edit-input{
	margin-bottom: 20px;
	text-align: left;
}
#changePasswordModal .modal-body .edit-profile-form .custom-edit-input *{
    display: block;
}
#changePasswordModal .modal-body .edit-profile-form .custom-edit-input label{
	margin-left: 10px;
    color: #fff;    
    font-size: 14px;
}
#changePasswordModal .modal-body .edit-profile-form .custom-edit-input input{
	width: 100%;
	background-color: transparent;
	border: 2px solid silver;
	height: 50px;
	border-radius: 10px;
	padding-left: 10px;
	color: #fff;
	font-size: 14px;
}

/************************  video detail page styling start here ************************/
#video-detail-container{
	padding: 30px 50px;
	color: #fff;
	/*background-color: red;*/
	min-height: calc(100vh - 22vh);
}
#video-detail-container #video-player-container{
	/*display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333; /* Optional background color */
    padding: 20px;
    border-radius: 10px;
    /*max-width: 800px;*/ /* Limits the max width */
    margin: auto;     /* Centers the video on the page */      
}
#video-detail-container #video-player-container video{
	/*width: 100%;
    height: 500px;
	border-radius: 16px;*/
	width: 100%;             /* Make the video responsive */
    height: 500px;            /* Maintain aspect ratio */
    border-radius: 8px;      /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */
    outline: none;           /* Remove default outline */
}

#video-detail-container #video-title{
	padding: 10px 16px;	
	display: flex;
	justify-content: space-between;
	align-items: center;	
}

#video-detail-container p{	
	font-family: CenturyGothicPaneuropeanRegular;
	padding-left: 16px;
}

#video-detail-container #subscribeNowContainer{
	margin: 40px 0px 30px 0px;
	width: 100%;
	text-align: center;
}

#video-detail-container #subscribeNowContainer button{
	 color: #fff;
	 font-size: 24px;
	 padding: 10px 36px;
	 background-image: linear-gradient(#013D94, #011F4A);
	 border: 2px solid #B8CBFE;
	 border-radius: 25px;
	 letter-spacing: 1px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

/*@media only screen and (max-width: 768px){
	#video-detail-container{
		padding: 30px 50px;
	}
	#video-detail-container #video-player-container video{
		height: auto;
	}
	#video-detail-container #subscribeNowContainer button{
	    font-size: 20px;
	    padding: 7px 26px;
    }
}*/
@media only screen and (max-width: 800px){
    #video-detail-container #video-player-container video{
    	height: auto;
    }
}
@media only screen and (max-width: 576px){
	#video-detail-container{
		padding: 30px 20px;
	}
}

/************************* otp Verify styling start here *****************************/

#login-form-container .otp-heading-container{
    color: #ffffff;
	text-align: center;
	letter-spacing: 2px;
	border-bottom: 3px solid #fff;
	margin-bottom: 30px;
}

#login-form-container .otp-heading-container P{
   font-family: CenturyGothicPaneuropeanRegular;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.otp {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    border: 2px solid #fff;
    border-radius: 8px;
    background-color: #0a3d91; /* Match your design color */
    color: #fff;
}
.otp:focus {
    outline: none;
    border-color: #fff;
    background-color: #0046ae;
}
#otp-button-container{
	color: #fff;	
	text-align: center;
}

#otp-button-container span button{
	background-image: linear-gradient(#013D94, #011F4A);
	border: 2px solid #B8CBFE;
	height: 38px;
	line-height: 38px;
	width: 170px;
	font-size: 16px;
	padding: 0px 20px;
	color: #fff;
	border-radius: 50px;	
}



/*#video-list{
  display: grid;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}*/

.video-list-container { 
  /*width: 50%;*/
  /*width: 300px; 
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;*/
}

/*.video-list-container img {
  width: 100%;
  max-width: 260px; 
  height: auto;
  object-fit: cover;
}*/

/*.video-list-container h5,
.video-list-container p {
  margin: 10px 0;
}*/