*,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    
    html {
        font-family: "SF UI Text", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
    }
    
    body {
        /* font-family: "SF UI Text", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; */
        font-family: "Poppins", sans-serif;
        font-size: 18px;
    }
    /* Header start */
    
    header.main-header {
        z-index: 1000;
        height: 5.25em;
        min-height: 5em;
        width: 100%;
        background: transparent;
        display: flex;
        /* position: fixed; */
        align-items: center;
        align-content: center;
        flex-direction: row;
        justify-content: space-between;
        /* padding-left: 6rem;
        padding-right: 6rem; */
    }
    /* header.shahriar-navbar {
        height: 100;
        width: 100%;
        background: transparent;
    } */
/*     
    header #logo {
        width: 100px;
        height: auto;
    }
    
    header #logo img {
        width: 80px;
        height: auto;
    }
    
    header a#logo {
        text-decoration: none;
    }
    
    header #logo h1.logo-text {
        font-family: monospace;
        text-transform: uppercase;
        color: #000000;
        font-size: 22px;
        letter-spacing: 3px;
        margin: 0;
    }
    
    header .menu-toggle {
        position: relative;
        width: 45px;
        height: 45px;
        border-radius: 0%;
        border: 0px solid var(--color-default);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--color-default);
        overflow: hidden;
        padding: 4px;
    }
    
    header .menu-toggle span {
        position: absolute;
        height: 3px;
        width: 17px;
        background-color: var(--color-white);
        transition: .5s;
    }
    
    header .menu-toggle span:nth-child(1) {
        transform: translateY(-10px);
        width: 28px;
    }
    
    header .menu-toggle span:nth-child(2) {
        transform: translateY(10px);
        width: 28px;
    }
    
    header .navber-active span:nth-child(3) {
        transform: translateX(60px);
        background: red;
        transition: .5s;
    }
    
    header .navber-active span:nth-child(2) {
        transform: translateX(0px) rotate(45deg);
        transition: .5s;
    }
    
    header .navber-active span:nth-child(1) {
        transform: translateX(0px) rotate(315deg);
        transition: .7s;
    }

    header .main-nav{}
    header .main-nav ul{}
    header .main-nav ul li{}
    header .main-nav ul li a{
        font-size: 18px;
        padding-right: 20px !important;
        padding-left: 20px !important;
    } */


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.topbar {
    background: #00796b;
    height: 40px;
    font-size: 14px;
    transition: all 0.5s;
    color: #fff;
    padding: 0;
  }
  
  .topbar .contact-info i {
    font-style: normal;
    color: #fff;
    line-height: 0;
  }
  
  .topbar .contact-info i a,
  .topbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
  }
  
  @media (max-width: 575px) {
  
    .topbar .contact-info i a,
    .topbar .contact-info i span {
      font-size: 13px;
    }
  }
  
  .topbar .contact-info i a {
    line-height: 0;
    transition: 0.3s;
  }
  
  .topbar .contact-info i a:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  .topbar .social-links a {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
    transition: 0.3s;
    margin-left: 20px;
  }
  
  .topbar .social-links a:hover {
    color: #fff;
  }
  
  .header {
    transition: all 0.5s;
    z-index: 997;
    height: 120px;
    background-color: var(--background-color);
  }
  

  .header .logo img {
    height: 90%;
    max-height: 90%;
    margin-right: 6px;
    background-color: var(--color-white);
    padding: 10px;
    border-radius: 50%;
  }
  
  .header .logo h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #fff;
    font-family: var(--font-primary);
  }
  
  .header .logo h1 span {
    color: #f96f59;
  }
  
