@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --primary: #242A44;
  --secondary: #4A5565;
  --accent: #1B5D73;
  --white: #ffffff;
  --black: #000000;
  --bg-light: #F2F4F4;
  --inter: "Inter", sans-serif;
  --dm: "DM Sans", sans-serif;
}
a:-webkit-any-link:focus-visible{
      outline: none;
}
.full-height {
  height: 100vh;
}
.navbar .nav-link.active {
    color: var(--accent);
}
.subtxt-width{
  width: 60%;
}
.text-width{
  width: 75%;
}
.text-basic { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }

.dm-sans {
  font-family: "DM Sans", sans-serif;
}

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

body {
   font-family: "Inter", sans-serif;
  font-weight: 400;
}

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }


header{
  position: sticky;
  top: 0;
  z-index: 100000;
}

.footer-linkedin svg{
font-size: 22px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "DM Sans", sans-serif;
}
::placeholder {
  color: #aaa;   /* light gray */
  opacity: 1;    /* important for full visibility */
}
.form-control::-webkit-input-placeholder {
  color: #adb5bd;
}

.form-control:-ms-input-placeholder {
  color: #adb5bd;
}

.form-control::placeholder {
  color: #adb5bd;
}
.form-control::placeholder {
  color: #adb5bd;  /* Bootstrap light gray */
}

.bdr-radius{
 border-radius: 30px;
}   

.home-head h1{
  font-size: 62px;
  font-weight: 600;
  color: var(--primary);
}
.web-txt{
    font-size: 18px;
    color: var(--secondary);
    font-weight: 400;
    line-height: 30px;
}
.subtitle{
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 50px;
}
.btn-close:focus{
  box-shadow: none;
}
.caption{
font-family: var(--dm);
font-weight: 900;
font-size: 24px;
line-height: 32px;
}
.service-txt{
font-family: var(--dm);
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    display: flex;
    gap: 25px;
}
.service-auditor{
    position: absolute;
    top: 60px;
    width: 80%;
    left: 60px;
}
.hs-box{
    border-top: 1px solid  #ffffff99;
    padding: 20px 0;
    color: var(--white);
}
.hs-box span{
    font-size: 18px;
    color: #ffffff99;
}


.bg1{
	background:var(--bg-light);
}
.bg2{
  background-color: var(--accent);
}
.bg3{
  background: var(--primary);
}
.pd-80{
	padding: 80px 0;
}
.pd-40{
	padding: 40px 0;
}

/* ===== Button ===== */
.btn-isi {
  display: inline-block;
  padding: 0px 0px;
  color: var(--white);
  background: var(--primary);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Text + icon */
.btn-isi span {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2; 
  padding: 10px 15px;
  transition: color 0.4s cubic-bezier(0.7,0,0.9,1);
}

/* ===== Circle animation ===== */
.btn-isi::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 60px;
  height: 50px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--accent);
  transform-origin: 100% 50%;
  transform: scale(1, 2);
  transition: transform 0.4s cubic-bezier(0.7,0,0.9,1);
  z-index: 1;
}

.btn-isi:hover::before {
  transform: scale(9, 9);
}

.btn-isi svg {
  font-size: 12px;
  line-height: 1;
  background: var(--white);
  color: var(--primary);
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}


.btn-isi:hover i {
  transform: translateX(4px);
}

.btn-isi.btnwhite{
   background: var(--white);
   color:var(--primary);
}
.btn-isi.btnwhite svg{
  background: var(--primary);
  color:var(--white);
}

.btn-isi.btnwhite:hover span {
  color: white;
}



/* button end */

.para-stick{
    position: sticky;
    top: 90px;
    line-height: 30px;
}
.navbar-toggler:focus{
  box-shadow:none;
}


.wave-bg{
  background: url(../images/home/wave-bg.png);
  position: relative;
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom;
}

