*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 0.5px; 
}

p{
    line-height: 20px !important;
}
/* ----------------NAVIGATION BAR-------- */

header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 8%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

header .logo{
    width: 100px; 
}

header .fa-chevron-right{
    color: green;
    margin-left: 5px;
}
header .fa-chevron-down{
    color: green;
    margin-left: 5px;
}

header .navbar ul{
    list-style: none; 
}

header .navbar ul li{
    position: relative;
    float: left;  
    line-height: 20px;
}

header .navbar ul li a{  
    font-size: 12px;
    padding: 8px 15px;
    color: rgb(44, 44, 44);
    display: block; 
    text-decoration: none;
    border-radius: 5px;
    transition: 0.5s ease;
}

header .navbar ul li a:hover{
    background-color: rgb(223, 238, 223); 
}

header .navbar ul li ul{
    position: absolute;
    left: 0;
    width: 330px;
    background-color: white;
    display: none; 
    padding-top: 30px;
}
header .navbar ul li ul li{
    width: 100%;
    border-top: 1px solid rgb(223, 238, 223);
    line-height: 40px; 
}
header .navbar ul li ul a{
    border-radius: unset; 
}
header .navbar ul li ul li ul{
    left: 330px;
    top: 0;
    padding-top: 0px;
}

header .navbar ul li:focus-within > ul, 
header .navbar ul li:hover > ul{
    display: initial;
} 

#menu-bar{
    display: none;
}

label .fa-bars{
    font-size: 30px;
    color: green;
    display: none;
}

header .navbar ul li .sub-menu-mobile{
    display: none;
}
 
@media(max-width:968px){
    header .logo{
        width: 80px; 
    }
    
    header .navbar ul li .sub-menu-mobile{
        display: initial;
    }
    header .navbar ul li .sub-menu-desktop{
        display: none;
    }
    header .navbar .covid{
        width: 160px;
    }
    header{  
        padding: 6px 8%;
    }
    label .fa-bars{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        border-top: 1px solid rgb(223, 238, 223);
        display: none;
        padding: 20px;
    }
    header .navbar ul li{
        width: 100%; 
        line-height: 30px;
    }
    header .navbar ul li ul{
        width: 100%; 
        position: relative;
    }
    header .navbar ul li ul li{
        background-color: rgb(246, 255, 246);
    } 
    header .navbar ul li ul li ul{
        width: 100%;
        left: 0;
    } 

    #menu-bar:checked ~ .navbar{
        display: initial;
    } 

    header .navbar ul li ul{ 
        padding-top: 0px;
    }
}
 


/* -----------Popup banner---------  */

.home-popup {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.5);
    z-index: 1040;
    min-height: 100vh;
    width: 100%; 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-popup .popup-container {
    position: fixed;   
    z-index: 1040;  
    background-color: white;
    width: 60%;
    height: 80%;
    overflow: scroll;   
    scrollbar-width: none;
    border-radius: 15px;
}

.home-popup .popup-container .policy-text { 
    padding: 8%; 
}

.home-popup .popup-container .policy-text h1 { 
    margin-bottom: 8%;
    font-size: 1.5em;
    color: green;
}

.home-popup .close-button {
    position: fixed;
    font-size: 30px;
    color: red;
    top: 10%;
    right: 20%;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    background: white;
    z-index: 1050;
}

@media (max-width: 768px) {
    .home-popup .popup-container { 
        width: 80%;
        height: 80%; 
    }
    .home-popup .close-button {
        right: 10%;
        top: 10%;
    }
    .home-popup .popup-container .policy-text { 
        padding: 10%; 
    }
}






/* ------------SLIDES--------- */



.slide-1{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-1.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}

@keyframes zoom {
    0% {
      background-size: 100%;
    }
    
    100% {
     background-size: 110%;
    }
} 

.slide-1 .content {
    width: 550px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}



@keyframes content {
    10% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(0px);
    }
} 
 

html{
    scroll-behavior: smooth;
}




.slide-1 .content h1{
    color: white;
    font-size: 40px;
    margin-bottom: 70px;
    padding-top: 25%;
    line-height: 55px;
    font-weight: 800;
}

.slide-1 .content a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-1 .content a:hover{
    background-color: red;
}


@media (max-width: 900px){
    .slide-1 .content{
        width: 100%;
    }
    .slide-1 .content h1{
        color: white;
        font-size: 35px;
        margin-bottom: 70px;
        padding-top: 25%;
        line-height: 45px;
        font-weight: 800;
    }
}




.slide-2{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-2.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}




.slide-2 .content-2 {
    width: 600px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}

.slide-2 .content-2 h1{
    color: white;
    font-size: 35px;
    margin-bottom: 70px;
    padding-top: 20%;
    line-height: 45px;
    font-weight: 800;
}

.slide-2 .content-2 a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-2 .content-2 a:hover{
    background-color: red;
}

@media (max-width: 900px){
    .slide-2 .content-2 h1{
        font-size: 30px;
        line-height: 38px;
    }

    .slide-2{
        background-position: right;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-2-mobile.jpg);
    }
    .slide-2 .content-2 {
        width: 100%;
    }
}


.slide-3{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}


.slide-3 .content-3 {
    width: 600px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}

.slide-3 .content-3 h1{
    color: white;
    font-size: 40px;
    margin-bottom: 70px;
    padding-top: 25%;
    line-height: 55px;
    font-weight: 800;
}

.slide-3 .content-3 a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-3 .content-3 a:hover{
    background-color: red;
}

@media (max-width: 900px){
    .slide-3 .content-3 h1{
        font-size: 35px;
        line-height: 45px;
    }
    .slide-1 .content-3{
        width: 100%;
    }

}


.slide-4{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}


.slide-4 .content-4 {
    width: 600px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}

.slide-4 .content-4 h1{
    color: white;
    font-size: 40px;
    margin-bottom: 70px;
    padding-top: 25%;
    line-height: 55px;
    font-weight: 800;
}

.slide-4 .content-4 a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-4 .content-4 a:hover{
    background-color: red;
}

@media (max-width: 900px){
    .slide-4 .content-4 h1{
        font-size: 35px;
        line-height: 45px;
    }
    .slide-1 .content-4{
        width: 100%;
    }

}




.slide-5{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-5.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}


.slide-5 .content-5 {
    width: 600px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}

.slide-5 .content-5 h1{
    color: white;
    font-size: 35px;
    margin-bottom: 70px;
    padding-top: 25%;
    line-height: 45px;
    font-weight: 800;
}

.slide-5 .content-5 a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-5 .content-5 a:hover{
    background-color: red;
}

@media (max-width: 968px){
    .slide-5 .content-5 h1{
        font-size: 35px;
        line-height: 40px;
    }
    .slide-1 .content-5{
        width: 100%;
    }
}

.slide-6{
    padding: 8%;
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgb(0,0,0,0.6),rgb(0,0,0,0.0)), url(images/background-8.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    animation: zoom 8s infinite;
}


.slide-6 .content-6 {
    width: 600px;
    animation: content 13s linear infinite;
    transform: translateY(100px);
}

.slide-6 .content-6 h1{
    color: white;
    font-size: 35px;
    margin-bottom: 70px;
    padding-top: 25%;
    line-height: 45px;
    font-weight: 800;
}

.slide-6 .content-6 a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.slide-6 .content-5 a:hover{
    background-color: red;
}

@media (max-width: 968px){
    .slide-1 .content-6 h1{
        font-size: 35px;
        line-height: 40px; 
    }
    .slide-1 .content-5{
        width: 100%;
    }

    .slide-1{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-1-mobile.jpg);
    }
    .slide-2{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-2-mobile2.jpg);
    }
    .slide-3{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-3-mobile.jpg);
    }
    .slide-4{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-4-mobile.jpg);
    }
    .slide-5{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-5-mobile2.jpg);
    }
    .slide-6{
        height: 100vh;
        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/background-8-mobile.jpg);
    }

    .slide-1 .content, .slide-2 .content, .slide-3 .content, .slide-4 .content, .slide-5 .content, .slide-6 .content {
        width: 100%;
    }
    
}

@media (max-width: 900px){ 

    .swiper .swiper-button-prev, .swiper .swiper-button-next{  
        display: none;
    } 
}
 

.landing-page-container{
    min-height: 100vh;
    width: 100% ; 
    
} 
 
.swiper .swiper-button-prev, .swiper .swiper-button-next{  
    color: white;
}
.swiper .swiper-pagination-bullet-active{  
    background-color: green;
}

/* ------------END OF SLIDES--------- */




/* ----------PAGE 2--------- */

 
.page2{  
    min-height: 100vh;
    width: 100%; 
    background-color: rgb(2, 156, 76);
    overflow: hidden;
} 

.page2 .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.page2 .container .text{
    width: 55%;
    padding: 0 8% 0 3%; 
}
.page2 .container .text .aosquote{
    margin-bottom: 8%;
}
.page2 .container .text .aosquote h2{
    color: white;
    font-size: 60px;
}
.page2 .container .text .aosquote h1{
    color: white;
    font-size: 25px;
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 35px;
}
.page2 .container .text .aosquote p{
    color: white; 
    line-height: 22px;
}

.page2 .container .text .footprint h6{
    color: white; 
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 20px;
    font-weight: 400;
} 
.page2 .container .text .footprint h4{
    color: white; 
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 20px; 
} 
/* .page2 .container .text .footprint h1 a{
    color: white;   
    text-decoration: none;
    font-weight: 400;
    line-height: 22px;
    cursor: none;
}  */

.page2 .container .page2-img img{ 
    height: 100vh;
    width: 40em;
    object-fit: cover;
}   



@media (max-width: 900px){
      
    .page2 .container{ 
        flex-wrap: wrap-reverse;
    }
    .page2 .container .text{
        width: 100%;
        padding: 8% 8% 12% 8%; 
    }
    .page2 .container .text .aosquote h1{
    color: white;
    font-size: 20px; 
    line-height: 30px;
    }
      
    .page2 .container .page2-img img{
        width: 150%; 
        height: unset;
    }
    .page2 .page2-img{
        width: 100%;   
    }
    .page2 .container .text .footprint h4{
        color: white; 
        font-size: 18px; 
        height: 5vh;
        line-height: 25px;
    }
}









/* ----------PAGE 3--------- */

.page3 {
    padding: 8%;
    min-height: 100vh;
    width: 100%;
}

.page3 .page3-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}


.page3 .page3-content .page3-content-files .page3-content-files-text{
    margin-bottom: 50px;
}

.page3 .page3-content .page3-content-files .page3-content-files-text h2{
    font-size: 35px;
    margin-bottom: 25px;
    letter-spacing: 1px;
    
}

.page3 .page3-content .page3-content-files .page3-content-files-text .line{
    background-color: red;
    width: 55px;
    height: 5px;
    
}


.page3 .page3-content .page3-content-files p{
    letter-spacing: 1px;
    line-height: 25px;
    margin-bottom: 100px;
    width: 450px;
}

