// $primary: #2196F3;
$primary: #2C2D60;
$background: #f1f1f1;
$white: #ffffff;
$dark: #000000;
$dark-grey: #f4f6f9;
$text-secondary: #585858;
$contact-bg: #525252;


/// GLOBAL COMPONENTS

.sticky-head{
  position:  sticky;
  top:0;
  z-index: 1024;
}
.stickjs{
  transition: top 0.2s ease-in-out;
}

.page-title{
  margin-top:0;
}
.bg-white{
  background: #fff;
}
.bg-dark-grey{
  background: $dark-grey;
}

.bg-primary{
  background: $primary;
}

.bg-contact{
  background: $contact-bg;
}
.section-padding{
  padding: 80px 0px;
}

.section-single-padding{
  padding: 20px 20px;
}

.content-tags a{
 background: $primary;
 padding:5px 10px;
 color: $white;
 margin-right:10px;
 display:inline-block;
 margin-bottom:10px;
 font-size:14px;
 border-radius: 4px;
}
.post, .page {
margin:0;
}
.edu-grid-box{
  display:grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.edu-grid-1{
  grid-template-columns: repeat(1, 1fr);
}

.edu-grid-2{
  grid-template-columns: repeat(2, 1fr);
}
.edu-grid-3{
  grid-template-columns: repeat(3, 1fr);
}
.edu-grid-4{
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 640px){
  .edu-grid-1, .edu-grid-2, .edu-grid-3, .edu-grid-4{
    grid-template-columns: repeat(1, 1fr)!important;
  }
}

@media screen and (max-width: 990px){
  .edu-md-grid-2{
    grid-template-columns: repeat(2, 1fr);
  }
  .edu-md-grid-1{
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 990px){
  .section-padding{
    padding: 80px 20px;
  }
  .section-single-padding{
    padding: 10px 20px;
  }
}
//// END 
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}

p{
  margin-bottom:10px;
}

.has-background-dim p{
  color: $white!important;
}

body{
    background: $background;
    font-family: 'Rubik', sans-serif;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0px;
    width:100%;   
}

.container-fluid{
  width:100%;
}

.category-heading{
  font-size:30px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  position:relative;
  margin-bottom:40px;
  &::after{
    content: '';
    height: 4px;
    width: 60px;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(33, 150, 243, 0.7), #000);
  }
}

// WP Core 

.wp-block-quote{
  border-left: .35em solid $primary;
    margin: 0 0 1.75em;
    padding: 1em!important;
    background:#f3f3f3;
}
.wp-block-tag-cloud a{
  background: $primary;
 padding:5px 10px;
 color: $white;
 margin-right:10px;
 display:inline-block;
 margin-bottom:10px;
 border-radius: 4px;
}
// Navbar

/*
*
* ==========================================
* Navbar
* ==========================================
*
*/

.top-bar{
  background: $primary;
  color: #fff;
  padding:10px 0px; 

  .edu-top-hold{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  span{
    color: $white;
  }
  .edu-info{
    font-size:12px;
    i{
      margin: 0 8px;
    }
    
  }
  .edu-social{
    i{
      margin: 0 8px;
      font-size:15px;
    }
  }
}

.nav-back{
  background: white;
  position:sticky;
  top:0;
  z-index: 7;
  transition: top 0.3s ease-in;
  width:100%;
  box-shadow: 0 3px 8px 0 rgba(32, 33, 36, 0.13);
  
}
.navbar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px;
  align-items: center;
  font-family: 'Rubik';
  

  .navbar-logo{
    align-self: center;
    color:$white;

    img{
      width: 58px;
      // width: 80px;
    }
    .logo-title{
      font-size:26px;
      font-weight: bold;
    }
    .hamburger{
      font-size:26px;
      margin-right:10px;
      cursor:pointer;
      color: black;
      display:none;
    }
  }
  .navbar-search{
    align-self: center;
    .form-cont {
      // background: rgba(255, 255, 255, 0.2);
      -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
      position: relative;
      
  }
  .form-flex{
    display:flex;
    input{
      border-radius: 50px;
    background: #efefef !important;
    padding: 0px 20px;
    height:35px;
    width:300px;
      border:0;
      &:focus{
        border:1px solid#a1cef1;
        outline:none;
      }
    }
    .posi{
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 16px;
    background: transparent !important;
    border: 0;
    }
  }
  }
  .navbar-links{
    .active{
      background: #196caf;
    }
      &>ul{
          display:flex;
          list-style: none;
          &>li{
            position:relative;
            transition: background 0.2s ease-in;
              a{
                  padding:32px 20px;
                  color: $dark;
                  display:inline-block;   
              }
          }
      }
  }
}


.navbar ul ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  position: absolute;
  width:220px;
  top:100%;
  left:-999em;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.navbar ul ul ul {
	left: -999em;
	top: 0;
}

.navbar ul ul li:hover > ul,
.navbar ul ul li.focus > ul {
  left:100%;
}

.navbar ul ul a {
	width: 220px;
}

.navbar ul li:hover > ul,
.navbar ul li.focus > ul {
	left: auto;
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}


.sidenavbar{
  display:none;
  width: 250px;
  transform: translateX(-100%);
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  background:#e2e2e2;
  box-shadow:0px 0px 10px rgba(0, 0, 0, 0.23);
  z-index:9;
  transition: transform 0.2s ease-in;
  visibility: hidden;
  &>ul{
    display: flex;
    flex-direction: column;
    margin-top:20px;
    &>li{
      a{
        padding:15px 20px;
        color: $dark;
        display:inline-block;
        font-size:16px;
        width:100%;
      }
    }
  }
}



.sidenavbar ul ul {

  display: flex;
  flex-direction: column;
  list-style: none;
  position: absolute;
  width:100%;
  top:100%;
  left:-999em;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.sidenavbar ul ul ul {
	left: -999em;
	top: 0;
}

.sidenavbar ul ul li:hover > ul,
.sidenavbar ul ul li.focus > ul {
  left:0;
}

.sidenavbar ul ul a {
	width: 220px;
}

.sidenavbar ul li:hover > ul,
.sidenavbar ul li.focus > ul {
  position: relative;
  left: 0;
  opacity: 1;
  visibility: visible;
}

.side-open{
  transform: translateX(0%);
  visibility: visible;
}

.background-show{
  opacity: 1!important;
  top:0!important;
}

#background-dark{
  position:fixed;
  z-index:8;
  top:100%;
  bottom:0;
  left:0;
  right:0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.logo-flex{
display:flex;

  .site-title-wrapper{
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-left:20px;

    .site-title{
      color: $dark;
      font-size:2em;
      font-weight: 900;
      margin-top:-10px;
      margin-bottom:0px;
    }
    .site-description{
      color: $dark;
      margin-top:0px;
    }
  }
}
  



@media screen and (max-width:990px){
  .top-bar{
    display:none;
  }
  .navbar{
    padding:10px;
    position:relative;
    .navbar-logo{
      .hamburger{
        position:absolute;
        display:block;
        right:10px;
        top: 50%;
        padding:10px;
        background:transparent;
    transform: translateY(-50%);
      }
      .btn-margin{
        margin-right: 45px;
      }
      
    }
    
    .navbar-search{
      display:none;
    }
    .navbar-links{
      display:none;
    }
    .cross-btn{
      display: block;
      padding: 10px;
      background: transparent;
      margin-left: auto;
      margin-right: 20px;
      margin-top: 20px;
      font-size: 24px;
    }
  }

  .logo-flex{
    
    .site-title-wrapper{
      .site-title{
        font-size:25px;      
      }
      .site-description{
        font-size: 14px;
      }
    }
    

    .logo-font-text{
      display: none;
    }
  }
    .sidenavbar{
      display:block;
    }
}

// End Navbar


// Search Bar 
/// SEarch NAv

.edu-search{
  border: 0;
  padding: 10px 10px;
  font-size: 20px;
  background: transparent;
  color: #2c2d60;
}

.search-glam {
  visibility: hidden;
  position: absolute;
  top: 102%;
  max-width: 100%;
  right: 0px;
  left:0px;
  width: 100%;
  transform: translateY(50%);
  opacity:0;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  overflow: hidden;

  .search-query {
      position: relative;

      .search-field {
          width: 100%;
          padding: 10px;
      }

      .fa-times {
          cursor: pointer;
      }
      button{
          position: absolute;
          right: 14px;
          color: #8e8e8e;
          top: 9px;
          padding:5px;
          background:transparent;
          border:0;
          font-size: 18px;
          cursor:pointer;
      }

  }
}

.search-trans {
  visibility: visible;
  transform: translateY(0%);
  opacity:1;
}
@media screen and (max-width: 640px) {
  .search-glam {
      width: 100%;
  }
  .post-margin-cust{
      margin-bottom:10px;
  }
}
// Header Title
.header-articles-title {
    color: #000;
    overflow: hidden;
    font-size: 24px;
    margin: 10px 0px 20px 0px;
    text-transform: uppercase;
    border-bottom: solid 3px #b0d7f7;
    padding-bottom: 4px;
}

//table

table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}



table td, table th {
  border: 1px solid #e1e1e1;
  padding: 5px 10px;
}

th {
  font-weight: bold;
  border: 1px solid #CCC;
  padding: 5px 10px;
  text-align: left;
}


//quick timeline

tbody tr td:first-child {
  background: rgba(193, 193, 193, 0.1);
}




// Bread Crumb
.breadcrumb{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  .current-link{
    margin-left:10px;
  }
  a{
    font-size:14px;
    color:$primary;
    margin-right:30px;
    position:relative;
    transition: color 0.2s ease-in;
    &:hover{
      color: #1787bd;
    }
    &::after{
      content:'\f285';
      position:absolute;
      font-family: bootstrap-icons !important;;
      right: -25px;
    top: -1px;
      
    }
  }
}


///Related Posts

.related-container {
  position: relative;
  overflow: hidden;
  margin-bottom:20px;
  &:hover{
      img{
          transform: scale(1.2);
      }
  }
  img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
    display: block;
  }
  .imgbox{
    width:100%;
    height:130px;
    overflow: hidden;
    background: #2c2d60;
} 
}