/* Index Page Header
------------------------------*/
.index-page .header {
    --background-color: rgba(255, 255, 255, 0);
  }
  
  /* Index Page Header on Scroll
  ------------------------------*/
  .index-page.scrolled .header {
    --background-color: var(--color-default);
    height: 90px;

  }
   
  /*--------------------------------------------------------------
  # Desktop Navigation
  --------------------------------------------------------------*/
  @media (min-width: 1280px) {
    .navbar {
      padding: 0;
    }
  
    .navbar ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      align-items: center;
    }
  
    .navbar li {
      position: relative;
    }
  
    .navbar>ul>li {
      white-space: nowrap;
      padding: 10px 0 10px 28px;
    }
  
    .navbar a,
    .navbar a:focus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3px;
      font-family: var(--font-secondary);
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      white-space: nowrap;
      transition: 0.3s;
      position: relative;
    }
  
    .navbar a i,
    .navbar a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
    }
  
    .navbar>ul>li>a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -6px;
      left: 0;
      background-color: var(--color-white);
      visibility: hidden;
      width: 0px;
      transition: all 0.3s ease-in-out 0s;
    }
  
    .navbar a:hover:before,
    .navbar li:hover>a:before,
    .navbar .active:before {
      visibility: visible;
      width: 100%;
    }
  
    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
      color: #fff;
    }
  
    .navbar .dropdown ul {
      display: block;
      position: absolute;
      left: 28px;
      top: calc(100% + 30px);
      margin: 0;
      padding: 10px 0;
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      background: var(--color-white);
      box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
      transition: 0.3s;
      border-radius: 4px;
    }
  
    .navbar .dropdown ul li {
      min-width: 200px;
    }
  
    .navbar .dropdown ul a {
      padding: 10px 20px;
      font-size: 15px;
      text-transform: none;
      font-weight: 400;
      color: var(--color-default);
    }
  
    .navbar .dropdown ul a i {
      font-size: 12px;
    }
  
    .navbar .dropdown ul a:hover,
    .navbar .dropdown ul .active:hover,
    .navbar .dropdown ul li:hover>a {
      color: var(--color-default);
    }
  
    .navbar .dropdown:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  
    .navbar .dropdown .dropdown ul {
      top: 0;
      left: calc(100% - 30px);
      visibility: hidden;
    }
  
    .navbar .dropdown .dropdown:hover>ul {
      opacity: 1;
      top: 0;
      left: 100%;
      visibility: visible;
    }
  }
  
  @media (min-width: 1280px) and (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
      left: -90%;
    }
  
    .navbar .dropdown .dropdown:hover>ul {
      left: -100%;
    }
  }
  
  @media (min-width: 1280px) {
  
    .mobile-nav-show,
    .mobile-nav-hide {
      display: none;
    }
  }
  
  /*--------------------------------------------------------------
  # Mobile Navigation
  --------------------------------------------------------------*/
  @media (max-width: 1279px) {
    .navbar {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 400px;
      bottom: 0;
      transition: 0.3s;
      z-index: 9997;
    }
  
    .navbar ul {
      position: absolute;
      inset: 0;
      padding: 50px 0 10px 0;
      margin: 0;
      background: rgba(0, 131, 116, 0.9);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
    }
  
    .navbar a,
    .navbar a:focus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      font-family: var(--font-primary);
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navbar a i,
    .navbar a:focus i {
      font-size: 12px;
      line-height: 0;
      margin-left: 5px;
    }
  
    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
      color: #fff;
    }
  
    .navbar .getstarted,
    .navbar .getstarted:focus {
      background: var(--color-primary);
      padding: 8px 20px;
      border-radius: 4px;
      margin: 15px;
      color: #fff;
    }
  
    .navbar .getstarted:hover,
    .navbar .getstarted:focus:hover {
      color: #fff;
      background: rgba(0, 131, 116, 0.8);
    }
  
    .navbar .dropdown ul,
    .navbar .dropdown .dropdown ul {
      position: static;
      display: none;
      padding: 10px 0;
      margin: 10px 20px;
      transition: all 0.5s ease-in-out;
      background-color: #007466;
      border: 1px solid #006459;
    }
  
    .navbar .dropdown>.dropdown-active,
    .navbar .dropdown .dropdown>.dropdown-active {
      display: block;
    }
  
    .mobile-nav-show {
      color: rgba(255, 255, 255, 0.6);
      font-size: 28px;
      cursor: pointer;
      line-height: 0;
      transition: 0.5s;
      z-index: 9999;
      margin-right: 10px;
    }
  
    .mobile-nav-hide {
      color: #fff;
      font-size: 32px;
      cursor: pointer;
      line-height: 0;
      transition: 0.5s;
      position: fixed;
      right: 20px;
      top: 20px;
      z-index: 9999;
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .navbar {
      right: 0;
    }
  
    .mobile-nav-active .navbar:before {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0, 106, 93, 0.8);
      z-index: 9996;
    }
  }
  

     /*--------------------------------------------------------------
        # Breadcrumbs
        --------------------------------------------------------------*/
        .breadcrumbs .page-header {
            padding: 60px 0 60px 0;
            height: 40vh;
            min-height: 40vh;
            position: relative;
            background-color: var(--color-default);
            
        }

        .breadcrumbs .page-header h2 {
            font-size: 56px;
            font-weight: 500;
            color: #fff;
            font-family: var(--font-secondary);
            text-transform: uppercase;
            letter-spacing: 6px;
            margin-bottom: 20px;
            word-spacing: 6px;
        }
        

        .breadcrumbs .page-header p {
            color: rgba(255, 255, 255, 0.8);
        }

        .breadcrumbs nav {
            background-color: #f6f6f6;
            padding: 20px 0;
        }

        .breadcrumbs nav ol {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-weight: normal;
            color: #222222;
        }

        .breadcrumbs nav ol a {
            color: var(--color-default);
            transition: 0.3s;
            text-decoration: none;
        }

        .breadcrumbs nav ol a:hover {
            text-decoration: underline;
        }

        .breadcrumbs nav ol li+li {
            padding-left: 10px;
        }

        .breadcrumbs nav ol li+li::before {
            display: inline-block;
            padding-right: 10px;
            color: var(--color-support1);
            content: "/";
        }



    /* ------------------------------
            Section Hero Start
    -------------------------------- */
    

    .main-slider{
        height: 60vh;
        width: 100%;
        background: linear-gradient(90deg, #003f5b, #2b4b7d, #5f5195, #98509d, #cc4c91, #f25375, #ff6f4e, #ff9913); /* made at https://learnui.design/tools/gradient-generator.html */
    }

    section#main-hero {
        height: 70vh;
        width: 100%;
        display: flex;
        position: relative;
        
    }   

    section#main-hero:after {
        content: '';
        height: 70vh;
        width: 100%;
        display: flex;
        position: absolute;
        background: #0000009b;
    }
    section#main-hero:before {
        content: '';
        height: 70vh;
        width: 100%;
        display: flex;
        position: absolute;
        background: url(../images/hero/ev4gh-hero-1.jpg);
        background-color: #000000;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        
    }
    
    section#main-hero .hero-inner-content {
        /* margin-top: calc(11.12em + 2em); */
        z-index: 1;
    }
    
    section#main-hero .hero-article {
        /* margin-top: calc(11.12em + 2em); */
        height: 100%;
        display: flex;
        align-content: center;
        flex-direction: column;
        justify-content: center;
        z-index: 2;
    }
    
    section#main-hero .hero-title {
        font-size: 4.4em;
        color: #fff;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }
    
    section#main-hero .hero-title>span {
        font-weight: 900;
        /* -webkit-text-stroke: 1px var(--color-default); */
        -webkit-text-stroke: 3px #fff;
        -webkit-text-fill-color: var(--color-default);
        color: transparent
    }
    
    section#main-hero .hero-title>span>span {
        font-family: cursive;
        font-weight: 900;
        -webkit-text-stroke: 1px var(--color-default);
        -webkit-text-fill-color: var(--color-default);
        color: var(--color-default);
    }
    
    section#main-hero .hero-inner-content .hero-other {
        margin: 10px 0;
    }
    
    section#main-hero .hero-inner-content .hero-other .hero-span {
        font-size: 12px;
        color: #000;
        background: #fff;
        padding: 3px 8px;
        border-radius: 15px;
        margin-right: 8px;
    }
    
    section#main-hero .hero-inner-content .figure {
        height: 100%;
        width: 100%;
        border: 2px solid#fff;
    }