.page3 .page3-content .page3-content-files a{
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.page3 .page3-content .page3-content-files a:hover{
    background-color: red;
}

.page3 .page3-content .page3-content-files img{
    width: 500px;
    transition: 0.5s ease;

}

.page3 .page3-content .page3-content-files img:hover{
    transform: scale(103%);
}

@media (max-width: 900px){
    .page3 .page3-content .page3-content-files img{
        width: 100%;
        margin-top: 60px;
        padding-bottom: 15%;
    }

    .page3 .page3-content .page3-content-files p{
        width: 100%;
        margin-bottom: 60px;
    }

    .page3 .page3-content{
        padding-top: 15%;

    }
}




.page4{
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/page4-bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

/* .page4-content{
    width: 45%;
    text-align: center;
    padding-top: 18%;
    margin: auto;
}  */


.page4-home{
    height: 100vh;
}
 .page4-content{
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-top: 3%;

} 

.page4-content-files h1{
    color: white;
    font-size: 35px;
    letter-spacing: 1px;
    margin-bottom: 30px;
}
.page4-content-files p{
    color: white;
    letter-spacing: 5px;
    margin-bottom: 40px;
}
.page4-content-files img{
    animation: zoom-out 3s ease infinite;
    cursor: pointer;
}

@keyframes zoom-out {
    0% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(1.2, 1.2);
      }
      100% {
        transform: scale(1, 1);
      }
  } 


@media (max-width: 900px){
    .page4{

        background-image: linear-gradient(rgb(0,0,0,0.4),rgb(0,0,0,0.4)), url(images/page4-bg-2.jpg);
        background-position: left;
        min-height: 70vh;

    }
    .page4-content{
        width: 90%;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;

    }
    .page4-content-files h1{
        font-size: 25px;

    }

    .page4-content-files img{
        width: 80px;
    }

    .video-player{
        width: 90% !important;

    }
    
}




  /* -------------VIDEO------------- */
  
.video-player{
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

video:focus{
    outline: none;
}

.close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    cursor: pointer;
}








  /* -------------PAGE 5------------- */


.page5{
    min-height: 100vh;
    padding: 8%;
    background-color: rgb(248, 248, 248);
}
.page5 .page5-content-files .page5-text{
    margin-bottom: 8%;
}

.page5 .page5-content-files .page5-text h6{
    font-size: 25px;
    margin-bottom: 20px;
}


.page5 .page5-content-files .page5-text .line{
    background-color: red;
    width: 55px;
    height: 5px;
}


.page5 .page5-content .page5-blog{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.page5 .page5-content .page5-blog .page5-blog-content{
    width: 330px;
    min-height: 500px;
    background-color: #fff;
    overflow: hidden;
    
}
.page5 .page5-content .page5-blog .page5-blog-content img{
    width: 350px;
    transition: 0.5s ease;
    height: 300px;
    object-fit: cover;

}
.page5 .page5-content .page5-blog .page5-blog-content img:hover{
    transform: scale(103%);
}

.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text{
    padding: 20px 20px 30px 20px;
}

.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text .date{
    margin-bottom: 20px;
    font-weight: bold;
    color: gray;
}
.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text h6{
    margin-bottom: 20px;
    font-weight: bold;
    color: gray;
    font-size: 15px;
    letter-spacing: 1px;
}

.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text .main-text{
    margin-bottom: 50px;

}

.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 10px 20px;
    border-radius: 10px;
    transition: 0.5s ease;

}
.page5 .page5-content .page5-blog .page5-blog-content .page5-blog-text a:hover{
    background-color: red;
}

.page5 .page5-content .visit {
    padding-top: 5%;
}
.page5 .page5-content .visit a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    transition: 0.5s ease;  
    font-weight: bold;
    letter-spacing: 1px;
}
.page5 .page5-content .visit a:hover{
    color: rgb(2, 156, 76); 
}

.page5 .page5-content .visit a img{
    width: 12px;
    margin-left: 10px;
    animation: forward 3s ease infinite;

}

@keyframes forward{
    0%{
        transform: translateX(0px);
    }
    50%{
        transform: translateX(10px);
    }
    100%{
        transform: translateX(0px);
    }
}


@media (max-width: 900px){
    
    .page5 .page5-content .page5-blog .page5-blog-content{
        margin-bottom: 40px;
    }
    .page5 .page5-content .visit {
        padding-bottom: 8%;

    }

    .page5{
        padding: 15% 8%;
    }

    .page5 .page5-content-files .page5-text{
        margin-bottom: 15%;
    }

}

.page6 {
    min-height: 40vh;
    padding: 8%;
    width: 100%;
    background-image: url(images/oil-tools-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.page6 .content{
    text-align: center;

}
.page6 .content .content-text{
    margin-bottom: 90px;

}

.page6 .content .content-text h3{
    font-size: 35px;
    margin-bottom: 25px;
    letter-spacing: 1px;
    font-weight: 400;
}

.page6 .content .content-text .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
}

.page6 .content .content-logos{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   width: 80%;
   margin: auto;

}
.page6 .content .content-logos img{
    width: 150px;
    margin: 20px;
    background-color: white;
    padding: 15px 25px;
    transition: 0.5s ease;
    border-radius: 10px;
}
.page6 .content .content-logos img:hover{
    transform: scale(105%);
}
.page6 .content .content-logos .emerson{
    width: 160px;

}



@media (max-width: 900px){
    .page6 .content .content-logos{
        width: 100%;
        justify-content: space-around;
     
     }

     .page6 .content .content-logos img{
        width: 120px;
        margin: 10px;
    }
    .page6 {
        padding: 15% 8%;
        
    }
    
    .page6 .content .content-text{
        margin-bottom: 60px;
    
    }

    

}




/* -----------ABOUT US PAGE 1------------ */

.about-us-page1{
    min-height: 60vh;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.0)), url(images/about-us-bg1.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 8%;
    display: flex;
    align-items: center;
    animation: text 7s infinite;
}

@keyframes text{
    0% {
        background-size: 100%;
      }
      50% {
        background-size: 105%;
      }
      100% {
       background-size: 100%;
      }
}




.about-us-page1 .content {
    padding-top: 5%;
}

.about-us-page1 .content ul{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.about-us-page1 .content ul li{
    margin-right: 20px;
}
.about-us-page1 .content ul li a{
    display: flex;
    color: white;
    text-decoration: none;
    align-items: center;
    transition: 0.5s ease;
    
}
.about-us-page1 .content ul li a:hover{
    opacity: 60%;
    
}
.about-us-page1 .content ul li a p{
    margin-left: 20px;

}

.about-us-page1 .content h4{
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
}
.about-us-page1 .content .line{
    background-color: red;
    width: 55px;
    height: 5px;
}


@media (max-width: 900px){
    .about-us-page1 .content{
        padding-top: 25%;
    }
    .about-us-page1 {
        background-image: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.0)), url(images/about-us-bg1-mobile.jpg);
        min-height: 50vh;
    }
}





/* -----------ABOUT US PAGE 2------------ */

.about-us-page2{
    min-height: 100vh;
    padding: 12% 8%;
    width: 100%;
}

.about-us-page2 .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;

}
.about-us-page2 .content .files img{
    width: 450px;
    transition: 0.5s ease;
}


.about-us-page2 .content .files img:hover{
    transform: scale(103%);
}

.about-us-page2 .content .files h4{
    width: 500px;
    font-size: 20px;
    margin-bottom: 40px;
    line-height: 25px;
}

.about-us-page2 .content .files .paragraph{
    width: 500px;
    line-height: 25px;
    margin-top: 40px;
}



@media (max-width: 900px){
    .about-us-page2 .content .files img{
        width: 100%;
        margin-top: 50px;
    }

    .about-us-page2 .content .files h4{
        width: 100%;
    }

    .about-us-page2 .content .files .paragraph{
    width: 100%;
    }   
}




/* -----------ABOUT US PAGE 3------------ */

.about-us-page3{
    padding: 8%;
    min-height: 40vh;
    width: 100%;
    background-image: url(images/footer-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-us-page3 .content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.about-us-page3 .content .files{
    transition: 0.5s ease;
}

.about-us-page3 .content .files:hover{
    transform: translateY(-10px);
}

.about-us-page3 .content .files img{
    width: 100px;
}

.about-us-page3 .content .files h6{
    font-size: 20px;
    color: white ;
    margin-top: 30px;
    margin-bottom: 40px;
}

.about-us-page3 .content .files p{
    color: white;
    width: 350px;
    line-height: 25px;
}


@media (max-width: 900px){
    .about-us-page3 .content .files{
        margin: 30px 0;
    }

    .about-us-page3 .content .files p{
        width: 300px;
    }
}




/* -----------ABOUT US PAGE 4------------ */

.about-us-page4{
    padding: 8%;
    min-height: 100vh;
    width: 100%;
}

.about-us-page4 .content .text-1 p{
    width: 80%;
    line-height: 25px;
    text-align: center;
    margin: auto;
}
.about-us-page4 .content .text-1 .we{
    letter-spacing: 10px;
    text-align: center;
    margin: auto;
    color: rgb(2, 156, 76);
    font-weight: bold;
    margin-top: 25px;
}

.about-us-page4 .content .files{
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
    flex-wrap: wrap;
}

.about-us-page4 .content .files .container{
    width: 350px;
    overflow: hidden;
    border: 1px solid rgb(235, 235, 235);
    transition: 0.5s ease;

}
.about-us-page4 .content .files .container:hover{
    box-shadow: 7px 10px 25px 2px rgb(238, 238, 238);
}



.about-us-page4 .content .files .container img{
    width: 350px;
    transition: 0.5s ease;


}

.about-us-page4 .content .files .container img:hover{
    transform: scale(103%);
}

.about-us-page4 .content .files .container .text{
    padding: 8% 5%;
}

.about-us-page4 .content .files .container .text h6{
    font-size: 20px;
    margin-bottom: 25px;
    line-height: 30px;
    font-weight: 400;
    color: rgb(2, 156, 76);
    
}
.about-us-page4 .content .files .container .text p{
    width: 100%;
    line-height: 25px;
}

@media (max-width: 900px){
    .about-us-page4{
        padding: 12% 8%;

    }
    .about-us-page4 .content .files .container{
        margin-top: 30px;
        box-shadow: 7px 10px 25px 2px rgb(238, 238, 238);
    }
    .about-us-page4 .content .files{
        margin-top: 20px;
    }
    .about-us-page4 .content .text-1 p{
        width: 100%;
        text-align: left;
    }

    .about-us-page4 .content .text-1 .we{
        width: 100%;
        text-align: left;
        letter-spacing: 5px;
    }
}




/* -----------ABOUT US PAGE 5------------ */


.about-us-page5{
    padding: 8%;
    background-color: rgb(248, 248, 248);
    min-height: 100vh;
    width: 100%;
}

.about-us-page5 .files-1{
    text-align: center;
    width: 80%;
    margin: auto;
}

.about-us-page5 .files-1 h3{
    font-size: 25px;
    margin-bottom: 20px;
}

.about-us-page5 .files-1 .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
}

.about-us-page5 .files-1 p{
    margin-top: 50px;
    line-height: 25px;
}

.about-us-page5 .files{
    margin-top: 8%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.about-us-page5 .files .container{
    width: 400px;
    margin: 30px 0;
    padding: 3%;
    background-color: white;
    box-shadow: 7px 10px 25px 2px rgb(238, 238, 238);
    transition: 0.5s ease;
}

.about-us-page5 .files .container:hover{
    transform: translateY(-10px);
}

.about-us-page5 .files .container img{
    width: 100px;
    margin-bottom: 10px;
}

.about-us-page5 .files .container h6{
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 40px;
}

.about-us-page5 .files .container p{
    line-height: 25px;
}



@media (max-width: 900px){
    .about-us-page5{
        padding: 12% 8%;

    }

    .about-us-page5 .files-1{
        text-align: left;
        width: 100%;
        margin: left;
    }
    

    
    .about-us-page5 .files-1 .line{
        margin: 0px;
    }

    .about-us-page5 .files .container{
        padding: 8%;
        margin: 20px 0;
        width: 100%;
        
    }
    
}








/* ------------MANAGEMENT PAGE--------------- */

.management{
    min-height: 100vh;
    width: 100%;
    padding: 12% 8%;
}

.management .files-1{
    padding-bottom: 5%;
    
}
.management .files-1 .plinks{
    text-align: center;
    margin-bottom: 3%;
}
.management .files-1 .plinks a {
    transition: 0.5s ease;

}
.management .files-1 .plinks a:hover{
    color: rgb(2, 156, 76);

}
.management .files-1 .plinks span{
    margin: 0 10px;
}
.management .files-1 .plinks a{
    text-decoration: none;
    color: black;
}

.management .files-1 h6{
    text-align: center;
    font-size: 25px;
}

.management .files-1 .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
    margin-top: 15px;
}

.management .files-1 .ptext{
    padding-top: 3%;
    width: 70%;
    margin: auto;
    text-align: center;
    line-height: 25px;
}

.management .files-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.management .files-2 .groups{
    margin: 30px 0;
    transition: 0.5s ease;
    width: 300px;
}
.management .files-2 .groups:hover{
    transform: translateY(-8px);
}
.management .files-2 .groups img{
    width: 300px;
    margin-bottom: 20px;
}

.management .files-2 .groups span{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}
.management .files-2 .groups span a img{
    width: 8px;
    animation: move 1.5s linear infinite;
}
.management .files-2 .groups h6{
    font-size: 16px;
}
.management .files-2 .groups p{
    line-height: 20px;
    width: 220px;
    margin-top: 10px;
}


@keyframes move{
    0%{
        transform: translateX(0px);
    }
    50%{
        transform: translateX(10px);
    }
    100%{
        transform: translateX(0px);
    }
}


@media (max-width: 900px){

    .management .files-1 .plinks{
        text-align: left;
        margin-bottom: 8%;
    }
    .management {
        padding-top: 30%;
    }

    .management .files-1 h6{
        text-align: left;
        font-size: 20px;
        margin-bottom: 15px;
    }


    .management .files-1 .line{
        margin: 0px;
    }

    .management .files-1 .ptext{
        text-align: left;
        width: 100%;
        padding-top: 8%;
    }
    .management .files-2 .groups{
        width: 270px;
        margin: 20px 0;

    }
    .management .files-2 .groups img{
        width: 270px;
    }
}





/* -----------LOCAL CONTENT------------ */

.local-content-page1{
    min-height: 60vh;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0,0.5),rgba(0,0,0,0.0)), url(images/local-content-bg.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 8%;
    display: flex;
    align-items: center;
    animation: text 7s infinite;
}