.flex{
    display:flex;
}

.related-container .left-width{
    width:40%;
}
.related-container .right-width{
  width:60%!important;
}

.related-container .related-desc {
  width: 100%;
  bottom: 0px;
  padding: 0px 15px;
  z-index: 2;
}

.related-container .related-desc small{
  font-family: 'Merriweather Sans', sans-serif;
  font-style: italic;  
  color: $text-secondary;
}


.related-container .related-desc h2 {
  font-size: 16px;
  margin-bottom: 5px;
  line-height: 1.5;
  font-weight: 600;
  color: $dark;
}

.related-container .related-desc a {
  color: $dark;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  text-decoration: none;
}

.related-container .related-desc i {
  margin-right:8px;
}

.related-container .related-desc a:hover {
  color: #e2e2e2;
}

//Sticky 
.sticky-flex-cont{
  display: flex; height:100%;
}

.sticky-flex-in{
  align-self: flex-end; position:sticky;bottom:20px;
}



// Image Header
.header-image{
  position:relative;
}
.img-head-container {
  position: relative;
  height: 80vh;

  &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.3);
  }

  img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
  }

  .head-info {
      z-index: 5;
      height: 100%;
      display: flex;
      max-width: 700px;
      justify-content: center;
      flex-direction: column;
      margin-left: 80px;
      margin-right: 80px;

      h2 {
          color: white;
          font-size: 50px;
          z-index: 2;
          margin: 0;
          font-weight: bold;
      }

      p {
          color: #ffffff;
          z-index: 2;
          font-size: 16px;
          margin: 20px 0px;
      }

      button {
          background: #c29023;
          padding: 10px 10px;
          color: white;
          border: 0;
          z-index: 2;
          max-width: 150px;
          border-radius: 20px;
      }
  }
  .btn-holder{
    z-index:2;
  }

}

