html, body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  font-family: 'Poppins', sans-serif !important;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


#myDiv {
  display: none;
  text-align: center;}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: #6f90AF;
    background-color: white;
    border: var(--bs-border-width) solid rgb(241, 238, 238);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.navbar{
  background-color: rgb(48, 54, 85);
  height: 140px;
  width: 100%;
}
.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
  background: rgb(48, 54, 85);
}
.container-fluid{
  background-color: #303655;
  
}

.active ,a:hover ,.dropdown-menu a:hover{
  background: #6f90AF;
  transition: 1s;
  border-radius: 3px;
}

#navimg{
  height: 8vh;
  }

.navbar .nav-item .nav-link,
.navbar .dropdown-menu *{
  color: white;
  font-size: 18px;
  font-weight: 500;
  padding: 21x 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
.navbar .dropdown-menu{
  background-color: #303655;
}

/* FOOTER */

footer{
  
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom:0%;
}

.map{
    text-align: left;
  }
  
  .Foot{
    background: #303655;
    color: #BFCBCE;
    padding-left: 5%; 
   }
   .notice{
    color: white;
    font-weight: 800;
   }
   .notice1{
    color: black;
    font-weight: 800;
   }
  .Fhead{
    text-align: left;
  }
  .colon{
    color: #fff;
  }
  .social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: white;
    margin-right: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    transition: all 0.5s ease;
  }
  #fb{
    color: rgb(0, 102, 255);
  }
  #wa{
    color: green;
  }
  #yt{
    color: red;
  }
  #li{
    color: blue;
  }
  .social-links a:hover{
    color: #24262b;
    background-color: #6f90AF;
  }

  a{
    text-decoration: double;
  }
  
  .rights{
    font-weight: 400;
    font-size:xx-small;
    text-align: center;
  }
  
  .flinks{
    text-align: center;
    padding-top: 5px;
    width:180px;
    height: 60px;
    border: white;
    border-radius: 10px;
    background: whitesmoke;
    color: black;
  }
  .flinks:hover{
    background: #6f90AF;
    color: white;
    font-weight: 400;
  }

 .flinks{
    text-align: center;
    padding-top: 5px;
    width:180px;
    height: 60px;
    border: white;
    border-radius: 10px;
    background: whitesmoke;
    color: black;
  }
  .flinks:hover{
    background: #6f90AF;
    color: white;
    font-weight: 400;
  }

  a:hover{
    color: white;
  }

  .links{
    display: contents;
    text-align: left;
    padding-top: 5px;
  }
  #link{  
    text-align: left;
  }
  
  .Fdetails{
    text-align: left;
  }


  /* Banner */

  .sec-0{
    padding-top: 145px;
    margin-bottom: 5px;
  }
  .sec-0 img{
    width: 65%;
    align-content:center;
    margin: auto;
    display:block;
  }


/*Section 01*/


.sec-1{
  background-color: #6f90AF ;
  padding-left: 2%; 
}
.sec-1 .txt-1{
  font-size: 12px;
  color: #000;
  font-weight: 700;
  text-align: center;
}
.sec-1 img{
  width: 180px;
  height: 180px;
  padding: 5px;
  margin: auto;
  display: block;
  object-fit: cover;
  border-radius: 80%;
  border: 4px solid #6f90AF;
}
.sec-1 .txt-2{
  color: black;
  font-size: 11px;
  text-align: center;
}
.sec-1 .txt-2 a:hover{
  color: #000;
}
.sec-1 .course-card{
  display: block;
}
.sec-1 .swiper-button-prev{
  color: #fff;
  left: -80px;
}
.sec-1 .swiper-button-next{
  color: #fff;
  right: -80px;
}
.sec-1 .swiper-pagination{
bottom: -40px;
}
.swiper-slide{
  scroll-snap-align: start;
  width: 300px;;
  height: 280px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 5px;
  padding-top: 5px;
  flex-direction: column;
  border-radius: 8px;
}
:root{
  --swiper-theme-color:#fff;
}
.course-card .img{
  background: white;
  height: 180px;
  width: 180px;
  align-items: center;
  border-radius: 80%;
  margin: auto;
}

/*Section 02*/
.sec-2{
  color: #29325e;
   display: inline-block;
  background: white;
  text-align: center;

}
.fcard {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color: whitesmoke;
  transition: 0.3s;
  justify-content: center;
}
.cimg img{
   width: 50%;
  height: auto;
   padding-top: 5%;
  padding-bottom: 5%;
}
.fcard:hover {
  box-shadow: 0 8px 16px 0 rgb(110, 144, 175);
}
.fcontainer {
  padding: 2px 16px;
  text-align: center;
}


/*Section 03*/

.sec-3{
  background:#2d5b87;
  text-align: center;
}

.hed-23{
  color: White;
  font-weight: 600;
}

        /*NOTICES*/

        .scrolling-text, .scrolling-text a {
          animation: scrollBoth 20s linear infinite;
          font-weight:bolder;
          color: white;
	
        }
      
        @keyframes scrollBoth {
          0%, 100% {
            transform: translateX(100%);
          }
          50% {
            transform: translateX(-100%);
          }
        }

/*About US*/


.vismis{
  padding-top: 140px;
  text-align: center;
  margin-bottom: -40;
  padding-bottom: 0;
  font-weight: 400;
  background: silver;
  color: #303655;
}



/*Gallery*/



.Gallery{
  padding-top: 140px;
}


button{ 
  bottom: 2%;
  flex-direction: row;
}
h4{
  text-align: center;
}
.gallery{
  padding-top: 140px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: capitalize;
  transition:all .2s cubic-bezier(0.34,1.12,0.68,1.31);
  min-height: 100vh;
  background: #eee;
  padding-bottom: 100px;
}
.gallery .controls{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0;
  list-style: none;
}
.gallery .controls .buttons{
  height: 40px;
  width: 140px;
  background: #fff;
  color: #666;
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
  margin: 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.gallery .controls .buttons.active{
  background: #6f90AF;
  color: #fff;
}
.gallery .image-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.gallery .image-container .image {
  height: 250px;
  width: 350px;
  overflow: hidden;
  border: 15px solid #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  margin: 20px;
}
.gallery .image-container .image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.gallery .image-container .image :hover img{
  transform: scale(1.4);
}



/*Contact Us*/
#contactcard{
  padding-top: 140px;
}
.cimg1 img{
  width: 200px;
  height: auto;
  padding-top: 5%;
  padding-bottom: 5%;  
}

.Contact{
  padding-top: 140px;
  padding-left: 25px;
  padding-right: 25px;
  overflow-x: scroll;
}

table{
  border: #24262b;
  align-items: center;
  padding-right: 5%;
}
.contact2{
  text-align: center;
}
.text-wrap {
  white-space: normal !important;
  
}

/*Courses*/
.Sec-6{
  padding-left: 5%;
}

.img1{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0px;
  width: 250px;
  align-items: center;
  }

.Sec-6 .offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: white;
  outline: 0;
  font-weight: 700;
  opacity: 0.9;
  }
.Sec-6 .offcanvas-title{
  color: #000;
}
.Sec-6 .offcanvas a{
  color: #BFCBCE;
  padding-left: 5%;
  font-weight: 700;
}
.Sec-7 {
  padding-left: 5%;
  padding-right: 5%;
}

.notice a{
	color:white;
}