.local-content-page1 .content {
    padding-top: 5%;
}

.local-content-page1 .content p{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    color: white;
}

.local-content-page1 .content p a{
    color: white;
    text-decoration: none;
    transition: 0.5s ease;
}

.local-content-page1 .content p a:hover{
    opacity: 70%;
}
.local-content-page1 .content p span{
    margin: 0 15px;
}
.local-content-page1 .content p label{
    font-weight: 900;
}





.local-content-page1 .content h4{
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
}
.local-content-page1 .content .line{
    background-color: red;
    width: 55px;
    height: 5px;
}


@media (max-width: 900px){
    .local-content-page1 .content{
        padding-top: 25%;
    }
    .local-content-page1{
        background-image: linear-gradient(to right, rgba(0,0,0,0.5),rgba(0,0,0,0.0)), url(images/local-content-bg-mobile.jpg);
        min-height: 50vh;
    }
}



/* -------local content page 2----------- */

.local-content-page2{
    padding: 12% 8%;
    min-height: 100vh;
    width: 100%;


}

.local-content-page2 .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;


}

.local-content-page2 .content p{
   width: 500px;
   line-height: 20px;
}


@media (max-width: 900px){

    .local-content-page2 .content p{
        width: 100%;
    }

    .local-content-page2 .content img{
        width: 100%;
        margin-top: 35px;
    }
}




/* ........ HSE ......... */


.hse{
    min-height: 60vh;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0,0.5),rgba(0,0,0,0.0)), url(images/hse-bg.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 8%;
    display: flex;
    align-items: center;
    animation: text 7s infinite;
}

.hse .content {
    padding-top: 5%;
}

.hse .content p{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    color: white;
}

.hse .content p a{
    color: white;
    text-decoration: none;
    transition: 0.5s ease;
}

.hse .content p a:hover{
    opacity: 70%;
}
.hse .content p span{
    margin: 0 15px;
}
.hse .content p label{
    font-weight: 900;
}



.hse .content h4{
    font-size: 30px;
    color: white;
    margin-bottom: 20px;
}
.hse .content .line{
    background-color: red;
    width: 55px;
    height: 5px;
}


@media (max-width: 900px){
    .hse {
        animation: none;
        min-height: 40vh;
    }
    .hse .content{
        padding-top: 25%;
    }
}

.qhse-content{
    padding-top: 8%;
}
.local-content-page2 .qhse{
    padding: 5%;
    width: 100%; 
    margin: auto;
    border-radius: 20px;
}
 
.local-content-page2 .qhse .text{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.local-content-page2 .qhse .text img{
    width: 80px;
    margin-right: 20px;
}
.local-content-page2 .qhse .text h6{
    font-size: 25px;
}
.local-content-page2 .qhse p{
    line-height: 25px;
}


/* ----- certification ------ */

.certificate-page{
    padding: 8%;
    background-color: rgb(248, 255, 250);
}
.certificate-page .certificate{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.certificate-page .certificate .certs{
    width: 450px;  
    margin: 20px 0; 
    cursor: pointer;
    text-align: center;  
    transition: 0.5s ease;
    background-color: white;
}
.certificate-page .certificate .certs:hover{
    scale: 103%;
}

.certificate-page .certificate .certs .cert-img{
    width: 450px;  
    height: 220px;
    overflow: hidden; 
}
.certificate-page .certificate .certs .cert-img img{
    width: 100%;   
}
.certificate-page .certificate .certs h6{
    font-size: 14px;    
    font-weight: 500;
    padding: 3%; 
}


.certificate-page .popup-image{
    position: fixed;
    top: 0; 
    left: 0;
    background: rgba(52, 52, 52, 0.9);
    --webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    height: 100%;
    width: 100%;
    z-index: 1500;
    display: none;
}

.certificate-page  .popup-image span{
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 40px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
    z-index: 1500;
}
.certificate-page  .popup-image img{ 
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 90%;
     object-fit: cover;
     pointer-events: none;
    backdrop-filter: blur(8px);
    --webkit--backdrop-filter: blur(8px);
}


.cert-logo{
    padding: 15% 8%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-image: url(images/oil-tools-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.cert-logo img{
    height: 90px;
    margin: 15px;
    background-color: white;
    border-radius: 7px;
}


@media (max-width: 900px){
    .hse-page3 .files{
        padding: 5%;
        width: 100%;
    }

    .cert-logo img{
    height: 60px;
    margin: 15px;
    background-color: white;
    border-radius: 7px;
}

    .hse-page3 .files .text h6{
        font-size: 20px;
    }
    
.certificate-page .certificate .certs{
    width: 100%;  
    margin: 20px 0; 
    cursor: pointer;
    text-align: center; 
    border-bottom: 1px solid grey;
    transition: 0.5s ease;
}
.certificate-page .certificate .certs:hover{
    scale: 103%;
}

.certificate-page .certificate .certs .cert-img{
    width: 100%;  
    height: 180px;
    overflow: hidden; 
} 
.certificate-page  .popup-image img{
    width: 90%;
    height: unset;
}
}









/* ----------- Corporate Social Responsibility ------------ */

.image img{
    width: 100%;
    padding-top: 15vh;
}
.corporate{
    padding: 8%;
    text-align: center;
    width: 100%;
    margin: auto;
}

.corporate .files .info{
    align-items: center;
    padding-bottom: 5%;
    
}
.corporate .files .info a {
    text-decoration: none;
    color: black;
    transition: 0.5s ease;
}

.corporate .files .info a:hover {
    color: rgb(2, 156, 76);
}

.corporate .files .info span {
    margin: 0 8px;
}
.corporate .files .info label {
    margin: 0 8px;
}

.corporate .files .content h6{
    font-size: 25px;
    margin-bottom: 10px;
}

.corporate .files .content .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
}

.corporate .files .content p{
    padding-top: 3%;
    width: 80%;
    margin: auto;
    line-height: 25px;

}


@media (max-width: 968px){
    .image img{
        padding-top: 10vh;
    }

    .corporate{
        text-align: left;
        margin: unset;
        
    }
    .corporate .files .info{
        padding-bottom: 8%;
        
    }
    .dont{
        display: none;
    }

    .corporate .files .content h6{
        font-size: 20px;
        line-height: 25px;
    }

    .corporate .files .content .line{
        margin: unset;
    }

    .corporate .files .content p{
        padding-top: 8%;
        width: 100%;
        margin: unset;
    
    }
}





/* ----------- corporate 2------------ */

.corporate-2{
    padding: 8%;
    background-color: rgb(235, 235, 235);
    width: 100%;
}
.corporate-2 .container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.corporate-2 .container .files{
    width: 330px;
    background-color: white;
    margin: 40px 20px;
    transition:  0.5s ease;
}
.corporate-2 .container .files:hover{
    transform: scale(103%);
}

.corporate-2 .container .files img{
    width: 330px;
}
.corporate-2 .container .files p{
    padding: 5%;
    line-height: 25px;
}



/* ---------- SERVICES------------- */

.services{
    padding: 12% 8% 8% 8%;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1)), url(images/services-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    animation: text 7s infinite;
}

.services .files .info{
    padding-bottom: 5%;
    
}
.services .files .info a {
    text-decoration: none;
    color: white;
    transition: 0.5s ease;
}

.services .files .info a:hover {
    opacity: 60%;
}

.services .files .info span {
    margin: 0 8px;
}
.services .files .info label {
    margin: 0 8px;
}

.services .files .content h6{
    font-size: 25px;
    margin-bottom: 10px;
}


.services .files .content p{
    padding-top: 3%;
    width: 45%;
    line-height: 25px;

}



@media (max-width: 968px){

    .services .files .content p{
        width: 100%;
    }

    .services{
        padding-top: 30%;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1)), url(images/services-bg-mobile.jpg);

    }

    .services .files .info{
        padding-bottom: 10%;
        
    }


}




/* <!------------ SERVICES PAGE 3--------- --> */

.page3 .page3-content .page3-content-files .well{
    width: 450px;
}
.page3 .page3-content .page3-content-files .text-2 h2{
    font-size: 30px;
}


@media (max-width: 968px){

    .page3 .page3-content .page3-content-files .text-2 h2{
        font-size: 25px;
    }
    .page3 .page3-content .page3-content-files .well{
        width: 100%;
    }



}



/* <!------------ SERVICES PAGE 4--------- --> */


.page3-4{
    background-color: rgb(245, 245, 245);
}




/* <!------------ CAREERS PAGE --------- --> */


.careers{
    padding: 12% 8% 1% 8%;
    background-image: url(images/career-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 50vh;
    animation: text 7s infinite;
    background-color: rgb(0, 114, 30);
}
.careers .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.careers .career-plinks{
    color: white;
}
.careers .career-plinks a{
    text-decoration: none;
    color: white;
    transition: 0.5s ease;
}

.careers .career-plinks a:hover{
    opacity: 60%;
}

.careers .career-plinks span{
    margin: 0 10px;
}

.careers .container p{
    width: 500px;
    color: white;
    line-height: 25px;
}


.jobs{
    min-height: 10vh;
    border-bottom: 1px solid rgb(2, 156, 76);
    padding: 3% 8%;
}
.jobs .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jobs .content h1{
    font-size: 20px;
    font-weight: 300;
}
.jobs .content a{
    text-decoration: none;
    background-color: red;
    color: white;
    padding: 12px 25px;
    border-radius: 5px; 
    transition: 0.5s ease;
}

.jobs .content a:hover{ 
    background-color: rgb(2, 156, 76); 
}



@media (max-width: 968px){

    .careers {
        background-image: url(images/career-bg-mobile.jpg);
    }
    .careers .career-plinks{
        padding-top: 25%;
        padding-bottom: 15%;
    }

    .careers .container img{
        padding-top: 10%;
        width: 100%;
    }

    .careers .container p{
        width: 100%;
    }

    .jobs .content h1{
        font-size: 15px;
        font-weight: 300;
        
    }

}


.careers-2{
    min-height: 50vh;
    width: 100%;
    padding: 8% 20%;
}
.careers-2 h6{
    font-size: 25px;
    margin-bottom: 15px;
}

.careers-2 .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin-bottom: 50px;
    
}
.careers-2 p{
    line-height: 25px;
    
}

@media (max-width: 968px){
    .careers-2{
        padding: 12% 8%;
    }
}


/* ------------ CAREERS PAGE 3 ---------  */
.careers-3{
    padding: 8%;
    width: 100%;
    min-height: 100vh;
    background-color: rgb(238, 238, 238);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .careers-3 .container{
        width: 350px;
        background-color: white;
        margin: 20px 0;
        padding: 3%;
        transition: 0.5s ease;
    }

    .careers-3 .container:hover{
        transform: scale(103%);
    }

    .careers-3 .container img{
        width: 70px;
        
    }
    .careers-3 .container h6{
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 30px;
        line-height: 25px;
        font-weight: 400;
    }
    .careers-3 .container p{
        line-height: 25px;
        font-size: 12px;
    }

    @media (max-width: 968px){
        .careers-3 .container{
            width: 100%;
            padding: 8%;
    
        }
    }
    








/* ----------- well-construction ------------ */

.well-construction{
    padding: 12% 8% 8% 8% ;
    min-height: 40vh;
    background-image: linear-gradient(to right, rgba(0, 0, 0,0.8), rgba(0, 0, 0,0.0)), url(images/well-bg.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: text 7s infinite;
}

.well-construction #wrapper .container{
    display: flex;
    align-items: center; 
    flex-wrap: wrap;
}
.well-construction #wrapper .container .move{
    margin-left: 15%; 
}

.well-construction #wrapper .container img{
    margin-left: 15%;
    transition: 0.5s ease;
    animation: zoom-out 3s ease infinite;
    cursor: pointer;
}
.well-construction #wrapper .container .video-player video{
    width: 80%;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%); 
}
.well-construction #wrapper .container .video-player .close-btn{
    position: absolute;
    top: -200px;
    right: 110px;
    width: 30px;
    cursor: pointer; 
}
 