@media screen and (max-width: 640px){
  .img-head-container{
    height: 400px;
    .head-info {
      margin-left: 20px;
  
      h2 {
          color: white;
          font-size: 25px;
      }
  
  }
  }

}


// Header Cards
.header-cards{
  grid-column-gap: 30px;
  max-width:1200px;
  margin: 0 auto;
  position:relative;
  margin-top:-120px;
  
}

.head-card{
  padding:40px;
  background: #fff;
  text-align: center;
  border-radius: 8px;
  border-bottom: 3px solid $primary;
  transition: transform 0.2s ease-in-out;
  cursor:pointer;
  &:hover{
    transform: translateY(-20px);
  }

  i{
    font-size:28px;
    margin-bottom:20px;
  }
  h2{
    font-size:24px;
    text-transform: capitalize;
    margin-bottom:20px;
  }
  p{
    font-size:14px;
    line-height: 1.6;
  }
}

// Header Cards 2 

.header-cards-2{
  grid-column-gap: 0px;
  max-width:1200px;
  width:100%;
  margin: 0 auto;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
}

.head-card-2{
  padding:15px;
  background: rgba(0, 0, 0, 0.38);
  text-align: center;
  border: 1px solid #888888;
  transition: transform 0.2s ease-in-out;
  color: $white;
  cursor:pointer;
  // &:hover{
  //   transform: translateY(-20px);
  // }

  i{
    font-size:28px;
    margin-bottom:20px;
  }
  h2{
    font-size:18px;
    text-transform: capitalize;
    margin-bottom:20px;
  }
  p{
    font-size:12px;
    line-height: 1.6;
  }
}


