:root
{
    --box_shadow: 0 0 8px .5px rgba(0, 0, 0, 0.35);
}
header{
    background: whitesmoke;
}

#cover {
    width: 100%;
    height: 70vh;
    background-image: url('/img/about-pic.jpg');
    background-position: no-repeat;
    background-position: top;
    background-size: cover;
    background-color: rgba(10, 4, 66, 0.444);
    background-blend-mode: soft-light;
}
#cover section {
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    justify-content:right;
    align-items: center;
    text-align: right;
    font: 1em sans-serif;
}
#cover h1 
{
    font-size: 5vw;
    margin: 0 auto;
    padding-inline-end: 10%;;
    text-align: right;
    width: 100%;
}
#cover p 
{
    font-size: 1vw;
}


#about-content 
{
    width: 80%;
    height: 40vh;
    margin: 0 auto;
    display: flex;margin-top: -3%;
    align-items: center;background: white;
    box-shadow: 0 0 32px 4px rgba(0, 0, 0, 0.131);
}
#about-content div {
    width: 50%;
    height: 100%;
    background-image: url('/img/rig_one.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

#about-content section{
    width: 40%;
    height: 100%;
    display: grid;padding: 2%;
    place-items: center;
    margin-inline-start: 2%;
}

#about-content span, #about-content span:after, #about-content span::before
{
    color: rgb(0, 133, 177);
    content: " ~ ";
}

#about-content h1 
{
    font-size: 1.2vw;
    padding-block: 2%;
}

#about-content article 
{
    width: 100%;
    margin: 0 auto;padding: 2% 0;
    line-height: 120%;
    font-size: .8vw;
}
hr{background: rgb(4, 4, 107);}


#facts 
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
}

#facts div
{
    width: 25%;
    height: 90%;
    margin: 0 .5%;
}

#facts div figure
{
    width: 100%;
    height: 50%;
}

#facts section
{
    width: 95%;
    padding-block: 5% 0;
    margin: 0 auto;
    text-align: justify;
    height: auto;
}

#facts article
{
    font-size: .8vw;
    line-height: 150%;
}

#facts div:first-child figure
{
    background: url('/img/headway-5QgIuuBxKwM-unsplash.jpg');
    background-position: top;
    background-repeat: no-repeat;
    text-align: justify;
    background-size: 100%;
}


#facts div:nth-child(2) figure
{
    background: url('/img/values.jpg');
    background-position: top;
    background-repeat: no-repeat;
    text-align: justify;
    background-size: 100%;
}

#facts div:last-child figure
{
    background: url('/img/laptop-g7eaacf012_1920.jpg');
    background-position: top;
    background-repeat: no-repeat;
    text-align: justify;
    background-size: 100%;
}


#write 
{
    width: 100%;
    background: var(--color);
    height: 60vh;
    margin: 0 auto;
    box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.3);
}

#who
{
    width: 100%;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.596);
    background-image: url('/img/earth.jpg');
    background-size: cover;
     background-repeat: no-repeat;
     background-position: top;
     background-blend-mode: soft-light;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     padding-block: 3%;
     
}

#who section
{
    width: 40%;
    color: white;
    margin-inline: 4%;
}
#who h1{
    padding-block: 2%;
}
#who article{
    font-size: .9vw;
    line-height: 120%;
    text-align: justify;
}

#who-cnt img
{
    width: 8%;
    border-radius: 50%;
    padding: 1%;
    background: white;
}

#who section:nth-child(2)
{
   height: auto;
   border-inline-start: .1vw solid white;
   padding-inline-start: 2%;
   padding-block: 2%;
}

#who ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#who big {
    font-weight: bold;
}

#who li 
{
    padding: 2%;
    border-radius: 30px;
    border: 1px solid white;
    margin: .5%;
    list-style-type: none;
}

#qhse
{
    width: 100%;height: 70vh;display: flex;align-items: center;
    justify-content: center;background: white;
}

#qhse figure
{
    width: 30%;height: 80%;background-image: url('../img/QHSE.jpg');
    background-repeat: no-repeat;background-size: 100%;
    background-position: center;
}

#qhse section
{
    width: 30%;font-size: .8vw;;height: fit-content;margin-inline-start: 2%;
}

#qhse section h1
{
    font-size: 2vw;padding: 2% 0;line-height: auto;
}

#qp
{
    margin: 2% 0;
}