/* Layout control if not already existing */
.files {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 60px;
}

.files img {
    width: 45%;
    border-radius: 10px;
}

.files .text {
    width: 55%;
}


 /* Read More Button */
.read-more-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #c40000; 
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.read-more-btn:hover {
    background-color: #8b0000;
}
/* Dropdown Content */
.dropdown-content {
    display: none;
    margin-top: 15px;
    background-color: #f2f2f2;
    padding: 15px;
    border-left: 4px solid #004a99;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.7em;
}


 

@media (max-width: 968px){
   
    .well-construction #wrapper .container .move{
        margin-left: 0%; 
    }

    .well-construction #wrapper .container .video-player .close-btn{
        position: absolute;
        top: -100px;
        right: 50px;
        width: 20px;
        cursor: pointer; 
        animation: none;
    } 
    
    .well-construction #wrapper .container img{
        margin-left: 0%;
        margin-top: 30px;
    }
    

}

.well-construction .plinks{
    margin-bottom: 8%;
    color: white;
    display: flex;
    align-items: center;
}
.well-construction .plinks a {
    transition: 0.5s ease;


}
.well-construction .plinks a:hover{
    opacity: 60%;

}
.well-construction .plinks span{
    margin: 0 10px;
}
.well-construction .plinks a{
    text-decoration: none;
    color: white;
}
.well-construction .plinks label{
    font-weight: bold;
}

.well-construction .container h6{
    color: white;
    font-size: 25px;
    margin-bottom: 40px;
}
.well-construction .container p{
    color: white;
    line-height: 25px;
    width: 500px;
}

@media (max-width: 968px){
    .well-construction .container p{
        width: 100%;
    }
    
    .well-construction .plinks{
        padding-top: 25%;
        padding-bottom: 10%;
    }
    .well-construction .container h6{
        font-size: 20px;
        margin-bottom: 30px;
    }
    .well-construction{
 
        animation: none;
    }
}


/* ----------- well-construction 2------------ */
.well-construction-2{
    min-height: 100vh;
    width: 100%;
}
.well-construction-2 .content{
    padding: 8%;


}

.well-construction-2 .content h6{
    font-size: 25px;
    margin-bottom: 15px;
    text-align: center;
    
}

.well-construction-2 .content .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
}

.well-construction-2 .content p{
    line-height: 25px;
    padding-top: 5%;
    width: 700px;
    text-align: center;
    margin: auto;
}

.well-construction-2 .files-2{
    background-color: rgb(235, 253, 239);
}

.well-construction-2 .files{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8%;
    flex-wrap: wrap;
}

.well-construction-2 .files img{
    transition: 0.5s ease; 
    width: 550px;
}
.well-construction-2 .files img:hover{
    transform: scale(103%);
}

.well-construction-2 .files .text h6{
    font-size: 25px;
    margin-bottom: 40px;
    font-weight: 400;
    width: 500px;
    line-height: 35px;
    width: 400px;
}
.well-construction-2 .files .text p{
    line-height: 25px;
    width: 500px;
    
}
.well-construction-2 .files .text .e-button{
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease; 
}
.well-construction-2 .files .text .e-button:hover{
    background-color: red;

}

.well-construction-2 .files-2 .list-items{
    padding-top: 20px;
}
.well-construction-2 .files-2 .list-items li{
    margin: 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.well-construction-2 .files-2 .list-items li .fa-angle-right{
    margin-right: 10px; 
    color: green;
}

@media (max-width: 968px){
   
    .well-construction-2 .content p{
        width: 100%;
        text-align: left;
        margin: unset;
        padding-top: 10%;
        padding-top: 10%;
    }

    .well-construction-2 .content h6{
        font-size: 20px;
        text-align: left;
    }

    .well-construction-2 .content .line{
        margin: unset;
    }

 
    .well-construction-2 .files img{
        width: 100%;
        margin: 30px 0;
    }

    .well-construction-2 .files .text h6{
        font-size: 20px;
        width: 100%;
    }

    .well-construction-2 .files .text p{
        line-height: 25px;
        width: 100%;
        
    }
    .well-construction-2 #files{
        flex-wrap: wrap-reverse;
        
    }

    .well-construction-2 #electrical-and-instrumentation{
        padding-bottom: 15%;
    }


    
}



/* electrical-and-instrumentation  */

.electrical-page{
    width: 100%;
    min-height: 70vh;
    background-image: linear-gradient(to right, rgba(0,0,0,0.6),rgba(0,0,0,0.0)), url(images/background-8.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 8%; 
} 
.electrical-page .e-page-container{
    width: 50%;
    padding-top: 10%;
}
.electrical-page .e-page-container p{
    color: white;
    font-size: 16px;
}
.electrical-page .e-page-container h1{
    color: white;
    font-size: 35px;
    padding-top: 20px;
}  

@media (max-width: 768px){
    .electrical-page .e-page-container{
        width: 100%;
        padding-top: 20%;
    }
    .electrical-page{
        width: 100%;
        min-height: 80vh; 
    }
    .electrical-page .e-page-container h1{
        color: white;
        font-size: 25px;
        padding: 20px 0 50px 0;
    } 
}


/* -----------electrical-and-instrumentation page 3-------- */
 
.e-page-3{
    min-height: 100vh;   
    width: 100%;
    padding: 8%;
    background-image: linear-gradient(rgba(252, 255, 253, 0.9), rgba(252, 255, 253,  0.9)), url(https://i.pinimg.com/originals/96/84/eb/9684eb8932b2fb5568d498704d525d78.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
} 


.e-page-3 .e-wrapper{
    display: flex; 
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.e-page-3 .e-wrapper .e-content{
    width: 350px ;
    margin: 20px 0;
    background-color: white; 
    border-radius: 15px; 
    transition: 0.5s ease;
    overflow: hidden;
} 
.e-page-3 .e-wrapper .e-content .text{ 
    padding: 8%; 
}
.e-page-3 .e-wrapper .e-content img{ 
    width: 400px;
}
.e-page-3 .e-wrapper .e-content:hover{
    scale: 103%;
}

.e-page-3 .e-wrapper .e-content h6{
    letter-spacing: normal;
    line-height: 20px; 
    font-size: 18px;
    margin-bottom: 10px;
}
.e-page-3 .e-wrapper .e-content .line{
    margin-bottom: 30px;
    background-color: red;
    height: 5px;
    width: 50px;
} 
.e-page-3 .e-wrapper .e-content p{
    letter-spacing: normal;
    line-height: 20px; 
}


.e-page-3 .e-wrapper .e-content  .list-items{
    padding-top: 20px;
}
.e-page-3 .e-wrapper .e-content  .list-items li{
    margin: 10px 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.e-page-3 .e-wrapper .e-content  .list-items li .fa-angle-right{
    margin-right: 10px; 
    color: green;
}


/* --------electrical-and-instrumentation page 1---------- */
#electrical-page-1{ 
    min-height: 100vh;
    width: 100%;
}
#electrical-page-1 .electrical-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 8% 0;
}
#electrical-page-1 .electrical-wrapper .text{
    width: 500px;
} 

#electrical-page-1 .electrical-wrapper .text h6{
    font-size: 25px;
    margin-bottom: 10px;
}
#electrical-page-1 .electrical-wrapper .text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}
#electrical-page-1 .electrical-wrapper .text p{
    padding-top: 9%;
}

#electrical-page-1 .electrical-wrapper img{
    width: 500px;
}

#electrical-page-1 .electrical-wrapper .text .list-items{ 
    padding-top: 8%;
}
#electrical-page-1 .electrical-wrapper .text .list-items h5{ 
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
    color: green;
}
#electrical-page-1 .electrical-wrapper .text .list-items li{ 
    list-style: none; 
    border-bottom: 1px solid #bbbbbb;
    padding: 15px 0;
    line-height: 20px;
    display: flex;
}
#electrical-page-1 .electrical-wrapper .text .list-items .fa-angle-right{ 
    margin-right: 10px;
    color: green;
    font-size: 18px;
}

#e-house{
    display: none;
}

#electrical-page-1 .list-items{
    padding: 4%;    
    margin: 0 8%;
    background-color: rgb(243, 255, 243);
}
#electrical-page-1 .list-items h5{
    text-align: center;
    font-size: 18px;
    font-weight: 400;  
    color: green;
}
#electrical-page-1 .list-items .item-1-list{
    display: flex;
    justify-content: space-evenly;
    margin-top: 6%;
    flex-wrap: wrap; 
}
#electrical-page-1 .list-items .item-1-list .list-1{
    width: 400px;
}
#electrical-page-1 .list-items .item-1-list .list-1 li{
    display: flex;
    align-items: start;
    margin: 15px 0;
}
#electrical-page-1 .list-items .item-1-list .list-1 li .fa-angle-right{
    margin-right: 10px;
    color: green;
}



@media (max-width: 768px){ 
    #electrical-page-1{
        padding-top: 15%; 
    }
    #electrical-page-1 .electrical-wrapper{ 
        padding: 0;
    }
    #electrical-page-1 .electrical-wrapper .text{
    width: 100%; 
    padding: 8%;
    } 
    #electrical-page-1 .electrical-wrapper img{
    width: 100%;
    margin-bottom: 0;
    } 

    .e-page-3 .e-wrapper .e-content{
        width: 100%; 
    }

    #e-house{
        display: initial;
    }
    #e-house-2{
        display: none !important;
    }

    .e-page-3 .e-wrapper .e-content img{ 
        width: 100%;
    }

    #electrical-page-1 .list-items{   
        margin: 8%; 
        padding: 8%;
    }
    #electrical-page-1 .list-items .item-1-list{ 
        margin-top: 8%;  
    }
    #electrical-page-1 .list-items h5{ 
        text-align: left;  
    }
}


.engineered-packages{
    min-height: 100vh;
    width: 100%;
}

.engineered-packages .packages-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 8% 0;
}

.engineered-packages .packages-wrapper .e-text{
    width: 500px;
} 

.engineered-packages .packages-wrapper .e-text h1{
    font-size: 25px;
    margin-bottom: 10px;
}
.engineered-packages .packages-wrapper .e-text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}

.engineered-packages .packages-wrapper .e-text p{
    margin-top: 40px;
    margin-bottom: 50px;
}
 
.engineered-packages .packages-wrapper img{ 
    width: 600px;
}


.engineered-packages .wrapper-content{
    padding: 0 8% 8% 8%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
 
.engineered-packages .wrapper-content .list-items {
    width: 260px;
    background-color: rgb(243, 255, 243);
    padding: 3%;  
    border-radius: 10px;
    margin: 20px 0;
}
.engineered-packages .wrapper-content .list-items h5{
    font-size: 18px;
    font-weight: 400; 
    padding-bottom: 12%;
    color: green;
}
.engineered-packages .wrapper-content .list-items li{
    list-style: none;
    display: flex;
    align-items: start;
    margin: 15px 0;
}
.engineered-packages .wrapper-content .list-items li .fa-angle-right{
    margin-right: 15px;
}


@media (max-width: 768px){ 
    .engineered-packages{
        padding-top: 15%; 
        padding-bottom: 8%; 
    } 
    
    
    .engineered-packages .packages-wrapper{ 
        padding: 0;
        flex-wrap: wrap-reverse;
    }
    .engineered-packages .packages-wrapper .e-text{
    width: 100%; 
    padding: 8%;
    } 
    .engineered-packages .packages-wrapper img{
    width: 100%;
    margin-bottom: 0;
    } 
    
    .engineered-packages .wrapper-content {
        padding-top: 15%;
        padding-bottom: 10%;
    }
    .engineered-packages .wrapper-content .list-items{
        width: 100%; 
        padding: 8%;  
        margin: 15px 0;
    }

    .engineered-packages .e-house-wrapper .e-house-img{ 
        width: 80% !important;
    }

}


 










/* -----------------process-management------------- */

#process-management{
    padding: 12% 8% 8% 8% ;
    min-height: 40vh;
    background-image: linear-gradient(to right, rgba(0, 0, 0,0.8), rgba(0, 0, 0,0.0)), url(images/ICSS.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: text 7s infinite;

}

.well-construction-2 #content p{
    line-height: 25px;
    width: 800px;
    
}

.well-construction-2 .files .text ul{
    margin: 20px 0;  
    list-style: none;     
}
.well-construction-2 .files .text p span{
    color: rgb(2, 156, 76);  
}
.well-construction-2 .files .text ul li{
    margin: 10px 0;
    width: 500px;       

}
.well-construction-2 .files .text ul li img{
    width: 8px;   
    margin-right: 15px;  
}
  
