*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Syne', sans-serif;
    font-family: 'DM Sans', sans-serif;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: url(images/HeroImg.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

.headline-box{
    margin-left: 5%;
}

nav{
    width: 90%;
    margin: auto;
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items:center;
}

nav img{
    width: 150px;
}

.nav-links{
    flex: 1;
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color:  #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

#nav-cta{
    color: #fff;
}

.nav-links ul li a:hover{
    color: #C71928;
}

.nav-links ul li:hover::after{
    width: 100%;
}

.headline-box{
    width: 90%;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
}

.headline-box h1{
    font-size: 55px;
}

.headline-box p{
    margin: 5px 0 20px 0;
    font-size: 20px;
}

.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    background: #C71928;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    margin-right: 10px;
}

.ghost-btn{
    display: inline-block;
    text-decoration: none;
    color: #C71928;
    border: 1px solid #C71928;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    background: none;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
}

.hero-btn:hover{
    color: #fff;
    background: #A01824;
    transition: 0.5s;
}

.ghost-btn:hover{
    color: #fff;
    background: #A01824;
    transition: 0.5s;
}

nav .fa-solid{
    display: none;
}  

.presence{
    margin: auto;
    width: 100%;
    color: #000;
    position: relative;
    text-align: center;
    padding-bottom: 50px;
}

.presence p{
    margin: 50px 10px 20px 10px;
    text-align: center;
}

.presence .clients{
    width: 60%;
    display: inline-block;
    overflow: hidden; 
    white-space: nowrap;
    background: #DFDCDC;
    border-radius: 10px;
    position: relative;
}

.presence .clients ul li{
    display: inline-flex;
    flex-wrap: wrap;
    padding: 10px 0;
    justify-content:center;
}

.area-row{
    margin-top: 220px;
    margin: auto;
    width: 80%;
    position: relative;
    display: flex;
    gap: 10%;
    flex-wrap: wrap;
    align-items: center;
}

.statement-row h2{
    margin: auto;
    display: flex;
    flex: 1;
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 40px;
}

.statement-col{
    display: flex;
    margin-bottom: 24px;
}

.statement-row p{
    font-size: 30px;
}

/*----- CTA -----*/
.cta{
    color: #fff;
    margin: 100px auto;
    width: 80%;
    background-image: url(images/CTA.png);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 50px 0;
}

.cta p{
    margin: 35px 0;
}  

/*------------ Footer -----------*/

.footer{
    width: 100%;
    justify-content: center;
    position: relative;
    bottom: 0;
    background-color: #F2F2F2;
    padding: 50px 0;
    font-size: 16px;
}