#qhse i
{
    width: 23%;padding: 4% 2%;margin: 0 1%;;box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.137)
}

#qhse i span
{
    font-family: 'Cabin';
}

#contact
{
    position: relative;
    width: 25%;
    display: none;
    place-items: center;
    height: 15vh;
    position: fixed;
    bottom: 3%;
    left: 5%;
    background:black;
    padding: .5% 1% 1% 1%;
}
#contact a{
    color: inherit;
    text-decoration: none;
}
#contact p:first-child:hover{
    color: red;
}
#contact p:last-child:hover
{
    color: white;
    background: red;
}
#contact p:first-child
{
    width: 5%;
    position: absolute;
    top: 5%;
    right: 5%;
transition: .5s;
    font-size: .8vw;
    text-align: right;
    color: rgb(255, 255, 255);
    padding-block: 1%;
    cursor: pointer;
}

#contact p:nth-child(2)
{
    width: 50%;
    margin: 0 auto;
    padding-inline: 10%;
    color: white;
    text-align: center;
    padding-bottom: 1%;
    border-bottom: .5px solid white;
}

#contact p:last-child
{
    background: white;
    border-radius: 3vw;
    transition: all .5s;
    padding: 2%;
    width: 50%;
    text-align: center;
    margin:0 auto;
    font-size: 1.5vw;
    margin-block-end: 1%;
}

.btns
{
   position: fixed;
   bottom: 10%;
   right: 3%;
   width: 5%;
   display: none;
}

.btns i
{
    font-size: 3vw;color: rgb(0, 133, 177);
}






@media only screen and (max-width: 900px)
{
    body
    {
    margin:0;
    padding:0;
    }

#cover {
    height: 50vh;
    background-position: left;
}

#cover h1 
{
    font-size: 200%;
    padding-inline-end: 0%;
    text-align: center;
    width: 100%;
}


#about-content 
{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    padding-block: 0;
    box-shadow: none;
}
#about-content div {
    width: 100%;
    height: 200px;
    background-position: center;
}

#about-content section{
    width: 100%;
    padding: 2% 0;
}

#about-content h1 
{
    font-size: 120%;
    padding-block: 1%;
}

#about-content article 
{
    width: 95%;
    margin: 0 auto;
    line-height: 120%;
    font-size: 80%;
}



#facts 
{
    display: block;
    height: auto;width: 90%;margin: 0 auto;
}

#facts div
{
    width: 100%;
    height: auto;
    padding-block: 0 4%;
    margin: 0;
}

#facts div figure
{
    width: 100%;aspect-ratio: 1/4;
    height: 200px;
}

#facts article
{
    font-size: 80%;
    line-height: 150%;
}

#who
{
    width: 100%;
    height: auto;
    background: var(--color);
     background-position: left;
     background-size: cover;
     display: block;
     padding-block: 5%;
     
}

#who section
{
    width: 95%;text-align: center;
    color: white;
    margin: 0 auto;
}
#who h1{
    padding-block: 2%;
}
#who article{
    font-size: 80%;text-align: center;width: 90%;
    margin: 0 auto;line-height: 120%;
}

#who-cnt img
{
    width: 15%;
    border-radius: 50%;
    padding: 3%;
    background: white;
}

#who section:nth-child(2)
{
   border-inline-start: none;
   padding-inline-start: 0;
   padding-block: 2%;
}

#who ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-block: 3%;
}
#who big {
    font-weight: bold;
}

#who li 
{
    list-style-type: none;
    padding: 1% 2%;
    margin-inline: 1%;;
    font-size: 100%;
    display: flex;
    align-items: center;
    color: white;
    line-height: 120%;
    border-radius: 10px;;
    margin-block: .8%;
}
#qhse
{
    height: 70vh;flex-direction: column;padding: 4% 0;
}

#qhse figure
{
    width: 100%;height: 50%;
}

#qhse section
{
    width: 90%;font-size: 80%;;height: fit-content;margin-inline-start: 2%;
}

#qhse section h1
{
    font-size: 200%;padding: 2% 0;line-height: auto;
}

#qp
{
    margin: 2% 0;
}

#qhse i
{
    width: 100%;padding: 4% 2%;margin: 1% 0;;
}


#qhse i span
{
    font-family: 'Cabin';
}

.btns
{
   position: fixed;
   bottom: 5%;
   right: 10%;
   width: 5%;
   display: none;
}

.btns i
{
    font-size: 300%;
}

}