#process-management .wrapper .container{
    display: flex;
    align-items: center; 
    flex-wrap: wrap;
}
#process-management .wrapper .container img{
    margin-left: 15%;
    transition: 0.5s ease;
    animation: zoom-out 3s ease infinite;
    cursor: pointer;
}
#process-management .wrapper .container .video-player video{
    width: 80%;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%); 
}
#process-management .wrapper .container .video-player .close-btn{
    position: absolute;
    top: -200px;
    right: 110px;
    width: 30px;
    cursor: pointer; 
}
 
 


 

@media (max-width: 968px){
   
    #process-management{
        animation: none;
        width: 100%;
    }
    
    .well-construction-2 #content p{
        width: 100%;
        line-height: 25px;
        text-align: left;
            
    }

    #process-management .wrapper .container .video-player .close-btn{
        position: absolute;
        top: -100px;
        right: 50px;
        width: 20px;
        cursor: pointer; 
        animation: none;
    } 
    
    #process-management .wrapper .container img{
        margin-left: 0%;
        margin-top: 30px;
    }
    

}
 


/* ---------- OIL TOOLS AFRICA LIMITED ------------ */

#oil-tools{
    padding: 12% 8% 8% 8% ;
    min-height: 40vh;
    background-image: url(images/oil-tools-bg.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    animation: none;
    
}
#oil-tools .wrapper .plinks{
    color: black;
    flex-wrap: wrap;
    
}
#oil-tools .wrapper .plinks img{
    background-color: white;
    margin-right: 25px;
    padding: 10px 15px;
    border-radius: 10px;
    
}
#oil-tools .wrapper .plinks a{
    color: black;
    
}
#oil-tools .wrapper .container h6{
    color: rgb(2, 156, 76);
    line-height: 30px;
    
}
#oil-tools .wrapper .container p{
    color: black;
    
}


.well-construction .container .oil{
    width: 70%;
    line-height: 25px;
        
}


@media (max-width: 968px){
    #oil-tools{
        background-image: url(images/oil-tools-bg-mobile.jpg);
        width: 100%;
        background-position: center;
    }

    
    .well-construction .container .oil{
    width: 100%; 
        
    
    }
    #oil-tools .wrapper .plinks img{
        
        margin-right: 100%;
        margin-bottom: 10px;
        
    }



}

/* ---------- OIL TOOLS AFRICA  ------------ */

.oil-tools-africa{
    min-height: 90vh;
    width: 100%;
    overflow: hidden; 
}
.oil-tools-africa .tools-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
}
.oil-tools-africa .tools-wrapper img{
    height: 100vh;
}
.oil-tools-africa .tools-wrapper .text{
    width: 600px;
    padding-right: 8%;
}
 
.oil-tools-africa .tools-wrapper .text h6{
    font-size: 25px;
    margin-bottom: 10px;
}
.oil-tools-africa .tools-wrapper .text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}
.oil-tools-africa .tools-wrapper .text p{
    line-height: 22px;
    padding-top: 10%;
}
 

.oil-tools-africa .tools-wrapper-2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
}
.oil-tools-africa .tools-wrapper-2 img{
    height: 100vh;
}
.oil-tools-africa .tools-wrapper-2 .text{
    width: 600px;
    padding-left: 8%;
}
 
.oil-tools-africa .tools-wrapper-2 .text h6{
    font-size: 25px;
    margin-bottom: 10px; 
}
.oil-tools-africa .tools-wrapper-2 .text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}
.oil-tools-africa .tools-wrapper-2 .text p{
    line-height: 22px;
    padding-top: 10%;
}
 




@media (max-width: 968px){ 
     .oil-tools-africa .tools-wrapper .text{
        padding: 8%; 
        width: 100%
     }
     .oil-tools-africa .tools-wrapper .text h6{
         font-size: 20px;
     }
     .oil-tools-africa .tools-wrapper img{
        height: auto;
        width: 100%;
    }

    .oil-tools-africa .tools-wrapper-2{ 
        flex-wrap: wrap-reverse; 
    }
     .oil-tools-africa .tools-wrapper-2 .text{
        padding: 8%; 
        width: 100%
     }
     .oil-tools-africa .tools-wrapper-2 .text h6{
         font-size: 20px;
     }
     .oil-tools-africa .tools-wrapper-2 img{
        height: auto;
        width: 100%;
    }
}



/* ---------- NEW SERVICES ------------  */
#new-services-page{
    background-image: linear-gradient(to right, rgba(0, 0, 0,0.9), rgba(0, 0, 0,0.1)), url(images/new-services-bg-1.jpg);
    background-position: top;
    animation: none;
}
.new-services{
    min-height: 100vh;
    width: 100%;
}

.new-services .contents{
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 100vh;
    flex-wrap: wrap;
}

.new-services .contents img{
    height: 100vh;
}
.new-services .contents .text{
    width: 600px;
    padding-right: 8%;
}
.new-services .contents .text h6{
    font-size: 25px;
    margin-bottom: 10px; 
    line-height: 35px;
}
.new-services .contents .text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}
.new-services .contents .text p{
    line-height: 22px;
    padding-top: 8%;
}
.new-services .contents .text p span{
    color: rgb(2, 156, 76);
}


.new-services #contents-11{
    display: flex;
    align-items: center;
    justify-content: space-between; 
    min-height: 100vh;
    flex-wrap: wrap;
}
.new-services #contents-11 img{
    height: 100vh;
}
.new-services #contents-11 .text{
    width: 600px;
    padding-left: 8%;
}
.new-services #contents-11 .text h6{
    font-size: 25px;
    margin-bottom: 10px; 
    line-height: 35px;
}
.new-services #contents-11 .text .line{
    background-color: red;
    height: 5px;
    width: 50px;
}

.new-services #contents-11 .text p{
    line-height: 22px;
    margin-bottom: 20px;
    padding-top: 8%;
} 


.new-services #contents-11 .text-label{
    display: flex;
    flex-direction: column;
} 
.new-services #contents-11 .text label{
    margin: 10px 0;
    line-height: 22px;
} 

#quote{
    background-color: rgb(2, 156, 76);
}
#quote .quote-a:hover{
    color: rgb(2, 156, 76);
}


@media (max-width: 768px){
    
    .new-services .contents img{
        height: auto;
        width: 100%;
    }
    .new-services .contents .text{
        width: 600px;
        padding-right: 8%;
        padding-left: 8%;
        padding-top: 8%;
        width: 100%;
        padding-bottom: 8%;
    }
    .new-services .contents{ 
        overflow: visible;  
        min-height: 100vh;  
    }
    .new-services #contents-11{ 
        overflow: none; 
        flex-wrap: wrap-reverse; 
        min-height: auto;  
    }
    .new-services #contents-11 img{
        height: auto;
        width: 100%;

    }
    .new-services #contents-11 .text{
        width: 100%;
        padding-right: 8%;
        padding-left: 8%; 
        width: 100%;
        padding-top: 8%;
        padding-bottom: 8%;
    }
          
}


.new-services-services{
    padding: 5% 0% 0% 0%;
    min-height: 100vh;
    width: 100%;
}


.new-services-services .header-links{
    padding: 8%; 
}
.new-services-services .header-links ul{
    display: flex;
    align-items: center; 
}
.new-services-services .header-links ul li{
    list-style: none;
    margin-right: 15px; 
}
.new-services-services .header-links ul li a{
    text-decoration: none;
    color: black;
    transition: 0.5s ease;
}
.new-services-services .header-links ul li a:hover{ 
    color: rgb(2, 156, 76); 
}


.new-services-services .services-container .content{ 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    min-height: 100vh;
    overflow: hidden;
    flex-wrap: wrap;
}
.new-services-services .services-container .content .text{ 
    padding-right: 5%;
    padding-left: 8%;
    width: 700px;
}
.new-services-services .services-container .content .text h1{ 
    font-size: 25px;
    margin-bottom: 10px;
    
}
.new-services-services .services-container .content .text .line{ 
    background-color: red;
    height: 5px;
    width: 40px;  
}
.new-services-services .services-container .content .text h6{ 
    font-weight: 400;
    font-size: 20px;
    margin-top: 8%;
    margin-bottom: 20px;
    line-height: 25px;
}
.new-services-services .services-container .content .text p{ 
    line-height: 22px;
}

.new-services-services .services-container .content img{ 
    height: 100vh;
}

.new-services-services .services-container .content-2{
    padding: 5% 8% 8% 8%; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-image: url(images/new-services-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.new-services-services .services-container .content-2 .files{
    width: 400px;
    padding: 3%;
    margin: 20px 0;
    background-color: white;
}
.new-services-services .services-container .content-2 .files img{
    width: 60px;
    margin-bottom: 20px;
}
.new-services-services .services-container .content-2 .files h6{
    font-size: 15px;
    margin-bottom: 30px;
}
.new-services-services .services-container .content-2 .files p{
    line-height: 22px;
    font-size: 12px;
}


@media (max-width: 768px){
    .new-services-services{
        padding: 25% 0% 0% 0%; 
    }
    .new-services-services .services-container{ 
        padding-top: 8%; 
    }
    .new-services-services .services-container .content .text{ 
        padding-right: 8%;
        padding-left: 8%;
    }
    .new-services-services .services-container .content .text{  
        padding-bottom: 8%;
    }
    .new-services-services .services-container .content .text h6{  
        margin-top: 12%; 
    }
    .new-services-services .services-container .content img{ 
        height: auto;
        width: 100%;
    }
    .new-services-services .services-container .content-2 .files{
        width: 100%;
        padding: 5% 8%; 
    }
    
}


.metering-system{
    min-height: 100vh;
    width: 100%;
    padding-right: 8%;
}


.metering-system .container{
    display: flex;
    align-items: center;
    justify-content: space-between; 
    flex-wrap: wrap;
}

.metering-system .container .img{ 
    width: 600px;
    height: 160vh; 
    overflow: hidden;
} 
.metering-system .container img{ 
    width: 600px;
} 
.metering-system .container .text{
    padding-left: 5%; 
    width: 600px;
} 

.metering-system .container .text h1{ 
    font-size: 25px;
    margin-bottom: 10px;
    
}
.metering-system .container .text .line{ 
    background-color: red;
    height: 5px;
    width: 40px;  
    margin-bottom: 10%;
} 

.metering-system .container .text .sub-ul{ 
    padding-top: 0%;
    padding-left: 6%;
} 

.metering-system .container .text p{
    display: flex;
    align-items: center;
    line-height: 22px;
    margin: 10px 0;
    list-style: none;
} 
.metering-system .container .text p img{
    width: 8px;
    margin-right: 10px;
} 



@media (max-width: 768px){
    
    .metering-system .container .img{ 
        width: 100%;
        height: 50vh; 
        overflow: hidden;
    } 
    .metering-system .container img{ 
        width: 100%;
    } 
    .metering-system .container .text{
        padding: 8%; 
        width: 100%; 
    }
    .metering-system .container .img{ 
        width: 100%;
        height: 40vh;  
    }
    .metering-system{ 
        padding-right: 0%;
    }


    
}






.modular-solutions{
    min-height: 90vh;
    width: 100%;
    overflow: hidden;
}
.modular-solutions .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.modular-solutions .container .text{
    width: 650px; 
    padding: 8% 0% 8% 8%;

} 

.modular-solutions .container .text h1{ 
    font-size: 25px;
    margin-bottom: 10px;
    
}
.modular-solutions .container .text .line{ 
    background-color: red;
    height: 5px;
    width: 40px;  
    margin-bottom: 10%;
} 

.modular-solutions .container .text .sub-ul{ 
    padding-top: 0%;
    padding-left: 6%;
} 

.modular-solutions .container .text p{
    display: flex;
    align-items: center;
    line-height: 22px;
    margin: 10px 0; 
} 
.modular-solutions .container .text p img{
    width: 8px;
    margin-right: 10px;
} 



.modular-solutions .container .img{
    width: 600px;
    overflow: hidden;   
}

.modular-solutions .container .img img{
    width: 150%; 
}

.metering-system .container #rotating{
    min-height: 90vh;
    width: 600px;
    overflow: hidden;
}
.metering-system .container #rotating img{ 
    width: 800px; 
}

@media (max-width: 768px){
    
        
    .modular-solutions .container .text{
        width: 100%; 
        padding: 8% 8% 8% 8%;

    }

    .modular-solutions .container{ 
    flex-wrap: wrap-reverse;
    }

    .modular-solutions .container .img img{
        width: 100%; 
    }
}


