*{margin:0;padding:0;text-decoration:none;list-style: none;}

@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/LatoRegular.eot');
    src: url('../fonts/LatoRegular.eot') format('embedded-opentype'),
         url('../fonts/LatoRegular.woff2') format('woff2'),
         url('../fonts/LatoRegular.woff') format('woff'),
         url('../fonts/LatoRegular.ttf') format('truetype'),
         url('../fonts/LatoRegular.svg#LatoRegular') format('svg');
}

@font-face {
    font-family: 'LatoBold';
    src: url('../fonts/LatoBold.eot');
    src: url('../fonts/LatoBold.eot') format('embedded-opentype'),
         url('../fonts/LatoBold.woff2') format('woff2'),
         url('../fonts/LatoBold.woff') format('woff'),
         url('../fonts/LatoBold.ttf') format('truetype'),
         url('../fonts/LatoBold.svg#LatoBold') format('svg');
}
body{
    font-family: 'LatoRegular';
   font-size:20px;
       color: #101010;
       overflow-x: hidden;
}
a{
  text-decoration: none;
  color: #101010;
}

.nopadding{
  padding: 0;
}
.bgColor, footer {
    background-color: #F0F2F5;
}
.h1boldfont{
   font-family: 'LatoBold';
   font-size:40px
}
.h2boldfont{
  font-family: 'LatoBold';
  font-size:30px
}
.boldfont18{
   font-family: 'LatoBold';
   font-size:20px
}
.regular18{
   font-family: 'LatoRegular';
   font-size:20px
}
.regular16{
   font-family: 'LatoRegular';
   font-size:20px
}
 .banner {
    position: relative;
    background-image: url('../images/bgimg1.jpg');
    background-color: #000;
    padding: 101px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top -298px center;
    overflow: hidden;
}

.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(0 0 0 / 70%) ;/* adjust opacity as needed */
    z-index: 1;
}
.banner-content {
    position: relative;
    z-index: 2;
    color: white; /* optional for better contrast */
}
.topnav {
    background-color: #94c7f9;
    align-items: center;
    justify-content: end;
}
.topnav p {
    font-family: 'LatoBold';
    color: #4F4F4F;
}
.brandlogo, .footerlogo
 {
    max-width: 250px;
}

header{position:relative;width:100%;background:#333;}
.logo{float:left;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}

#cssmenu > ul > li{float:left; margin: 0 2px;border-bottom: 2px solid transparent;}
#cssmenu > ul > li > a{padding:17px;font-size:16px;letter-spacing:1px;text-decoration:none;color:#4F4F4F;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#020aff;}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease; border-bottom: 2px solid #020aff;color: #020aff;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease; padding: 5px 0;}
.boxbg  {
  background-color: #e3e6eb;
    padding: 15px;
    border-radius: 10px;
    height: 100%;
}

#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}

#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#020aff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#f0f2f5;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
.mblsubmenu{
  position: relative;
}

@media screen and (max-width:1000px){
  .mblsubmenu ul li{
  background-color: #e9e9e9 !important;
}
  .menubar{
    position: absolute !important;
        top: 60px;
        left: 0;
        background-color: #f0f2f5;
}
.mblsubmenu  ul{
  width: 94%  !important;
  left: 12px !important;
}
/* .logo{position:absolute;top:0;left: 0;width:100%;float:none} */
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none; padding-left: 0; z-index: 9;}
#cssmenu ul li{width:100%;}
#cssmenu ul li:hover{background:#f0f2f5;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0;font-size: 16px;padding: 10px;}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{padding: 0px 0;} 
#cssmenu ul ul li:hover{background:#f0f2f5 !important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#4F4F4F;;background:none;         font-weight: 700;}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#4F4F4F;}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:99%;margin:0;text-align:left; border: 1px solid #635f5f;}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
/* #cssmenu #head-mobile{display:block;color:#ddd;font-size:12px;font-weight:700} */
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top: 22px;
        right: 20px;
        display: block;
        height: 12px;
        width: 30px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;        top: 13px;
        right: 20px;
        display: block;
        height: 2px;
        width: 30px;
        background: #000;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:30px;background:#000;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#000;width:30px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;height:46px;width:46px;cursor:pointer}

#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#000;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#000}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#000;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}


.boxbg li:before {
      font-family: FontAwesome;
    position: absolute;
    left: -16px;
    color: #2c3e50;
    font-size: 7px;
    top: 12px;
}

.boxbg li:before {
   content:"\f111"; 
}

/* MEGA MENU STYLES */
.mega-parent {
  position: relative;
}

.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #333;
  display: none;
  padding: 20px 0;
  z-index: 999;
}

