:root {
    --primary-color: #5CA9B0;
    --secondary-color: #454A4E;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: #d6d6d6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0a2629;
}

.bg-secondary {
    background: #454A4E !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

/* google translate */

.goog-te-gadget img {
    display: none !important;
}

#google_element {
    display: block !important;
    visibility: visible !important;
}

.flag-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.flag {
    cursor: pointer;
}

.goog-te-gadget {
    display: none !important;
}

.bg-green {
background: #32717A !important;
}

.nav-item a:hover,
.text-primary ,
.fa-facebook:hover ,
.fa-instagram:hover ,
.fa-linkedin:hover,
.fa-square-facebook:hover,
.banner-btn:hover{
    color: var(--primary-color) !important
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    left: -230px !important;
    width: 660px !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #fff !important;
}


.navbar-toggler:focus {
    box-shadow: none !important
}

body {
    font-family: "Jost", sans-serif;
    /* font-weight: 400; */
}

.fw-thin {
    font-family: "Montserrat", serif;
    font-weight: 300;
  }



.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-menu {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    display: block;
}

.navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.banner-images{
    position: relative;
    min-height: 577px;
    background: #32717a;
}
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    height: auto;

    bottom: 20px;
    top: auto;
}

.carousel-control-prev {
    right: 80px;
    left: auto;
}

.carousel-control-next {
    right: 20px;
}


@media (max-width:991px) {
    #navbarNav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 1050;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
    }

    .navbar-collapse.show {
        display: block !important
    }

    .dropdown-menu {
        display: none;
    }

    .dropdown-menu.show {
        display: block;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        width: 100% !important;
    }
    .offshore {

        background: #fff !important; 
      }

      .construction{
        top: 50% !important;
      }
      .banner-images{
        min-height: 374px !important;
    }
}

.btn-close:focus {
    box-shadow: none !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.card-hover img {
    transition: transform 0.3s ease-in-out;
}

.card-hover:hover img {
    transform: scale(1.05); 
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999
}

.loader {
    display: flex;
    gap: 10px
}

.loader div {
    width: 2px;
    height: 100px;
    background-color: #1f6668;
    border-radius: 50%;
    animation: 1.4s ease-in-out infinite both pulse;
}

.loader div:first-child {
    animation-delay: -.16s
}

.loader div:nth-child(2) {
    animation-delay: -.32s
}

.loader div:nth-child(3) {
    animation-delay: -.64s
}

.loader div:nth-child(4) {
    animation-delay: -.32s
}

.loader div:nth-child(5) {
    animation-delay: -.16s
}




@keyframes pulse {

    0%,
    100%,
    80% {
        transform: scale(0);
        opacity: .3
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}


/* back to top */
.back-to-top {
    position: fixed;
    bottom: 35px;
    right: 35px;
    background-color: #32717A;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

/* animation */
/* General Fade-In Animations */
.fade-in {
    opacity: 0;
    transition: opacity 2s;
}

.fade-in-left,
.fade-in-right {
    opacity: 0;
    transition: opacity 1s, transform 1.5s;
}

.fade-in-left {
    transform: translateX(-100px);
}

.fade-in-right {
    transform: translateX(100px);
}

/* Fade-In From Below Animations */
.fade-in-from-below-1,
.fade-in-from-below-2,
.fade-in-from-below-3,
.fade-in-from-below-4,
.fade-in-from-below-5,
.fade-in-from-below-6 {
    opacity: 0;
    transform: translateY(100px);
}

.fade-in-from-below-1 {
    transition: opacity 1s, transform 1s;
}

.fade-in-from-below-2 {
    transition: opacity 1s 0.2s, transform 1s 0.2s;
}

.fade-in-from-below-3 {
    transition: opacity 1s 0.3s, transform 1s 0.3s;
}

.fade-in-from-below-4 {
    transition: opacity 1s 0.4s, transform 1s 0.4s;
}

.fade-in-from-below-5 {
    transition: opacity 1s 0.5s, transform 1s 0.5s;
}

.fade-in-from-below-6 {
    transition: opacity 1s 0.6s, transform 1s 0.6s;
}

/* New Fade-In Classes with Delay */
.fade-in-1,
.fade-in-2,
.fade-in-3,
.fade-in-4,
.fade-in-5,
.fade-in-6 {
    opacity: 0;

}

.fade-in-1 {
    transition: opacity 1s, transform 1s;
}

.fade-in-2 {
    transition: opacity 1s 0.2s, transform 1s 0.2s;
}

.fade-in-3 {
    transition: opacity 1s 0.3s, transform 1s 0.3s;
}

.fade-in-4 {
    transition: opacity 1s 0.4s, transform 1s 0.4s;
}

.fade-in-5 {
    transition: opacity 1s 0.5s, transform 1s 0.5s;
}

.fade-in-6 {
    transition: opacity 1s 0.6s, transform 1s 0.6s;
}

/* Active States */
.fade-in.active {
    opacity: 1;
}

.fade-in-left.active,
.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-from-below-1.active,
.fade-in-from-below-2.active,
.fade-in-from-below-3.active,
.fade-in-from-below-4.active,
.fade-in-from-below-5.active,
.fade-in-from-below-6.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-1.active,
.fade-in-2.active,
.fade-in-3.active,
.fade-in-4.active,
.fade-in-5.active,
.fade-in-6.active {
    opacity: 1;

}