.valve-service{
    padding: 8%;
    background-image: url(images/valve-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: left;
}
.valve-service .container { 
    width: 70%;
    background-color: white; 
    padding: 8%;
    opacity: 85%;
    margin: auto;
    --webkit-backdrop-filter: blur(8px);
}
.valve-service .container h1{ 
    font-size: 25px;
    margin-bottom: 10px;
}

.valve-service .container .line{ 
    background-color: red;
    height: 5px;
    width: 40px;  
    margin-bottom: 10%;
}
.valve-service .container .service-1 h5{ 
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 30px;
}
.valve-service .container .service-1 p{ 
    line-height: 22px;
    margin: 17px 0;
    
}
.valve-service .container .service-1 .sub-text{ 
    margin: 15px;
}
.valve-service .container .service-1 .sub-text-1{ 
    margin: 15px 19px;
}
.valve-service .container .service-1 img{
    width: 8px;
    margin-right: 10px;
}

@media (max-width: 768px){
    
    .valve-service .container { 
        width: 100%; 
    }
}

/* 

#preloader{
    background: white url(images/preloader-2.gif) no-repeat center center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 1050;
    background-size: 7%;
} */





/* ---------- Markets we Serve ------------  */


.market{
    padding: 12% 8%;
    min-height: 50vh;
    width: 100%;
    text-align: center;
    background-image: url(images/oil-tools-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.market h6{
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 15px;
}

.market .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin: auto;
}

.market .files{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 5%;
    
}

.market .files .content{
    display: flex;
    margin: 20px;
    align-items: center;
    background-color: white;
    padding: 2%;
    border-radius: 20px;
    transition: 0.5s ease;
}
.market .files .content:hover{
    transform: scale(103%);
}

.market .files .content img{
    width: 50px;
    margin-right: 20px;
    
}

.market .files .content p{
    font-weight: 400;
    
}


@media (max-width: 968px){
    
    .market{
        text-align: left;
    }

    .market .line{
        margin: unset;
    }

    .market .files{
        justify-content: space-between;

        
    }

    .market .files .content{
        margin: 15px 0;
    }
    .market .files .content img{
        margin-right: 15px;
        
    }

    
 
}










/* ---------- QUOTE ------------ */


.quote{
    min-height: 40vh;
    background-color: red;
    padding: 8%;
    width: 100%;

}

.quote .content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

}

.quote .content h6{
    color: white;
    width: 500px;
    font-size: 25px;
    line-height: 35px;
}
.quote .content a{
    color: white;
    letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid white;
    padding: 15px 25px;
    border-radius: 30px;
    transition: 0.5s ease;


}

.quote .content a:hover{
    background-color: white;
    border: none;
    color: red;


}



@media (max-width: 968px){
    .quote{
        text-align: center;
    }

    .quote h6{
        margin-bottom: 30px;
        font-size: 20px;
    }

        
}



.oal-img{
    padding-top: 3%;
}

.oal-img img{
    width: 100%;
}

.oal-services{
    padding: 8%;
    width:  100%;
    min-height: 100vh;
    background-image: url(images/oil-tools-bg.jpg);
    background-size: cover;
}

.oal-services .wrapper{
    padding: 5% 0 11% 0;
 
}
 
.oal-services .wrapper .plinks a{
    text-decoration: none;
    color: black;
    transition: 0.5s ease;
     
}
.oal-services .wrapper .plinks a:hover{
    color: rgb(2, 156, 76);
     
}

.oal-services .wrapper .plinks span{
    margin: 0 10px;
    color: black;
}


.oal-services .files{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.oal-services .files .content{
    margin: 30px 0;
    width: 350px;
    overflow: hidden;
    border: 1px solid rgb(238, 238, 238);
    background-color: white;
    transition: 0.5 ease;
}
.oal-services .files .content:hover{
    box-shadow: 5px 7px 20px rgb(209, 209, 209);
}
.oal-services .files .content img{
    width: 350px;
    transition: 0.5s ease;
}
.oal-services .files .content img:hover{
    transform: scale(103%);

}
.oal-services .files .content .text{
    padding: 5%;
}

.oal-services .files .content .text h6{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: rgb(2, 156, 76);
}

.oal-services .files .content .text p{
    line-height: 25px;
    font-size: 12px;
}


@media (max-width: 568px){
    .oal-services{
        padding-top: 25% ; 
    }
}

/* ---------- CONTACT US PAGE ----------- */

.contact-us-page{
    min-height: 50vh;
    padding: 15% 8% 8% 8%;
    background-image: url(images/contact-us-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}
.contact-us-page .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.contact-us-page .container .text h6{
    color: white;
    font-size: 35px;
    margin-bottom: 50px;
}

.contact-us-page .container .text p{
    color: white;
    width: 400px;
    line-height: 25px;
}
.contact-us-page-2 .content iframe{
    border-radius: 20px;
    height: 600px;
}


@media (max-width: 968px){
    .contact-us-page .container{
        padding-top: 15%;
    }
    .contact-us-page .container .text h6{
        font-size: 20px;
        margin-bottom: 30px;
    }
    .contact-us-page .container .text p{
        width: 100%;
        line-height: 22px;
    }
    .contact-us-page .container img{
        margin-top: 30px;
        width: 190px;
    }

}





/* ---------- CONTACT US PAGE 2 ----------- */
.contact-us-page-2{
    padding: 8%;
    min-height: 100vh;
    width: 100%;
    background-color: rgb(238, 238, 238);
}

.contact-us-page-2 .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-us-page-2 .content .info{
    background-color: white;
    padding: 5% 8%;
    border-radius: 20px;
    margin: 20px 0;
    width: 500px;

}

.contact-us-page-2 .content .info .addres{
    margin: 30px 0;
    display: flex;
    align-items: start;
}
.contact-us-page-2 .content .info .addres img{
    background-color: red;
    width: 25px;
    border-radius: 5px;
    margin-right: 20px;

}
.contact-us-page-2 .content .info .location h6{
    margin-bottom: 10px;
    font-size: 15px;
}

.contact-us-page-2 .content .info .location p{
    line-height: 23px;
}

.contact-us-page-2 .content  .email{
    display: flex;
    align-items: center;
}
.contact-us-page-2 .content  .email p{
    display: flex;
    flex-direction: column;
    line-height: 23px;
    
}


.contact-us-page-2 .content .email img{
    background-color: red;
    width: 25px;
    border-radius: 5px;
    margin-right: 20px;

}
.contact-us-page-2 .content  #social-media{
    background-color: rgb(2, 156, 76);

}

.contact-us-page-2 .content  #social-media .social-media-links{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.contact-us-page-2 .content  #social-media .social-media-links a img{
   width: 40px;
   transition: 0.5s ease;
}

.contact-us-page-2 .content  #social-media .social-media-links a img:hover{
   opacity: 60%;
}


@media (max-width: 968px){
    .contact-us-page-2 .content .info{
        background-color: white;
        padding: 5%;
        border-radius: 20px;
        margin: 20px 0;
        width: 100%;
    
    }

    .contact-us-page-2 .content .info .addres img{
        margin-right: 12px;
    
    }
    
    .contact-us-page-2 .content .email img{
        margin-right: 12px;
    
    }
 
}





/* ----------- BLOG PAGE ------------ */

.blog{
    padding: 8%;
    min-height: 60vh;
    width: 100%;
    background-image: url(images/blog-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: text 7s infinite;
}


.blog .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 4%;
    
}

.blog .container img{
    width: 400px;
    animation: scale 3s ease infinite;
}
.blog .container .blog-mobile-img{
    display: none;
}

@keyframes scale{
    0%{
        transform: scale(100%);
    }
    50%{
        transform: scale(105%);
    }
    100%{
        transform: scale(100%);
    }
}

.blog .container .text p{
    color: white;
    font-size: 40px;
    margin-bottom: 20px;
}



.blog .container .text h3{
    color: white;
    font-size: 70px;
    margin-bottom: 5px;
    text-transform: uppercase;

}


.blog .container .text .line{
    background-color: red;
    width: 60px;
    height: 10px;
    margin-top: 20px;
    
}



@media (max-width: 968px){

    .blog{
        
        animation: none;
    }
    
    .blog .container{
    padding-top: 25%;
    
    }
    .blog .container .text p{
        font-size: 25px;
    }
    .blog .container .text h3{
        font-size: 40px;
    
    } 

    .blog .container .text .line{
    background-color: red;
    width: 55px;
    height: 5px;
    margin-top: 15px;
    
    }

   

    .blog .container .blog-mobile-img{
        display: block;
        width: 100%; 
        margin-top: 50px;
    }
    .blog .container .blog-desktop-img{
        display: none;
    }
}





/* ----------- BLOG PAGE 2------------ */

.blog-2{
    padding: 8%;
    min-height: 100vh;
    width: 100%;

}

.blog-2 .container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.blog-2 .container .files{
    width: 520px;
    display: flex;
    margin: 40px 0;
    align-items: center;
    background-color: white;
    /* border-right: 1px solid grey; */
    overflow: hidden;
    transition: 0.5s ease;
}

.blog-2 .container .files:hover{
    transform: scale(103%);
}

.blog-2 .container .files img{
    width: 250px;
    background-color: white;
    height: 250px;
    object-fit: cover;
}

.blog-2 .container .files .text{
    padding: 3%;
}
.blog-2 .container .files .text h6{
    font-size: 12px;
    margin-bottom: 15px;
    color: grey;
    font-weight: 400;
}

.blog-2 .container .files .text h5{
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 20px;
}
.blog-2 .container .files .text p{
    font-size: 11px;
    line-height: 18px;
    color: grey;
    margin-bottom: 30px;
}
.blog-2 .container .files .text a{
    text-decoration: none;
    color: white;
    background-color: rgb(2, 156, 76);
    padding: 10px 23px;
    border-radius: 5px;
    transition: 0.5s ease;
}
.blog-2 .container .files .text a:hover{
    background-color: red;
}




@media (max-width: 968px){

    .blog-2 .container .files{
        flex-wrap: wrap;
        width: 100%;
        border-bottom: 1px solid grey;
        margin-bottom: 20px;
        padding-bottom: 8%;
    }
    
    .blog-2 .container .files img{
        width: 100%;
    }

    .blog-2 .container .files .text{
        padding: 5% 3%;
    }

    
    .blog-2 .container .files .text h6{
    font-size: 14px;
    
    }

    .blog-2 .container .files .text h5{
    font-size: 20px;
    line-height: 25px;
    }
    .blog-2 .container .files .text p{
    font-size: 14px;
    line-height: 23px;
    }

}








/*   ----------- BLOG PAGE 1 ------------  */

.blog-page1{
    min-height: 50vh;
    background-image: url(images/blog-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 8%;
}

.blog-page1 .container{
    padding-top: 5%;
} 



.blog-page1 .files{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.blog-page1 .files-2{ 
    justify-content: space-between; 
}
.blog-page1 .files img{
    width: 400px;
    height: 300px;
    object-fit: cover;
}

.blog-page1 .container .text h5{
    color: white;
    font-size: 45px;
    width: 400px;
    line-height: 55px;
    margin-bottom: 20px;
    padding-top: 10%;
}
.blog-page1 .container .text-2 h5{
    color: white;
    font-size: 35px;
    width: 500px; 
}

.blog-page1 .container .text p{
    color: white;
    font-size: 15px;
    
}




@media (max-width: 968px){

    .blog-page1 .container{
        padding-top: 5%;
    }

    .blog-page1 .container .text h5{
        font-size: 25px;
        width: 100%;
        line-height: 30px;
        margin-top: 40px;
    }
    .blog-page1 .container img{
        width: 100%;
        margin-top: 30px;
    }
}

 

/* ----------- BLOG PAGE 2 ------------ */



.blog-page2{
    padding: 8%;

    
}
.blog-page2 .container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.blog-page2 .container p{
    line-height: 23px;
    width: 500px;
}
.blog-page2 .container-2 p{ 
    width: 80%;
}

.blog-page2 .container .images {
    display: flex;
    flex-direction: column;
    
}
.blog-page2 .container .images img{
    width: 400px;
    margin: 10px 0;
    transition: 0.5s ease;
}
.blog-page2 .container .images img:hover{
    transform: scale(103%);
}

.blog-page2 .spe-blog {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    margin-top: 8%;
} 

.blog-page2 .spe-blog img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
transition: all .3s ease-in-out;
}
.blog-page2 .spe-blog img:hover{
transform: scale(103%);
}

@media (max-width: 768px){

    .blog-page2 .container .images img{
        width: 100%; 
    }
    .blog-page2 .container p{
        width: 100%;
        margin-bottom: 20px;
    }
    .blog-page2 .blog-image .mobile{
        display: block;
    }
    .blog-page2 .blog-image .desktop{
        display: none;
    }
}




/* <!-- ----------- BLOG PAGE 3 ------------ --> */

#blog-2 {
    padding-top: 3%;
    min-height: 20vh;
}
.blog-2 .more{
    margin-bottom: 40px;
}
.blog-2 .more h6{
    color: rgb(2, 156, 76);
    font-size: 18px;
}
.blog-2 .more .line{
    width: 100%;
    height: 1px;
    background-color: grey;
    margin-top: 15px;
}


 