.head-card-2:nth-child(2){
  border-left: 0px;
  border-right: 0px;
}

@media screen and (max-width: 640px){
  
  .header-cards-2{
    position:relative;
    grid-row-gap:0px!important;
  }
  .head-card-2{
    background: rgba(0, 0, 0, 0.83);
  }


}

// End Header Cards 2
// Introduction

.intro-grid{
  display: grid;
  grid-column-gap: 40px;

  .intro-info{
    span{
      color: $primary;
      font-size:15px;
    }
    h2{
      font-size:35px;
    text-transform: capitalize;
    margin-bottom:20px;
    margin-top:10px;
    }
    p{
      font-size:14px;
      line-height: 1.6;
      color: #4e4e4e;
    }
  }
  .intro-image{
    img{
      width:100%;
      object-fit: cover;
      display: block;
    }
    
  }
}

.read-more-btn {
  background: #2196F3;
  padding: 10px 20px;
  border-radius: 4px;
  color: white!important;
  font-size: 14px;
  display: inline-block;
  margin: 15px 0px;
}




/// Grid BOx 

.howbook-grid-box {
  margin-top:30px;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.card-box {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  position:relative;
  font-size:12px;
  flex-direction: column;
  transition: all 0.2s ease-in;
  box-shadow: 0 1px 8px #0a0a0a17;
  

  &:hover{
    transform: translateY(-10px);
    box-shadow: 0 15px 30px #0a0a0a1f;
  }
}

// .card-box:hover .image-section img {
//   transform: scale(1.1);
// }



.image-section {
  height: 250px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: $primary;
}

.image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.content-categories{
  margin-top:15px;
}

.card-category{
  background: $primary;
  color: $white!important;
  padding:10px 20px;
  position:absolute;
  top:10px;
  z-index:2;
  left:10px;
  border-radius: 8px;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}

.card-category:hover{
  background: $white;
  color: $dark!important;
}

.card-category-single{
  background: $primary;
  color: $white!important;
  padding:5px 15px;
  margin-top:8px;
  margin-right:10px;
  display: inline-block;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid $primary;
  transition: background 0.2s ease-in, color 0.2s ease-in;
}

.card-category-single:hover{
  background: $white;
  color: $dark!important;
}

.desc-section {
  background: #fff;
  color: #000;
  padding: 20px;
  position: relative;
}

.desc-section h3 {
  margin-top: 15px;
  color: #000;
  margin-bottom: 10px;
  font-size: 18px;
}

.desc-section p {
  margin-bottom: 0;
}

.s-border {
  height: 2px;
  background: #808080;
  width: 100%;
}

.author {
  
  span {
    color: $primary;
    font-size: 12px;
  }
  i{
    margin-right:8px;
  }
}


// View Heading 
.view-heading{
  display:flex;
  justify-content: space-between;
  align-items: center;
  position:relative;

  &::after{
    content: '';
    position:absolute;
    bottom:-10px;left:0;
    height:4px;
    width:50px;
    background: $primary
  }
  h2{

  }

  span {
    color: $primary;
    align-self: center;
    font-size: 14px;
    cursor:pointer;
    i{
      font-size: 10px;
      margin-left:5px;
    }
  }
}


/// GAllery Box 

.gallery-grid{
  margin-top:30px;
}

.gallery-box{
  height: 350px;
  width: 100%;
  position: relative;
  overflow: hidden;
  
  
  &:hover img{
    transform: scale(1.2);
  }
  &:hover .dark-overlay{
    opacity: 1;
  }

  .dark-overlay{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease-in-out;
  }
  

  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  }

}



