@import url("https://fonts.googleapis.com/css?family=Acme|Lobster|Patua+One|Rubik|Sniglet");
* {
  box-sizing: border-box;
}

header,
section {
  overflow-x: hidden;
}

:root {
  --Sniglet-font: "Sniglet", cursive;
  --Rubik: "Rubik", cursive;
  --Patua: "Patua One", cursive;
  --Lobster: "lobster", cursive;
  --light-black: #2e2c2caf;
  --bggradient: linear-gradient(to bottom, #dd2476, #ff512f);
  --light-gray: rgba(255, 255, 255, 0.877);
}

header a {
  font-family: var(--Sniglet-font);
  font-size: 0.9em;
  color: whitesmoke;
}

header, footer {
  background: #dd2476;
  /* fallback for old browsers */
  background: var(--bggradient);
}

header .container-fluid .navbar-nav a{
 font-size: 15px;
}

header .container-fluid .navbar-nav .login{
 color: #dddddd;
 background: #dd2476;
 border-radius: 15px;
 border: 2px solid #dddddd;
}

header .container-fluid .navbar-nav .login:hover{
  color: #000000;
  background: #dddddd;
}

header .container-fluid .navbar-nav .register{
 color: #dddddd;
 background: rgb(160,0,251);
background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
 border-radius: 15px;
 border: none;
}

header .container-fluid .navbar-nav a:hover ,header .container-fluid .navbar .navbar-brand:hover{
 color: #dddddd;
}

header .container-fluid .navbar-nav .nav-item{
  padding: 20px;
}
header .container .row .col-md-7{
  padding: 15px 10px 10px 15px;
}
header .container .row .col-md-7 button{
background: rgb(160,0,251);
background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
color: #dddddd;
border-radius: 15px;
border: none;
padding: 10px;
}

header .container .row .col-md-7 h1{
font-size: 60px;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

header .container #carouselExampleCaptions .carousel-inner .carousel-item .row .col-md-7 .heading p{
font-size: 18px;
padding: 20px;

}

header .container #carouselExampleCaptions .carousel-inner .carousel-item .row .col-md-5 img{
  width: 100%;
}

header .container .row .col-md-5{
  padding: 15px 10px 10px 15px;
  height: 700px;

}


header .container #carouselExampleCaptions .carousel-indicators li{ 
  margin-top: -110px;
}




/*Log in*/

header .container .row .col-md-7 .log_heading .jmb{
  background: #ffffff;
  border-radius: 23px;
}

header .container .row .col-md-7 .log_heading .jmb h4{
  color:rgb(160,0,251);
}

header .container .row .col-md-7 .log_heading .jmb form input{
  border-radius: 18px;
  border: none;
  border: 1px solid #dddddd;
}

header .container .row .col-md-7 .log_heading .jmb form button:focus{
   outline: 0;
  box-shadow: 0 0 0 0.2rem #ffffff;
  border: none;

}

header .container .row .col-md-7 .log_heading .jmb form .form-check-label{
  color: #625E5E;
  font-weight: bold;
}

header .container .row .col-md-7 .log_heading .jmb form input:focus,header .container .row .col-md-7 .log_heading .jmb form input .focus{
  outline: 0;
  box-shadow: 0 0 0 0.2rem #ffffff;
}