.mega-parent:hover > .mega-menu {
  display: block;
}

.mega-menu .mega-content {
  max-width: 980px;
  margin: 0 auto;
  color: #fff;
}


.mega-menu ul {
  list-style: disc;
  padding: 0;
}

.mega-menu ul li {
  margin-bottom: 5px;
}

.mega-menu ul li a {
  color: #ddd;
  font-size: 13px;
  text-decoration: none;
}

.mega-menu ul li a:hover {
  color: #fff;
}

        .dropdown-toggle::after {
            display: inline-block;
            margin-left: .255em;
            vertical-align: .255em;
            content: "";
            border-top: .3em solid;
            border-right: .3em solid transparent;
            border-bottom: 0;
            border-left: .3em solid transparent;
        }
    .dropdown:hover>.dropdown-menu, .dropend:hover>.dropdown-menu {
        display: block;
    }

        .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin: 0 auto;
    }
        .dropdown .dropdown-menu {
        display: none;
    }
        .dropdown-menu {
        position: fixed !important;
        left: 0;
        width: 100%;
    }


      .boxbg ul{
        position: static !important;
      } 
      
      .boxbg h3{
        font-size: 20px;
      }
      .boxbg ul li a{
        color: #4F4F4F;
        font-size: 17px;
      }

      header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }

      .imgsize{
        max-width: 180px;
       }
       .nopadding{
        padding: 0px;
       }


        .btn-animation{
            border: none;
            background-color: #94c7f9;
            font-size: 20px;
            padding: 15px;
            width: 200px;
            text-transform: capitalize;
            cursor: pointer;
            transform: all 0.3s;
            position: relative;
        }
        .btn-animation:before{
          content:"";
          position :absolute;
          width:24px;
          height:24px;
          top:-5px;
            left:-5px;
            border-top: 2px solid #0d6efd;
            border-left: 2px solid #0d6efd;
          transition:all 0.25s;
        }
        .btn-animation:hover:before ,.btn-animation:hover:after{
          width:104%;
          height:110%;
        }
        .btn-animation:after{
          content:"";
          position :absolute;
          width:24px;
          height:24px;
          bottom:-5px;
            right:-5px;
          border-bottom:2px solid #0d6efd;
          border-right:2px solid #0d6efd;
          transition:all 0.30s;
        }


           .cbutton {
                display: inline-block;
                padding: 0.75rem 1.25rem;
                border-radius: 10rem;
                color: #000;
                text-transform: uppercase;
                font-size: 1rem;
                letter-spacing: 0.15rem;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
                z-index: 1;
                font-weight: 600;
            }
            .cbutton:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #94c7f9;
                border-radius: 10rem;
                z-index: -2;
            }
            .cbutton:before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0%;
                height: 100%;
                background-color: #010bff;
                transition: all 0.3s;
                border-radius: 10rem;
                z-index: -1;
            }
            .cbutton:hover {
                color: #fff;
            }
            .cbutton:hover:before {
                width: 100%;
            }

            .certificateSwiper .swiper-slide img{
              box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
            } 

            .swiper-pagination-bullet{
              width: 15px;
              height: 15px;
            }
          .firstcertificate{
            background-color: #f5f5f5;
          }
.typecertificate_swiper .swiper-slide{
  background-color:#94c7f9;
  padding: 10px;

}


    
      @media(max-width:767px){
        .brandlogo, .footerlogo {
            max-width: 150px;
        }
        .modal-body{
          padding: 0;
        }
         
      }
      @media(min-width:768px){
        .swiper-button-prev2,
        .swiper-button-next2 {
          display: none !important; 
        }
         
      }
       @media(min-width:992px){
        
                }
       @media(min-width:1200px){

      }
     
       @media(min-width:1400px){

      }
       @media(min-width:1600px){

      }