// Courses 

.courses-grid-box{
  margin-top:30px;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.course-card-box{
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in;
  box-shadow: 0 1px 8px #0a0a0a17;
  &:hover{
    transform: translateY(-10px);
    box-shadow: 0 15px 30px #0a0a0a1f;
  }
  .course-image-section {
    height: 180px;
    width: 100%;
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease-in-out;
    }
  }

  .course-desc-section{  
      background: #fff;
      color: #000;
      padding: 20px;
      position: relative;
    
    h3 {
      margin-top: 0px;
      color: #000;
      margin-bottom: 0px;
      font-size: 18px;
    }
    
    p {
      margin: 15px 0px 0;
      font-size:14px;
      color: #676767;
      display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
    }
  }
}

.course-price{
  border-top:1px solid #e2e2e2;
  padding-top:15px;
  color: $primary;
}


// List View 

.edu-list-box{
  .course-card-box{
    flex-direction: row;
    margin-bottom:25px;
    .course-image-section {
      height: 240px;
      width: 40%;
    }

    .course-desc-section{  
      width: 60%;
      p {
    -webkit-line-clamp: 3;
      }
    }
  }
}


// End Courses


// Contact Form
.contact-section{
  padding: 30px;
  background: #f5f5f5;
}

.contact-box{
  text-align: center;
  h2{
    color: $dark;
  }
  p{
    color: $dark;
    font-size: 14px;
    margin-top: 10px;
  }

}
.contact-form{
  margin: 0 auto;

  .wpcf7-form {
display: flex;
justify-content: center;

  }
  input{
    padding: 10px;
    width: 220px;
    margin-right: 8px;
  }
  .wpcf7-submit{
    background: $primary;
    width:100%;
    color:$white;
    font-family: 'Rubik';
    margin-top: 18px;
    padding:15px;
  }
}
.form-size{

  height: 40px;
    padding: 11px;
}
.send-btn{
  margin:0;
  border:0;
  background: #2196F3;
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  display: inline-block;
  margin: 15px 0px;
}

@media screen and (max-width: 640px){
  .contact-form{
    margin-top:20px;
    .wpcf7-form {
      flex-direction: column;
      
        }
  }
  .form-size {
    margin-bottom: 10px;
    width: 100%;
}
}
// End

// News Notice 

.news-notice-grid{
  display: grid;
  grid-template-columns: 70% 30%;
  grid-column-gap: 20px;
  
}

.main-news-grid{
  margin-top:30px;
  padding: 20px;
  background: $white;
  box-shadow: 0 1px 8px #0a0a0a17;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  .single-news{
    display: flex;
    // background: white;
    // padding: 15px;
    // box-shadow: 0 1px 8px #0a0a0a17;
  }
  .news-date{
    width:30%;
    height:90px;
    background: $primary;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .main-date{
      color: $white;
      font-size:28px;
    }
    span{
      color: $white;
      font-size:12px;
    }

  }
  .news-info{
    width:70%;
    padding-left: 20px;
    
    .news-heading{
      font-size: 16px;
      font-weight: 500;
      line-height:1.4;
      color: $dark;
    }
    p{
      font-size: 14px;
      margin-top:10px;
      margin-bottom:0;
      color: #c0c0c0;
    }

  }
}