main .jumbotron{
  border-radius: 20px;
  position: relative;
  top: -80px;
  z-index: 1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

main .container .jumbotron h1{
  font-size: 40px;
  padding: 15px;

}
main .container .jumbotron .row .col-md-6 li i{
  padding: 10px;
  color:#dddddd;
  background: #dd2476;
  border-radius: 15px;
}
main .container .jumbotron .row .col-md-6 li{
list-style: none;
 padding: 5px;
  font-size: 18px;
  font-weight: bold;
}

main .container .jumbotron .enroll{
  background:#dd2476;
  color: #dddddd;
  border-radius: 30px;
}
main .container .jumbotron .enroll h4{
  font-size: 18px;
}

main .container .jumbotron .enroll h4 button{
  color: #dddddd;
  background: rgb(160,0,251);
  background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
  border-radius: 15px;
  padding: 5px;
  border: none;
}

main .section1 .container h6{
 font-weight: bold;
 font-size: 40px;
 padding: 30px;
}

main .section1  .jumbotron .container img{
  width: 415px;
}


main .section1  .jumbotron .container .notice{
    color: #dddddd;
  background: rgb(160,0,251);
  background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
  border-radius: 15px;
  padding: 10px;
  margin: 10px;
}
main .section1  .jumbotron .container .details div{
  border-radius: 22px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
main .section1  .jumbotron .container .details div p{
  font-size: 14px;
}
main .section1  .jumbotron .container .details div i,main .section2 .tab-content .row .col-md-3 .card .card-body i{
  padding: 20px;
  background: #dd2476;
  border-radius: 40px;
  color: #dddddd;
  font-size: 15px;
}

main .section1  .jumbotron .container .details i{
  border-radius: 20px;
}
main .section1 .col-md-6 .container .row .col-md-6 i{
color:#EE340C ;
}

main .section1 .col-md-6 .container .row .col-md-6 p ,main .section1 .col-md-6 .container .row .col-md-12 p{
  font-size: 15px;
}


/*  Section 2 */


.section2{
  background: #E4F5FF ;
}


main .section2 .container .card ul li .active{
  color:#dd2476;
  font-weight: bold;
  font-size: 15px;
  border-bottom: 5px solid  rgb(160,0,251);
}

main .section2 .container .card ul li a{
  color:#989B9C;
  font-size: 15px;
  display: inline-block;
}
main .section2 .tab-content .row .col-md-3 .card{
  padding: 10px;
  width: 16rem;
  height: 18rem;
  border: none;
  border-radius: 10px;

}

 main .section2 .tab-content .row .col-md-6 .card{
  padding: 10px;
  border: none;
  border-radius: 10px;
 }

main .section2 .tab-content .row .col-md-3 .card h5{
  font-size: 16px;

}




/*Section 3*/


main .section3 .jumbotron .container img {
    width: 415px;
}

main .section3 .jumbotron .container .notice {
    color: #dddddd;
    background: rgb(160,0,251);
background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
main .section3 .container .row .col-md-6 .container .scroll{
  width: 550px;
  height: 400px;
  overflow-x: hidden;
}

/*Section 4*/



.section4{
  background: #dd2476;
}

.section4 .container h2{
  color: #dddddd;
}

main .section4 .container .row .col-md-6 .element{
  display: flex;
  justify-content: center;
  align-items: center;

}
main .section4 .container .row .col-md-6 img{
    width: 100%!important;
    height: unset!important;
    position: unset!important;
    object-fit: unset!important;
    top: unset!important;
    left: unset!important;
}

main .section4 .container .row .col-md-6 .accordion .card .card-header .btn:focus, main .section4 .container .row .col-md-6 .accordion .card .card-header .btn .focus{
  outline: 0;
  box-shadow: 0 0 0 0.2rem #cf005d;
  text-decoration: none;
}

main .section4 .container .row .col-md-6 .accordion .card .card-header button{
color: #dddddd;
  font-weight: bold;
  font-size: 20px;
}

main .section4 .container .row .col-md-6 .accordion .card .card-header button:hover{
  text-decoration: none;

}


main .section4 .container .row .col-md-6 .accordion .card .card-header{
  background: #cf005d;

}

main .section4 .container .row .col-md-6 .accordion .card #collapseOne,
main .section4 .container .row .col-md-6 .accordion .card #collapseTwo,
main .section4 .container .row .col-md-6 .accordion .card #collapseThree,
main .section4 .container .row .col-md-6 .accordion .card #collapseFour,
main .section4 .container .row .col-md-6 .accordion .card #collapseFive,
main .section4 .container .row .col-md-6 .accordion .card #collapseSix,
main .section4 .container .row .col-md-6 .accordion .card #collapseSeven,
main .section4 .container .row .col-md-6 .accordion .card #collapseEight,
main .section4 .container .row .col-md-6 .accordion .card #collapseNine,
main .section4 .container .row .col-md-6 .accordion .card #collapseTen,
main .section4 .container .row .col-md-6 .accordion .card #collapseEleven,
main .section4 .container .row .col-md-6 .accordion .card #collapseTewelve,
main .section4 .container .row .col-md-6 .accordion .card #collapseThirteen,
main .section4 .container .row .col-md-6 .accordion .card #collapseFourteen,
main .section4 .container .row .col-md-6 .accordion .card #collapseFifteen,
main .section4 .container .row .col-md-6 .accordion .card #collapseSixteen
{
  background: #c41664;
  color: #dddddd;
}




/*  Section 5 */


.show-read-more .more-text{
  display: none;
}

#newcarouselExampleCaptions .carousel-indicators li{
  background: #2484FF;
  border-radius: 50%;
  width: 15px;

}

.section5{
  text-align: center;
}

.section5 .btn{
  background: rgb(160,0,251);
  background: linear-gradient(90deg, rgba(160,0,251,1) 20%, rgba(249,3,144,1) 100%);
  color: #dddddd;
  border-radius: 15px;
  border: none;
  padding: 10px;
  display: inline-block;
  width: 30%;
}
.sec5-fluid{
  background: #F0F0F0;
}

.section5 .jmb-cmt{
  position: relative;
  top: 5px;
  left: 5px;
  right: 5px;
  width: 95%;
  margin-right: 0 !important;
}

#phonecarouselExampleCaptions{
  display: none;
}

.section5 .sec5-fluid .container h1{
  font-size: 45px;
  font-weight: bold;
}

.section5 .sec5-fluid .container a:focus,.section5 .sec5-fluid .container a .focus{
  outline: 0;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem #ffffff;
}




/* Scroll Bar */


.section3 .scroll::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
  border-radius: 10px;
}
.section3 .scroll::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 10px;

}





