:root {
      --var-color-blue: #0477bf;
      --var-color-light-blue: #64aedc;
      --var-color-white-blue: #f2f9ff;
      --var-color-grey: #7e8083;
      --var-color-black: #071b3b;
    }

    /* html {
            scroll-behavior: smooth;
        } */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-size: 18px;
      background-color: var(--var-color-white-blue);
    }

    .scroll-top {
      bottom: -100%;
      width: 50px;
      height: 50px;
      line-height: unset;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
    }

    .scroll-top>span {
      line-height: 20px;
    }

    .scroll-top:hover {
      transform: scale(1.1);
    }

    a {
      color: var(--var-color-blue);
    }

    a:hover {
      color: var(--var-color-blue);
      opacity: 0.7;
    }

    /* general */
    .theme-btn:before {
      background-color: var(--var-color-black);
    }

    .title-text h2 {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 30px;
    }

    .scroll-top {
      border-radius: 50%;
    }

    /* preloader */
    .handle-preloader {
      background-color: white;
    }

    /* header */
    .main-header {
      /* position: absolute; */
      background-color: rgba(255, 255, 255, 0.8);
    }

    .main-header .logo-box {
      padding: 10px 0px;
    }

    .main-menu .navigation>li>a {
      padding: 0;
    }

    .main-header .outer-box {
      padding: 0;
    }

    .main-menu .navigation>li>a {
      color: black;
    }

    .fixed-header .main-menu .navigation>li>a {
      color: var(--var-color-black);
    }

    .main-menu .navigation>li.current>a,
    .main-menu .navigation>li:hover>a {
      color: var(--var-color-blue) !important;
    }

    .sticky-header .logo-box .logo {
      max-width: 250px;
    }

    .menu-area .mobile-nav-toggler .icon-bar {
      background-color: var(--var-color-blue);
    }

    .main-header .logo-box {
      padding: 10px 0;
    }

    .main-header .logo-box .logo {
      max-width: 220px;
    }

    .mobile-menu .navigation:last-child,
    .mobile-menu .navigation li {
      border: none;
    }

    .mobile-menu .navigation li {
      padding: 5px 15px;
    }

    .mobile-menu .navigation:last-child {
      padding: 0;
    }

    nav .theme-btn {
      padding: 15px 34px !important;
      line-height: 25px !important;
    }

    .main-menu .navigation>li.current>.theme-btn,
    .main-menu .navigation>li:hover>.theme-btn {
      color: white !important;
      opacity: 0.8;
    }

    nav .navigation {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo {
      margin-bottom: 0 !important;
    }

    /* hero */
    #home {
      height: 100vh;
    }

    #home>.slider>svg {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100vh;
    }

    #home button {
      position: absolute;
      z-index: 50;
      width: 40px;
      overflow: hidden;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
      box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
    }

    #home button:focus {
      outline-width: 0;
    }

    circle {
      stroke: var(--var-color-blue);
      fill: none;
      transition: 0.3s;
    }

    #svg1 circle {
      transition-timing-function: linear;
    }

    #svg2 circle {
      transition-timing-function: linear;
    }

    #Capa_1 {
      position: absolute;
      width: 16px;
      height: 16px;
      transform: translate(-7px, -8px);
    }

    #Capa_2 {
      position: absolute;
      width: 16px;
      height: 16px;
      transform: translate(-9px, -8px);
    }

    .right {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #849494;
      background-color: transparent;
      transition: 0.5s;
    }

    .right:hover {
      background-color: #fff;
    }

    .left {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #849494;
      background-color: transparent;
      transition: 0.5s;
    }

    .left:hover {
      background-color: #fff;
    }

    .circle1 {
      transition-delay: 0.05s;
    }

    .circle2 {
      transition-delay: 0.1s;
    }

    .circle3 {
      transition-delay: 0.15s;
    }

    .circle4 {
      transition-delay: 0.2s;
    }

    .circle5 {
      transition-delay: 0.25s;
    }

    .circle6 {
      transition-delay: 0.3s;
    }

    .circle7 {
      transition-delay: 0.35s;
    }

    .circle8 {
      transition-delay: 0.4s;
    }

    .circle9 {
      transition-delay: 0.45s;
    }

    .circle10 {
      transition-delay: 0.05s;
    }

    .circle11 {
      transition-delay: 0.1s;
    }

    .circle12 {
      transition-delay: 0.15s;
    }

    .circle13 {
      transition-delay: 0.2s;
    }

    .circle14 {
      transition-delay: 0.25s;
    }

    .circle15 {
      transition-delay: 0.3s;
    }

    .circle16 {
      transition-delay: 0.35s;
    }

    .circle17 {
      transition-delay: 0.4s;
    }

    .circle18 {
      transition-delay: 0.45s;
    }

    .slide1 {
      background-image: linear-gradient(rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.6)),
        url("./assets/imgs/slider/s1.jpg");
    }

    .slide2 {
      background-image: linear-gradient(rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.6)),
        url("./assets/imgs/slider/s2.jpg");
    }

    .slider {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
      display: inline-flex;
      overflow: hidden;
    }

    .slide1,
    .slide2,
    .slide3,
    .slide4 {
      position: absolute;
      background-position: center;
      background-size: cover;
      color: #fff;
      font-size: 62px;
      font-weight: 800;
      font-family: "Heebo", sans-serif;
      text-align: center;
      width: 100%;
      height: 100%;
      z-index: 10;
      transition: 1.4s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tran {
      transform: scale(1.3);
    }

    .up1 {
      z-index: 41;
    }

    .up2 {
      z-index: 40;
    }

    .steap {
      stroke-width: 0;
    }

    .streak {
      stroke-width: 300px;
    }

    /* home text */
    .main-title {
      color: #f4f6f8;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 40px;
      /* padding-top: 300px; */
      text-align: center;
      opacity: 1;
      /* background-color: #0477BF; */
      /* right: -50%;
            transform: translate(-50px, 50px); */
    }

    .sub-title {
      font-size: 20px;
      margin-bottom: 10px;
      color: white;
      opacity: 0.7;
      letter-spacing: 2px;
    }

    .hero-description {
      font-size: 18px;
      color: white;
      margin-bottom: 20px;
      letter-spacing: 1.1px;
    }

    .hero-text {
      max-width: 600px;
      margin: auto;
    }

    /* about */
    .about-style-two {
      padding: 100px 0 150px;
    }

    .about-imgs {
      height: 350px;
      width: 350px;
      object-fit: cover;
      border-radius: 50%;
      margin: auto;
      display: block;
    }

    #about .icon-box:before {
      position: absolute;
      content: "";
      background-color: rgba(0, 209, 249, 0.1);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      border-radius: 50%;
      animation-delay: 0.6s;
      -webkit-box-shadow: 0 0 0 0 rgb(4 119 191 / 50%);
      box-shadow: 0 0 0 0 rgb(4 119 191 / 50%);
      -webkit-animation: ripple 3s infinite;
      animation: ripple 3s infinite;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
      z-index: -1;
    }

    .feature-section .title-text h2 {
      font-size: 40px;
    }

    .feature-block-one .inner-box .icon-box {
      max-width: 100px;
      margin: 0 auto 20px;
    }

    /* projects */
    .gallery-block-one .inner-box .image-box {
      background-color: var(--var-color-blue);
    }

    .image-box img {
      width: 300px;
      height: 300px;
      object-fit: cover;
    }

    .gallery-block-one .inner-box .image-box {
      border-radius: 30px;
    }

    .gallery-section {
      padding: 120px 0;
    }

    /* ceo */
    .ceo-list li {
      display: inline-block !important;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    .ceo-span {
      font-style: italic;
      opacity: 0.8;
    }

    #ceo .text {
      margin-bottom: 0;
    }

    /* contact */
    .contact-style-two {
      padding: 120px 0 0;
    }

    .default-form .form-group input[type="text"],
    .default-form .form-group input[type="email"],
    .default-form .form-group input[type="tel"],
    .default-form .form-group textarea {
      border-radius: 15px;
    }

    .testimonial-block-one .inner-box {
      border-radius: 30px;
    }

    .two-column-carousel .owl-item,
    .testimonial-block-one .inner-box {
      border-radius: 30px;
    }

    .two-column-carousel .owl-item {
      margin: 0px 0 30px;
      box-shadow: 0 15px 15px -15px;
    }

    .testimonial-block-one .inner-box .author-thumb img {
      border-radius: 30px;
      height: 100%;
      object-fit: cover;
    }

    .testimonial-block-one .inner-box .author-thumb {
      left: 0px;
      top: 0px;
      width: 40%;
      height: 100%;
      border-radius: 30px;
    }

    .testimonial-block-one .inner-box {
      padding: 45px 30px 45px 50%;
    }

    /* footer */
    .footer-bottom {
      padding: 30px 0;
      background-color: var(--var-color-black);
      margin-top: -9px;
    }

    .info-inner .owl-dots {
      display: none;
    }

    .info-inner h3 {
      text-transform: uppercase;
    }

    .social-links {
      margin: 0;
    }

    /* media queries */
    @media screen and (max-width: 1500px) {
      .rem1 {
        display: none;
      }

      .about-imgs {
        width: 300px;
        height: 300px;
      }
    }

    @media only screen and (max-width: 991px) {
      .testimonial-block-one .inner-box {
        margin-bottom: 0px;
      }
    }

    @media screen and (max-width: 768px) {
      .rem2 {
        display: none;
      }

      .about-imgs {
        width: 250px;
        height: 250px;
      }

      footer .social-links {
        margin-top: 15px;
      }
    }

    @media screen and (max-width: 650px) {
      #home #right {
        left: 60%;
        top: 93%;
        transform: translateX(-50%);
      }

      #home #left {
        left: 40%;
        top: 93%;
        transform: translateX(-50%);
      }
    }

    @media screen and (max-width: 575px) {
      .rem3 {
        display: none;
      }

      .about-imgs {
        width: 350px;
        height: 350px;
      }

      .main-header .logo-box .logo img {
        width: 85%;
      }
    }

    @media screen and (max-width: 500px) {
      .testimonial-block-one .inner-box {
        padding: 25px !important;
      }

      .testimonial-block-one .inner-box .author-thumb {
        width: 100%;
        margin-bottom: 25px;
      }
    }

    @media only screen and (max-width: 767px) {
      .feature-section.alternat-2 {
        padding: 65px 0px 145px 0px;
      }
    }

    .banner-bg {
      /* background-image: url(./assets/imgs/water.jpg);
            height: 100vh; 
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat; */
      /* background-position: center -300px; */
      background-color: #0477bf;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .faq-page-section {
      position: relative;
      padding: 50px 0px 50px 0px;
    }

    .row {
      justify-content: center;
    }

    .accordion-box .block .acc-content p {
      font-size: 14px;
    }

    .sec-title h2 {
      font-size: 25px;
    }

    .acc-btn h4 {
      font-size: 18px !important;
    }

    .sec-title {
      margin-bottom: 20px;
      margin-top: 50px;
    }

    .ol,
    ul {
      padding-left: 0;
    }

    .sub-label-true {
      color: #005da8;
    }

    .sub-label {
      float: right;
    }

    .bold- {
      text-align: center;
      width: 100%;
      font-weight: 700;
      margin-bottom: 20px;
      margin-top: 20px;
      font-size: 22px;
    }

    .oneLineText-cover {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .datepicker-cover {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .situation {
      margin: 0 2% 0 6.5%;
    }

    .btn-container {
      width: 100%;
    }

    .btn-container button {
      margin: auto;
      display: block;
    }