*html,body{
    width:100vw;
    height:100vh;
    padding: 0;
    margin:0;
    overflow-x: hidden;
   
}
body{
    font-family:'Inter var',sans-serif;    
}
body h{
    font-size: 40px;
}
body h1{
    font-size: 35px;
}
body h2{
    font-size: 30px;
}
body h3{
    font-size: 25px;
}
body h4{
    font-size: 20px;
}
body p{
    font-size: 18px;
    line-height: 1.8em;
}/*Top Nav bar*/
.about-page{
  
  height: auto;
  background-image:url('./images/ship.png') ;
  background-repeat: no-repeat;
  background-size: cover;
}
.frame-1{
  max-width: 1700px;
  margin: auto;
}
span.logo{
 
  position: absolute;
  left: 60px;
  top: 15px;
  width: 187px;
  height: 198px;
  background-image: url('./images/vvv logo final colour 3.png');
  background-repeat: no-repeat;
  background-size: auto 160px;
 
}
.nav {
  height: 200px;
  width: 100%;
 
  position: relative;
}
.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 10px 10px 10px;
  font-size: 22px;
  color: #fff;
  font-weight: 550;
}
.nav > .nav-links {
  font-size: 18px;
  display: inline;
  float: right;

}

.nav > .nav-links > ul li a{
    color: #fff;
  line-height: 40px;
  font-size: 16px;
  display: block;
  padding: 0 13px;
  text-decoration: none;
  text-align: center;

}
.nav > .nav-links > ul{
  list-style: none;
  position: relative;
  padding: 0;
  margin-top: 5px;
  
}
.nav > .nav-links > ul li{
  display: inline-block;
}
li.social-icon{
  display: flex;
  align-items: center;
  
}
.nav > .nav-links > ul li a:hover{
    background-color:#746160;
    border-radius: 5px;
    color:white;
  
}
.nav .nav-links a.active{
  background-color:#746160;
  color: white;
}
.nav .nav-links ul a.icon{
  margin-left: 80px;
  margin-right: 10px;
  }
 
  .nav .nav-links ul a i{
     padding: 7px;
     margin-left: 5px;
     background-color: #fff;
     border-radius: 50px;
 
  }
  .nav > .nav-btn {
    display: none; /*Hide toggle button for desktop*/
  }
   .nav > #nav-check {
    display: none;
  }