/*footer*/

footer .container .row .col-md-4 .address  li{
  padding: 5px;
  list-style: none;
  color: #dddddd;
}
/*footer .container{
  height: 420px;
}*/

footer .container .row .col-md-4 li {
  list-style: none;
  padding: 5px;
}
footer .container .row .col-md-4 li a{
  color: #dddddd;
  font-size: 20px;
  font-weight: bold;
}
footer .container .row .col-md-4 .social i{
padding: 5px;
}
footer .container .row .col-md-4 .address  li i{
  padding: 5px;
}


.sticky {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 10%;
  background: #dd2476;
  z-index: 9999;
  transition: all 1.5s ease;
}

@media screen and (max-width: 577px) {
  .container-fluid .navbar .navbar-toggler-icon{
     color: #dddddd;
    border-radius: 5px;
    border: 2px solid #dddddd;
    padding: 2px;
  }
  main .container .jumbotron .enroll h4{
     font-size:22px ;
   }
  main .container .jumbotron .row .col-md-6 li{
     font-size: 13px;
   }


   /*Section 1*/


  main .section1  .jumbotron .container img{
     width: 356px;
   }
  main .section1  .jumbotron .container .details div{
     display: inline;
   }



   /*Section 2*/



  main .section2 .tab-content .row .col-sm-12 .card{
     width: 28rem;
     padding: 10px;
     margin: 10px;
     text-align: center;
   }

   main .section2 .tab-content .row .col-sm-12 .card .card-body{
    display: inline-block;
   }

   main .section2 .container .card div{
    text-align: center;
   }
   main .section2 .container .card div ul{
    display: inline-block;
   }

   main .section2 .container .card ul li i{
    margin-top: 8px;
   }





   /*Section 3*/



  main .section3 .container h2{
    padding: 40px;
  }
  main .section3 .jumbotron .container img {
    width: 360px;
  }

  main .section3 .container .row .col-md-6 .container .scroll h4{
    font-size: 15px;

  }
  main .section3 .container .row .col-md-6 .container .scroll{
  width: 450px;
  height: 300px;
  overflow-x: hidden;
}



/*Section 4*/


.section4 .container .h2{
  padding: 35px;
}


/*Section 5*/


#newcarouselExampleCaptions{
  display: none;
}
#phonecarouselExampleCaptions{
  display: block;
}

.section5 #phonecarouselExampleCaptions .carousel-indicators li{
  background: #2484FF;
  border-radius: 50%;
  width: 15px;

}

.section5 .btn{
  width: 60%;
}

.section5 .sec5-fluid .container h1{
  font-size: 30px;
  font-weight: bold;
}



  /*Footer*/



  footer .container .row .col-md-4 img{
     padding: 15px;
     width:462px;
   }
  .sticky{
     display: none;
   }

   /*Log in*/
  header .container  .row .logsec{
     padding: 0px;
     margin-bottom: 230px;

   }
  header .container  .row .regsec{
     padding: 0px;
     margin-bottom: 120px;

   }
  header .container  .row .logimg,header .container  .row .regimg{
     display: none;
   }
}