.notice-box{
  background: $white;
  margin-top:30px;
  box-shadow: 0 1px 8px #0a0a0a17;
  
  a{
    color: $primary;
  }
  .single-notice{
    display: flex;
    border-bottom: 1px solid #e2e2e2;

    .notice-date{
      width:30%;
      border-right: 1px solid #e2e2e2;
      padding:20px;
      text-align: center;
      
    }
    .notice-info{
      padding:20px 20px;
      width:60%;
    }
    .main-date{
      font-size:24px;
      font-weight: 700;
    }
  }
}

@media screen and (max-width: 990px){
  .news-notice-grid{
    grid-template-columns: 1fr;
  }

  .notice{
    margin-top:40px;
  }
}
// End News Notice
// GLide Arrows 

.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

.glide {
  .glide__arrow {
      position: absolute;
      top: 50%;
    transform: translateY(-50%);
      border: 0;
  }

  .glide__arrow:focus {
      outline: none !important;
  }

  .glide__arrow--left {
      background: $white;
      width: 30px !important;
      height: 30px !important;
      border-radius: 50px;
      color: #000;
      padding-top: 7px;
      padding-left: 8px;
      font-size: 16px;
      left: 13px;
  }

  .glide__arrow--right {
      background: $white;
      width: 30px !important;
      height: 30px !important;
      border-radius: 50px;
      color: #000;
      padding-top: 7px;
      padding-left: 11px;
      font-size: 16px;
      right: 13px;
  }
}


.glide__bullets{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display:none;
}

.glide__bullet{
  cursor: pointer;
  width: 8px;
  margin-right: 5px;
  height: 8px;
  border-radius: 50%;
  background:white;
  display:inline-block;
}

.glide__bullet.glide__bullet--active{
  background:#e2e2e2;
}

@media screen and (max-width: 640px){
  .glide__bullets{
    display: block;
  }
.glide{
  .glide__arrow {
  display:none;
}
  
    
}
}
// END 


// Single Page 
.singlepage-grid{
  display: grid;
  grid-template-columns: 70% 30%;
  grid-column-gap: 20px;
  padding:0px;
}

.singlepage-grid-full{
  grid-template-columns: 100%!important;
  .entry-header{
    text-align: center;
  }
}

.single-page-content{
  border: 1px solid #e2e2e2;
  padding: 30px;
  background: white;
}

