@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primery: #0A2471;
    --orange: #FF6600;
    --sub-black: #222222;
    --logo-bg: #D7DF21;
    --about-bg: #F1FAFD;
}
body{
    font-family:  "Montserrat", sans-serif;
}
a, a:hover{text-decoration: none;transition: all 0.3s;}

/***************************************** Navbar *****************************************/
.navbar {
    box-shadow: 0px 4px 4px 0px #2D4C93;padding: 21px 0;
}

.nav-link {
    font-weight: 600;
    font-size: 14px;
    color: var(--primery);
    padding: 8px 15px !important;
    line-height: 159%;
    position: relative;
}
.nav-link.active{color: var(--primery) !important;}
.nav-link.active::before{
    content:'';position: absolute;width: 27px;height: 4px;bottom: 0;background: var(--primery);
}
.nav-link::before{content: '';width: 0px;height: 4px;position: absolute;bottom: 0;background: var(--primery);display: inline-block;transition: all 0.3s;}
.nav-link:hover::before{width: 27px;}

.nav-link:focus,.nav-link:hover {
    color: var(--primery);
}
.navbar-toggler{border: 1px solid rgba(0, 0, 0, 0.55);}
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/***************************************** Video Section *****************************************/
.video-container {
    height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
video {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.video-container:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(10, 36, 113, 60%);
}
.callout {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height:  calc(100vh - 100px);
    text-align: left;
    z-index: 1;
    max-width: 811px;
    color: var(--bs-white);
}
.callout .small-text{
    font-weight: 600;font-size: 14px;margin: 0;
}
.callout h1 {
    font-weight: 600;font-size: 64px;margin-bottom: 8px;
}
.callout .big-text{
    font-weight: 400 !important;font-size: 20px !important;margin-bottom: 23px;
}


/***************************************** Who We Are *****************************************/
.gap-15{gap: 15px;display: flex;align-items: center;}
.fill-btn{
    padding: 15px 20px;display: inline-block;background: var(--bs-white);font-weight: 600;font-size: 14px;color: var(--primery);border: 1px solid var(--bs-white);
}
.fill-btn:hover{background: rgba(10, 36, 113, 0.51);color: var(--bs-white);}
.without-fill-btn{
    padding: 15px 20px;display: inline-block;background: rgba(10, 36, 113, 0.51);font-weight: 600;font-size: 14px;color: var(--bs-white);border: 1px solid var(--bs-white);
}

.who-we-are{
    display: flex;align-items: end;gap: 30px;margin-bottom: 120px;
}
.who-we-are .img-box{flex: 0 0 370px;margin-top: -107px;}
.main-title{font-weight: 600;font-size: 14px;color: var(--orange);margin-bottom: 20px !important;}
h2.sub-title{font-weight: 600;font-size: 36px;color: var(--bs-black);margin-bottom: 20px;}
.who-we-are-content p{font-size: 14px;margin: 0;}


/***************************************** Core Upstream Services *****************************************/
.our-offshore{display: grid;gap: 30px;grid-template-columns: repeat(3, 1fr);margin-bottom: 120px;}
.content-box{box-shadow: 0px 4px 16px 0px #00000017;padding: 20px;transition: all 0.3s;}
.content-box:hover{background: var(--primery);color: var(--bs-white);transition: all 0.3s;}
.content-box:hover svg path,.content-box:hover svg circle{fill: var(--bs-white);}
.content-box:hover svg rect{fill: var(--primery);}
.content-box:hover h3,.content-box:hover h4,.content-box:hover p{color: var(--bs-white);}
.content-box svg{margin-bottom: 22px;}
.content-box h3{font-weight: 600;font-size: 24px;color: var(--primery);margin-bottom: 17px;}
.content-box h4{font-weight: 500;font-size: 20px;color: var(--sub-black);margin-bottom: 14px;}
.content-box p{font-weight: 400;font-size: 16px;line-height: 24px;margin: 0;color: var(--sub-black);}


/***************************************** Projects *****************************************/
.project-main{margin-bottom: 120px;}
.project-main .swiper{width: calc(min(1170px, 90%));overflow: visible;}
.project-main .swiper-slide .img-overlay::before{content: '';background: rgba(0, 0, 0, 49%);height: 100%;width: 100%;position: absolute;}
.project-main .swiper-slide .img-overlay{position: relative;width: 100%;}
.project-main .swiper-slide.swiper-slide-active .img-overlay::before{content: '';background: rgba(10, 36, 113, 60%);height: 100%;width: 100%;position: absolute;}
.project-main .swiper-slide.swiper-slide-active img{width: 100%;}
.swiper-content{bottom: 0;position: absolute;padding: 30px;width: 100%;color: var(--bs-white);}
.swiper-content h3,.swiper-content h4{font-weight: 600;font-size: 24px !important;margin-bottom: 14px;}
.swiper-content h4{font-size: 20px !important;}
.swiper-content p{margin: 0;font-weight: 600;}
.swiper-nav-wrapper {
      display: flex;justify-content: end;gap: 20px;max-width: 1170px;padding-right: 200px;margin: 0 auto;margin-top: 40px !important;
}

.swiper-button-prev,
.swiper-button-next {
  position: static;width: 30px;height: 30px;background-color: #f37021;color: white;display: flex;align-items: center;justify-content: center;cursor: pointer;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;font-weight: bold;content: ''; 
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
   background: #D4D4D4;opacity: 1;
}
.swiper-button-next.swiper-button-disabled svg path, .swiper-button-prev.swiper-button-disabled svg path{
  fill: var(--bs-black);
}
.swiper-button-prev svg path, .swiper-button-next svg path{fill: var(--bs-white);}
.swiper-button-next svg{rotate: 180deg;}

/***************************************** Our Team *****************************************/
.our-team h2{max-width: 308px;}
.our-team .content-box{padding: 40px 20px 20px;}
.our-team .content-box:hover {background: var(--logo-bg);}
.our-offshore.our-team .content-box h3{color: var(--primery) !important;}
.our-offshore.our-team .content-box h4{color: var(--sub-black) !important;}
.our-offshore.our-team .content-box p{color: var(--sub-black) !important;}


/***************************************** Looking for *****************************************/
.looking-for{background: url(../img/looking-for.png) center center/cover no-repeat;min-height: 370px;}
.looking-for-content{background: var(--primery);padding: 86px 10px 86px 40px;display: flex;align-items: center;}
.looking-for-content .looking-for-content-box{max-width: 600px;}
.looking-for-content .looking-for-content-box h2,.looking-for-content .looking-for-content-box h3{color: var(--bs-white);}
.looking-for-content .looking-for-content-box h3{font-weight: 600;font-size: 20px;margin-bottom: 20px;}
.looking-for-content .looking-for-content-box .fill-btn{background: var(--logo-bg);color: var(--primery);border: 1px solid var(--logo-bg);}
.looking-for-content .looking-for-content-box .fill-btn:hover{background: transparent;color: var(--bs-white);}


/***************************************** About Us *****************************************/
.about-us{padding: 120px 0;background: var(--about-bg);}
.about-us-width{max-width: 590px;}
.about-us h2{margin-bottom: 10px;}
.p-ul p{margin-bottom: 30px;}
.p-ul ul li{font-weight: 600;font-size: 16px;line-height: 24px;color: var(--primery);}
.p-ul ul li:not(:last-child){margin-bottom: 10px;}

.vision-mission{margin: 50px 0;display: flex;gap: 30px;}
.vision-mission-content{flex: 0 0 570px;gap: 50px;display: grid;}
.vision-mission-content p{margin: 0;}
.vision-mission-img{position: relative;width: 100%;max-width: 570px;margin: 0 auto;}
.vision-mission-img img:nth-child(1){position: absolute;left: 0;top: 10%; animation: bounce 2s infinite;}
.vision-mission-img img:nth-child(2){float: right;}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.our-core h2{margin-bottom: 30px;}
.our-core .content-box{background: var(--bs-white);}
.our-core .content-box h2{margin-bottom: 12px;}
.our-core .content-box h3{color: var(--primery);}
.our-core .content-box p{color: var(--sub-black);}
.our-core .content-box img{margin-bottom: 16px;}
.our-core .content-box:nth-child(5),.form-s div:nth-child(7){grid-column: span 2 / span 2;}


/***************************************** Contact Us *****************************************/
.contact-us{background: #FBFCFF;position: relative;}
.contact-form{
    /* flex: 0 0 872px;padding: 66px 0 106px;position: relative;z-index: 1; */
    width: calc(78% - 64px);
    padding: 66px 0 106px;
    position: relative;
    z-index: 1;
}
.form-s{
   margin-top: 30px;
}
.form-column{grid-template-columns: repeat(2, 1fr);column-gap: 26px;row-gap: 30px;display: grid;margin: 0;}
.form-column .form-control{height: 68px;border-radius: 4px;border: 1px solid #A7A7A7;box-shadow: none;padding: 10px 20px;font-size: 14px;}
.form-column .form-control:focus{border: 1px solid var(--primery);}
.form-column textarea{height: auto !important;}
.form-control::-webkit-input-placeholder {color: var(--bs-black);font-weight: 500;}
.form-control::-moz-placeholder {color: var(--bs-black);font-weight: 500;}
.form-control:-ms-input-placeholder {color: var(--bs-black);font-weight: 500;}
.form-control:-moz-placeholder {color: var(--bs-black);font-weight: 500;}

.form-s .fill-btn{background: var(--primery);color: var(--bs-white);border: 1px solid var(--primery);transition: all 0.3s;}
.form-s .fill-btn:hover{background: transparent;color: var(--primery);}
.gap-30{gap: 30px;}

.contact-us-bg{
    position: absolute;top: 0;right: 0;width: calc(50% - 300px);height: 100%;
}
.contact-us-bg img{
      width: 100%;height: 100%;object-fit: cover;max-width: 100%;object-position: 66% 100%;
}


.industrial-box{background: #F1FAFD;padding-top: 70px;position: relative;overflow: hidden;}
.industrial-box .watar-line{position: absolute;bottom: 0;}

.industrial-box img{position: relative;z-index: 9;}
.wave-line {
  width: 100%;height: 7px;background: url('../img/watar-line.svg') repeat-x;
  background-size: cover;animation: waveMove 20s linear infinite;position: absolute;bottom: 0;
}

@keyframes waveMove {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-position-x: 0; 
  }
}


.ship-right{
     background: url('../img/ship-left.svg') no-repeat;background-size: contain;     
       animation: shipRight 50s linear infinite alternate;position: absolute;bottom: 8px;width: 100%;height: 46px;
}
@keyframes shipRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}


.ship-left{
     background: url('../img/ship-right.svg') no-repeat;background-size: contain;
     animation: shipLeft 50s linear infinite alternate;position: absolute;bottom: 8px;width: 100%;height: 78px;
}
@keyframes shipLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.cloud{
     background: url('../img/cloud.svg') repeat-x;background-size: contain;     
     -webkit-animation: cloudLoop 50s linear infinite;animation: cloudLoop 80s linear infinite;
     position: absolute;bottom: 0;bottom: 100px;width: 100%;height: 42px;
}
 @-webkit-keyframes cloudLoop {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }

   100% {
     -webkit-transform: translate3d(-50%, 0, 0);
     transform: translate3d(-50%, 0, 0);
   }
 }

 @keyframes cloudLoop {
   0% {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }

   100% {
     -webkit-transform: translate3d(-50%, 0, 0);
     transform: translate3d(-50%, 0, 0);
   }
 }

/***************************************** Footer *****************************************/
footer{padding: 120px 0 40px;background: var(--primery);position: relative;}
footer::before{
  content: '';background-image: url(../img/footer-r-bg.svg);background-repeat: no-repeat;position: absolute;left: 0;top: 0;height: 100%;width: 233px;
}
footer .img-footer{max-width: 392px;margin-bottom: 22px;width: 100%;}
footer h2{
    max-width: 489px !important;font-weight: 500;font-size: 24px;line-height: 30px;margin: 0 auto;color: var(--bs-white);text-align: center;margin-bottom: 42px;
}
footer ul{list-style: none;padding: 0;margin: 0;display: flex;justify-content: center;gap: 32px;flex-wrap: wrap;}
footer ul a.nav-link{font-weight: 500;color: var(--bs-white) !important;padding: 0 !important;font-size: 16px;}
footer ul a.nav-link:hover{color: var(--logo-bg) !important;}
.email-address{color: var(--bs-white);margin-top: 52px;}
.icon-text{gap: 13px;font-weight: 500;font-size: 14px;}
.icon-main{flex: 0 0 407px;}
.icon-main a{margin-left: 37px;font-weight: 600;font-size: 20px;line-height: 30px;color: var(--bs-white);display: flex;}

.copy-right{background: #001145;padding: 18px 0;font-weight: 400;font-size: 16px;line-height: 24px;text-align: center;color: var(--bs-white);}


#up {cursor: pointer;position: fixed;bottom: 60px;right: 20px;display: none;z-index: 99;}


/***************************************** Media Query *****************************************/
@media only screen and (min-width:1200px) {
    .container {
        max-width: 1194px;
    }
}

@media only screen and (max-width: 1199px) {
    .callout h1{font-size: 52px;}
    .callout .big-text{font-size: 18px !important;}

    .vision-mission-content{flex: 0 0 370px;}

    .contact-us-bg{width: calc(50% - 240px);}
}

@media only screen and (max-width: 991px) {
    .navbar-brand img{max-width: 200px;}
    .nav-link {padding: 8px !important;}

    .callout h1{font-size: 42px;}

    h2.sub-title{font-size: 24px;}
    .who-we-are .img-box {flex: 0 0 300px;}

    .our-offshore{
        grid-template-columns: repeat(2, 1fr);
    }

    .looking-for-content .looking-for-content-box h3{font-size: 16px;}

    .vision-mission{flex-direction: column;}
    .vision-mission-content{flex: 100%;}

    .icon-main{flex: 0 0 46%;}

    footer {padding: 60px 0;}
    footer .img-footer {max-width: 350px;margin-bottom: 42px;}
    footer h2,.icon-main a{font-size: 18px;}
    footer ul a{font-size: 14px;}
    
    .contact-us-bg img{display: none;}
     .contact-form{width: 100%;}
}


@media only screen and (max-width: 767px) {
    .navbar{padding: 8px 0;}

    .callout h1{font-size: 36px;}
    .callout .big-text{font-size: 16px !important;}

    .who-we-are,.our-offshore{margin-bottom: 60px;}
    .about-us{padding: 60px 0;}

    .who-we-are .img-box,.icon-main{flex: 100%;}
    .who-we-are {flex-direction: column;align-items: start;}

    .our-offshore{
        grid-template-columns: repeat(1, 1fr);
    }

    .looking-for-main .w-50{width: 100% !important;}
    .our-core .content-box:nth-child(5){grid-column: unset;}    

    footer ul{gap: 24px;}

    .cloud{bottom: 70px;}
    .ship-left{height: 50px;}
    .ship-right{height: 30px;}

    .project-main .swiper {width: calc(min(1170px, 94%));}
    .swiper-content{padding: 20px;}
    .swiper-nav-wrapper{padding-right: unset;margin: 0 16px;}
    .swiper-content h3{font-size: 20px !important;margin-bottom: 6px;}
    .swiper-content h4{font-size: 18px !important;margin-bottom: 6px;}
    .swiper-content p{font-size: 14px;}
}

@media only screen and (max-width: 480px) {      
      .gap-15 a{font-size: 12px;padding: 15px 12px;}

      .looking-for-content{padding: 50px 16px;}

      .form-column {grid-template-columns: repeat(1, 1fr);gap: 20px;}
      .form-s div:nth-child(7){grid-column: unset;}
}