.vid_cat_header {

  padding: 150px 50px 80px 0;
  background-image: linear-gradient(to right, rgba(226, 211, 244, 1), rgba(255, 255, 255, 1));
}

.back_link_container{
   -webkit-box-shadow: 0px 3px 3px 1px #f2f3f4;
box-shadow: 0px 3px 3px 1px #f2f3f4;
  padding: 20px 50px;
}

.back_link i{
 color: #293955;

}
.back_link a{
 color: #293955;
  margin-left:10px;
}
.back_link_elem{
 margin-left:5px;
    display:flex;
  align-items: center;
  transition: all 0.3s ease;
  width:fit-content;
}
.back_link_elem:hover a, .back_link_elem:hover i{
 color: #514881;
  
}
.back_link_elem:hover {
 margin-left:0px;
}
.video_cat_header_container {
  display:flex;
  justify-content:start;
  align-items:center;
  }


.single_vid{
   display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items:flex-start;
  text-align:start;
  padding:30px;
  webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  
  transition: all 0.3s ease;
}
.single_vid:hover {
 transform: scale(1.03);
  cursor: pointer;

}

.btn_link{
  text-decoration: none;
  margin:auto auto 0 auto;
  }
.single_vid_desc{
margin: 10px 0 0 0;
}


.single_cat{

  width: 319px;
  min-height: 220px;
}

.single_cat a {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items:center;
  text-align:center;
  background:white;
  
  padding: 30px;
  
  webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);

  
  transition: all 0.3s ease;
}

.single_cat .icon_img{
  object-fit: contain; 
}

.single_cat a:hover {
 transform: scale(1.03);

}

.single_cat_desc{
margin: 15px 0 0 15px;
  color:#4e5665;
}
.single_cat h4, .single_vid h4{
margin: 15px 0 0 0;
  font-size: 20px;
}

.cat_container{
  margin: 30px 50px 100px 50px;
  display: flex; 
  justify-content: center;
  flex-wrap: wrap;
}

 .vid_container{
  margin: 30px 50px 100px 50px;
  display: grid;  
  grid-template-rows: 1fr; 
  gap: 20px 20px; 
  
}

@media (min-width: 600px) {
   .vid_container { grid-template-columns: repeat(2, 1fr); }
  
 
}

@media (min-width: 900px) {
   .vid_container { grid-template-columns: repeat(3, 1fr); }
  
 
}

@media (min-width: 1200px) {
  .vid_container { grid-template-columns: repeat(4, 1fr); }
 
}

/* The Modal (background) */
.vid-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  margin: 50px auto; 
  
}

.template_desc p, .template_desc span{
  color:#818AA2;
  }

.modal-body{
  display: grid;  
  grid-template-rows: 1fr; 
  max-width:95%;
  grid-gap:0 20px;
}
@media (max-width: 920px) {
  .modal-body { grid-template-columns: 1fr!important; }
  .m-none{display:flex!important; }
  .sm-none{display:none;!important}
    .modal-body .right-side{margin-top:20px}
  .single_cat{

  width: 550px;
  
}
}
@media (min-width: 921px) {
 .m-none{display:none;}
  .sm-none{display:flex;}
}
@media (min-width: 600px) {
  .modal-body { grid-template-columns: 60% 40%; }
 
 
}

@media (min-width: 1200px) {
  .modal-body { grid-template-columns: 70%  30%; }
}
.modal-header{
  text-align:center;
  margin-bottom: 20px;
  }

.iframe_container {
position: relative;
  
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}


.iframe_container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.frames_container {
  max-height:300px;
  overflow-y:scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.frames_container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.frames_container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.single_frame{
 display:flex;
  align-items:center;
  padding: 15px;
  margin-bottom:10px;
  border: 1px solid #E6E8EC;
  border-radius:5px;
  -webkit-box-shadow: 0px 3px 3px 1px #f2f3f4;; 
box-shadow: 0px 3px 3px 1px #f2f3f4;;
}
.single_frame span{
  height: 25px;
    width: 25px;
   display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
   padding:5px;
  font-size: 15px;
  }
.single_frame .frame_count{

 
  border-radius: 100% ;
  background: rgba(226, 211, 244, 1);
  color:rgba(15, 37, 84, 1.0); 
  border: 1px solid rgba(15, 37, 84, 1.0);
   
   
}
.frame_content  {
 
  max-width:80%;
  margin-left:10px;  
}
.frame_content .frame_title {
 padding:0;
  margin:0;
  font-weight:bold;
  color:#172847;
  
}
.frame_content .frame_desc p {
 padding: 0;
  margin:0;
  color: #7C859E;
}

.locked_frame{
 background: #F4F6F9;
  border-color: #E6E8EC;
  padding: 5px  15px;
  box-shadow: none;
}

.locked_frame .frame_title {
  color:#7C859E;
  
}
.lock_icon{
  margin-left: auto;
  fill: #C7CCD4;
}
.unlocked_icon{
  margin-left: auto;
  fill: #7C859E;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.demo_container{
 
  align-items:center;
  justify-content:center;
  padding: 15px;
  margin-top: 20px;
   border: 1px solid #E6E8EC;
  border-radius:5px;
  
}

.demo_container p{
margin:0;
}

.vid_cat_explore {
  

  padding-top:50px;
}

.vid_cat_explore h2{
  text-align:center;
  text-transform: none;
  color: #172847;
  
  }

.vid_cat_explore .cat_container{
 margin-top:50px;
    }