.single-page-clean{
  border: 0px!important;
  padding: 0px!important;
  background: transparent!important;
}
.single-title {
  font-weight: bold;
  margin-bottom: 0px;
  margin-top: 20px;
  font-size: 30px;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.sidebar-title{
  margin-bottom:20px;
  font-size:24px;
}

.edu-sidebar{
  .widget{
    background: $white;
    padding:20px;
    margin-bottom:20px;
    border: 1px solid #e2e2e2;
  }
  ul{
    list-style: none;
    margin-bottom:25px;
    li{
      position: relative;
      margin-bottom:8px;
      &:hover{
        &::after{
          left:-13px;
        }
      }
      a{
        color: $dark;
        transition: color 0.2s ease-in;
        &:hover{
          color:rgba(23, 135, 189, 1);
        }
      }
      
      &::after{
        content: '>';
        position: absolute;
        left: -17px;
        top: 0;
        transition: all 0.2s ease-in;
      }
    }

  }
}

// Main Content 
.main-content{
  a{
    text-decoration: underline;
  }
  ul{
    list-style-type: disc;
    margin-left:20px;
    color:#585858;
    li{
      font-size:16px;
      margin-bottom:15px;
    }
  }

  p{
//     padding: 7px 0px;
// margin: 0px;
margin-bottom: 10px;
color:#585858;
font-size: 16px;
line-height: 28px;
  }
  h2{
    font-family: 'Rubik';
    font-size:24px;
    margin-top:20px;
  }
  img{
    width:100%;
  }
}
.postimage{
  text-align: center;
}
.imageSource {
  font-size: 12px;
  color: #333;
  padding: 0px 10px 5px;
  margin: 0px;
  display: block;
  text-align: center;
}
.imageCaption {
  font-size: 12px;
  color: #333;
  padding: 5px 10px;
  margin: 0px;
  display: block;
  text-align: center;
}

.featured-image{
  width:100%;
  object-fit: contain;
  img{
    width:100%;
  }
}



.sticky-sidebar-top{
  position: sticky;
  top:20px;
}

.sticky-sidebar-bottom{
  align-self: flex-end;
  position: sticky;
  bottom:0;
}

.sticky-flex{
  display:flex;
}

.recent-title{
  font-size:16px;
  color: $dark;
}
.recent-meta{
  font-size:12px;
}
//End Main content


@media screen and (max-width: 990px){
  .singlepage-grid{
    grid-template-columns: 1fr; 
  }
  .section-single-padding{
    padding:10px 0px;
  }
  .single-page-content{
    padding: 15px;
  }
  .single-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
}
// End Single Page

// Footer
.primary-footer{
  background:$primary;
  width:100%;
}

.footer-padding{
  padding: 80px 0px 0px 0px
}
.footer-links{
  display: flex;
  background:$primary;
  list-style: none;
  justify-content: center;
  li{
    a{
      padding:24px 20px;
      color: $white;
      display:inline-block;
      
    }
  }
}
.copyright{
  text-align: center;
  color:$white;
  margin-top:40px;
  padding:20px;
  // border-top: 1px solid #757575;
  background: $dark;
  p{
    margin-bottom:0;
  }
}


.footer-widget{
  color: $white;
  .footer-widget-title{
    color: $white;
    font-size: 24px;
    margin-bottom: 25px;
  }

  .footer-widget-para{
    line-height:1.7;
    i{
      margin-right:10px;
    }
  }

  ul{
    color: $white;
    margin-left:0px;
    
    li{
      margin-bottom:15px;
      a{
        color: $white;
        
      }
      &>.sub-menu{
       padding-top:10px; 
      }
    }
    
  }

  .footer-social {
    ul {
    padding-top: 10px;
    margin-left: 0;
      li{
    float: left;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    background: #ffffff;
      a{
        font-size: 20px;
        color: black;
      }
      }
    }
  }
}



@media screen and (max-width: 990px){
  .footer-padding{
    padding: 80px 20px 0px 20px
  }
}


.entry-meta{
  color: #2C2D60;
  margin-bottom:30px;
  a{
    color: $primary;
    transition: color 0.2s ease-in-out;
    &:hover{
      color: #1787bd!important;
    }
  }
  .bi-calendar-check-fill{
    margin-right:8px;
  }
  
  .bi-person-fill, .fa-clone, .bi-tags-fill, .bi-files{
    margin-left: 12px;
    margin-right: 8px;
  }
}
// End Footer


.nav-links{
    display: flex;
    background: #f6f6f6;
    padding: 20px;
    .nav-previous {
      
      flex: 1 0 50%;
      word-break: break-word;
      cursor: pointer;
      a{
        color:$dark;
        &:hover{
          color:#1787bd;
        }
      }
      &::before {
        content: "<";
        margin-right:10px;
    }
  }
  .nav-next{
    text-align: end;
    flex: 1 0 50%;
    word-break: break-word;
    cursor: pointer;
    a{
      color:$dark;

      &:hover{
        color:#1787bd;
      }
    }
    &::after {
      content: ">";
      margin-left:10px;
  }
  }
}

@media screen and (max-width: 640px){
 .nav-links {
    flex-wrap: wrap;
    padding: 0;
    .nav-previous{
      flex: 100%;
      border-bottom: 1px solid #ccc;
      padding: 20px;
      text-align: center;
    }
    .nav-next{
    flex: 100%;
    text-align: center;
    padding: 20px;
    }
}


}

// Search content List Box
.course-list-box{
  border-bottom: 1px solid #c5c5c5;
  .course-list-desc{
    padding-bottom:20px; 
    margin-top:10px;
  }
  .post-thumbnail{
    margin-bottom:10px;
    margin-top:20px;
    display: block;
  }

  .entry-title{
    margin-bottom:5px;
    a{
      color: $dark;
    }
  }
  .entry-meta{
    margin-bottom: 15px; 
  }
  .entry-summary{
    margin-top:10px;
  }
}

.search-form{
position: relative;
}
.search-field {
  width: 100%;
  height: 45px;
  padding: 0 10px !important;
}

.search-submit {
  position: absolute;
  right: 0;
  top: 0;
  height: 45px;
  background: $primary!important;
  color: #ffffff !important;
  border: 0 !important;
}

.entry-content{
  ul{
    margin-left:20px;
  }
  ol{
    margin-left: 20px;
  }
  
}

// Comment 

//// COmments 
.comments-link{
  margin-right:10px;
}

.comment-form {
margin-bottom: 30px;
position: relative;
}

#comments p.comment-notes {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
  color: #000;
  margin-top:20px;
margin-bottom: 20px;
text-align: left;
}