/* ------------------------------
Section 1
-------------------------------- */
.ev4gh-section{
    padding: 0;
}
.ev4gh-section-1{}

.ev4gh-section-1 .ev4gh-text-card{
    display: block;
    width: 600px;
    max-width: 600px;
    margin-left: auto;
    padding: 60px;  
}
.ev4gh-section-1 .ev4gh-text-card.right{
    display: block;
    width: 600px;
    max-width: 600px;
    margin-right: auto !important;
    margin-left: 0 !important;
    padding: 60px;  
}


/* ------------------------------
Section - news-blogs
-------------------------------- */
.ev4gh-section-news-blogs{
    background: var(--color-support1);
    padding-top:60px;
    padding-bottom:60px;

}

.ev4gh-section-news-blogs .section-heading h1 {
    position: relative;
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: #ffffff;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 5px;
   
}

.ev4gh-section-news-blogs .section-heading h1:before {
    width: 28px;
    height: 5px;
    display: block;
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    margin-left: -14px;
    background-color: #fff;
  }

  .ev4gh-section-news-blogs .section-heading h1:after {
    width: 100px;
    height: 1px;
    display: block;
    content: "";
    position: relative;
    margin-top: 20px;
    left: 50%;
    margin-left: -50px;
    background-color: #fff;
  }

  .ev4gh-section-news-blogs .section-heading h1>span {
    font-weight: 900;
    -webkit-text-stroke: 1px #fff;
    -webkit-text-fill-color: transparent;
    color: transparent
}


