/*--------------------------------------------------------------
  # General
  --------------------------------------------------------------*/
  @font-face {
    font-family: 'MOHAND';
    src: url(../fonts/MOHAND.TTF) format('truetype');
  }

  .poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }

  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }

  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }

  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }

  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }

  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }

  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }

  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }

  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }

  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }

  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }


  .montserrat {
    font-family: "Montserrat", sans-serif;
  }

  .sans-serif {
    font-family: "Playpen Sans Arabic";
  }

  .Ruqaa{
    font-family: "Ruqaa", sans-serif;
  }

  body {
    font-family: "Montserrat", sans-serif;
    color: #040404;
  }

  a {
    color: #3498db;
    text-decoration: none;
  }

  a:hover {
    color: #5faee3;
    text-decoration: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Montserrat", sans-serif;
  }

  .header-text{
    font-family: "Montserrat", sans-serif;
    color: #0C436A;
    font-size: 40px;
    line-height: 45px;
    margin: 0;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .sub-header-text{
    font-family: "Montserrat", sans-serif;
    color: #0C436A;
    font-size: 14pt;
    font-weight: bold;
  }

  .p-text{
    font-family: "Poppins", sans-serif;
    color: #000;
    font-size: 17px;
    line-height: 24px;
    margin: 0;
    margin-bottom: 20px;
    font-weight: 300;
  }
  .sub-p-text{
    font-family: "Poppins", sans-serif;
    color: #000;
    font-size: 12pt;
    font-weight: 300;
  }
  /* ar */
  .header-text-ar{
    font-family: "Ruqaa", sans-serif;
    color: #0C436A;
    font-size: 40px;
    line-height: 45px;
    margin: 0;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .sub-header-text-ar{
    font-family: "Ruqaa", sans-serif;
    color: #0C436A;
    font-size: 12pt;
    font-weight: bold;
  }

  .p-text-ar{
    font-family: "Playpen Sans Arabic";
    color: #000;
    font-size: 17px;
    line-height: 24px;
    margin: 0;
    margin-bottom: 20px;
    font-weight: 300;
  }
  .sub-p-text-ar{
    font-family: "Playpen Sans Arabic";
    color: #000;
    font-size: 10pt;
    font-weight: 300;
  }

  .msg-text{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
    transition: 0.3s;
    line-height: 1;
    color: #3498db;
    animation-delay: 0.8s;
  }

  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    left: 15px;
    bottom: 15px;
    z-index: 996;
    background: #3498db;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
  }

  .back-to-top i {
    font-size: 28px;
    color: #fff;
    line-height: 0;
  }

  .back-to-top:hover {
    background: #57aae1;
    color: #fff;
  }

  .back-to-top.active {
    visibility: visible;
    opacity: 1;
  }

  /*--------------------------------------------------------------
  # Disable AOS delay on mobile
  --------------------------------------------------------------*/
  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  }

  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  #header {
    position: fixed;
    top: 0;
    font-family: 'Montserrat', sans-serif;
    z-index: 99999;
    transition: all 0.5s;
    padding: 20px 0px 0px 0px;
    background: #fff;
    height: 120px;
    width: 100%;
  }

  #header.header-scrolled {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
  }

  #header .logo h1 {
    font-size: 30px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
  }

  #header .logo h1 a,
  #header .logo h1 a:hover {
    color: #222222;
    text-decoration: none;
  }

  #header .logo img {
    padding: 0;
    margin: 0;
    max-height: 70px;
  }

  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation 
  */
  .navbar {
    padding: 0;
  }
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
      margin-top: 5%;
  }

  .navbar li {
    position: relative;
  }

  .navbar a,
  .navbar a:focus {
    font-family: "montserrat", sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #7f8185;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-right: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #3498db;
  }

  .navbar .getstarted,
  .navbar .getstarted:focus {
    background: #3498db;
    padding: 8px 25px;
    margin-right: 30px;
    border-radius: 50px;
    color: #fff;
  }

  .navbar .getstarted:hover,
  .navbar .getstarted:focus:hover {
    color: #fff;
    background: #4aa3df;
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    right: 30px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    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: 14px;
  }

  .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: #3498db;
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    right: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    right: 100%;
    visibility: visible;
  }

  @media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
      right: -90%;
    }

    .navbar .dropdown .dropdown:hover>ul {
      right: -100%;
    }
  }

  /**
  * Mobile Navigation 
  */
  .mobile-nav-toggle {
    color: #222222;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
  }

  .mobile-nav-toggle.bi-x {
    color: #fff;
  }

  @media (max-width: 991px) {
    .mobile-nav-toggle {
      display: block;
    }

    .navbar ul {
      display: none;
      margin-top: 0;
    }
  }

  .navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9, 9, 9, 0.9);
    transition: 0.3s;
    z-index: 999;
  }

  .navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    left: 15px;
  }

  .navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    padding: 10px 0;
    border-radius: 8px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
  }

  .navbar-mobile a,
  .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #222222;
  }

  .navbar-mobile a:hover,
  .navbar-mobile .active,
  .navbar-mobile li:hover>a {
    color: #3498db;
  }

  .navbar-mobile .getstarted,
  .navbar-mobile .getstarted:focus {
    margin: 15px;
  }

  .navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  }

  .navbar-mobile .dropdown ul li {
    min-width: 200px;
  }

  .navbar-mobile .dropdown ul a {
    padding: 10px 20px;
  }

  .navbar-mobile .dropdown ul a i {
    font-size: 12px;
  }

  .navbar-mobile .dropdown ul a:hover,
  .navbar-mobile .dropdown ul .active:hover,
  .navbar-mobile .dropdown ul li:hover>a {
    color: #3498db;
  }

  .navbar-mobile .dropdown>.dropdown-active {
    display: block;
  }

  
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  #hero {
    width: 100%;
    height: 35rem;
    margin-top: 120px;
  }
  .hero {
    width: 100%;
    height: 35rem;
    margin-top: 120px;
  }

  #hero h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: black;
  }

  #hero h2 {
    color: #484848;
    margin-bottom: 50px;
    font-size: 24px;
  }

  #hero .btn-get-started {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    transition: 0.5s;
    color: #3498db;
    border: 2px solid #3498db;
  }

  #hero .btn-get-started:hover {
    background: #3498db;
    color: #fff;
  }

  #hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
  }

  @media (min-width: 1024px) {
    #hero {
      background-attachment: fixed;
    }
  }

  @media (max-width: 991px) {
    #hero {
      height: 27vh;
    }
      .hero {
      height: 27vh;
    }

    #hero .animated {
      animation: none;
    }
      .hero .animated {
      animation: none;
    }

    #hero .hero-img {
      text-align: center;
    }

    #hero .hero-img img {
      width: 50%;
    }
  }

  @media (max-width: 768px) {
    #hero {
      margin-top: 100px;
    }
      .hero {
      margin-top: 100px;
    }
    
    #hero h1 {
      font-size: 28px;
      line-height: 36px;
    }

    #hero h2 {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 30px;
    }

    #hero .hero-img img {
      width: 70%;
    }
  }

  @media (max-width: 575px) {
    #hero .hero-img img {
      width: 80%;
    }
  }

  @keyframes up-down {
    0% {
      transform: translateY(10px);
    }

    100% {
      transform: translateY(-10px);
    }
  }

  /*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/
  section {
    padding: 60px 0;
    overflow: hidden;
    
  }

  .section-bg {
    background-color: #e8e8e8;
  }

  .section-title {
    text-align: center;
    padding-bottom: 15px;
  }

  .section-title h2 {
    font-family: 'Montserrat';
    color: #0C436A;
    font-size: 40px;
    line-height: 45px;
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    font-weight: bold;
  }



  .section-title p {
    margin: 15px 0 0 0;
    color: #000;
    font-size: 17px;
    line-height: 24px;
    margin: 0;
      margin-bottom: 0px;
    margin-bottom: 20px;
    }

  /*--------------------------------------------------------------
  # Clients
  --------------------------------------------------------------*/
  .clients {
    background: rgba(9, 158, 217, 0.23); /* Transparent blue */
    padding: 0;
    text-align: center;
  }

  .owl-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Adjust as needed */
  }

  .clients img {
    width: 40%;
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 10px 0;
    will-change: transform, filter;
  }

  .owl-carousel .owl-item img {
    width: 40%;
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 10px 0;
    will-change: transform, filter;
  }

  .clients img:hover {
    filter: none;
    transform: scale(1.1);
  }

  @media (prefers-reduced-motion: reduce) {
    .clients img {
      transition: none;
    }
  }

  @media (max-width: 575px) {
    .clients img {
      width: 30%;
    }
    .owl-carousel .owl-item img{
      width: 30%;
    }
    .owl-carousel .item {
      height: 60px;
    }
  }


  /*--------------------------------------------------------------
  # About Us
  --------------------------------------------------------------*/
  .about .content h3 {
    font-weight: 600;
    font-size: 26px;
  }

  .about .content ul {
    list-style: none;
    padding: 0;
  }

  .about .content ul li {
    padding-right: 28px;
    position: relative;
  }

  .about .content ul li+li {
    margin-top: 10px;
  }

  .about .content ul i {
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 20px;
    color: #3498db;
    line-height: 1;
  }

  .about .content p:last-child {
    margin-bottom: 0;
  }

  .about .content .btn-learn-more {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    transition: 0.3s;
    line-height: 1;
    color: #3498db;
    animation-delay: 0.8s;
    margin-top: 6px;
    border: 2px solid #3498db;
  }

  .about .content .btn-learn-more:hover {
    background: #3498db;
    color: #fff;
    text-decoration: none;
  }

  /*--------------------------------------------------------------
  # Counts
  --------------------------------------------------------------*/
  .counts {
    padding-top: 0;
  }

  .counts .content {
    padding: 0;
  }

  .counts .content h3 {
    font-weight: 700;
    font-size: 34px;
    color: #222222;
  }

  .counts .content p {
    margin-bottom: 0;
  }

  .counts .content .count-box {
    padding: 20px 0;
    width: 100%;
  }

  .counts .content .count-box i {
    display: block;
    font-size: 36px;
    color: #3498db;
    float: right;
    line-height: 0;
  }

  .counts .content .count-box span {
    font-size: 36px;
    line-height: 30px;
    display: block;
    font-weight: 700;
    color: #222222;
    margin-right: 50px;
  }

  .counts .content .count-box p {
    padding: 15px 0 0 0;
    margin: 0 50px 0 0;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #484848;
  }

  .counts .content .count-box a {
    font-weight: 600;
    display: block;
    margin-top: 20px;
    color: #484848;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    transition: ease-in-out 0.3s;
  }

  .counts .content .count-box a:hover {
    color: #6f6f6f;
  }

  @media (max-width: 1024px) {
    .counts .image {
      text-align: center;
    }

    .counts .image img {
      max-width: 70%;
    }
  }

  @media (max-width: 667px) {
    .counts .image img {
      max-width: 100%;
    }
  }

  /*--------------------------------------------------------------
  # Services
  --------------------------------------------------------------*/
  .services .icon-box {
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
  }

  .services .icon-box::before {
    content: "";
    position: absolute;
    background: #e1f0fa;
    left: -60px;
    top: -40px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    transition: all 0.3s;
    z-index: -1;
  }

  .services .icon-box:hover::before {
    background: #3498db;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
  }

  .services .icon {
    margin: 0 auto 20px auto;
    padding-top: 10px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: #3498db;
    transition: all 0.3s ease-in-out;
  }

  .services .icon i {
    font-size: 36px;
    line-height: 1;
    color: #fff;
  }

  .services .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .services .title a {
    color: #111;
  }

  .services .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
  }

  .services .icon-box:hover .title a,
  .services .icon-box:hover .description {
    color: #fff;
  }

  .services .icon-box:hover .icon {
    background: #fff;
  }

  .services .icon-box:hover .icon i {
    color: #3498db;
  }

  /*--------------------------------------------------------------
  # More Services
  --------------------------------------------------------------*/
  .more-services {
    padding-top: 20px;
  }

  .more-services .card {
    border: 0;
    padding: 160px 20px 20px 20px;
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .more-services .card-body {
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 30px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    transition: ease-in-out 0.4s;
    border-radius: 5px;
  }

  .more-services .card-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
  }

  .more-services .card-title a {
    color: #222222;
  }

  .more-services .card-text {
    color: #5e5e5e;
  }

  .more-services .read-more a {
    color: #777777;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    transition: 0.4s;
  }

  .more-services .read-more a:hover {
    text-decoration: underline;
  }

  .more-services .card:hover .card-body {
    background: #3498db;
  }

  .more-services .card:hover .read-more a,
  .more-services .card:hover .card-title,
  .more-services .card:hover .card-title a,
  .more-services .card:hover .card-text {
    color: #fff;
  }

  /*--------------------------------------------------------------
  # Features
  --------------------------------------------------------------*/
  .features .icon-box {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f6f6f6;
    transition: ease-in-out 0.3s;
  }

  .features .icon-box i {
    font-size: 32px;
    padding-left: 10px;
    line-height: 1;
  }

  .features .icon-box h3 {
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 16px;
  }

  .features .icon-box h3 a {
    color: #222222;
    transition: ease-in-out 0.3s;
  }

  .features .icon-box h3 a:hover {
    color: #3498db;
  }

  .features .icon-box:hover {
    background: #eef7fc;
  }

  /*--------------------------------------------------------------
  # Testimonials
  --------------------------------------------------------------*/
  .testimonials .testimonial-wrap {
    padding-right: 50px;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    box-sizing: content-box;
    padding: 30px 60px 30px 30px;
    margin: 30px 15px;
    min-height: 200px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    background: #fff;
  }

  .testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 10px;
    border: 6px solid #fff;
    position: absolute;
    right: -45px;
  }

  .testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #111;
  }

  .testimonials .testimonial-item h4 {
    font-size: 14px;
    color: #999;
    margin: 0;
  }

  .testimonials .testimonial-item .quote-icon-left,
  .testimonials .testimonial-item .quote-icon-right {
    color: #e1f0fa;
    font-size: 26px;
  }

  .testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    right: -5px;
    position: relative;
  }

  .testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    left: -5px;
    position: relative;
    top: 10px;
  }

  .testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px auto 15px auto;
  }

  .testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }

  .testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #3498db;
  }

  .testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #3498db;
  }

  @media (max-width: 767px) {
    .testimonials .testimonial-wrap {
      padding-right: 0;
    }

    .testimonials .testimonials-carousel,
    .testimonials .testimonials-slider {
      overflow: hidden;
    }

    .testimonials .testimonial-item {
      padding: 30px;
      margin: 15px;
    }

    .testimonials .testimonial-item .testimonial-img {
      position: static;
      right: auto;
    }
  }

  /*--------------------------------------------------------------
  # Portfolio
  --------------------------------------------------------------*/
  .portfolio .portfolio-item {
    margin-bottom: 30px;
  }

  .portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
  }

  .portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px 10px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #222222;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
  }

  .portfolio #portfolio-flters li:hover,
  .portfolio #portfolio-flters li.filter-active {
    color: #fff;
    background: #3498db;
  }

  .portfolio #portfolio-flters li:last-child {
    margin-left: 0;
  }

  .portfolio .portfolio-wrap {
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: rgba(34, 34, 34, 0.6);
  }

  .portfolio .portfolio-wrap::before {
    content: "";
    background: rgba(9, 158, 217, 0.6);
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    opacity: 0;
  }

  .portfolio .portfolio-wrap img {
    transition: all ease-in-out 0.3s;
    max-height: 266px;
    min-height: 260px;
  }

  .portfolio .portfolio-wrap .portfolio-info {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 20px;
  }

  .portfolio .portfolio-wrap .portfolio-info h4 {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
  }

  .portfolio .portfolio-wrap .portfolio-info p {
    color: rgb(255, 255, 255);
    font-size: 14px;
    text-transform: uppercase;  
    padding: 0;
    margin: 0;
    font-style: italic;
  }

  .portfolio .portfolio-wrap .portfolio-links {
    text-align: center;
    z-index: 4;
  }

  .portfolio .portfolio-wrap .portfolio-links a {
    color: #fff;
    margin: 0 0 0 5px;
    font-size: 28px;
    display: inline-block;
    transition: 0.3s;
  }

  .portfolio .portfolio-wrap .portfolio-links a:hover {
    color: #3498db;
  }

  .portfolio .portfolio-wrap:hover::before {
    opacity: 1;
  }

  .portfolio .portfolio-wrap:hover img {
    transform: scale(1.2);
  }

  .portfolio .portfolio-wrap:hover .portfolio-info {
    opacity: 1;
  }

  /*--------------------------------------------------------------
  # Portfolio Details
  --------------------------------------------------------------*/
  .portfolio-details {
      padding-top: 140px; 
  }

  .portfolio-details .portfolio-details-slider img {
    width: 100%;
  }

  .portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }

  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #3498db;
  }

  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #3498db;
  }

  .portfolio-details .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(34, 34, 34, 0.08);
  }

  .portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }

  .portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
  }

  .portfolio-details .portfolio-info ul li+li {
    margin-top: 10px;
  }

  .portfolio-details .portfolio-description {
    padding-top: 30px;
  }

  .portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .portfolio-details .portfolio-description p {
    padding: 0;
  }

  .portlightbox-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 32px;
      height: 32px;
      background-color: #ffffff;
      border-radius: 4px;
      box-shadow: 0 0 4px rgba(0,0,0,0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 5;
  }

  .portlightbox-icon i {
      color: #333;
      font-size: 16px;
  }

      .portfolio-thumbnail-carousel {
          margin-top: 40px;
      }

      .portfolio-thumbnail-carousel .item {
          padding: 5px;
          transition: transform 0.3s ease;
          cursor: pointer;
      }

      .portfolio-thumbnail-carousel .item img {
          width: 100px;
          height: auto;
          border: 2px solid transparent;
          border-radius: 4px;
      }

      .portfolio-thumbnail-carousel .item:hover img {
          border-color: #007bff;
          transform: scale(1.05);
      }

  /*--------------------------------------------------------------
  # Team
  --------------------------------------------------------------*/
  .team .member {
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }

  .team .member .member-img {
    position: relative;
    overflow: hidden;
  }

  .team .member .social {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 40px;
    opacity: 0;
    transition: ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .team .member .social a {
    transition: color 0.3s;
    color: #222222;
    margin: 0 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .team .member .social a i {
    line-height: 0;
  }

  .team .member .social a:hover {
    color: #3498db;
  }

  .team .member .social i {
    font-size: 18px;
    margin: 0 2px;
  }

  .team .member .member-info {
    padding: 25px 15px;
  }

  .team .member .member-info h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
    color: #222222;
  }

  .team .member .member-info span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
  }

  .team .member .member-info p {
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
    color: #777777;
  }

  .team .member:hover .social {
    opacity: 1;
  }

  /*--------------------------------------------------------------
  # Pricing
  --------------------------------------------------------------*/
  .pricing .box {
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 2px solid #f9f9f9;
  }

  .pricing .box h3 {
    font-weight: 400;
    padding: 15px;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
  }

  .pricing .box h4 {
    font-size: 42px;
    color: #3498db;
    font-weight: 500;
    font-family: "Open Sans", sans-serif;
    margin-bottom: 20px;
  }

  .pricing .box h4 sup {
    font-size: 20px;
    top: -15px;
    right: -3px;
  }

  .pricing .box h4 span {
    color: #bababa;
    font-size: 16px;
    font-weight: 300;
  }

  .pricing .box ul {
    padding: 0;
    list-style: none;
    color: #222222;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
  }

  .pricing .box ul li {
    padding-bottom: 16px;
  }

  .pricing .box ul i {
    color: #3498db;
    font-size: 18px;
    padding-left: 4px;
  }

  .pricing .box ul .na {
    color: #ccc;
    text-decoration: line-through;
  }

  .pricing .box .btn-wrap {
    padding: 15px;
    text-align: center;
  }

  .pricing .box .btn-buy {
    display: inline-block;
    padding: 10px 40px 12px 40px;
    border-radius: 50px;
    border: 2px solid #3498db;
    color: #3498db;
    font-size: 14px;
    font-weight: 400;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    transition: 0.3s;
  }

  .pricing .box .btn-buy:hover {
    background: #3498db;
    color: #fff;
  }

  .pricing .recommended {
    border-color: #3498db;
  }

  .pricing .recommended .btn-buy {
    background: #3498db;
    color: #fff;
  }

  .pricing .recommended .btn-buy:hover {
    background: #2383c4;
    border-color: #2383c4;
  }

  /*--------------------------------------------------------------
  # F.A.Q
  --------------------------------------------------------------*/
  .faq .faq-item {
    margin: 20px 0;
    padding: 20px 0;
    border-bottom: 1px solid #eeeeee;
  }

  .faq .faq-item i {
    color: #8bc4ea;
    font-size: 24px;
    float: right;
    line-height: 0;
    padding: 13px 0 0 0;
    margin: 0;
  }

  .faq .faq-item h4 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    margin: 0 32px 10px 0;
    font-family: "Poppins", sans-serif;
  }

  .faq .faq-item p {
    font-size: 15px;
  }

  /*--------------------------------------------------------------
  # Contact
  --------------------------------------------------------------*/

  .contact {
    padding: 30px 0;
    background: #e8e8e8;
  }
  .contact .contact-about h3 {
    font-size: 28px;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    color: #222222;
  }

  .contact .contact-about p {
    font-size: 14px;
    line-height: 24px;
    font-family: "Raleway", sans-serif;
    color: #888;
  }

  .contact .social-links {
    padding-bottom: 10px;
  }

  .contact .social-links a {
    font-size: 18px;
    display: inline-block;
    background: #fff;
    color: #3498db;
    line-height: 1;
    padding: 8px 0;
    margin-left: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
    border: 1px solid #3498db;
  }

  .contact .social-links a:hover {
    background: #3498db;
    color: #fff;
  }

  .contact .info {
    color: #444444;
  }

  .contact .info i {
    font-size: 32px;
    color: #3498db;
    float: right;
    line-height: 1;
  }

  .contact .info p {
    padding: 0 42px 10px 0;
    line-height: 28px;
    font-size: 14px;
  }

  .contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: right;
    padding: 15px;
    font-weight: 600;
  }

  .contact .php-email-form .error-message br+br {
    margin-top: 25px;
  }

  .contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
  }

  .contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
  }

  .contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 0 -6px 10px;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
  }

  .contact .php-email-form .form-group {
    margin-bottom: 20px;
  }

  .contact .php-email-form input,
  .contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    padding: 10px 15px;
  }

  .contact .php-email-form input:focus,
  .contact .php-email-form textarea:focus {
    border-color: #3498db;
  }

  .contact .php-email-form button[type=submit] {
    background: #3498db;
    border: 0;
    padding: 10px 24px;
    color: #fff;
    transition: 0.4s;
    border-radius: 50px;
  }

  .contact .php-email-form button[type=submit]:hover {
    background: #2383c4;
  }

  @keyframes animate-loading {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  /*--------------------------------------------------------------
  # Breadcrumbs
  --------------------------------------------------------------*/
  .breadcrumbs {
    padding: 15px 0;
    background: #f8f8f8;
    min-height: 40px;
    margin-top: 86px;
  }

  @media (max-width: 992px) {
    .breadcrumbs {
      margin-top: 72px;
    }
  }

  .breadcrumbs h2 {
    font-size: 28px;
    font-weight: 400;
    margin: 0;
  }

  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }

  @media (max-width: 992px) {
    .breadcrumbs ol {
      margin-top: 10px;
    }
  }

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

  .breadcrumbs ol li+li::before {
    display: inline-block;
    padding-left: 10px;
    color: #3c3c3c;
    content: "/";
  }

  @media (max-width: 768px) {
    .breadcrumbs .d-flex {
      display: block !important;
    }

    .breadcrumbs ol {
      display: block;
    }

    .breadcrumbs ol li {
      display: inline-block;
    }
  }

  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  #footer {
    background: #e8e8e8;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    color: #000000;
    font-size: 12px;
  }

  #footer .credits {
    font-size: 11px;
    padding-top: 5px;
    color: #000000;
  }

  #footer .footer-links a {
    color: #000000;
    padding-right: 15px;
  }

  #footer .footer-links a:first-child {
    padding-right: 0;
  }

  #footer .footer-links a:hover {
    color: #3498db;
  }
  /* Panner Swiper */

  .swiper {
    width: 100%;
    height: 35rem;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;  
    justify-content: center;
    align-items: center;
  }

  .panneritem{
    width: 100%;
    height: 35rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .aboutbanner{
    width: 100%;
    height: 18rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
  }

  #langtap{
    background-color: #80808070;
    width: fit-content;
    border-radius: 8%;
  }
  .content_textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  }
  /*----------------------------------------------
  #banner text to center
  ----------------------------------------------*/
  .aboutoverlay {
  border-image: linear-gradient(hsl(198 74% 64% / 0.6), hsl(203 100% 25% / 0.6))
    fill 1;
  }
  .bannertext{
  text-align: center;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);  
  }
  .bannertext h1{
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  }
  /*----------------------------------------------
  /*---------------------------------------
  15. Bradcaump Area
  ----------------------------------------*/


  .ht__bradcaump__wrap {
  align-items: center;
  display: flex;
  height: 300px;
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 60px;
  }
  .bradcaump__inner h2.bradcaump-title {
  color: #fdfdfd;
  font-size: 50px;
  font-weight: 800;
  text-transform: uppercase;
  }
  .bradcaump-inner span {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  }
  .bradcaump-inner a {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  }
  .bradcaump-inner {
  margin-top: 6px;
  }
  .brd-separetor {
  padding: 0 7px;
  }
  .htc__bst__btn .htc__btn {
  padding: 0 36px;
  }

  /*---------------------------------------
    04. Service Area
  ----------------------------------------*/ 

  .section__title h2.title__line {
    color: #1f2d30;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .section__title p {
    color: #606060;
    margin: 21px auto auto;
    width: 57%;
  }
  .service__thumb a img {
    width: 100%;
  }
  .service__thumb {
    position: relative;
    aspect-ratio: 1/1;
  }
  .service__thumb img {
    border-radius: 10px;
    aspect-ratio: 1/1;
  }
  .service__section__wrap .service__thumb {
  margin-right: -15px;
  }
  .service__hover {
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 2;
    border-radius: 10px;
  }
  .service__hover::before {
    background: #027CB4 none repeat scroll 100% 0;
    content: "";
    height: 100%;
    opacity: 0.85;
    position: absolute;
    width: 100%;
    z-index: -1;
    border-radius: 10px;

  }
  .service__action {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }
  .service__action a {
    color: #fefefe;
    font-family: Raleway;
    font-size: 20px;
    font-weight: 700;
    transition: all 0.4s ease 0s;
  }
  .service__action a:hover {
    color: #000;
  }
  .service__details h2 {
    color: #1f2d30;
    font-size: 20px;
    font-weight: 700;
    margin-top: 18px;
    text-align: center;
    text-transform: uppercase;
  }
  .service:hover .service__hover {
    opacity: 1;
  }

  .container-fluid .section__title p {
    width: 34%;
  }
  /*Service Page*/

  .service__page .service {
    margin-top: 70px;
  }
  .service__page .service__section__wrap{
    margin-top: -10px;
  }

  .service--2 .container-fluid .section__title p {
    margin-bottom: inherit;
    margin-right: inherit;
    margin-left: inherit;
    margin-top: 21px;
    text-align: right;
    width: 72%;
  }
  /*---------------------------------------
    19. Single Service Area
  ----------------------------------------*/

  .prodict-det-small li {
    padding: 0 10px;
    width: 25%;
  }
  .ht-portfolio-full-image .tab-pane img {
    width: 100%;
  }
  .prodict-det-small {
    display: flex;
    justify-content: space-between;
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 20px;
  }
  .prodict-det-small li a {
    display: block;
  }
  .prodict-det-small li a img {
    width: 100%;
  }
  .htc__service__dtl {
    margin-top: 55px;
  }
  .title__line--4 {
    color: #1f2d30;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
  }
  .htc__ser__dtl__inner .htc__ser__dtl .title__line--4 {
  font-size: 24px;
  }
  .htc__ser__dtl__inner {
    display: flex;
    justify-content: space-between;
    margin-right: -25px;
    margin-left: -25px;
    margin-top: 47px;
  }
  .htc__ser__dtl__inner .htc__ser__dtl {
    padding: 0 25px;
    width: 50%;
  }
  /* -------------------------------------------------------------------------------------------------- */
  /* .singale-sidebar {
    margin-top: ;
    
  } */
  .sidebaritem{
    background: #e8e8e8;
    width: 100%;
    padding: 20px;
  }
  .sidebaritem li a {
    color: #606060;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
  }
  .sidebaritem li {
    text-align: center;
    list-style: none;
    border-bottom: 1px dashed #474747;
    padding: 15px 0;
  }
  .sidebaritem h2 {
    border-bottom: 1px dashed #000000;
    color: #099ed9;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
  }
  .sidebaritem li a:hover {
    color: #027CB4;
  }
  .sidebaritem li:last-child {
    border-bottom: none;
  }
  .sidebar_separator{
    margin-top: 30px;
  }
  /*----------------------------------------------*/
  .subimgs{
    aspect-ratio: 1/0.5;
    border-radius: 10px;
  }
  .subimgs img{
    aspect-ratio: 1/0.5;
    border-radius: 10px;
    width: 100%;
  }
  .subimgs:hover{
    -webkit-box-shadow: 0px 10px 20px 19px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 20px 19px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 20px 19px rgba(0,0,0,0.75);
  }
  #expandedImg{
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 16/9;
  }
  /*----------------------------------------------*/

  .sublistactiv{
    background-color: #027cb440;
  }
  /*---------------------------------------
    06. Project Area
  ----------------------------------------*/

  .project{
    margin-right: -15px;
    margin-left: -15px;
  }

  .project__thumb {
    position: relative;
    z-index: 4;
  }
  .project__hover__info {
    background: rgba(2, 124, 180, 0.9) none repeat scroll 100% 0;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
  }
  .project__action {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 5;
  }
  .project__action h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
  }
  .project__hover__info::before {
    border: 1px solid #fff;
    bottom: 50px;
    content: "";
    height: auto;
    right: 45px;
    position: absolute;
    left: 45px;
    top: 50px;
    width: auto;
    z-index: 2;
  }

  .project__action h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-top: 17px;
  }
  .project__action > h2:hover a {
    color: #000;
  }
  .project__action h2 a {
    transition: all 0.4s ease 0s;
    color: #fff;
  }
  .project:hover .project__hover__info,
  .project__itm:hover .project__hover__info {
    opacity: 1;
  }

  .project__thumb a {
    display: block;
  }
  .project__thumb a img {
    width: 100%;
    aspect-ratio: 1/1;
  }
  /* .project__itm{
    margin-top: 30px;
  } */
  /*---------------------------------------
    17. Project Area
  ----------------------------------------*/

  .project--one{
    margin-top: -20px;
  }

  .project--one .project {
    margin-right: -5px;
    margin-left: -5px;
    margin-top: 20px;
  }
  /*---------------------------------------
    20. Single Project Area
  ----------------------------------------*/


  .pro__dtl__inner {
    padding: 70px 40px;
  }
  .pro__dtl__content {
    display: flex;
  }
  .pro__dtl__list li {
    color: #0c436a;
    font-family: Open Sans;
    font-size: 16px;
  }
  .pro__dtl__list.font__bold li {
    color: #0c436a;
    font-family: Raleway;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .pro__dtl__list li + li {
    padding-top: 24px;
  }
  .pro__dtl__inner h2 {
    color: #0c436a;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 43px;
    text-transform: uppercase;
  }
  .pro__dtl__list.font__bold {
    padding-left: 20px;
  }
  .download__project {
    margin-top: 20px;
    padding: 51px 0;
    text-align: center;
  }
  .download__project h2 {
    color: #0c436a;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .htc__pro__desc__container {
    display: flex;
    justify-content: space-between;
    margin-right: -20px;
    margin-left: -20px;
    margin-top: 70px;
  }
  .single__project__details h2 {
    color: #0c436a;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 17px;
    text-transform: uppercase;
  }
  .single__project__details {
    margin: 0 20px;
    width: 33.33%;
  }
  .single__project__details p + p {
    margin-top: 11px;
  }
  .facts__list li a {
    color: #027cb4;
    font-size: 14px;
    transition: all 0.3s ease 0s;
  }
  .facts__list li + li {
    margin-top: 20px;
  }
  .facts__list {
    margin-top: 25px;
  }
  .facts__list li a i {
    padding-left: 10px;
  }
  .facts__list li a:hover {
    color: #027cb4;
  }

  .portfolio-details-img {
    aspect-ratio: 2/4;
  }
  /* Vertical Steps Style */
  .steps-vertical {
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
  }

  .step-vertical {
    display: flex;
    position: relative;
    padding: 0 0;
  }

  .step-vertical:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 30px;
    top: 60px;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
  }

  .step-vertical-icon img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    font-size: 20px;
    color: #6c757d;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
  .form-group {
    margin-bottom: 20px;
  }


  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important; }
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
      color: #707880;
      line-height: calc(1.5em + 0.75rem); }
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
      position: absolute;
      top: 50%;
      left: 3px;
      width: 20px; }
      .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
        top: 60%;
        border-color: #343a40 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        width: 0;
        height: 0;
        right: 50%;
        margin-right: -4px;
        margin-top: -2px;
        position: absolute; }
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
      line-height: calc(1.5em + 0.75rem); }

  .select2-search--dropdown .select2-search__field {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: #ffffff;
    color: #707880; }

  .select2-results__message {
    color: #707880; }

  .select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding-bottom: 5px;
    text-overflow: ellipsis;
    overflow: hidden; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
      box-sizing: border-box;
      list-style: none;
      margin: 0;
      width: 100%; }
      .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field {
        width: 100% !important;
        background-color: #ffffff; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
      color: #6c757d;
      border: 1px solid #dee2e6;
      border-radius: 0.2rem;
      padding: 0;
      padding-left: 5px;
      cursor: pointer;
      float: right;
      margin-top: 3px;
      margin-right: 5px; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
      color: #6c757d;
      font-weight: 400;
      margin-right: 3px;
      margin-left: 1px;
      padding-left: 3px;
      padding-right: 3px;
      float: right;
      border: none;
      background: #ffffff; }
      .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #343a40; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
      float: none;
      margin-left: 0;
      position: absolute !important;
      top: 0;
      left: 0.7em; }

  .select2-container--bootstrap4 .select2-search--inline {
    float: right; }
    .select2-container--bootstrap4 .select2-search--inline .select2-search__field {
      width: 100% !important;
      background: none;
      color: #707880; }

  .select2-container {
    display: block; }
    .select2-container *:focus {
      outline: 0; }

  .input-group .select2-container--bootstrap4 {
    flex-grow: 1; }

  .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }

  .input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }

  .select2-container--bootstrap4 .select2-selection {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%; }
    @media (prefers-reduced-motion: reduce) {
      .select2-container--bootstrap4 .select2-selection {
        transition: none; } }

  .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #9bbcff;
    box-shadow: 0 0 0 0.2rem rgba(27, 104, 255, 0.25); }

  .select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
    border-bottom: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }

  .select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
    background-color: #e9ecef;
    cursor: not-allowed;
    border-color: #dee2e6;
    box-shadow: none; }

  .select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field {
    background-color: transparent; }

  select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
  form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
    border-color: #dc3545; }

  select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
  form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
    border-color: #3ad29f; }

  .select2-container--bootstrap4 .select2-dropdown {
    border-color: #dee2e6;
    border-radius: 0;
    background: #f8f9fa; }
    .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
      border-top: none;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem; }
    .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
      border-top: 1px solid #dee2e6;
      border-top-right-radius: 0.25rem;
      border-top-left-radius: 0.25rem; }
    .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
      background-color: #e9ecef; }

  .select2-container--bootstrap4 .select2-results__option--highlighted,
  .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: #1b68ff;
    color: #ffffff; }

  .select2-container--bootstrap4 .select2-results__option[role=group] {
    padding: 0; }
    .select2-container--bootstrap4 .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
      padding-right: 1em; }

  .select2-container--bootstrap4 .select2-results > .select2-results__options {
    max-height: 15em;
    overflow-y: auto; }

  .select2-container--bootstrap4 .select2-results__group {
    padding: 6px;
    display: list-item;
    color: #001a4e; }

  .select2-container--bootstrap4 .select2-selection__clear {
    width: 0.9em;
    height: 0.9em;
    line-height: 0.75em;
    padding-right: 0.15em;
    margin-top: 0.7em;
    border-radius: 100%;
    background-color: #f8f9fa;
    color: #f8f9fa;
    float: left;
    margin-left: 0.3em; }
    .select2-container--bootstrap4 .select2-selection__clear:hover {
      background-color: #dae0e5; }


      
  /* Send btn style */
  .sendbtn {
    width: 90%;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: pointer;
    color: #0c436a;
    transition: all 1000ms;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    outline: 2px solid #099ed9;
  }

  .sendbtn:hover {
    color: #ffffff;
    transform: scale(1.1);
    outline: 2px solid #099ed9;
    box-shadow: -4px 5px 17px -4px #027CB4;
  }

  .sendbtn::before {
    content: "";
    position: absolute;
    right: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #027CB4;
    transform: skewX(-45deg);
    z-index: -1;
    transition: width 1000ms;
  }

  .sendbtn:hover::before {
    width: 250%;
  }
  /* login background */
  .login-background {	
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;	
    background-image: linear-gradient(-135deg, #099ed9 5%, #0c436a 100%);
  }  

  /* stiky div */
  .stiky{
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
  }
  /* ALL protfolio */
  .gallery-items  , .por-sidebar{
    float:right;
    width:100%;
    position:relative;
  }
  .gallery-items.border-folio-conteainer  {
    box-sizing:border-box;
    border-right:1px solid #eee;
  }
  .column-content {
    padding-left:350px;
  }
  .por-sidebar {
    padding:0 30px;
    margin-top:50px;
  }
  .grid-item-holder {
    float:right;
    width:100%;
    height:auto;
    position:relative;
  }
  .hid-port-info .gallery-item {
    overflow:hidden;
  }
  .grid-big-pad  .grid-item-holder{
    padding:40px;
  }
  .grid-small-pad  .grid-item-holder{
    padding:3px 0 3px 6px;
  }
  .grid-no-pad .grid-item-holder {
    padding:0;
  }
  .gallery-item, .grid-sizer {
    width: 25%;
    position:relative;
    float:right;
  }
  .gallery-item-second,
  .grid-sizer-second {
    width: 50%;
  }
  .gallery-item img, .grid-sizer img {
    width: 100%;
    height: auto;
    position:relative;
    z-index:1;
  }
  .four-coulms .gallery-item , .four-coulms .grid-sizer{
    width:25%;
  }
  .three-coulms .gallery-item , .three-coulms .grid-sizer{
    width:33.3%;
  }
  .three-coulms .gallery-item-second {
    width:66.6%;
  }
  .two-columns .gallery-item {
    width:50%;
  }
  .gallery-item .overlay {
    z-index:2;
    opacity:0;
    background:#000;
  }
  .gallery-item:hover  .wh-info-box {
    visibility:visible;
  }
  .gallery-item:hover  .wh-info-box:before{
    width:100%;
  }
  .gallery-item:hover .wh-info-box-inner {
    opacity:1;
  }
  .grid-item {
    position:relative;
    float:right;
    width:100%;
    z-index:15;
    padding:20px 25px;
    background:#fff;
    border-bottom:1px solid #f0f0f0;
  }
  .grid-item h3 {
    font-size:14px;
    font-weight: 700;
    position:relative;
    float:right;
    width:100%;
    text-align:right;
    font-family: 'Montserrat', sans-serif;
  }
  .grid-item h3:before {
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:1px;
    background:#000;
  }
  .grid-item h3:before  , .grid-item h3 , .blog-media img , .grid-item h3:after{
    -webkit-transition: all 200ms linear;
      -moz-transition: all 200ms linear;
      -o-transition: all 200ms linear;
      -ms-transition: all 200ms linear;
      transition: all 200ms linear;
  }
  .grid-item h3:hover {
    padding: 0 30px 0 0;
  }
  .grid-item h3:hover:before {
    width:20px;
  }
  .grid-item h3:hover:after {
    -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  .hid-por-info .grid-item h3:hover:after {
    top:14px;
  }
  .grid-item span {
    width:100%;
    float:right;
    text-align:right;
    font-size:11px;
    margin-top:6px;
    color:#999;
  }
  .hid-por-info .grid-item  {
    position:absolute;
    bottom:-100%;
    right:0;
    z-index:13;
    -webkit-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      transition: all 300ms linear;
  }
  .vis-por-info .grid-item {
    float:right;
    bottom:0;
    position:relative;
    width:100%;
    border:none;
  }
  .vis-por-info .grid-item ,.hid-por-info .grid-item{
    box-sizing:border-box;
    border-bottom:1px solid #eee;
  }

  .gallery-item:hover .grid-item {
    bottom:0;
  }
  .hid-por-info .gallery-item {
    overflow:hidden;
  }
  .pad-con {
    padding-top:60px;
    padding-right:30px;
    padding-left:30px;
  }
  .pad-con2 {
    padding-top:50px;
    padding-right:0;
    padding-left:0;
    padding-bottom:42px;
  }
  .pad-con3 {
    padding:0 30px;
  }
  .hor-pad-con {
    padding:60px 30px 0 0;
  }
  .bold-filter {
    margin-top:50px;
    margin-bottom:50px;
    padding-bottom: 10px;
  }
  .bold-filter .filter-button  {
    float:right;
    margin-left:20px;
      font-weight: bold;
      font-size: 10px;
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
  }
  .inline-filter .gallery-filters {
    float:right;
  }
  .inline-filter .gallery-filters a {
    float:right;
    margin-left:10px;
    padding:0 12px;
    text-transform:uppercase;
    position:relative;
    font-weight:800;
  }
  .inline-filter .gallery-filters a {
    color: #0c436a;;
  }
  .bold-filter.inline-filter .gallery-filters a:before  {
    content:'';
    position:absolute;
    bottom:-20px;
    left:0;
    width:0;
    background:#027CB4;
    height:6px;
      transition: all .2s linear;
  }
  .flat-filter .gallery-filters a:before {
    bottom:42px;
  }
  .bold-filter.inline-filter .gallery-filters a.gallery-filter-active:before  {
    width:100%;
  }
  .bold-filter.inline-filter .count-folio {
    float:right;
    margin-right:30px;
    padding:15px 0;
    width:100px;
    background: #099ED9;
    position:relative;
    top:-14px;
    color:#fff;
  }
  .bold-filter.inline-filter .count-folio:before {
    content:"";
    position:absolute;
    top:12px;
    right:-25px;
    width:1px;
    height:20px;
    background:#ccc;
  }
  .bold-filter.inline-filter .count-folio:after {
    content:"";
    position:absolute;
    top:50%;
    right:50%;
    width:12px;
    margin-right:-6px;
    height:1px;
    margin-top:-1px;
    background:rgba(255,255,255,0.41);
  }
  .bold-filter.inline-filter .count-folio div  {
    float:right;
    width:50%;
    text-align:center;
    font-weight:900;
  }
  .menufilter {
    float:left;
    width:90px;
    position:relative;
    border-right:1px solid #eee;
    height:90px;
  }
  .ver-filter {
    bottom:0;
  }
  .tcf {
    bottom:32px;
  }
  .menufilter  .filter-button {
    float:right;
    position:relative;
    color:#000;
    width:100%;
    padding:5px 15px;
    margin-top:36px ;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 10px;
    cursor:pointer;
    text-align:center;
    z-index:2;
  }
  .round-counter {
    float:right;
    width:100%;
    border-top:1px solid  rgba(255,255,255,.3);
    position:relative;
    margin-top:20px;
    padding-top:20px;
  }
  .round-counter:before {
    content:'/';
    position:absolute;
    right:50%;
    top:18px;
    color:rgba(255,255,255,.3);
    font-size:16px;
    margin-right:-4px;
  }
  .round-counter div {
    float:right;
    width:50%;
    font-family: 'Montserrat', sans-serif;
    font-weight:bold;
    font-size:.9em;
    color:#fff;
    text-align: center;
  }
  .hid-filter {
    float:right;
    position: absolute;
    display:none;
    padding:30px 40px;
    top:90px;
    background: rgba(0,0,0,.7);
    width:250px;
  }
  .hid-filter a {
    float:right;
    color:#fff;
    width:100%;
    font-weight:700;
    font-size:1.1em;
    position:relative;
    padding:8px 0 8px 10px;
    text-align:right;
  }
  .gallery-filters.hid-filter a.gallery-filter-active {
    text-decoration:line-through;
  }
  .fixed-filter-wrap {
    position: absolute;
    top:70px;
    left:0;
    width:350px;
    bottom:0;
    z-index:1;
    padding:50px 60px;
    overflow:hidden;
  }
  .hid-filt-button {
    display:none;
  }
  .fixed-filter-wrap .gallery-filters a {
    float:right;
    width:100%;
    text-align:right;
    margin-bottom:20px;
    font-size: 1.1em
  }
  .fixed-filter-wrap .gallery-filters a:last-child {
    margin-bottom: 0;
  }
  .fixed-filter-wrap h3 {
    float:right;
    width:100%;
    padding-bottom:10px;
    font-family: 'Montserrat', sans-serif;
    font-weight:bold;
    font-size:1.7em;
    text-transform:uppercase;
    text-align:right;
    position:relative;
  }
  .fixed-filter-wrap .bold-separator {
    margin-top:5px;
  }
  .fixed-filter-wrap .gallery-filters {
    margin-top:30px;
    border-bottom:1px solid #eee;
    float:right;
    width:100%;
    padding-bottom:20px;
  }
  .fixed-filter-wrap .count-folio {
    float:right;
    background:#eee;
    width:80px;
    padding:13px 0;
    margin-top:20px;
  }
  .fixed-filter-wrap .count-folio div {
    float:right;
    width:50%;
  }
  .box-folio .grid-item {
    padding:20px 0;
    background:#fff;
    border-bottom:1px solid #f0f0f0;
  }

  .slider-zoom {
    position:absolute;
    top:20px;
    left:20px;
    z-index:5;
    cursor:pointer;
    background:#fff;
    width:30px;
    height:30px;
    line-height:30px;
  }
  .slider-wrap .swiper-container{width:100%;height:100%;margin:0 auto;}  .slider-wrap .swiper-slide{background:#fff;width: auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}

  .slider-wrap {
    float:right;
    width:100%;
    height:90%;
    position:relative;
  }
  .slider-wrap.tpslw {
    height:95%;
  }
  .slider-wrap.homecarousel{
    height:100%;
  }
  .slider-wrap .swiper-slide {
    padding:0 0 100px 0;
    overflow:hidden;
  }
  .slider-wrap.homecarousel .swiper-slide{
    padding:0 0 70px 0;
  }
  .slider-wrap .swiper-slide img {
    width: auto;
    height:100%;
    position:relative;
    z-index:1;
  }
  .slider-wrap.homecarousel .swiper-container-horizontal>.swiper-scrollbar {
    bottom:30px;
  }
  .thumb-info {
    position:absolute;
    bottom:70px;
    right:0px;
    left:0px;
    padding:40px 70px 50px;
    z-index:2;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
      transition: all 200ms linear;
  }
  .thumb-info h3{
    text-align:right;
    color:#fff;
    font-size:26px;
    font-weight:900;
    line-height:40px;
    letter-spacing:-1px;
    font-family: 'Poppins', sans-serif;
    text-transform:uppercase;
    position:relative;
  }
  .thumb-info h3:before {
    content:'';
    position:absolute;
    right:-20px;
    bottom:-40px;
    top:-20px;
    width:1px;
    background:rgba(255,255,255,0.51)
  }
  .thumb-info h3 a{
    color:#fff;
  }
  .thumb-info p {
    color:#fff;
    opacity:0.6;
    font-weight:900;
  }
  .slider-wrap .gallery-popup , .fs-gallery-wrap .gallery-popup {
    position:absolute;
    z-index:12;
    top:0;
    left:-90px;
    color:#000;
    font-size:.8em;
    width:90px;
    height:90px;
    line-height:90px;
    background:#fff;
      transition: all .3s linear;
  }
  .fs-gallery-wrap .gallery-popup {
    background:#000;
    color:#fff;
    font-size:.8em;
    left:0;
  }
  .slider-wrap .sw-button , .fs-gallery-wrap .sw-button{
    position:absolute;
    top:50%;
    width:70px;
    height:70px;
    background: rgba(0,0,0,0.51);
    color:#fff;
    line-height:70px;
    z-index:20;
    font-size:12px;
    cursor:pointer;
    margin-top:-35px;
      transition: all 300ms linear;
  }
  .slider-wrap .sw-button.swiper-button-next  , .fs-gallery-wrap .sw-button.swiper-button-next {
    left:20px;
  }
  .slider-wrap .sw-button.swiper-button-prev  , .fs-gallery-wrap .sw-button.swiper-button-prev  {
    right:20px;
  }
  .slider-wrap .sw-button , .fs-gallery-wrap .sw-button {
    color:#000;
    background:#fff;
  }
  .slider-wrap .sw-button:hover , .fs-gallery-wrap .sw-button:hover {
    opacity:0.8;
  }
  .slider-wrap .swiper-slide:hover  .gallery-popup , .fs-gallery-wrap:hover .gallery-popup {
    left:0;
  }
  .pr-der-pad {
    padding-top:0;
  }
  .pr-title{
    float:right;
    font-size:3.0em;
    text-align:right;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    position:relative;
    padding-right:40px;
    padding-left:20px;
  }
  .pr-title span {
    float:right;
    width:100%;
    padding-top:10px;
    color:#999;
    text-align:right;
    font-size:10px;
    text-transform:uppercase;
    font-weight:500;
    line-height:22px;
  }
  .pr-title:before  {
    content:'';
    position:absolute;
    right:0;
    width:1px;
    height:120px;
    background:#eee;
    top:50%;
    margin-top:-60px;
  }
  section.parallax-section  .pr-title {
    color:#fff;
    top:50px;
  }
  section.parallax-section  .pr-title:before {
    display:none;
  }
  section.parallax-section  .pr-title:after {
    content:'';
    position:absolute;
    right:40px;
    width:60px;
    height:3px;
    background:#fff;
    top: auto;
    bottom:-20px;
  }
  .det-margin {
    margin-top:70px;
  }
  .det-wrap p {
    font-size:13px;
  }
  .pr-list {
    float:right;
    width:100%;
    padding:30px 0;
  }
  .pr-list li {
    float:right;
    width:100%;
    padding:10px 0;
    text-align:right;
    font-weight: 800;
    font-size:11px;
    word-spacing: 0;
      text-transform: uppercase;
  }
  .pr-list li span {
    float: right;
      padding-left: 10px;
      color: #999;
  }
  .dec-border {
    height:1px;
    background:#eee;
    margin:10px 0 30px;
  }
  .pr-subtitle {
    font-size:12px;
    text-align:right;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    float:right;
    width:100%;
    text-transform:uppercase;
    padding-bottom:20px;
    line-height:34px;

  }
  .pr-subtitle span.let-num {
    float:right;
    padding-left:80px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size:34px;
    color:#000;
    position:relative;
    top:-6px;
  }
  .pr-subtitle span.let-num:before {
    content:'';
    position:absolute;
    bottom:0;
    left:10px;
    width:54px;
    height:1px;
    background:#eee;
  }
  .content-nav {
    float:right;
    position:relative;
    width:100%;
    padding:0 50px;
    margin-top:100px;
    border:1px solid #eee;
    background:#fff;
  }
  .content-nav.blog-nav {
    margin-top:50px;
  }
  .content-nav li {
    width:33.3%;
    float:right;
    border-right:1px solid #eee;
    height: 90px;
    line-height: 90px;
  }
  .content-nav li:first-child {
    border:none;
  }
  .content-nav li a.ln , .content-nav li a.rn {
    color:#000;
    font-size:24px;
    position:relative;
  }
  .content-nav li a.ln i , .content-nav li a.rn i  , .customNavigation a i , .content-nav li a span.tooltip{
      transition: all .3s linear;
  }
  .content-nav li a.ln:hover i ,  .content-nav li a.rn:hover i , .customNavigation a:hover i  {
    transform: rotateX(360deg);
  }
  .content-nav li a.ln {
    float:right;
  }
  .content-nav li a.rn {
    float:left;
  }
  .list {
    width:40px;
    height:40px;
    overflow:hidden;
    display:inline-table;
    position: relative;
    top: 20px;
  }
  .list a,
  .list span{
    display:block;
    width:40px;
    height:40px;
  }
  .list a{
    position:relative;
    padding: 10px;
  }
  .list a span{
    width: 20px;
    height: 20px;
    overflow:hidden;
    position: relative;
  }
  .list a i{
    display:block;
    position:absolute;
    background-color:#000;
    width:6px;
    height:0;
    transition-property: height, transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(.75,0,.3,1);
  }
  .list a i.c1{ right:0px; }
  .list a i.c2{ right:7px; }
  .list a i.c3{ right:14px; }
  .list a i.c1.b1{ height:7px; transform: translate(0, 0); }
  .list a i.c1.b2{ height:7px; transform: translate(0, 8px); }
  .list a i.c1.b3{ height:7px; transform: translate(0, 40px); }
  .list a i.c2.b1{ height:10px; transform: translate(0, 0); }
  .list a i.c2.b2{ height:7px; transform: translate(0, 11px); }
  .list a i.c2.b3{ height:7px; transform: translate(0, 35px); }
  .list a i.c3.b1{ height:5px; transform: translate(0, 0); }
  .list a i.c3.b2{ height:7px; transform: translate(0, 6px); }
  .list a i.c3.b3{ height:7px; transform: translate(0, 33px); }
  .list a:hover i.c1.b1{ height:7px;	transform: translate(0, -8px); }
  .list a:hover i.c1.b2{ height:7px; transform: translate(0, 0); }
  .list a:hover i.c1.b3{ height:7px; transform: translate(0, 8px); }
  .list a:hover i.c2.b1{ height:10px; transform: translate(0, -11px); }
  .list a:hover i.c2.b2{ height:10px; transform: translate(0, 0); }
  .list a:hover i.c2.b3{ height:7px; 	transform: translate(0, 11px); }
  .list a:hover i.c3.b1{ height:5px; 	transform: translate(0, -6px); }
  .list a:hover i.c3.b2{ height:5px; transform: translate(0, 0); }
  .paginate .list a:hover i.c3.b3{ height:7px; 	transform: translate(0, 6px); }
  .content-nav li a.ln span.tooltip  , .content-nav li a.rn span.tooltip {
    position:absolute;
    top:-10px;
    font-size:10px;
    text-transform:uppercase;
    min-width:150px;
    visibility:hidden;
    font-weight:800;
    opacity:0;
  }
  .content-nav li a.ln span.tooltip {
    right:100%;
    margin-right:20px;
    text-align:right;
  }
  .content-nav li a.rn span.tooltip {
    left:100%;
    margin-left:20px;
    text-align:left;
  }
  .content-nav li a:hover span.tooltip {
    top:0;
    opacity:1;
    visibility:visible;
  }
  .cur-page{
    font-size:12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    float:right;
    width:100%;
    background: #f9f9f9;
  }

  .cur-page span {
    color:#666;
    position:relative;
  }
  .fs-gallery-wrap {
    overflow:hidden;
    z-index:20;
    background:#f9f9f9;
  }
  .fs-gallery-wrap .swiper-container{width:100%;height:100%; }
  .fs-gallery-wrap  .swiper-slide{text-align:center; background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center; overflow:hidden;}
  .fs-gallery-wrap .swiper-pagination-bullet {
    border-radius:0;
    background:none;
    padding:10px 12px;
      transition: all .3s linear;
    position:relative;
    color:#000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size:12px;
    opacity:1;
    float:right;
    margin-top:0;
    line-height:0;
  }
  .fs-gallery-wrap .swiper-pagination-bullet:before {
    content:'';
    position:absolute;
    bottom:50%;
    right:30px;
    width:0;
    height:1px;
    margin-bottom:-1px;
      transition: all .3s linear;
    background:#ccc;
  }
  .fs-gallery-wrap .swiper-pagination-bullet:last-child:before  {
    right:inherit;
    left:20px;
  }
  .fs-gallery-wrap .swiper-pagination  {
    z-index:100;
    left:0;
    width:auto;
    right:inherit;
    bottom:0;
    background:#fff;
    padding:30px 45px;
    border-bottom:1px solid #eee;
  }
  .fs-gallery-wrap .swiper-pagination-bullet-active {
    color:#999;
    padding-left:50px;
  }
  .fs-gallery-wrap .swiper-pagination-bullet-active:last-child {

    padding-left:0;
    padding-right:50px;
  }
  .fs-gallery-wrap .swiper-pagination-bullet-active:before  {
    width:30px;
  }
  .show-info {
    position:absolute;
    bottom:50px;
    right:50px;
    width:50%;
    z-index:15;
  }
  .slider-wrap .show-info{
    bottom:130px;
  }
  .slider-wrap.tpslw .show-info {
    bottom:130px;
  }
  .show-info span {
    text-transform:uppercase;
    font-size:10px;
    color:#fff;
    background:#000;
    padding:12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight:800;
    cursor:pointer;
    float:right;
      transition: all 300ms linear;
  }
  .tooltip-info{
    height: auto;
    line-height: 20px;
    padding: 10px 20px;
    font-size: 11px;
    color: #fff;
    text-align: center;
    text-indent: 0px;
    position: absolute;
    background:rgba(0,0,0,0.5);
    bottom:30px;
    opacity: 0;
    right:0;
    margin-bottom:40px;
    visibility: hidden;
    pointer-events: none;
    z-index:16;
      transition: all 300ms linear;
  }
  .tooltip-info p {
    font-size:11px;
    font-weight:600;
    word-spacing:no-wrap;
    color:#fff;
  }
  .tooltip-info h5 {
    font-size:16px;
    margin-top:12px;
    padding:5px 0;
    position:relative;
    font-family: 'Montserrat', sans-serif;
    text-align:right;
  }
  .show-info:hover .tooltip-info {
    visibility:visible;
    opacity:1;
    bottom:10px;
  }
  .pr-tags {
    margin-bottom:30px;
    padding:22px 20px;
    border:1px solid #eee;
    background:#f9f9f9;
  }
  .pr-tags span , .pr-tags ul , .pr-tags ul li {
    float:right;
  }
  .pr-tags span{
    font-family: 'Montserrat', sans-serif;
    text-align:right;
    padding-left:20px;
    font-weight:800;
    border-left:1px solid #ccc;
  }
  .pr-tags ul {
    padding-right:20px;
  }
  .pr-tags ul li {
    margin-left:10px;
    padding-top:3px;
  }
  .pr-tags ul li a {
    font-style:italic;
    color:#999;
  }
  .pr-tags ul li a:hover {
    color:#000;
  }
  .parallax-item {
    margin:50px 0;}

  .parallax-item  img{
    width:100%;
    height:auto;
    opacity:0.7;
  }
  .parallax-text {
    position:absolute;
    bottom:40%;
    z-index:10;
  }
  .parallax-text.right-pos {
    left:-150px;
  }
  .parallax-text.left-pos {
    right:-150px;
  }
  .parallax-text h3 {
    font-size:44px;
    font-weight:bold;
    font-family: 'Montserrat', sans-serif;
    position:relative;
  }
  .parallax-text h3:before {
    content:'';
    position:absolute;
    top:-40px;
    width:60px;
    height:6px;
    right:0;
    background:#292929;
  }
  .parallax-text h3:after {
    content:'';
    position:absolute;
    top:-5px;
    bottom:-10px;
    width:1px;
    -webkit-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
    left:-100px;
    background:#ccc;
    z-index:1;
  }
  .parallax-text h3:hover:after{
    width:140%;
    opacity:0.4;
  }
  .parallax-text h3 a {
    position:relative;
    z-index:10;
  }
  .parallax-text.left-pos h3   {
    text-align:right  ;
  }
  .parallax-text.right-pos h3   {
    text-align:left  ;
  }
  .parallax-text h4 {
    text-align:right;
    color:#292929;
    padding:15px 0;
  }
  .parallax-header {
    padding-bottom:25px;
  }
  .parallax-header span {
    float:right;
    font-size:24px;
    text-align:right;
    font-weight:bold;
    font-family: 'Montserrat', sans-serif;
    position:relative;
  }
  .parallax-header span:before {
    content:'';
    position:absolute;
    bottom:0;
    right:60px;
    width:150px;
    background:#eee;
    height:1px;
  }
  .parallax-header ul {
    float:left;
    position:relative;
    top:2px;
    border-right:1px solid #ccc;
    padding:10px 30px 10px 0;
  }
  .parallax-header ul li {
    float:right;
    padding-right:15px;
    text-align:right;
  }
  .single-slider {
    float:right;
    position:relative;
  }
  .testilider {
    padding-right: 60px;
  }
  .single-slider img {
    width:100%;
    height:auto;
  }
  .single-slider .swiper-pagination {
    bottom:40px;
    font-weight:700;
    color:#292929;
    font-size:10px;
  }
  .single-slider .swiper-pagination:before {
    content:'';
    position:absolute;
    top:50%;
    right:50%;
    margin-right:-35px;
    width:70px;
    margin-top:-20px;
    height:40px;
    background:#fff;
    z-index:-1;
  }
  .single-slider .swiper-button-prev , .single-slider .swiper-button-next {
    position:absolute;
    top:50%;
    width:60px;
    height:60px;
    margin-top:-30px;
    background:#292929;
    color:#fff;
    z-index:20;
    line-height:60px;
    cursor:pointer;
  }
  .single-slider .swiper-button-prev {
    right:10px;
  }
  .single-slider .swiper-button-next {
    left:10px;
  }
  /*-----item hover ------------------------------------------------*/
  .line-gal {
    margin-bottom:30px;
  }
  .box-item {
    float:right;
    width:100%;
    position:relative;
    overflow:hidden;
    transform: translate3d(0,0,0);
  }
  .line-gal .box-item  {
    margin-bottom:20px;
  }
  .box-item a.popup-image {
    position:absolute;
    top:-50px;
    opacity:0;
    left:0;
    width:70px;
    height:70px;
    background:#099ed96c;
    line-height:70px;
    z-index:5;
    color:#000;
    font-size:12px;
      transition: all .3s linear;
    transition-delay: 0.1s;
  }
  .box-item  img {
    position:relative;
    z-index:1;
      transform: translateZ(0);
      transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
  }
  .box-item .overlay {
    opacity:0;
    z-index:4;
      transition: all.3s linear;
  }
  .box-item:hover .overlay  , .gallery-item:hover .overlay{
    opacity:0.3;
  }
  .box-item:hover img , .gallery-item:hover img {
    transform: scale(1.15);
  }
  .gallery-item:hover .swiper-slide img {
    transform: scale(1.0);
  }
  .box-item:hover a.popup-image  , .gallery-item:hover a.popup-image{
    top:0;
    opacity:1;
  }
  .box-item a.popup-image:hover i{
    transform: scale(1.15);
  }
  .grid-item-holder .box-item a.popup-image {
    left:-2px;
  }
  /*--------------Responsive--------------------------------------*/
  @media only screen and  (max-width: 1224px) {
  .fixed-filter-wrap {
    float:right;
    position:relative;
    width:100%;
    padding:50px 30px 30px;
    top:0;
    margin-bottom:20px;
  }
  .column-content {
    padding-left: 0;
  }
  }
  @media only screen and  (max-width: 1064px) {
  header.main-header {
      padding: 0 30px 0 0;
  }
  .logo-holder {
      padding-top: 24px;
  }
  .logo-holder img {
    height:20px !important;
  }
  .nav-button-wrap {
    display:block;
  }
  .nav-holder  , .main-footer , .fixed-bar:before , .sroll-nav-wrap ,  .hero-item:before , .nav-holder nav li a:before ,  .header-info , .height-emulator{
    display:none;
  }
  .content-holder , .content-footer  , .fixed-search{
    right:0;
  }
  .footer-inner {
    margin: inherit;
    float:right;
    width:100%;
    padding:90px 50px 70px 50px;
  }
  .slide-progress-container {
    left:50%;
    right:50px;
  }
  .pr-title {
    width:100%;
    margin-bottom:50px;
  }
  .cus-inner-title {
    margin-bottom:20px;}
  .gallery-item {
    width:50% !important;
  }
  .blog-sidebar {
    margin-top:40px;
  }
  .widget-wrap {
      padding-right: 0;
  }
  .widget-wrap:before {
    right:0;
  }
  .footer-header {
    margin-top:25px;
  }
  .small-sec-title {
    margin-bottom:20px;
  }
  .section-title h2 , .hero-item h2 {
    font-size:24px !important;
    line-height:55px !important;
  }
  .order-item .btn{
    margin-top:70px;
  }
  .nav-holder {
    position:absolute;
    top:70px;
    left:0;
    width:260px;
    background:#fff;
    padding:30px;
    display:none;
    margin-left:0;
    overflow:auto;
    height:250px;
    box-shadow: 0 0 65px rgba(0,0,0,0.07);
  }
  .nav-holder nav {
    width:100%;
    float:right;
  }
  .nav-holder nav ul li  , .nav-holder nav ul li ul li , .nav-holder nav li ul li > ul    {
    float:right;
    width:100%;
    text-align:right;
    right:0;
    opacity:1;
    left: 0;
    height:auto;
    margin-right:0;
  }
  .nav-holder nav ul li {
    padding:10px 0;
  }
  .nav-holder nav ul li.lidec:before {
    position:absolute;
    left:10px;
    width:10px;
    height:10px;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
    content: "\f107";
    font-size:14px;
    top:10px;
  }
  .nav-holder nav li ul  {
    margin: 0;
    padding-right:20px;
    opacity: 1;
    visibility: hidden;
    position: relative;
    width:100%;
    display:none;
    top:0;
    right: 0;
    z-index: 1;
    background: none;
    float:right;
    width:100%;
    border-bottom:1px solid #eee;
  }
  .nav-holder nav li a , .nav-holder nav li ul li a  {
    padding:0;
    width:auto;
    color:#000;
  }
  .nav-holder nav li ul li  ul  {
    margin: 0;
    padding-right:20px;
    padding-top:15px;
    padding-bottom:0;
    opacity: 1;
    position: relative;
    display: block;
    visibility: visible;
    top:0;
    right: 0;
    z-index: 1;
    float:right;
    width:100%;
    border:none;
  }
  .nav-holder nav li  > ul.visul    {
    display: block;
    right:0;
  }
  .parallax-text{
    float:right;
    position:relative;
    top: inherit;
    right:inherit !important;
    left:inherit !important;
    width:100%;
    margin-top:50px;
    text-align:right;
  }
  .hero-item {
    padding:0 100px;
  }
  .section-container .box-item {
    margin-top:50px;
  }
  .testilider {
    margin-top:50px;
  }
  .testi-item h3 {
      padding-bottom: 20px;
  }
  section.header-section .testi-item p{
    margin-top:20px;
  }
  section.parallax-section .pr-title {
    padding-right:70px;
  }
  section.parallax-section .pr-title:after {
    right:70px;
  }
  .custom-inner-holder {
      margin-top: 30px;
  }
  .sb-overlay {
    right:0;
  }
  footer.content-footer {
    position:relative;
    float:right;
    width:100%;
  }
  .nav-holder nav li a:hover  , .nav-holder nav li ul li  a:hover, nav.asl li  a.act-scrlink {
    color:#404040;
  }
  }
  @media only screen and  (max-width: 768px) {
  .slider-wrap.tpslw , .content.full-height.mob-height , .slider-wrap.homecarousel , .content.slider-wrap {
      height:350px;
  }
  .slider-wrap .sw-button, .fs-gallery-wrap .sw-button , .slider-wrap .gallery-popup {
      width: 30px;
      height: 30px;
      line-height: 30px;
  }
  .slider-wrap .sw-button.swiper-button-next {
      left: 0;
  }
  .slider-wrap .sw-button.swiper-button-prev {
      right: 0;
  }
  .team-holder li {
    width:100%;
  }
  section.header-section .bg  , section.header-section .overlay{
      width:100%;
  }
  section.header-section .overlay , section.parallax-section .overlay.op1 {
    opacity:0.4;
  }
  section.parallax-section {
      padding: 150px 0;
  }
  .inline-filter .gallery-filters{
    width:100%;
    padding:20px 0;
  }
  .inline-filter .gallery-filters a {
    width:100%;
    margin-left:0;
    text-align:right;
    margin-bottom:15px;
    padding-right:0;
  }
  .bold-filter.inline-filter .count-folio {
      margin-right: 0;
      padding: 15px 0;
      top: -3px;
  }
  .bold-filter.inline-filter .gallery-filters a:before  , .bold-filter.inline-filter .count-folio:before , .inline-facts:nth-child(2):before  {
    display:none;
  }
  .bold-filter {
      margin-top: 0;
      margin-bottom: 50px;
  }
  .inline-facts {
      width: 50%;
  }
  .menufilter {
    position:absolute;
    left:0;
    width:120px;
    background:#fff;
    top:70px;
  }
  .hid-filter {
    left:0;
    width:120px;
    top:70px;
  }
  }
  @media only screen and  (max-width: 540px) {
  .content-holder {
      top: 70px;
  }
  .sb-menu-button-wrap, .nav-button-wrap , .show-search , .show-share-wrap {
      height: 70px;
      width: 70px;
  }
  .show-share-wrap span {
    display: none
  
  }
  .show-share-wrap div img {
  
      margin-right: 0;
  }	
  header.main-header  {
      height: 70px;
  }	
  .show-search  , .show-share-wrap {
      line-height:70px; 
  }	
  .gallery-item , .clients-list li {
    width:100%  !important;
  }
  .subcribe-form span {
    display:none;
  }
  .subcribe-form {
      padding-right:0;
  }
  .section-title h2 , .hero-item h2 {
    font-size:24 !important;
    line-height:45px !important;
  }
  .slide-progress-container  , .partcile-dec{
    display:none;
  }
  .inline-facts {
      width: 100%;
  }
  .inline-facts:before{
    display:none;
  }
  .sidebar-menu {
    width:280px;
  }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .bg {
    background-attachment: scroll !important;
    -webkit-background-size:cover;
    background-position:center;
  }
  }
  .line-gal {
    margin-bottom:30px;
  }
  .box-item {
    float:right;
    width:100%;
    position:relative;
    overflow:hidden;
    transform: translate3d(0,0,0);
  }
  .line-gal .box-item  {
    margin-bottom:20px;
  }
  .box-item a.popup-image {
    position:absolute;
    top:-50px;
    opacity:0;
    left:0;
    width:70px;
    height:70px;
    background:#fff;
    line-height:70px;
    z-index:5;
    color:#000;
    font-size:12px;
      transition: all .3s linear;
    transition-delay: 0.1s;
  }
  .box-item  img {
    position:relative;
    z-index:1;
      transform: translateZ(0);
      transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;
  }
  .box-item .overlay {
    opacity:0;
    background:rgba(0,0,0,0.5);
    z-index:4;
      transition: all.3s linear;

  }
  .box-item:hover .overlay  , .gallery-item:hover .overlay{
    opacity:0.3;
  }
  .box-item:hover img , .gallery-item:hover img {
    transform: scale(1.15);
  }
  .gallery-item:hover .swiper-slide img {
    transform: scale(1.0);
  }
  .box-item:hover a.popup-image  , .gallery-item:hover a.popup-image{
    top:0;
    opacity:1;
  }
  .box-item a.popup-image:hover i{
    transform: scale(1.15);
  }
  .grid-item-holder .box-item a.popup-image {
    left:-2px;
    text-align: center;
    font-size: larger;
    color: #0C436A;
  }
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    .gallery-filter.active {
    background-color: rgba(9, 158, 217, 0.2); /* 20% opacity */
    color: #027CB4;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px;
  }

  /* ******************** ORG Chart ************************** */

  #tree {
      width: 100%;
      display: block;
      overflow: hidden;
  }

  .boc-toolbar-container{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
  }


  path {
      stroke: #027CB4;
      stroke-width: 2;
    }


  .boc-light .boc-fill {
    fill: #fff;
    Stroke:#027CB4;
    stroke-width: 2;
  }
  line{
    stroke: #027CB4;
    stroke-width: 1;
  }

  .about .expand-circle {
    fill: #027CB4; /* Circle background color */
    stroke: #fff; /* Circle border color */
    stroke-width: 2; /* Circle border width */
    cursor: pointer; /* Change cursor to pointer on hover */
  }

  .expand-circle circle:hover {
    fill: lightgray;
    cursor: pointer;
  }

  .expand-circle text:hover {
    fill: #0C436A; /* Keeps the text color stable or tweak as desired */
    cursor: pointer;
  }
  .node {
    cursor: pointer;
  }

  /* ************filtter in projects *********** */
  .filter-sidebar{
    top:0;
    right:0;
    width:100%;
    height:auto;
    background:#e8e8e8;;
    z-index:1000;
    overflow:auto;
    padding:10px 20px;
  }
  .filter-sidebar-title h2{
    font-size: 22px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #0C436A;
    margin-bottom: 20px;
    text-align: center;
  }
  .filter-sidebar-item{
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    color: #099ED9;
    display: block;
  }
  .filter-sidebar-item h2{
    margin-left: 10px;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #099ED9;
  }
  /* ***************************** Map Style ******************************* */
    #map {
      height: 100%;
      width: 100%;
      max-height: 600px;
      min-height: 380px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      margin-bottom: 10px;
  }

  .leaflet-control-attribution {
      display: none;
  }

  @media (max-width: 768px) {
      #map {
          height: 40vh;
      }
  }

  .custom-marker {
      width: 25px;
      height: 25px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 6px #099ed9a3;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px solid #fff;
      transition: transform 0.2s;
  }

  .custom-marker:hover {
      transform: scale(1.3);
  }

  .custom-marker img {
      width: 60%;
      height: 60%;
      object-fit: contain;
  }

  .leaflet-popup-content-wrapper {
      background: #ffffff;
      color: #333;
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.1);
      padding: 20px 20px;
      font-family: 'Montserrat', sans-serif;
  }

  .leaflet-popup-content {
      margin: 0;
      font-size: 14px;
  }

  .leaflet-popup-content strong {
      font-weight: bold;
      color: #027CB4;
  }

  .leaflet-popup-close-button span {
      color: #d70000;
      font-size: 16px;
      font-weight: bold;
      opacity: 0.7;
  }

  .leaflet-popup-close-button:hover {
      color: #099ed9;
      opacity: 1;
  }

  .leaflet-popup-tip {
      background: rgb(133, 133, 133);
  }
  /* ************************* media ********************************1 */
    /* carousel */
    .media-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
      margin-top: 30px;
    }
    /* Previous button  */
    .media-carousel .carousel-control.left 
    {
      right: -12px;
      background-image: none;
      background: none repeat scroll 100% 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      height: 40px;
      width : 40px;
      margin-top: 30px
    }
    /* Next button  */
    .media-carousel .carousel-control.right 
    {
      left: -12px !important;
      background-image: none;
      background: none repeat scroll 100% 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      height: 40px;
      width : 40px;
      margin-top: 30px
    }
    /* Changes the position of the indicators */
    .media-carousel .carousel-indicators 
    {
      left: 50%;
      top: auto;
      bottom: 0px;
      margin-left: -19px;
    }
    /* Changes the colour of the indicators */
    .media-carousel .carousel-indicators li 
    {
      background: #c0c0c0;
    }
    .media-carousel .carousel-indicators .active 
    {
      background: #333333;
    }
    .media-carousel img
    {
      width: 300px;
      height: 200px
    }
    
    .shadow-trigger {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .shadow-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }

  .img-shadow-zone {
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    transition: box-shadow 0.3s ease;
  }

  .right-zone {
    left: 0;
    box-shadow: inset 20px 0 30px -10px rgba(12, 67, 106, 0.4);
  }

  .right-zone:hover {
    box-shadow: inset 30px 0 50px -10px rgba(9, 158, 217, 0.6);
  }

  .left-zone {
    right: 0;
    box-shadow: inset -20px 0 30px -10px rgba(12, 67, 106, 0.4);
  }

  .left-zone:hover {
    box-shadow: inset -30px 0 50px -10px rgba(9, 158, 217, 0.6);
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* arrow color */
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
    font-weight: bold;
  }

  .thumb-img {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border 0.3s ease;
  }

  .swiper-thumb .swiper-slide-thumb-active .thumb-img {
    border-color: #333; /* Highlight active thumbnail */
  }
  .project-swiper-main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .project-swiper-main .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
  }
    /* End carousel */

  .backproject{
    color: #fff;
    background: #0C436A;
    padding: 8px 25px;
    border-radius: 50px;
  }


  /* ************************* responsive Style ****************************** */

  @media (max-width: 768px) {
      #header{
      height: 90px;
    }
      #header .logo img {
        padding: 0;
        margin: 0;
        max-height: 60px;
      }
      .panneritem {
        width: 100%;
        height: 25rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .aboutbanner{
        width: 100%;
        height: 13rem;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
      }
      [data-aos-delay] {
        font-size: 12px;
        font-weight: 500;
        font-family: 'montserrat';
    }
      .navbar ul {
      margin-top: 0;
    }
  }


  /* Breakpoints for extra small devices */
  @media (max-width: 480px) {
    #header{
      height: 80px;
    }
        .swiper-button-prev,
    .swiper-button-next {
      width: 30px;
      height: 30px;
    }
    #header .logo img {
      padding: 0;
      margin: 0;
      max-height: 45px;
    }
      .panneritem {
      width: 100%;
      height: 15rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .aboutbanner{
      width: 100%;
      height: 8rem;
      justify-content: center;
      align-items: center;
    }
        [data-aos-delay] p{
          font-size: 12px;
              font-weight: 500;
              font-family: 'montserrat', sans-serif;
    }
      .navbar ul {
      margin-top: 0;
    }
    .sticky-top{
      margin-top: 50px;
    }
  }
  /* Breakpoints for extra small devices */
  @media (max-width: 300px) {
      #header{
      height: 80px;
    }
        .swiper-button-prev,
    .swiper-button-next {
      width: 30px;
      height: 30px;
    }
    #header .logo img {
      padding: 0;
      margin: 0;
      max-height: 35px;
    }
      .panneritem {
      width: 100%;
      height: 10rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .aboutbanner{
      width: 100%;
      height: 5rem;
      justify-content: center;
      align-items: center;
    }
    .data-aos-delay p{
      font-size: 12px;
      font-weight: 500;
      font-family: 'montserrat', sans-serif;
    }
      .navbar ul {
      margin-top: 0;
    }
      .sticky-top{
      margin-top: 50px;
    }
  }

  .form-select {
    font-size: 13px;
  }

  .custom-pagination nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.custom-pagination ul.pagination {
  gap: 6px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.custom-pagination li.page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-pagination li.page-item .page-link {
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.2s ease;
}

.custom-pagination li.page-item .page-link:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.custom-pagination li.page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  font-weight: bold;
}

.custom-pagination li.page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
}

/* Optional RTL support */
.custom-pagination {
  direction: rtl; /* Change to rtl if needed */
}