/*   ----------- BLOG PAGE (welcome to iwd 2022)------------  */

.blog-page-iwd{
    min-height: 50vh;
    padding: 8%;
}

.blog-page-iwd .container{
    padding-top: 5%;
}

.blog-page-iwd .container ul{
    display: flex;
    align-items: center;
    list-style: none;
}

.blog-page-iwd .container ul li{
    margin-right: 15px;
    color: black;

}

.blog-page-iwd .container ul li a{
    color: black;
    text-decoration: none;
    transition: 0.5s ease;
}
.blog-page-iwd .container ul li a:hover{
    color: rgb(2, 156, 76);
}


.blog-page-iwd .files{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.blog-page-iwd .container .text h5{
    color: black;
    font-size: 45px;
    width: 400px;
    line-height: 55px;
    margin-bottom: 20px;
    padding-top: 10%;
}
.blog-page-iwd .container .text h5 span{
    color: rgb(2, 156, 76);
    font-size: 45px;
    width: 400px;
    line-height: 55px;
    margin-bottom: 20px;
     
}

.blog-page-iwd .container .text p{
    color: black;
    font-size: 15px;
    
}


.blog-page-iwd .container .text .exhibition{ 
    font-size: 25px;
    width: 400px;
    line-height: 35px;
    margin-bottom: 20px;
     
}
.blog-page-iwd .container .text .exhibition span{ 
    font-size: 25px;
    width: 400px;
    line-height: 35px;
    margin-bottom: 20px;
     
}






@media (max-width: 968px){

    .blog-page-iwd .container{
        padding-top: 25%;
    }

    .blog-page-iwd .container .text h5{
        font-size: 25px;
        width: 100%;
        line-height: 30px;
        margin-top: 40px;
    }
    .blog-page-iwd .container .text h5 span{
        font-size: 25px;
         
    }
    .blog-page-iwd .container img{
        width: 100%;
        margin-top: 30px;
    }
    .blog-page-iwd .container .text .exhibition{ 
        font-size: 20px;
        width: 100%;
        line-height: 25px;  
        margin-top: 20px;
    }
}


/* ----------- BLOG PAGE (AOS-Orwell-Exhibition)  ------------  */

.exhibition-images{
    padding: 1% 8%;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.exhibition-images img{
    height: 500px;
}
.exhibition-images .size{
    height: auto;
    width: 350px;

}

@media (max-width: 968px){ 
    .exhibition-images img{
        width: 100%;
        height: auto;
    }



}





/* BLOG PAGE (welcome to iwd 2022) 2 */

 
.article{
    padding: 8% 15%;
    background-color: rgb(238, 238, 238);
}

.article p{
    line-height: 23px;
}

#more{
    padding-top: 8%;
}



@media (max-width: 968px){
    .article{
        padding: 8%; 
    }
}



.iwed{
    padding: 8%;
    background-image: url(images/iwed-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 60vh;
}


.iwed .container{
    padding-top: 3%;
}


.iwed .container h5{
    color: black;
    font-size: 35px;
    width: 600px;
    line-height: 45px;
    margin-bottom: 20px;
    padding-top: 5%;
}


.iwed .container p{
    color: rgb(2, 156, 76);
    font-size: 15px;
    font-weight: bold;
    
}


.iwed-links{
    padding: 2% 8%;
    border-bottom: 1px solid grey;
}
.iwed-links ul{
    display: flex;
    align-items: left;
    justify-content: left;
}
.iwed-links ul li{
   list-style: none;
   margin: 0 10px;
}
.iwed-links ul li a{
   text-decoration: none;
   color: black;
   transition: 0.5s ease;
}
.iwed-links ul li a:hover{
   color: green;
}


/* <!-- ----------- BLOG PAGE (iwed 2) ------------ --> */


.iwed-2{
    min-height: 40vh;
    width: 100%;
    padding: 8% 8% 0 8%;
}


.iwed-2 .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.iwed-2 .container .info-img img{
    border-bottom-left-radius: 100px;
}


.iwed-2 .info{
   width: 600px;
}


.iwed-2 .info .text h6{
   font-size: 25px; 
   line-height: 33px;
   margin-bottom: 8px;
}
.iwed-2 .info .text .line{
    height: 3px;
    width: 100px;
    background-color: rgb(2, 156, 76);
    margin-bottom: 15px;

}

.iwed-2 .info .text p{
    font-size: 20px;
}

.iwed-2 .info .text a img{
    background-color: rgb(0, 137, 190);
    width: 30px;
    margin-top: 15px;
    border-radius: 3px;
}
.iwed-2 .info .paragraph{
    line-height: 23px;
    margin-top: 40px;
}

.iwed-2 .answer{
    padding-top: 8%;
    min-height: 60vh;
}
.iwed-2 .answer .question{
    padding: 3%;
    background-color: rgb(2, 156, 76);
    border-radius: 15px;
    width: 80%;
    margin: auto;
    color: white;
}
.iwed-2 .answer .question h6{
    font-size: 15px;
    margin-bottom: 15px;
}
.iwed-2 .answer .question p{
    line-height: 23px;
}
.iwed-2 .answer #quest{
    margin-top: 30px;
    background-color: rgb(238, 238, 238);
    color: black;
}
.iwed-2 .answer #quest h6{
    color: rgb(2, 156, 76);
}
.iwed-2 .answer h4{
    font-weight: 400;
    width: 80%;
    margin: auto;
    padding-top: 30px;
    line-height: 23px;
}



@media (max-width: 768px){
    .iwed-2 .info-img{
        height: 250px;
        width: 100%;
        overflow: hidden;
        margin-bottom: 30px;
        border-bottom-right-radius: 30px;
    }
    .iwed-2 .info-img img{
        width: 100%;
    }

    .iwed-2 .info{
        width: 100%;

     }
     
    .iwed{ 
        padding-top: 30%;

    }

    .iwed .container h5{ 
        font-size: 25px;
        width: 100%;
        line-height: 30px;
        margin-top: 20px;
    }

    
    .iwed-2 .answer .question{
        padding: 5%; 
        width: 100%;
        margin: unset; 
    }
    .iwed-2 .answer h4{
 
        width: 100%;
        margin: unset;
 
    }
    .iwed-2 .answer{
        padding-bottom: 8%;
    }

    .iwed-2 .container #info-img{
        height: 300px;
    }
}




/* AOS Orwell Celebrates Annual Safety Day in Port Harcourt  */


.safety{
    padding: 13% 8% 8% 8%;
    min-height: 60vh;
    width: 100%;
    background-image: url(images/safety-day-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.safety .container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.safety .container .files ul{
    display: flex;
    align-items: center; 
    
}

.safety .container .files ul li{
    margin-right: 20px;
    list-style: none;
    color: white;

}
.safety .container .files ul li a{
    color: white;
    text-decoration: none; 
    transition: 0.5s ease;
}
.safety .container .files ul li a:hover{
    opacity: 60%;
}
.safety .container .files h5{
    color: white; 
    font-size: 35px;
    width: 480px;
    padding-top: 12%;
}

.safety .container .files p{
    color: white; 
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}
.safety .container img{
    width: 300px;
}


.safety-text{
    padding: 8% 8% 0 8%;
}
.safety-text p{
    line-height: 23px;
    width: 80%;
    margin: auto;
}



@media (max-width: 768px){
    .safety{
        padding-top: 37%;
          
    } 

    .safety .container .files h5{
        color: white; 
        font-size: 25px;
        width: 100%; 
    }
    .safety .container img{
        width: 100%; 
        margin-top: 30px;
    }

    .safety-text{
        padding:8%;
    }
    .safety-text p{
        line-height: 23px;
        width: 100%;
        margin: unset;
    }
}



/* -------------PROFILE-------------- */

.profile{
    background-image: linear-gradient(to right, rgba(2, 156, 76, 0.5), rgba(2, 156, 76, 0.5)), url(images/profile-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8%;
    width: 100%;
}

.profile .content{
     display: flex;
     align-items: center;
     justify-content: space-around;
     flex-wrap: wrap;
     padding-top: 3%;
}

.profile .content img{
     width: 270px;
}


.profile .content .text{
     color: white;
}
.profile .content .text h6{
     margin-bottom: 20px;
     font-weight: 400;
     font-size: 18px;
}
.profile .content .text h5{
     margin-bottom: 10px; 
     font-size: 30px;
     width: 270px;
}
.profile .content .text p{
     font-size: 15px;
     width: 270px;
     line-height: 23px;
}

.profile-links{
     padding: 2% 8%;
     border-bottom: 1px solid grey;
}
.profile-links ul{
     display: flex;
     align-items: center;
     justify-content: center;
}
.profile-links ul li{
    list-style: none;
    margin: 0 10px;
}
.profile-links ul li a{
    text-decoration: none;
    color: black;
    transition: 0.5s ease;
}
.profile-links ul li a:hover{
    color: green;
}

.p-text{
    padding: 8% 20%;
}
.p-text p{
    line-height: 23px;
}


@media (max-width: 768px){
    .profile .content .text{
        padding-top: 8%;
   }
    .profile .content .text p{
        width: 100%; 
    }
    .profile .content .text h5{
        width: 100%; 
    }
    .p-text{
        padding: 8%;
    }
    .profile .content{
        padding-top: 20%;
   }
   .profile-links{
    padding: 5% 8%; 
    }
}




/* ---------- COVID-19 -------- */


.covid-19{
    min-height: 70vh;
    padding: 8%;
    background-image: url(images/covid19-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat; 
    display: flex;
    align-items: center;
    animation: text 7s ease infinite;
    background-position: center;
}
.covid-19 .content{
    padding-top: 8%;

}
.covid-19 .content p{
    color: white;
    font-size: 20px;
    margin-bottom: 15px; 
}
.covid-19 .content h6{
    color: white;
    font-size: 75px; 
}



#profile-links ul{
    display: flex;
    align-items: center;
    justify-content: left;
}

.covid-19-page1{
    padding: 3% 20% 8% 20%;
}
.covid-19-page1 .content{
    padding-top: 50px;
    margin: auto;
}
.covid-19-page1 .content h6{
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 25px;
    width: 800px;
}
.covid-19-page1 .content p{ 
    line-height: 23px;
    width: 800px;
    
}


 
 
.content-text .texts .texts-files{
    display: flex;
    align-items: flex-start;
    margin: 50px 15px;
    border-bottom: 1px solid #000;
}

.content-text .texts .texts-files h5{
    font-size: 50px;
    color: rgb(2, 156, 76);
    margin-right: 30px;
}

.content-text .texts .texts-files p{
    width: 500px;
    margin-bottom: 30px;
}
.content-text a img{
    width: 150px;
    margin-right: 30px;
    margin-top: 30px;
    transition: 0.5s ease;
}

.content-text a img:hover{
    transform: scale(103%);
}



@media (max-width: 768px){
    .covid-19{
        animation: none;
        background-position: left;
        min-height: 40vh;
        padding-top: 15%;
    }
    .covid-19 .content h6{
        color: white;
        font-size: 45px; 
    }
    .covid-19 .content h6 img{
        width: 35px; 
    }
    .covid-19-page1{
        padding: 3% 8% 8% 8%;
    }
    .covid-19-page1 .content h6{  
        width: 100%;
    }
    .covid-19-page1 .content p{  
        width: 100%;
        
    }
    .content-text .texts .texts-files{
        flex-wrap: wrap;
        margin: 50px 0;
        border-bottom: 1px solid #000;
    }
    .content-text a img{
        width: 100px;
        margin-right: 20px; 
    }
    .content-text .texts .texts-files h5{
        font-size: 40px; 
        margin-bottom: 20px;
    }
    #profile-links ul li{
        list-style: none;
        margin-right: 10px;
        margin-left: 0px;
    }
}

.press-releases-home{
    padding: 12% 8% 8% 8% ; 
    background-image: url(images/press-release-bg1.jpg);
    background-position: center;
    min-height: 65vh; 
    text-align: center;
    display: flex;
    align-items: center;
} 
.press-releases-home .text{
    margin: auto;
}
.press-releases-home .text p {
    color: white;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 20px;
} 

.press-releases-home .text h1 {
    font-size: 35px;
    color: white;
}


@media (max-width: 968px){
    .press-releases-home .text p {
        color: white;
        font-size: 25px;
        font-weight: 300;
        margin-bottom: 20px;
    }
    .press-releases-home{ 
        min-height: 50vh; 
        text-align: left; 
    }
   
} 


.aoso-local-content{
    padding: 12% 8% 8% 8%;
    min-height: 50vh;
    background-image: url(images/press-release-bg1.jpg);
    background-position: center;
}
.aoso-local-content .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.aoso-local-content .container img{
    width: 300px;
    
}

.aoso-local-content .container .text{
    width: 300px;
}

.aoso-local-content .container .text h6{
    color: white;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 300;
}
.aoso-local-content .container .text h5{
    color: white; 
    font-size: 25px; 
    line-height: 35px;
}

.aoso-local-content .container .text .line{
    background-color: white;
    width: 30px;
    height: 5px;
    margin-top: 20px;
}



/* ---------------------- */

.scholarship{
    padding: 12% 8% 8% 8%;
    min-height: 50vh;
    background-image: none;
    background-position: center;
}
.scholarship .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.scholarship .container img{
    width: 300px;
    
}

.scholarship .container .text{
    width: 300px;
}

.scholarship .container .text h6{
    color: black;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 300;
}
.scholarship .container .text h5{
    color: black; 
    font-size: 25px; 
    line-height: 35px;
}

.scholarship .container .text .line{
    background-color: red;
    width: 30px;
    height: 5px;
    margin-top: 20px;
}



.text-container{
    min-height: 100vh;
    width: 100%;
    padding: 0% 20% 8% 20%;
}

.text-container h4{ 
    font-size: 20px;
    font-weight: 300;
    padding: 10% 0 3% 0; 
    line-height: 30px;
}

.text-container h3{ 
    font-size: 15px;  
    font-weight: 300;
    margin-bottom: 20px;
    padding: 5% 0 0 0;
}

.text-container p{ 
    line-height: 23px;
    
}

@media (max-width: 968px){
    .aoso-local-content{
        padding: 30% 8% 8% 8%; 
    }
    .aoso-local-content .text{
        padding: 8% 0;
    }

    .text-container{
        min-height: 100vh;
        width: 100%;
        padding: 1% 8% 8% 8%;
    }

    .text-container h4{ 
        line-height: 30px;
        padding: 15% 0 3% 0;
    } 
            
     
    #aosorwell ul{
        display: flex;
        align-items: left;
        justify-content: left;
    }
    #aosorwell ul li{
    list-style: none;
    margin: 0 10px 0 0;
    }

} 