.social-icon a{
color:#000000;
}
  @media (max-width:750px) {
    
    .nav > .nav-btn {
      display: inline-block;
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .nav > .nav-btn > label {
      height: 50px;
      padding: 13px;
      display: inline-block;
      width: 50px;

    }
    .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .nav > .nav-btn > label > span {
      height: 10px;
      border-top: 2px solid white;
      display: block;
      width: 25px;

    }
    .nav > .nav-links {
      position: absolute;
      height: 0px;
      transition: all 0.3s ease-in;
      overflow-y: hidden;
      top: 50px;
      display: block;
      width: 100%;
      background-color: #333;
      left: 0px;
    }
    .nav > .nav-links > ul li a {
      display: block;
      width: 100%;
    }
      .nav > .nav-links > ul li{
        padding: 0;
        background-color: #333;
        display: block;
        margin-bottom: 20px;
         
      }
      .nav > .nav-links > ul li a{
          margin-left: 40%;
      }
      .nav .nav-links ul a.icon{
        margin-left: 39%;
      }

    .nav > #nav-check:not(:checked) ~ .nav-links {
      height: 0px;
    }
    .nav > #nav-check:checked ~ .nav-links {
      height: calc(70vh - 50px);
      overflow-y: auto;
    }
  }/*Top Nav bar*/
  .text1{
    padding:5px;
    width:33%;
    padding-left: 60px;
  }
  .watch{
    text-align: left;
    padding: 5px;
    padding-bottom: 200px;
    /* position: relative; */
  }
  .listwatch{
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ul.watch li{
    list-style-type: none;
    margin-left: 60px;
  }
  
  /* .listwatch span{
    position: absolute;
    left:8.5%;
    top:30%;
  } */
  .flex-container1{
    max-width: 1700px;
    margin: auto;
    display: flex;
    flex-direction: row;
  }
    .flex-left {
      padding: 10px;
      flex: 50%;
      text-align: left;
      padding-left: 60px;
      
    }
    .flex-right {
        padding: 10px;
        flex: 50%;
        text-align: left;
      }
      #Content-block
{
    height: 450px;
    width: 330px;
    border-radius: 4px;
    background-color: white;
    border: 2px solid #e8e8e8;
    border-bottom: 5px solid #c2c2c2;
    margin-left: 150px;
    margin-top: 50px;
    line-height: 1.8em;}
.topbar1{height: 41px;
    border-radius: 4px;
    width: 330px;
    background-color: #CBDBFD;}
    .dblock1{border: 2px dashed #D9D9D9;
        height: 160px;
        border-radius: 5px;
        margin-right: 25px;
        margin-left: 25px;        font-size: 11px;
        margin-top: 17px;
        padding: 10px;
        line-height: 1.5;
        }
.dblock1 h3 {margin: 0px;color: #016194;}
.dblock1 p,.dblock2 p{font-size: 12px;
margin-top: 0px;}
.dblock2{border: 2px dashed #D9D9D9;
    height: 160px;
    border-radius: 5px;
    margin-right: 25px;
    margin-left: 25px;
    margin-top: 6px;
    padding: 10px;
    line-height: 1.5;
    }
.dblock2 h3 
{
margin: 0px;color: #016194;}

.Vector
{margin-top: -503px;
    margin-left: 49px}
    .Vector-7
{margin-left: 486px;
    margin-top: -63px;}
.Group74
{margin-left: 15px;
    margin-top: 45px;}
.Ellipse43
{margin-left: 80px;
    margin-top: -48px;}
.lucide_mouse-pointer-2-1
{margin-left: 140px;
    margin-top: -97px;}
.Vector-3
{margin-left: 494px;
    margin-top: -85px;}
.Vector-4
{margin-left: 98px;
    margin-top: 188px;}
.Vector-5
{margin-left: 499px;
    margin-top: -67px;}
.Vector-6
{margin-left: 103px;
    margin-top: 145px;}
.Vector-8
{margin-left: 320px;
    margin-top: 3px;}
.Ellipse42
{margin-left: 452px;
    margin-top: -85px;}
.lucide_mouse-pointer-2
{margin-left: 436px;
    margin-top: -101px;}*/
.Picture-block
{margin-left: 13px;}

@media (max-width: 800px) {
  .flex-container1 {
    flex-direction: column;
  }}
  @media (max-width:500px) {
    
    .flex-right,.flex-left{
    width:100%;
   }}
   .footerimg{
    display:block;
    width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  }
  
  @media (max-width:500px) {
    .footerimg{
      width: 100%;
    }
  }
  .flex-container2{
   
     
      background-image: url('./images/Group\ 77.png');
      background-repeat: no-repeat;
      background-size: cover;
      }
      .frame2{
        display: flex;
        flex-direction: column;
        max-width: 1700px;
        margin: auto;
      }
     .flexcontainer2cont{
     max-width: 600px;
      float: right;
      margin-top: 100px;
      padding-right: 10px;
     }
     .flexcontainer2cont h1,.flexcontainer2cont p{
      margin: 0%;
     }
     .change-text{
      font-size: 80px;
      float: right;
      margin-top: 100px;
      margin-bottom: 0%;
      padding-right: 100px;
     }
      .Viewmore{text-decoration: none;
        color: white;
        border: 3px solid #0D4E3D;
        padding: 5px 12px;
        }
        .flex-container3{
                  background-color: #336D60; 
    margin: auto;
          margin-bottom: 70px;
        }
        .mySlides{
          display: flex;
          flex-direction: row;
          margin: auto;
          width: 100%;
          }
          .myslide-left{
            flex:50%;
          }
          .myslide-right{
            flex:50%;
          }
          .myslidecont{
            width:64%;
          }
          .explore{
            border:2px solid #CACACA;
            text-decoration: none;
            border-radius: 30px;
            padding: 8px 16px;
            color:white;
          }
          .slide-img1 {
            width: 250px;
            height: 270px;
            margin-left: 49%;
            margin-top: 2%;
            border-radius: 10px;
        }
          .slide-img2 {
            width: 250px;
            height: 270px;
            margin-left: 3%;
            border-radius: 10px;
        }
          .slideshow-container {
            max-width: 1700px;
            position: relative;
            margin: auto;
            padding: 30px;
            overflow: hidden;
            background-color: #336D60;
          }
            .dot {
              cursor:pointer;
              height: 13px;
              width: 13px;
              margin: 0 2px;
             background-color: #333;
              border-radius: 50%;
              display: inline-block;
              transition: background-color 0.6s ease;
            }
            .active,.dot:hover {
              border:1px solid black;
            }
              #list{
              list-style-type: none;
              text-decoration: none;
            }
            
            .slide-1 {
              /*background-color: red;*/
              position: relative;
            }
            .slide-2 {
             
              position: relative;
            }
            .slide-3 {
          
              position: relative;
            }
            .slide-4 {
          
              position: relative;
            }
            .slide-5 {
          
              position: relative;
            }
            .slide-6 {
          
              position: relative;
            }
            .slide-7 {
          
              position: relative;
            }
            .slide-8 {
          
              position: relative;
            }
            .slide-9 {
          
              position: relative;
            }
            .slide-10 {
          
              position: relative;
            }
            .slide-11 {
          
              position: relative;
            }
            .arrow{
              margin-left: 44%;
            }
            
            .slideintoleft {
              -webkit-animation-name: slideInL;
              -webkit-animation-duration: 0.5s;
              animation-name: slideInL;
              animation-duration: 0.5s;
            }
            
            @-webkit-keyframes slideInL {
              from {left: 100%} 
              to {left: 0}
            }
            
            @keyframes slideInL {
              from {left: 100%} 
              to {left: 0}
            }
            
            .slideintoright {
              -webkit-animation-name: slideInR;
              -webkit-animation-duration: 0.5s;
              animation-name: slideInR;
              animation-duration: 0.5s;
            }
            
            @-webkit-keyframes slideInR {
              from {left: -100%} 
              to {left: 0}
            }
            
            @keyframes slideInR {
              from {left: -100%} 
              to {left: 0}
            }
            
            .slideouttoright {
              -webkit-animation-name: slideOutR;
              -webkit-animation-duration: 0.5s;
              animation-name: slideOutR;
              animation-duration: 0.5s;
            }
            
            @-webkit-keyframes slideOutR {
              from {left: 0} 
              to {left: -100%}
            }
            
            @keyframes slideOutR {
              from {left: 0} 
              to {left: -100%}
            }
        .flex-container3 h1{
          text-align: center;
         padding-top: 5%;
        }
        @media (max-width:800px) {
        .mySlides{
          flex-direction: column;
        }
        }
        .spclearance{
          max-width: 1700px;
          margin: auto;
        }
        .spclearance h1{
          padding-left: 60px;
        }
        .row,.row1,.row2, .row3{
          display: flex;
          flex-direction:row ;
        width:90%;
        margin: auto;
        margin-top: 5%;
        justify-content: space-between;
        }
        .row{
          margin-top: 70px;

        }
        
        .column{
          width: 26%;
    padding: 35px;
    padding-left: 22px;
    border-radius: 20px;
        }
        #column-change{
          visibility: hidden;
        }
        .galley-img img{
          width:50px;
          height:50px;
        }
        .desc p{
          font-size: 15px;
          color:#676767;
        }
        @media (max-width:500px) {
          .row,.row1,.row2,.row3{
            flex-direction: column;
            }
            .spclearance h1{
              padding-left: 20px;
            }
            
          }
        .working-img{
          display: block;
          margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
        }
        .servicecontainer{
          max-width: 1700px;
          width:90%;
          margin: auto;
          background-color: #F5F5F5;
          margin-top: 10%;
          border-radius: 50px;
        }
        .servicecontainer h2{
          text-align: center;
          padding-top: 5%;
        }
        .servicerow{
          display: flex;
          flex-direction: row;
          padding: 20px;
          padding-bottom: 8%;
          width:95%;
          margin: auto;
          justify-content: space-between;
        }
        .circle-1,.circle-2,.circle-3,.circle-4{
          background-color:transparent;
          width:200px;
          height:200px;
          border-radius: 50%;
        }
        .circle-1 p,.circle-2 p,.circle-3 p,.circle-4 p{
          text-align: center;
          }
          .circle-1{
            border:3px solid #FF0000;
          }
          .circle-2{
            border: 3px solid #00FF47;
          }
          .circle-3{
            border: 3px solid #0057FF;
          }
          .circle-4{
            border: 3px solid #FFF500;
          }
          .circle-1 img,.circle-2 img,.circle-3 img,.circle-4 img{
           /* margin-left: 38%; */
           margin-top: 17%;
           width:50px;
           height:50px;
          }
          .servicerow{
            flex-direction: row;
            text-align: center;
          }
          .speccont{
            max-width: 1700px;
            margin: auto;
            padding-left: 84px;
            margin-top: 5%;
          }
          .packagecontainer{
            max-width: 1400px;
            margin: auto;
            margin-top: 50px;
            width:80%;
            padding:70px;
            background-color: #F5F5F5;
            border-radius: 50px;
          }
          .background-container{
         
          display: flex;
          border-bottom: 2px solid #000000;
          }
          .background-container-left
          {
text-align: left;
flex: 2%;
          }
          .bar{
            width:60px;
            height:400px;
            background-color: yellow; 
            background-image: linear-gradient(#FFF504,#FF008A,#C900EA,#0038FF);
          }
          .background-container-right{
            flex: 98%;
            text-align: left;
          }
          .packcont{
            list-style-type: none;
            padding-top: 30px;
          }
          .packcont li{
            gap: 4%;
            display: flex;
            align-items: center;
          }
          
          .globalcont{
            max-width: 1700px;
            margin: auto;
            display: flex;
            flex-direction: row;
           margin-top: 10%;
          }
          .left{
            flex: 50%;
            padding: 15px;
            padding-left: 60px;
          }
          .right{
            flex: 50%;
          }
          .menu{
            width: 350px;
            height:350px;
            position:relative;
        margin:auto;
            align-items: center;
            display:flex;
            justify-content: center;
          }
          .menu img{
            height:50px;
            width:50px;
        }
        .menu li{
            position:absolute;
            list-style-type: none;
        transform-origin: 175px;
        left: 0;
        transform: rotate(calc(360deg/6*var(--i)));
        transition: 1.5s;}
        .menu li img{
            transform: rotate(calc(360deg/-6*var(--i)));  
        }
        
    .toggle{
      position:absolute;
      height: 120px;
      width:120px;
      background-color: #f7fdfd;
      border: 1px solid black;
      border-radius: 70px;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      display: flex;
  z-index: 10000;
  font-size: 2em;
  transition: transform 1.5s;
}
.menu.active .toggle{
  transform:rotate(315deg);
}
.menu.active li{
  transform:(calc(360deg/6*var(--i)));
}
@media (max-width:500px) {
  .globalcont{
    flex-direction: column;
    }
  }
  .cargo,.skill{
    max-width: 1700px;
    margin: auto;
    margin-top: 9%;
    display: flex;
    flex-direction: row;
  }
  .cargo-left{
    flex:40%;
      }
  .cargo-right{
    flex:60%;
  }
  .cargorow1, .cargorow2{
display:flex;
justify-content: space-evenly;
  }
  .cargorow2{
    margin-top: 5%;
  }
  .cargocolumn{
   width:40%; 
  }
  .cargo-img{
    padding-left: 10%;
  }
  .footer-logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
  }
  .footermenu{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
    justify-content: space-between;
    margin-top: 3%;
  }
  .footermenu li{
     list-style-type: none;  
}
  .footericon{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 15%;
    justify-content: space-between;
    margin-top: 3%;
  }
  .footericon li{
    padding: 10px;
    list-style-type: none; 
  }
  .footermenu li a{
    text-decoration: none;
    color:#000000;
  }
  @media (max-width:500px) {
    .text1{
      width: 93%;
      padding-left: 26px;
    }
    ul.watch li {
      margin-left: 24.5%;
  }
  .flex-left
  {padding-left: 0;}
  #Content-block{
    margin-left:28px;
  }
  .Picture-block{
    display: none;
  }
 
  .slide-img1{
    margin-left: 28%;
    width: 180px;
    height: 200px;
  }
  .slide-img2 {
    width: 180px;
    height: 200px;}
    .change-text{
      font-size: 45px; 
      padding-right: 0%;
      padding: 8px;
    }
    .myslidecont {
      width: 87%;
  }
  .arrow{
    margin-left: 69%;
  }
  .column{
    width:84%;
    margin-top: 3%;
  }
  #column-change{
    display: none;
  }
  .row3{
    width:90%;
  }
  .servicerow {
    padding:0;
  }
  .circle-1 img,.circle-2 img,.circle-3 img,.circle-4 img{
    width:20%;
    margin-left: 2%;
  }
  .circle-1 p,.circle-2 p,.circle-3 p,.circle-4 p{
    font-size: 13px;
  }
  .packagecontainer{
    width:55%;
  }
  .background-container{
    border-bottom: none;
  }
  .bar,.line{
    display:none;
  }

  .cargo, .skill {
    flex-direction: column;
  }
  .footermenu{
    width:100%;
  }
  .footericon{
    width:50%;
  }
  .slide-img1{
    margin-top: 8%;
  }
  .servicerow{
    flex-direction: column;
  }
  .circle-1,.circle-2,.circle-3,.circle-4{
    margin-left: 19%;
    margin-top: 8%;
    margin-bottom: 20px;
  }
  .speccont{
    margin-left: 0;
    max-width: 100%;
    text-align: center;
    padding-left: 0px;
  }
  .flexcontainer2cont{
    text-align: center;
    max-width: 100%;
  }
  .flex-left{
    text-align: center;
  }
  body h{
    font-size: 30px;
}
body h1{
    font-size: 25px;
}
body h2{
    font-size: 20px;
}
body h3{
    font-size: 15px;
}
body h4{
    font-size: 10px;
}
body p{
    font-size: 13px;
    padding: 8px;
}
span.logo {
  left: 105px;
  top: 47px;
}}

    .contact-section {
      padding: 50px 20px;
      background-color: #fff;
    }

    .contact-section h1 {
      text-align: center;
      font-size: 28px;
      color: #000;
      margin-bottom: 40px;
      font-weight: 600;
    }

    .contact-wrapper {
      display: flex;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
      flex-wrap: wrap;
    }

    .contact-column {
      flex: 1 1 48%;
    }

    .contact-column h2 {
      font-size: 18px;
      color: #007a8a;
      margin-bottom: 20px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 8px;
      font-weight: 600;
    }

    .contact-card {
      background-color: #fff;
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 15px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: 0.3s ease;
    }

    .contact-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    }

    .contact-card h3 {
      margin-top: 0;
      color: #007a8a;
      font-size: 16px;
      font-weight: 600;
    }

    .contact-card p {
      margin: 5px 0;
      font-size: 14px;
      line-height: 1.4;
      color: #333;
    }

    .contact-card a {
      color: #007a8a;
      text-decoration: none;
      font-weight: 500;
    }

    .contact-card a:hover {
      text-decoration: underline;
    }

    .contact-card i {
      margin-right: 8px;
      color: #007a8a;
    }

    @media (max-width: 768px) {
      .contact-wrapper {
        flex-direction: column;
      }
      .contact-column {
        width: 100%;
      }
    }