.footer-row{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-col{
    flex-basis: 35%;
    padding: 10px;
    justify-content: space-between;
}

.footer-col:nth-of-type(3){
    flex-basis: 10%;
}

.footer-col .comp-name{
    font-weight: 700;
}

.footer-col .reg-no{
    font-size: 12px;
}

.footer-col .affiliate{
    text-align: right;
}

.icons .fa-brands{
    margin: auto;
    text-align: center;
    color: #fff;
    background-color: #C71928;
    border-radius: 50%;
    padding: 10px;
    margin-right: 15px;
    cursor: pointer;
    text-decoration: none;
}

.copyright{
    width: 100%;
    padding: 30px 0;
    bottom: 0;
    color: #fff;
    background-color: #C71928;
    text-align: right;
}

.copyright p{
    padding-right: 10%;
}

@media(min-width: 701px) and (max-width: 1200px){
    .header{
        background-size: cover;
        background-position: left;
    }
    .headline-box{
        top: 50%;
    }
    .headline-box h1{
        font-size: 30px;
    }
    .headline-box p{
        font-size: small;
    }
    .hero-btn{
        padding: 10px 15px;
        font-size: 12px;
    }
    .ghost-btn{
        padding: 10px 15px;
        font-size: 12px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: fixed;
        background: #fff;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa-solid{
        display: block;
        color: #000;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
    .presence{
        width: 100%;
    }
    .presence p{
        width: 80%;
        margin-left: 10%;
        margin-bottom: 20px;
        margin-right: 10%;
        font-size: 14px;
    }
    .presence .clients ul li{
        width: 16%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: center;
        margin: auto;
    }
    .presence .clients{
        width: 80%;
    }
    .presence img{
        width: 120%;
    }
    .onMobile{
        display: none;
    }
    .area-col{
        width: 70%;
        margin: auto;
    }
    .statement-col h2{
        text-align: center;
        font-size: 40px;
    }
    .area-col p{
        text-align: center;
        font-size: 20px;
    }
    .area-col video{
        margin: 5px auto;
        width: 100%;
        height: 100%;
    }
    .vlhome{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   
    }
    .cta h2{
        font-size: medium;
        padding: 0 10px;
    }
    .cta p{
        font-size: smaller;
        margin-left: 15px;
        margin-right: 15px;
    }
    .footer{
        text-align: center;
        font-size: smaller;
    }
    .footer-col{
        flex-basis: 100%;
        padding-top: 20px;
    }
    .footer-col:nth-of-type(3){
        flex-basis: 60%;
        margin: auto;
    }
    .footer .mainlogo img{
        width: 50%;
    }
    .footer .aff-logo img{
        width: 90%;
    }
    .copyright p{
        width: 90%;
        font-size: 14px;
        margin: auto;
        text-align: center;
        padding-right: 0;
    }
}

@media(max-width: 700px){
    .header{
        background-size: cover;
        background-position: left;
    }
    .headline-box{
        top: 50%;
    }
    .headline-box h1{
        font-size: 30px;
    }
    .headline-box p{
        font-size: small;
    }
    .hero-btn{
        padding: 10px 15px;
        font-size: 12px;
    }
    .ghost-btn{
        padding: 10px 15px;
        font-size: 12px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: fixed;
        background: #fff;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa-solid{
        display: block;
        color: #000;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
    .presence{
        width: 100%;
    }
    .presence p{
        width: 80%;
        margin-left: 10%;
        margin-bottom: 0;
        margin-right: 10%;
        font-size: small;
    }
    .presence .clients ul li{
        display: none;
    }
    .onMobile{
        text-align: center;
        margin-top: -20px;
    }
    .presence .clients{
        width: 100%;
    }
    .clients-mobile ul li{
        width: 16%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: center;
        margin: auto;
    }
    .presence img{
        width: 120%;
    }
    .area-col{
        width: 70%;
        margin: auto;
    }
    .statement-col h2{
        text-align: center;
        font-size: 25px;
    }
    .area-col p{
        text-align: center;
        font-size: medium;
    }
    .area-col video{
        margin: 50px auto;
        width: 100%;
        height: 100%;
    }
    .vlhome{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   
    }
    .cta h2{
        font-size: medium;
        padding: 0 10px;
    }
    .cta p{
        font-size: smaller;
        margin-left: 15px;
        margin-right: 15px;
    }
    .footer{
        text-align: center;
        font-size: smaller;
    }
    .footer-col{
        flex-basis: 100%;
        padding-top: 20px;
    }
    .footer-col:nth-of-type(3){
        flex-basis: 60%;
        margin: auto;
    }
    .footer .mainlogo img{
        width: 50%;
    }
    .footer .aff-logo img{
        width: 90%;
    }
    .copyright p{
        width: 90%;
        font-size: 14px;
        margin: auto;
        text-align: center;
        padding-right: 0;
    }
}

/*---------- ABOUT US ----------*/

.left-header{
    margin-top: 20px;
}

.lh-row{
    width: 80%;
    margin: auto;
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.lh-col{
    display: flex;
    flex-basis: 20%;
    padding: 10px;
    text-align: justify;
}

.lh-col:nth-of-type(2){
    flex-basis: 60%;
}

.lh-col h1{
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
}

.lh-col p{
    font-size: 20px;
    padding-right: 100px;
}

.values{
    margin: 80px 0;
}

.values-row{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.values-col{
    flex-basis: 25%;
    padding: 10px;
    text-align: justify;
    height: 100%;
}

.values-col:nth-of-type(2){
    flex-basis: 60%;
}

.values p{
    font-size: 20px;
}

.quote{
    width: 100%;
    display: flex;
    color: #fff;
    background-image: url(images/AboutUsQuote.png);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    align-items: center;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 90px 100px;
    position: relative;
}


.subtext{
    padding-left: 30px;
    padding-right: 100px;
}

.ghost-subheader{
    display: inline-block;
    text-decoration: none;
    color: #C71928;
    border: 1px solid #C71928;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    background: none;
    position: relative;
    border-radius: 10px;
}

/*------------ Our Services ------------*/

.offerings{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.offerings h1{
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
    margin-bottom: 80px;
    text-align: center;
}

.offerings h2{
    font-size: 40px;
    padding-bottom: 20px;
}

.offerings p{
    font-size: 20px;
    padding-top: 30px;
}

.product-row{
    display: flex;
    padding-bottom: 80px;
}

.product-col{
    flex-basis: 48%;
    padding: 0 30px;
    align-self: center;
    text-align: justify;
}

.product-col img{
    width: 100%;
    border-radius: 10px;
}

.services-row{
    display: flex;
    padding-bottom: 80px;
}

.services-col{
    flex-basis: 48%;
    padding: 0 30px;
    text-align: right;
    align-self: center;
}

.services-col .vl3{
    position: absolute;
    justify-content: right;
}

#leftside{
    position: absolute;
    right: 53.5%;
}

.services-col img{
    width: 100%;
    border-radius: 10px;
}

.services-col p{
    text-align: justify;
}

.vessels{
    width: 80%;
    margin: auto;
    padding-bottom: 50px;
    text-align: left;
}

.vessels p{
    margin-bottom: 80px;
}

.vessels img{
    border-radius: 10px;
    width: 100%;
    display: block;
}

.vessel-row1{
    display: flex;
}

.vessel-col{
    flex-basis: 25%;
    border-radius: 10px;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}

.vessel-row2{
    display: flex;
    padding-top: 30px;
    padding-bottom: 100px;
}

.overlay{
    background-color: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.overlay:hover{
    background-color: rgba(35, 31, 32, 0.5);
}

.overlay h6{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 20px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}

.overlay:hover h6{
    bottom: 40%;
    opacity: 1;
}

.showMobile{
    display: none;
}

/*------------ PARTNERS ----------*/

.center-header{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
}

.center-header h1{
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
    text-align: center;
    margin-top: 80px;
}

.header-col{
    margin-bottom: 50px;
}

.red-header{
    color: #C71928;
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
    text-align: center;
}

.partners{
    margin-top: 80px;
    margin-bottom: 80px;
}

.partners .partners-row{
    width: 80%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;
}

.partners .partners-row4{
    width: 70%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;
}
/*------------ HSSE -------------*/

.hsse-header{
    margin-top: 80px;
}

.hsse-header h1{
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
    text-align: center;
}

.hsse-red{
    color: #C71928;
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 55px;
    text-align: center;
}

.hsse-col{
    width: 80%;
    display: flex;
    margin: auto;
    justify-content: center;
    margin-bottom: 80px;
}

.writeup{
    width: 70%;
    margin: auto;
    margin-bottom: 80px;
}

.writeup p{
    text-align: justify;
    margin-bottom: 20px;
}

.icons-row1, .icons-row2{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

.icons-col{
    text-align: center;
    flex-basis: 20%;
    padding: 25px 10px;
}

.hsse-icons{
    width: 75%;
    margin: auto;
    margin-bottom: 80px;
}

/*----------- PAST PROJECTS -----------*/

.table{
    width: 80%;
    margin: auto;
    padding-bottom: 80px;
    text-align: left;
}

.table p{
    margin-bottom: 30px;
}

.project{
    width: 100%;
}

.project th{
    margin: auto;
    padding: 20px 50px;
    background-color: #C71928;
    color: #fff;
    border: none;
}

.project td{
    border: none;
    padding: 20px 0 20px 50px;
    vertical-align: text-top;
    border-bottom: 1px solid #C71928;
}

.project #lastrow{
    border-bottom: none;
}

/*------------ NEWS -------------*/
.news-cards{
    width: 80%;
    margin: auto;
    margin-bottom: 100px;
}

.news-col {
    float: left;
    width: 25%;
    padding: 0 10px;
}

.news-row {margin: 0 -5px;}
  
.news-row:after {
    content: "";
    display: table;
    clear: both;
}
  
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    padding-bottom: 16px;
}

.card img{
    width: 100%;
    padding: 0;
    border-radius: 10px 10px 0 0;
}

.card h3{
    text-align: justify;
    padding: 16px;
}

.card p{
    text-align: justify;
    padding: 0 16px 16px 16px;
}

.card a{
    color: #C71928;
    text-decoration: none;
    padding: 16px;
}

/*------------ INDIVIDUAL NEWS -------------*/
.news-excerpt{
    width: 60%;
    margin: auto;
}

.news-header{
    font-family: 'Syne', sans-serif;
    font-weight: bold;
    font-size: 40px;
    text-align: left;
    margin-top: 80px;
}

.news-img img{
    border-radius: 10px;
    margin: 30px auto;
}
.news-writeup{
    width: 65%;
    margin-bottom: 80px;
}
.news-writeup p{
    text-align: justify;
}
/*------------ CONTACT US -------------*/

.location{
    width: 80%;
    margin: auto;
}

.loc-row{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.loc-col{
    flex-basis: 50%;
    width: 100%;
}

.loc-col:nth-of-type(2){
    flex-basis: 38%;
    width: 100%;
}

.details{
    font-weight: 500;
    padding-left: 30px;
    text-align: justify;
}

.location i{
    color: #fff;
    background: #C71928;
    border-radius: 50%;
    padding: 8px;
}

.location .info{
    display: flex;
}

.location iframe{
    border-radius: 10px;
    margin-top: 50px;
    height: 350px;
    width: 100%;
}

.loc-col input[type="text"], .loc-col input[type="email"], textarea, select{
    width: 98%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    resize: vertical;
}

.loc-col div input[type="submit"]{
    border: none;
    display: flex;
}

.loc-col form{
    width: 100%;
    background: rgba(199, 25, 40, 0.1);
    border-radius: 15px;
    margin: auto;
    padding: 20px;
}

.upload-btn{
    border: none;
    font-size: 16px;
}

.upload-btn::-webkit-file-upload-button{
    background: none;
    color: #C71928;
    border: 1px solid #C71928;
    border-radius: 10px;
    padding: 12px 15px;
    cursor: pointer;
}

.upload-btn::-webkit-file-upload-button:hover{
    background: #A01824;
    color: #fff;
    transition: 0.5s;
}

.hours{
    color: #fff;
    margin: 100px auto;
    width: 80%;
    background-image: url(images/BH.png);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 50px 0;
}

.hours .vl3{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*------------- RESPONSIVENESS -----------*/

@media(min-width: 701px) and (max-width: 1200px){
    /*---------- ABOUT US ----------*/
    .left-header{
        margin-top: 20px;
    }
    .lh-row{
        width: 90%;
        margin: auto;
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .lh-col{
        display: flex;
        padding: 10px;
        flex-basis: 10%;
        text-align: justify;
    }
    .lh-col:nth-of-type(2){
        flex-basis: 50%;
    }
    .lh-col h1{
        font-family: 'Syne', sans-serif;
        font-weight: bold;
        font-size: 35px;
    }
    .lh-col p{
        font-size: 14px;
        padding-right: 0;
    }
    .values{
        margin: 40px 0;
    }
    .values-row{
        width: 90%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .values-col{
        flex-basis: 100%;
        text-align: justify;
    }
    .values-col:nth-of-type(2){
        flex-basis: 100%;
    }
    .values p{
        font-size: 14px;
    }
    .quote{
        width: 100%;
        display: flex;
        color: #fff;
        background-image: url(images/AboutUsQuote.png);
        background-position: top;
        background-size: cover;
        border-radius: 10px;
        align-items: center;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 50px;
        position: relative;
        height: 100%;
        margin-bottom: 40px;
    }
    .subtext{
        padding-left: 30px;
        padding-right: 0;
    }
    /*---------- SERVICES ----------*/
    .center-header h1{
        width: 100%;
        font-size: 35px;
        margin-top: 60px;
    }
    .product-row{
        width: auto;
    }
    .product-col{
        padding: 0 15px;
    }
    
    .services-col{
        padding: 0 15px;
    }
    .offerings{
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .offerings h2{
        font-size: medium;
    }
    .offerings p{
        font-size: smaller;
    }
    .ghost-subheader{
        font-size: smaller;
    }
    .overlay{
        display: none;
    }
    #leftside{
        position: absolute;
        right: 55%;
    }
    .vessels{
        width: 100%;
        padding: 0 15px;
    }
    .vessel-pics{
        display: flex;
    }
    .vessel-row1{
        display: block;
        width: 50%;
    }
    .vessel-row2{
        display: block;
        width: 50%;
        padding-top: 0;
    }
    .showMobile{
        display: inline;
    }
    .showMobile p{
        font-size: small;
        text-align: center;
        margin: 10px auto 25px auto;
    }
    /*---------- SERVICES ----------*/
    .partners{
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .center-header h1{
        font-size: 35px;
    }
    .partners img{
        width: 90%;
    }
    /*---------- HSSE ----------*/
    .hsse-header{
        margin-top: 0px;
    }
    .hsse-header h1{
        display: none;
    }
    .showMobile img{
        width: 90%;
        display: block;
        margin: -45px auto 30px auto;
    }
    .hsse-col{
        display: flex;
        flex-basis: 38%;
    }
    .hsse-red h1:nth-of-type(2){
        flex-basis: 4%;
    }
    .writeup{
        margin: 0 auto;
        width: 80%;
    }
    .writeup p{
        font-size: smaller;
    }
    .icons-row1, .icons-row2{
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
    }
    .icons-col{
        text-align: center;
        flex-basis: 20%;
        padding: 10px;
    }
    .hsse-icons{
        width: 75%;
        margin: auto;
        margin-bottom: 80px;
    }
    .hsse-icons p{
        font-size: smaller;
    }
    /*---------- PROJECTS ----------*/
    .table p{
        font-size: smaller;
    }
    .project th{
        font-size: small;
        padding: 20px;
    }
    .project td{
        font-size: small;
        padding: 20px;
    }
    /*----------- NEWS -------------*/
    .news-col {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
    .card h3{
        font-size: medium;
    }
    .card p{
        font-size: small;
    }
    .card a{
        font-size: small;
    }
    /*---------- INDIVIDUAL NEWS ----------*/
    .news-excerpt{
        width: 80%;
        margin: auto;
        justify-content: center;
    }
    .news-header{
        font-family: 'Syne', sans-serif;
        font-weight: bold;
        font-size: larger;
        text-align: left;
        margin-top: 40px;
    }
    .news-img img{
        width: 100%;
        border-radius: 10px;
        margin: 30px auto;
    }
    .news-writeup{
        width: 100%;
        margin-bottom: 80px;
    }
    .news-writeup p{
        font-size: smaller;
    }
    /*---------- CONTACT US ----------*/
    .location{
        margin: auto;
        width: 80%;
    }
    .loc-row{
        display: table;
    }
    .loc-col{
        width: 100%;
    }
    .loc-col h2{
        font-size: medium;
    }
    .loc-col p{
        font-size: smaller;
    }
    .location iframe{
        width: 100%;
        margin-bottom: 50px;
    }
    .loc-col form{
        width: 100%;
    }
    .upload-btn{
        font-size: 12px;
    }
    .upload-btn::-webkit-file-upload-button{
        padding: 10px 15px;
    }
    .hours{
        margin: 50px auto;
    }
    .hours h2{
        font-size: medium;
    }
    .hours p{
        font-size: small;
    }
}

@media(max-width: 700px){
    /*---------- ABOUT US ----------*/
    .left-header{
        margin-top: 20px;
    }
    .lh-row{
        width: 90%;
        margin: auto;
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .lh-col{
        display: flex;
        padding: 10px;
        flex-basis: 10%;
        text-align: justify;
    }
    .lh-col:nth-of-type(2){
        flex-basis: 50%;
    }
    .lh-col h1{
        font-family: 'Syne', sans-serif;
        font-weight: bold;
        font-size: 25px;
    }
    .lh-col p{
        font-size: 14px;
        padding-right: 0;
    }
    .values{
        margin: 40px 0;
    }
    .values-row{
        width: 90%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    .values-col{
        flex-basis: 100%;
        text-align: justify;
    }
    .values-col:nth-of-type(2){
        flex-basis: 100%;
    }
    .values p{
        font-size: 14px;
    }
    .quote{
        width: 100%;
        display: flex;
        color: #fff;
        background-image: url(images/AboutUsQuote.png);
        background-position: top;
        background-size: cover;
        border-radius: 10px;
        align-items: center;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 50px;
        position: relative;
        height: 100%;
        margin-bottom: 40px;
    }
    .subtext{
        padding-left: 30px;
        padding-right: 0;
    }
    /*---------- SERVICES ----------*/
    .center-header h1{
        width: 100%;
        font-size: larger;
        margin-top: 60px;
    }
    .product-row{
        width: auto;
    }
    .product-col{
        padding: 0 15px;
    }
    
    .services-col{
        padding: 0 15px;
    }
    .offerings{
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .offerings h2{
        font-size: medium;
    }
    .offerings p{
        font-size: smaller;
    }
    .ghost-subheader{
        font-size: smaller;
    }
    .overlay{
        display: none;
    }
    #leftside{
        position: absolute;
        right: 55%;
    }
    .vessels{
        width: 100%;
        padding: 0 15px;
    }
    .vessel-pics{
        display: flex;
    }
    .vessel-row1{
        display: block;
        width: 50%;
    }
    .vessel-row2{
        display: block;
        width: 50%;
        padding-top: 0;
    }
    .showMobile{
        display: inline;
    }
    .showMobile p{
        font-size: small;
        text-align: center;
        margin: 10px auto 25px auto;
    }
    /*---------- PARTNERS ----------*/
    .partners{
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .center-header h1{
        font-size:larger;
    }
    .partners img{
        width: 90%;
    }
    /*---------- HSSE ----------*/
    .hsse-header{
        margin-top: 0px;
    }
    .hsse-header h1{
        display: none;
    }
    .showMobile img{
        width: 90%;
        display: block;
        margin: -45px auto 30px auto;
    }
    .hsse-col{
        display: flex;
        flex-basis: 38%;
    }
    .hsse-red h1:nth-of-type(2){
        flex-basis: 4%;
    }
    .writeup{
        margin: 0 auto;
        width: 80%;
    }
    .writeup p{
        font-size: smaller;
    }
    .hsse-icons{
        width: 80%;
        display: flex;
    }
    .hsse-icons p{
        font-size: smaller;
    }
    .icons-row1, .icons-row2{
        display:block;
        width: auto;
    }
    /*---------- PROJECTS ----------*/
    .table p{
        font-size: smaller;
    }
    .project th{
        font-size: small;
        padding: 20px;
    }
    .project td{
        font-size: small;
        padding: 20px;
    }
    /*------------- NEWS -------------*/
    .news-col {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
    .card h3{
        font-size: medium;
    }
    .card p{
        font-size: small;
    }
    .card a{
        font-size: small;
    }
    /*---------- INDIVIDUAL NEWS ----------*/
    .news-excerpt{
        width: 90%;
        margin: auto;
        justify-content: center;
    }
    .news-header{
        font-family: 'Syne', sans-serif;
        font-weight: bold;
        font-size: larger;
        text-align: left;
        margin-top: 40px;
    }
    .news-img img{
        width: 100%;
        border-radius: 10px;
        margin: 30px auto;
    }
    .news-writeup{
        width: 100%;
        margin-bottom: 80px;
    }
    .news-writeup p{
        font-size: smaller;
    }
    /*---------- CONTACT US ----------*/
    .location{
        margin: auto;
        width: 80%;
    }
    .loc-row{
        display: table;
    }
    .loc-col{
        width: 100%;
    }
    .loc-col h2{
        font-size: medium;
    }
    .loc-col p{
        font-size: smaller;
    }
    .location iframe{
        width: 100%;
        margin-bottom: 50px;
    }
    .loc-col form{
        width: 100%;
    }
    .upload-btn{
        font-size: 12px;
    }
    .upload-btn::-webkit-file-upload-button{
        padding: 10px 15px;
    }
    .hours{
        margin: 50px auto;
    }
    .hours h2{
        font-size: medium;
    }
    .hours p{
        font-size: small;
    }
}