/* ----------- AOS ORWELL SCHOLARSHIP 2021  ------------ */
#scholarship{
    justify-content: left;
}

.aoso-scholarship{
    padding: 1% 8% 0% 8%;
}

.aoso-scholarship p{
    padding: 0 5% 8% 0;
    line-height: 23px;
}
 

.aoso-scholarship h1{
    font-size: 20px;
    width: 600px; 
    line-height: 30px;
}
 
.aoso-scholarship .line{
    background-color: red;
    width: 50px;
    height: 5px;
    margin-top: 15px;
}

.aoso-scholarship .scholar-img{
    padding-top: 8%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.aoso-scholarship .scholar-img .schimg{
    margin: 20px 0;
    width: 330px;
    overflow: hidden;
    border: 1px solid rgb(230, 230, 230);
}
.aoso-scholarship .scholar-img .schimg img{ 
    width: 330px;
    transition: 0.5s ease;
}
.aoso-scholarship .scholar-img .schimg img:hover{ 
    transform: scale(103%);
}
.aoso-scholarship .scholar-img .schimg h6{ 
    padding: 5%;
    font-weight: 300;
    line-height: 23px;
}

@media (max-width: 968px){
     
    .aoso-scholarship h1{ 
        width: 100%;  
        padding-top: 8%;
    }
    .aoso-scholarship p{
        padding: 0 8% 8% 0;
        line-height: 23px;
        width: 100%;
    }
    
    .aoso-scholarship .scholar-img .schimg{
        margin: 30px 0;
        width: 100%;
        overflow: hidden;
        border: 1px solid rgb(230, 230, 230);
    }
    .aoso-scholarship .scholar-img .schimg img{ 
        width: 100%;
        transition: 0.5s ease;
    }
    
}













/* -------NEWS/PRESS RELEASES------------- */

.blog-2 .container .files .text .news{
    padding-bottom: 5%;
}



.newspaper{
    padding: 8%;
    min-height: 100vh;
    width: 100%;
}

.newspaper .container{
    display: flex;  
    flex-wrap: wrap;
    justify-content: space-between; 
} 

.newspaper .container .news{
    width: 300px;
    margin: 20px 0;
}
.newspaper .container .news img{
    width: 300px; 
    margin-bottom: 20px;
}

.newspaper .container .news img{
    width: 300px; 
}
.newspaper .container .news .text{
    padding: 3%;
}
.newspaper .container .news h6{
    margin-bottom: 20px;
    font-size: 12px;
    color: grey;
}
.newspaper .container .news h5{
    margin-bottom: 15px; 
    line-height: 23px;
    font-size: 15px;
}
.newspaper .container .news p{
    margin-bottom: 15px; 
    line-height: 23px;
}

.newspaper .container .news a{
    text-decoration: none;
    color: white;
    background-color: rgb(2, 156, 76);
    padding: 9px 18px;
    border-radius: 5px;
}




@media (max-width: 968px){
    
    .newspaper .container .news{
        width: 100%; 
    }

    .newspaper .container{
        display: flex;  
        flex-wrap: wrap;
        justify-content: center; 

    } 

} 



/* -------------job vacancy------------- */


.vacancy{
    min-height: 50vh;    
    width: 100%;
}

.vacancy .jobs-img{
    width: 100%;
}
.vacancy .container{
    padding: 12% 8%;
}
.vacancy .header{
    padding-bottom: 8%; 
}
.vacancy .header h1{
    font-size: 30px;
    margin-bottom: 10px;
}
.vacancy .container .header .line{
    background-color: red;
    width: 55px;
    height: 5px; 
}
.vacancy .container .content{
    display: flex;
    align-items: center; 
    border: 1px solid rgb(2, 156, 76);
    width: 400px;
    text-decoration: none;
    color: black;
    transition: 0.5s ease; 
}
.vacancy .container .content:hover{
    scale: 104%;
}
.vacancy .container .content img{
    background-color: rgb(2, 156, 76);
    width: 130px;
    
} 
.vacancy .container .content p{ 
    line-height: 22px; 
    padding: 5%;  
} 


@media (max-width: 976px){
        
    .vacancy{
        overflow: hidden;
    }
    .vacancy .container{
        padding: 15% 8%;
    }
    .vacancy .header h1{
        font-size: 20px; 
    }
    .vacancy .container .content{ 
        width: 100%;  
        margin-top: 15%;
    }
        
    .vacancy .jobs-img{
        padding-top: 10%;
        width: 150%; 
    }
}




.whatsapp{
    width: 50px;
    position: fixed;
    right: 8%;
    bottom: 50px;
    z-index: 1040; 
    animation: zoom-out 3s ease infinite;
} 




/* Gallery Page */
.gallery-page{
    padding: 10% 10px 10px 10px;
    min-height: 100vh;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}
 
.gallery-page a{
    overflow: hidden;
    border-radius: 5px;
}
.gallery-page a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}
.gallery-page a img:hover{
    transform: scale(103%);
}

.gallery-page .wide{
    grid-column: span 2;
}
.gallery-page .tall{
    grid-row: span 2;

}
.gallery-page .big{
    grid-column: span 2;
    grid-row: span 2;
}











/* -----------FOOTER------------ */

footer{
    min-height: 70vh;
    width: 100%;
    padding: 8%;
    background-image: url(images/footer-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

footer .content-files{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


footer .content-files .files .text p{
    color: white;
    line-height: 25px;
    margin-bottom: 40px;
    width: 400px;
    
}
footer .content-files .files .text h6{
    color: white;
    margin-bottom: 20px;
}
footer .content-files .files .social-media a img{
    width: 40px;
    margin-right: 10px;
    opacity: 70%;
    transition: 0.5s ease;
}
footer .content-files .files .social-media a img:hover{
    
    border-radius: 5px;
    opacity: 100%;
}

footer .content-files .files-links .links{
    color: white;
    font-size: 20px;
    margin-bottom: 40px;
}
footer .content-files .files-links ol li{
    list-style: none;
    margin-bottom: 15px;
}
footer .content-files .files-links ol li a{
    color: white;
    text-decoration: none;
    transition: 0.5s ease;
}
footer .content-files .files-links ol li a:hover{
    color: rgb(0, 187, 90);
}

footer .content-files .files .con-text{
    color: white;
    font-size: 20px;
    background-color: red;
    width: 170px;
    padding: 9px 15px;
    border-radius: 10px;
    margin-bottom: 40px;
    
}
footer .content-files .files .contact{
    width: 260px;
    
}
footer .content-files .files .contact .address{
    margin-bottom: 25px;
    
}
footer .content-files .files .contact .address h6{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 17px;
    
}
footer .content-files .files .contact .address h6 img{
    background-color: red;
    width: 30px;
    border-radius: 5px;
    margin-right: 20px;
    
}
footer .content-files .files .contact .address p{
    color: white;
    line-height: 25px;
}
footer .content-files .files .contact .address .email img{
    background-color: red;
    width: 30px;
    border-radius: 5px;
    margin-right: 20px;
}
footer .content-files .files .contact .address .email{
    color: white;
    display: flex;
    align-items: center;
}


@media (max-width: 968px){
    footer .content-files .files .text p{
        width: 100%;
        
    }

    footer .content-files .files{
        margin-bottom: 40px;
    }

    footer .content-files{
        padding-top: 15%;
    }
}













/* -----------UNDER CONSTRUCTION------------ */

.construction{
    padding: 15% 8% 8% 8%;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    width: 100%;
}

.construction .con h1{
    font-size: 80px;
    letter-spacing: 1px;
    color: rgb(2, 156, 76);
    
}
.construction .con h6{
    font-size: 30px;
    letter-spacing: 1px;
    margin-bottom: 70px;
}


.construction .con a{
    color: white;
    text-decoration: none;
    background-color: rgb(2, 156, 76);
    padding: 15px 30px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.construction .con a:hover{
    background-color: red;
}

@media (max-width: 900px){ 
    .construction img {
        width: 300px;
        padding-top: 25%;
        
    }

    .construction .con h1{
        font-size: 60px;
        margin-bottom: 20px;

        
    }
    .construction .con h6{
        font-size: 25px;

    }


}




/* - Gallery Page  -- */

.photo-header{
    padding: 13% 8% 0 8%;
    width: 70%;
    margin: auto;
    text-align: center;
}

.photo-header h1{ 
    font-size: 40px;
    color: var(--off-black);
    margin-bottom: 10px;

}
.photo-header p{ 
    width: 80%;
    font-weight: 300;
    margin: auto;
    
}

@media screen and (max-width: 768px) {
    .photo-header{
        padding: 25% 8% 0 8%; 
        text-align: left;
        width: 100%;
        margin: unset;
    }
    .photo-header h1{ 
        font-size: 1.5em; 
        margin-bottom: 10px;

    
    }
    .photo-header p{ 
        width: 100%; 
        margin: unset;
        
    }
}
@media only screen and (min-width: 1520px) {
    .photo-header{
        padding: 8% 15% 0 15%;  
    } 
}


.folders{
    padding: 8%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    
}
.folders a{
    width: 50%;
    overflow: hidden;
    display: block;
    border-radius: 20px;
    text-decoration: none;
    position: relative;
    text-align: center;
    font-size: 16px;
    padding-bottom: 15px;
    color: grey;

}
.folders a:hover img{
    scale: 102%;
    filter: saturate(0%);
}
.folders a img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 20px;
    transition: all .3s ease-in-out;
} 
.folders a .fa-folder{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 30px;
    background-color: white;
    padding: 15px;
    border-radius: 50px;
    color: grey;

}