#comments p {
margin-bottom: 10px;
}

.comment-form-author {
width: 49%;
float: left;
}

.comment-form-email {
width: 49%;
float: right;
}

.comment-form-url,
.comment-form-website {
clear: both;
}

.comment-form-author,
.comment-form-email,
.comment-form-website,
.comment-form-comment,
.comment-form-url {
margin: 0 0 15px;
}

.comment-form input,
.comment-form textarea {
border-radius: 4px;
}

.comment-form input {
  background: #f6f6f6;
width: 100%;
padding: 8px 10px;
font-size: 14px;
}

.comment-form textarea {
  width: 100%;
  padding:10px;
  background: #f6f6f6;
}

.comment-form label {
display: block;
margin-bottom: 5px;
font-size: 12px;
color: #637381;
text-transform: uppercase;
}

.comment-form-cookies-consent input {
width: 10%;
float: left;
text-align: left;
}

.comment-form-cookies-consent label {
width: 90%;
float: right;
text-align: left;
}

.page-title{
  margin-top:0;
}
.comment.depth-1 {
  border: 1px solid #cccccc;
  // padding: 0px 20px 10px 20px;
}
.comment .children{
  padding-left:1.9em;
  margin-left:0;
  list-style:none;
  background: #f1f1f1;
}
.comment-body{
  // margin-bottom:10px;
  padding:0 20px 20px 20px;
}
.comment-list{
  margin-top:20px;
  margin-left:0;
  margin-bottom: 30px;
  list-style: none;
  .comment-author{
      display:flex;
      padding-top:25px;
      
      img{
          height: 60px;
          width: 60px;
          object-fit: cover;
          border-radius: 50%;
      }
      .fn{
          align-self: flex-start;
          margin-left:20px;
          a{
              color: #000;
          }
      }
      .says{
          display: none;
      }
  }
}

.comment-metadata{
  margin-left: 80px;
  margin-top: -38px;
  margin-bottom: 10px;
}

.comment-content, .reply{
  margin-left: 80px;
}
.comment-content a {
  text-decoration: underline!important;
}


.comment-metadata a{
  color: #000;
  font-size:14px;
  transition: color 0.2s ease-in;
  &:hover{
      color: $primary;
  }
}

@media screen and (max-width: 640px){
  .comments-area .children{
      padding-left:4px;
  } 
}

.form-submit .submit {
	padding: 15px 30px;
    border: 0;
    background: $primary;
	color: $white;
	margin-top: 15px;
	margin-bottom: 15px;
}

// Pagination 
.pagination{
  .nav-links {
    text-align: center;
    display: block;
    background: transparent;
    a{
        color: $white;
        &:hover{
            color: $white;
        }
    }
  
    .page-numbers {
        background: $primary;
        color: #fff;
        padding: 10px 15px;
        display: inline-block;
        border-radius: 4px;
        margin-bottom: 30px;
        opacity: 0.6;
        margin-right:6px;
    }
  
    .current {
        opacity: 1;
    }
  }
}

.page-links {
  text-align: center;
  display: block;
  background: transparent;
  a{
      color: $white;
      &:hover{
          color: $white;
      }
  }

  .post-page-numbers {
      background: $primary;
      color: #fff;
      padding: 10px 15px;
      display: inline-block;
      border-radius: 4px;
      margin-bottom: 30px;
      opacity: 0.6;
      margin-right:6px;
  }

  .current {
      opacity: 1;
  }
}


.wp-block-media-text a, .widget_text a, .widget_block a {
  text-decoration: underline!important;
}