.ev4gh-section-news-blogs .card{

    padding-top:50px;
    padding-bottom:50px;
    display: block;
    position: relative;
    margin: 20px;
    border-radius: 5px;

}

.ev4gh-section-news-blogs .card:after{
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    left: 8px;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    /* opacity: .2; */
    border-radius: 5px;
    z-index: -1;
}


.ev4gh-section-news-blogs .card .card-title{
    color:var(--color-support1);
    font-size: var(--card-title-default);
    font-weight: 900;;
}

.ev4gh-section-news-blogs .ev4gh-btn-1{
    background: var(--color-support1);
    color:#fff;
    font-size: 18px;
    font-weight: 900;;
}

.ev4gh-section-news-blogs .splide__arrow--prev{
    left: -3em;
}
.ev4gh-section-news-blogs .splide__arrow--next{
    right: -3em;
}

.ev4gh-section-news-blogs .splide__arrow, .site .splide__arrow {
    background: #00000000;
    border: 0;
    color: #e5eeee;
    cursor: pointer;
    position: absolute;
    top: 50%;
}

.ev4gh-section-news-blogs .splide__arrow svg {
    fill: #fff;
    height: 2em;
    width: 2em;
}
.ev4gh-section-news-blogs .splide__pagination{
    bottom: -1rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto;
}

.ev4gh-section-news-blogs .splide__pagination__page {
    background: #95a5a6;
    border: 0;
    border-radius: 0%;
    display: inline-block;
    height: 7px !important;
    width: 20px !important;
    margin: 0 .2rem;
    padding: 0;
    opacity: 1;
    position: relative;
    transition: background-color .2s ease, color .2s ease;   
}

.ev4gh-section-news-blogs .splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1);
}


/* ------------------------------
Section - news-blogs
-------------------------------- */