.homebread-img img {
  clip-path: url(#roundedHex);
  width: 100%; 
  border-radius: 15px;
  height: 580px;
  object-fit: cover;
}

.aboutbread-img img{
  clip-path: url(#roundedPoly);
  width: 100%; 
  border-radius: 15px;
  height: 580px;
  object-fit: cover;
}
.contactbread-img img{
  clip-path: url(#roundedPoly2);
  width: 100%; 
  border-radius: 15px;
  height: 580px;
  object-fit: cover;
}













.maritime-section {
    background: #fff;
    padding: 9rem 0px 5rem;
    position: relative;
    overflow: visible;
}

.crane-wrapper {
  margin-top: -45%;
}

.crane-wrapper img {
    width: 100%;
}

.section-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.section-subtitle {
    color: #555;
    font-size: 0.95rem;
    margin-top: 10px;
}

/* Pyramid rows */
.pyramid-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Cards */
.card-box {
    border-radius: 10px;
    padding: 35px 20px;
    color: #fff;
    width: 265px;
    flex-shrink: 0;
}

.card-box .badge-code {
    font-size: 0.65rem;
    color: #FFFFFF47;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.card-box h5 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}

.card-box p {
    font-size: 0.82rem;
    color: #b0cdd5;
    margin: 0;
}
.green-box{
  background: url(../images/home/crean-green.png);
      background-size: contain;
    background-repeat: no-repeat;
    height: 174px;
}
.blue-box{
  background: url(../images/home/blue-box.png);
      background-size: contain;
    background-repeat: no-repeat;
}
.lblue-box{
  background: url(../images/home/l-bluebox.png);
      background-size: contain;
    background-repeat: no-repeat;
}


.top-box{
	  position: absolute;
    left: -19%;
}
.mt-9{
    margin-top: 9rem;
}


.pendulum-box {
  transform-origin: top center;
  animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
  0%   { transform: rotate(5deg); }
  50%  { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}


	/* .maritime-section {
      background: #eceef1;
      padding: 42px 28px 64px;
      position: relative;
      overflow: visible;
      min-height: 96vh;
    }

    .crane-wrapper {
      position: absolute;
      top: -2px;
      right: 18px;
      width: 335px;
      z-index: 3;
      pointer-events: none;
    }

    .crane-wrapper img {
      width: 100%;
      display: block;
    }

    .section-title {
      font-size: clamp(2rem, 3vw, 3rem);
      font-weight: 700;
      color: #1c2340;
      max-width: 460px;
      line-height: 1.15;
      margin-bottom: 10px;
    }

    .section-subtitle {
      color: #4e556f;
      font-size: 1.1rem;
      max-width: 420px;
      margin-top: 12px;
      line-height: 1.5;
    }

    .pyramid-grid {
      position: relative;
      z-index: 2;
      overflow: visible;
      margin-top: 42px;
      padding-right: 100px;
    }

    .top-card-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 22px;
      position: relative;
      z-index: 2;
      overflow: visible;
    }

    .crane-box {
      transform: translate(84px, -120px) rotate(-1.5deg);
      transform-origin: top center;
      opacity: 0;
      transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
      will-change: transform, opacity;
    }

    .maritime-section.in-view .crane-box {
      transform: translate(-10px, 18px) rotate(0deg);
      opacity: 1;
      animation: settle-sway 1.1s ease-out 1.05s 1;
    }

    .crane-box::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 100%;
      width: 2px;
      height: 122px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, #f7be45, #f29a2f);
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.35s ease 0.18s;
    }

    .crane-box::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: calc(100% + 116px);
      width: 12px;
      height: 12px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: #f39e31;
      border: 1px solid rgba(241, 186, 86, 0.96);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
      opacity: 0;
      transition: opacity 0.35s ease 0.18s;
    }

    .maritime-section.in-view .crane-box::before,
    .maritime-section.in-view .crane-box::after {
      opacity: 1;
    }

    @keyframes settle-sway {
      0% { transform: translate(-10px, 18px) rotate(0deg); }
      35% { transform: translate(-13px, 20px) rotate(-0.7deg); }
      70% { transform: translate(-8px, 17px) rotate(0.5deg); }
      100% { transform: translate(-10px, 18px) rotate(0deg); }
    }

    .card-box {
      border-radius: 14px;
      padding: 16px 18px 20px;
      color: #fff;
      position: relative;
      box-shadow: 0 14px 32px rgba(7, 18, 37, 0.24);
      border: 1px solid rgba(159, 214, 236, 0.28);
      backdrop-filter: blur(2px);
    }

    .card-box::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      pointer-events: none;
    }

    .card-box.standards-card {
      background: linear-gradient(135deg, #0f4e4f, #06303f);
    }

    .card-box.expertise-card {
      background: linear-gradient(135deg, #001f5f, #001845);
    }

    .card-box.rapid-card {
      background: linear-gradient(135deg, #206f8a, #1a5774);
    }

    .card-box.inspectors-card {
      background: linear-gradient(135deg, #1e6780, #14586e);
    }

    .card-box.coverage-card {
      background: linear-gradient(135deg, #0c4e4f, #0b3d47);
    }

    .card-box.client-card {
      background: linear-gradient(135deg, #052e74, #041f55);
    }

    .card-box .badge-code {
      font-size: 0.6rem;
      color: rgba(163, 219, 234, 0.62);
      letter-spacing: 1px;
      margin-bottom: 8px;
      display: block;
    }

    .card-box h5 {
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 8px;
      line-height: 1.1;
    }

    .card-box p {
      font-size: 0.95rem;
      color: rgba(220, 241, 249, 0.9);
      margin: 0;
      line-height: 1.45;
    }

    .top-card-wrapper .card-box {
      width: min(340px, 100%);
      min-height: 174px;
    }

    .row-middle {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    .row-middle .card-box {
      width: min(300px, 100%);
      min-height: 170px;
    }

    .row-bottom {
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .row-bottom .card-box {
      width: min(245px, 100%);
      min-height: 170px;
    }

    @media (max-width: 1199px) {
      .pyramid-grid {
        padding-right: 20px;
      }

      .crane-wrapper {
        width: 280px;
        right: 4px;
      }

      .card-box h5 {
        font-size: 1.7rem;
      }
    }

    @media (max-width: 991px) {
      .maritime-section {
        padding: 30px 18px 46px;
      }

      .crane-wrapper {
        display: none;
      }

      .pyramid-grid {
        margin-top: 28px;
        padding-right: 0;
      }

      .row-middle,
      .row-bottom {
        flex-direction: column;
        align-items: center;
      }

      .row-middle .card-box,
      .row-bottom .card-box,
      .top-card-wrapper .card-box {
        width: min(480px, 100%);
      }

      .crane-box {
        transform: translate(0, -40px);
      }

      .crane-box::before,
      .crane-box::after {
        display: none;
      }
    } */


    .site-footer{
      background: var(--primary);
    }

    .footer-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand-section p{
    font-size: 14px;
    line-height: 25px;
    font-weight: 300;
    margin-bottom: 0px;
    }
 
    .footer-brand-section a{
        text-decoration: none;
        color:var(--white);
            font-size: 14px;
    font-weight: 300;
    }
    .footer-bottom{
    border-top: 1px solid #ffffff99;
    padding-top: 30px;
    }
   .address-txt{
    display: flex;
    align-items: start;
    gap: 15px;
    margin-bottom: 15px;
    }
  .address-txt svg{
        margin-top: 8px;

  }
    
  .fs-16{
    font-size: 16px;
  }
      .footer-projects{
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      }

      .footer-projects .project-list{
        padding: 0;
      }

     .footer-projects .project-list a{
       color: white;
      font-size: 14px;
      font-weight: 300;
      text-decoration: none;
     }
      .footer-projects .project-list li{
        list-style: none;
        margin-bottom: 12px;
      }



.testimonial-slider .slick-slide {
  margin-right: 60px;
}

.testimonial-slider .slick-list {
  padding-right: 0px; /* space for half card */
}
.testi-icon{
    background: var(--primary);
    color:var(--white);
    width: 50px;
    display: flex;
    height: 50px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}
   
.stars{
  color:#FDC700;
}

.contact-box a{
  color:var(--primary);
}

.contact-form label{
    font-size: 13px;
    color: #242a44;
    font-weight: 700;
}
.contact-form .form-control:focus{
  box-shadow: none;
}
.contact-map{
background: url(../images/contact/contact-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
}

.horizon-menu li{
    padding: 12px 6px;
}
.horizon-menu li a{
color:black;
font-weight: 400;
}

.blue-project .project-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.blue-project .project-card .overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.blue-project .project-card h4 {
  margin-top: 10px;
  font-weight: 600;
}

.blue-project .nav-pills .nav-link {
  border-radius: 50px;
  background:var(--white);
  color: var(--secondary);
   border: 2px solid var(--bg-light);
  margin-bottom: 15px;
}

.blue-project .nav-pills .nav-link.active {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}

.blue-project .project-card .overlay {
  transition: background 0.4s ease;
}

.blue-project .project-card:hover .overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.blue-project .project-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.blue-project .project-card img {
     height: 450px;
    object-fit: cover;
    transition: transform 0.5s ease;
    max-height: 425px;
}


.blue-project .project-card:hover img {
  transform: scale(1.08);
}


.project-next{
  background: url(../images/project/contact.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 9rem 45px;
  border-radius: 30px;
  background-position: center;
}
/* .about-head{
      padding: 0rem 0 0rem 7rem;
} */

.about-mission{
  background: url(../images/about/mission.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}


.abtbox1{
  background: #242A44;
}
.abtbox2{
  background: linear-gradient(180deg, #1B5D73 0%, #242A44 100%);
}
.abtbox3{
  background: #1B5D73;
}
.abtbox4{
  background: #E5E7EB;
}
.core-box{
    height: 100%;
    padding: 30px;
    border-radius: 30px;
}
.core-box img{
      width: 55px;
}

.principal-section{
   background: url(../images/about/girish-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  /* background-attachment: fixed; */
}
.about-custom {
  background: url(../images/about/cta.webp) no-repeat center/cover;
  border-radius: 30px;
  /* min-height: 450px; */
  padding: 0 40px; 
}
.home-contact{
    background: url(../images/home/wave.png) no-repeat center/cover;
}
.service-contact{
background:url(../images/services/water.webp) no-repeat center/cover;
}

.b-radius1{
      border-radius: 30px 0 0px 30px;
}
.b-radius2{
      border-radius: 0 30px 30px 0;
}


.scroll-top.show {
    opacity: 1;
    visibility: visible;
}
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent);
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
/* content width control */
.content-box {
  max-width: 510px;
}

.counter-txt h2 {
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
}

.counter-txt p {
  margin-top: 10px;
  color: var(--white);
  font-size: 16px;
  margin-bottom: 0;
}

/* .work-section{
  background: url(../images/services/service-bg.webp);
} */

.work-box{
  padding: 15px 0;
  color: white;
   max-width:100%;
}
.work-box img{
    width: 68px;
    border-radius: 100%;
    height: 68px;
}
.work-box p{
  font-size: 16px;
}
.form-select.is-invalid:focus, .was-validated .form-select:invalid:focus{
box-shadow:none;
}

/* stagger effect */
.work-box:nth-child(1) { transform: translateX(-130px); }
.work-box:nth-child(2) { transform: translateX(-70px); }
.work-box:nth-child(3) { transform: translateX(-55px); }
.work-box:nth-child(4) { transform: translateX(-95px); }

@media (max-width: 992px) {
  .work-box {
    transform: none;
  }
}














.why-join-section {
  background-attachment: fixed;
    background: #0a1628;
   background: url(../images/register/water.webp);
    background-size: cover;
    background-position: center;
    /* padding: 60px 0 80px; */
    color: #fff;
    overflow: hidden;
    background-attachment: fixed;
}

.wj-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.wj-subtitle {
    color: #cdd6e0;
    font-size: 0.95rem;
    max-width: 480px;
    margin-bottom: 40px;
}

/* 3-column layout */
.wj-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wj-left,
.wj-right {
    display: flex;
    flex-direction: column;
    gap: 150px;
    flex: 1;
}
.wj-right{
  gap: 50px;
}
/* Center ship */
.wj-center {
    flex: 0 0 340px;
    max-width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ship-img {
    width: 100%;
    display: block;
    height: 892px;
    object-fit: cover;
    object-position: top;
    z-index: 999;
}

/* Card + arrow wrapper */
.wj-card-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Right side: arrow comes from right, so reverse order */
.right-wrap {
    flex-direction: row-reverse;
}

/* SVG arrow */
.wj-arrow {
    width: 140px;
    height: 60px;
    flex-shrink: 0;
}

/* Cards */
.wj-card {
    background: rgba(245, 247, 248, 0.97);
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 75%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    display: flex;
  align-items: stretch;
}
[data-aos] {
  overflow: hidden;
}


.wj-num {
     color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 40px;
  border-radius: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px;
}


.wj-arrow1{
position: relative;
}

.wj-arrow1::after{
  content: "";
 display: inline-block;
    width: 535px;
    height: 72px;
    background: url(../images/register/left.svg) no-repeat center;
    background-size: contain;
    margin-right: 8px;
    position: absolute;
    top: -73px;
    right: -208px;
}
.wj-arrow2{
  position: relative;
}
.wj-arrow2::before{
     content: "";
    display: inline-block;
    width: 493px;
    height: 79px;
    background: url(../images/register/right.svg) no-repeat center;
    background-size: contain;
    margin-right: 8px;
    position: absolute;
    top: -81px;
    right: 76px;
}
/* Right cards vertical stagger — 02 upar, 04 neeche */
.wj-right .wj-card-wrap:first-child {
    margin-top: 10rem;
}
.wj-right .wj-card-wrap:last-child {
    margin-top: 40px;
}

/* service-faqs */
.accordion-button:not(.collapsed){
  background: #1B5D7321;
}
.accordion-item:not(:first-of-type),.accordion-item{
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.accordion-button:focus{
  box-shadow:none;
}
:focus-visible{
  outline:none;
}
.accordion-item:last-of-type{
  border-radius: 0;
}
.accordion-body{
  background: #1B5D7321;
  border-radius: 0 0 30px 30px;
}
.accordion-item{
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.accordion-item:first-of-type>.accordion-header .accordion-button{
      border-radius: 30px 30px 0 0;
}
.contact-address{
    border-radius: 0px 0px 30px 30px;
    padding: 20px;
    margin-top: -15px;
}
.service-box button{
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}
.service-box p{
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary);
    line-height: 26px;
}

.accordion-button {
 border-radius: 30px 30px 0px 0px;
}

.form-select:focus{
  box-shadow: none;
}

.how-we-work-testing{
  border-radius: 0px 80% 80% 0;
}