.btn-white{
    background: white;
    color: #006699;
    border: none;
    border-radius: 20px;
    padding: 6px 20px;
    
}
.btn-brightBlue{
    background: #26D2FF;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 20px;
    margin-right: 30px;
}
.btn-search{
    background: #006699;
    color: white;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
}
.btn-details{
    background-image: linear-gradient(to right, #3690BE , #006699);
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
}
.btn-package1{
    background:#E07A5F;
    border: 2px solid white;
    border-radius: 20px;
    color: white;
    padding: 6px 20px;
    width: 100%;
    margin:20px 0;
    cursor: pointer; 
}

.btn-package2{
    background:#06D6A0;
    border: 2px solid white;
    border-radius: 20px;
    color: white;
    padding: 6px 20px;
    width: 100%;
    margin:20px 0;
    cursor: pointer; 
}
.btn-package3{
    background:#00BCFE;
    border: 2px solid white;
    border-radius: 20px;
    color: white;
    padding: 6px 20px;
    width: 100%;
    margin:20px 0;
    cursor: pointer; 
}
.btn-package1:hover{
    background: white;
    color: #E07A5F;
    transition: all 0.8s;
}
.btn-package2:hover{
    background: white;
    color: #06D6A0;
    transition: all 0.5s;
}

.btn-package3:hover{
    background: white;
    color: #00BCFE;
    transition: all 0.5s;
}
.btn-custom{
   margin-left: 10px;
}
.banner{
    margin-top: 30px;
    border:none;
    background-color: #006699;
    width: 100%;
}
.image{
    width: 80%;
    overflow: hidden;
}
.card-banner{
    display: inline-block;
    width: 100%;
    margin-top: 100px;
    margin-left:100px;
    background: #1883B8;
    border-radius: 20px;
    padding: 10px 5px;
    color: white;
    
}
.contentTypeUl{
    list-style-type:none;
    margin: 0 4px;
    padding: 0;
}
.contentTypeLi{
    display: block;
    cursor: pointer;
    
}

.searchCard{
    position: absolute;
    margin-top: -40px;
    z-index: 1;
   
}
.features{
    margin-top: 280px;
    padding: 10px;
}
.featureHeadR{
    margin-top:40px;
    font-weight: bold;
    text-align: right;
    font-style: italic;
}
.featurePR{
    text-align: right;
    margin-top:20px;
    letter-spacing: 1.1px;
    
}
.featureHeadL{
    margin-top:40px;
    font-weight: bold;
    text-align: left;
    font-style: italic;
}
.featurePL{
    text-align: left;
    margin-top:20px;
    letter-spacing: 1.1px;
    
}
.contents{
    background-color: white;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 100px;
    padding-left: 20px;
    cursor: pointer;
}
.contents h6{
    font-weight: bold;
}
.contents1{
    background-color: orange;
}
.contents2{
    background-color: purple;
}
.contents3{
    background-color: seagreen;
}


/*carousal*/
.blog .carousel-indicators {
	left: 0;
	top: auto;
    bottom: -40px;

}

/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
background: #707070;
}


/*package stars */
.package{
    margin-top: 80px;
}
.packageContainer{
    background: #F6F6F6;
    padding: 80px 0;

}
.premiumH{
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    text-align: center;
}
.packageRow{
    margin-top: 50px;
    
}

.mcqCard:hover{
    background: #006699;
    color: white;
    transition: all 0.6s;
}


/* subject css  starts */
.subjectH{
    margin-top: 115px;
}
.subjectH .container{
    padding: 20px;
    border-radius: 10px;
}
.subjectH .container h5{
    font-weight: bold;
}
.subjectButtons{
    margin-top: 10px;
}

.imgDiv{
    /*padding: 0;
    margin: 0;*/
}

/*subject details  starts */

.table{
    text-align: center;
}
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }

  .socialCard{
    display:inline-block;
    height:80px; 
    width:80px;
    margin-top:10px;
    margin-right:20px;
    text-align:center; 
    align-items: center;
      background: #f1faee;
      border: none;
      color: #457b9d;
      box-shadow: 0 0 3px 2px #a8dadc;
  }
  .socialCard i{
      margin-top:20px;
      font-size:40px;
  }

  .socialCard:hover{
      background-color: #006699;
      transition: all 0.5s;
      color: white;
  }
  .cardA{
      width:50%; 
      padding:40px 15px; 
      border-radius:12px; 
      background:#00a896;
      color:white; 
      float:right;

  }
  .cardB{
      width:50%; 
      padding:40px 15px; 
      border-radius:12px; 
      background:#d80032;
      color:white;

  }
  .contactusH{
      font-size:100px; 
      margin-top:140px; 
      padding-bottom:10px;

  }
  .cardL{
      width: 120px;
      margin:20px auto;
  }
  .tProfile{
      display: inline-block;
      height: 60px;
      width: 60px;
      border: 4px solid black;
      border-radius: 80px;
      float: left;
      margin-right: 20px;
  }
  .thumbanil h4{
      font-weight: bold;
      padding-top: 20px;
  }
  .thumbanil img{
      padding-top: 10px;
      width: 100%;
      height: 180px;
  }
  .interaction table{
      margin:10px 5px;
      border-top: 1px solid lightgrey;
      border-bottom: 1px solid lightgrey;
    }
  .interaction table tr td{
      padding: 10px 10px;
  }
  .interaction table tr td i{
      cursor: pointer;
  }
  .interaction table tr td span{
      cursor: pointer;
  }
  .videoPlayer{
      background-color: #edf2f4;
  }
  .playerCard{
      background-color: white;
  }
  .follow{
      margin-top: 60px;
      margin-bottom: 20px;
  }
  .comment-section{
      margin-bottom: 20px;
  }
  .commenters{
      margin-top: 20px;
      margin-bottom: 10px;
  }
  #comments{
      display: block;
  }
  .video-playlist{
      margin-top: 20px;
  }
.playlistTR{
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
  @media only screen and (max-width: 576px){
       .card-banner{
           margin-left:0;
       }  
       .imgH{
           display: none;
       }   
       .cardA{
           width: 100%;
           float: left;
       }
       .cardB{
           width: 100%;
       }
       .socialCard{
           height: 60px;
           width: 60px;
           margin-top:10px;
           margin-right:20px;
           margin-bottom: 20px;
       }
       .socialCard i{
           margin-top: 10px;
       }
       .contactusH{
        font-size:50px; 
        margin-top:40px; 
        padding-bottom:10px;
       }
       .contactImg{
           display: none;
       }
       .contactRight{
           margin-top:30px;
       }
       .cardL{
           width: 90px;
       }
       .interaction table tr td{
           width:140px;
       }
       /* .commenters{
           display: none;

       } */
  }