.ev4gh-section-video{
    background: url(https://img.freepik.com/free-vector/white-abstract-wallpaper_23-2148830026.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.ev4gh-section-video .ev4gh-video-card{
    padding: 60px;
    margin-bottom: 30px;
 
}

.ev4gh-section-video .ev4gh-video-card video{
    width: 100%;
    height: auto;
}

.ev4gh-section-video .ten-anniversary-logo{

    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: auto;
    overflow: hidden;
    display: block;
    
}

/* ------------------------------
Section - latest update
-------------------------------- */

section.ev4gh-section-latest{
    padding: 60px;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card{
    background: var(--color-default);
    padding: 20px;
    transition: 0.3s;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card:hover{
    background: var(--color-default);
    padding: 0px;
    transition: 0.3s;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card img{
    width: 30%;
    height: auto;
    text-align: center;
    margin-bottom: 20px;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card .card-body{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: 1px solid #fff;
    border-radius: 5px;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card .card-title{
    color:#fff;
    font-size: var(--card-title-default);
    font-weight: 900;;
}

.ev4gh-section-latest .card.ev4gh-newsletter-card .card-text{
    background: #fff;
    color: var(--color-default); 
    padding: 5px 7px;
    border-radius: 2px;
    /* border: 2px solid #fff; */
}

.ev4gh-section-latest .card.ev4gh-newsletter-card a.ev4gh-btn-2{
    color:#fff; 
    border: 1px solid #fff;
    border-radius: 15px;
    transition: 0.3s;

}

.ev4gh-section-latest .card.ev4gh-newsletter-card a.ev4gh-btn-2:hover{
    background: #fff;
    color:var(--color-default); 
    border: 1px solid #fff;
    border-radius: 15px;
    transition: 0.3s;
}

/* ------------------------------
Section - testimonials
-------------------------------- */

.ev4gh-section-testimonials{
    background: #1264665e;
    /* height: 800px; */
    min-height: 800px;
   
}

.ev4gh-section-testimonials .section-heading-2{
    background: var(--color-default);
    padding: 20px 30px;
    text-align: center;
    width: 100px;
    height: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: relative;
}

.ev4gh-section-testimonials .section-heading-2 h1 {
    margin: 0;
    transform: rotate(270deg);
}

.ev4gh-section-testimonials .section-heading-2 h1>span {
    font-weight: 900;
    -webkit-text-stroke: 1px #fff;
    -webkit-text-fill-color: transparent;
    color: #fff;
    margin: 0;
}


   .ev4gh-section-testimonials .card{
    padding: 50px 30px 20px;
    background: #116466;
    height: 100%;
    margin-bottom: 30px;
   }

   .ev4gh-section-testimonials .card-body .card-text{
        color: #fff;
        margin: 0;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
   }

.ev4gh-section-testimonials .card .card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    justify-content: center;
    border: 1px solid #727e7f;
  }

.ev4gh-section-testimonials .card .card-body:before{
   
    content: '';
    background-color: #116466;
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    top: 13px;
    left: 65px;
    z-index: 2;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
  }

.ev4gh-section-testimonials .card .card-body:after{
   
    content: '';
    background: url(../images/quote-open.svg);
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    top: 20px;
    left: 80px;
    z-index: 2;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
  }

  

   .ev4gh-section-testimonials .card-image{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: #FFF;
    padding: 2px;
  }

  .ev4gh-section-testimonials .card-image .card-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #116466;
  }

  .ev4gh-section-testimonials .card .image-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 25px 0;
    align-content: center;
    /* justify-content: space-evenly; */

  }

  .ev4gh-section-testimonials .card .name-designation{
    margin-left: 30px;
  }

  .ev4gh-section-testimonials .card .name-designation .name{
    font-size: 18px;
    color: #fff;
    margin: 0;
  }

  .ev4gh-section-testimonials .card .name-designation p{
    font-size: 16px;
    color: #b9b9b9;
    margin: 0;
  }