@import url(//fonts.googleapis.com/css?family=Cabin);
:root {
    --size: 1.1vw;
    --color: rgb(4, 1, 32);
}

::selection
{
    background: var(--color);color: white;
}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Cabin, sans-serif;
    border: none;
}
a 
{
    text-decoration: none;
}

button {font-family: inherit;border: none}

body {
    background: rgb(247, 245, 245);
    overflow-x: hidden;
}

header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 4vw;
    z-index: 1;
}

header h1 img
{
    width: 10%;
}

header h1 {
    width: 40%;
    text-align: center;
    color: var(--color);
    font-size: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
}
#dots{display: none;}
nav 
{
    display: grid;
    place-items: center;
    width: 55%;
    height: 100%;
}
.links {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    transition: .5s;
}
header li {
    position: relative;
    list-style-type: none;
    padding-inline: 2.5vw;
    height: 100%;
    display: grid;
    place-items: center;
    transition: .1s;
}


header li:hover > a
{
    transform: translateY(-30%);
}

header li a {
    font-size: 1vw;
    text-decoration: none;
    transition: .5s;
    color: var(--color);
    text-transform: capitalize;
    font-weight: 400;
}

.links ul {
    width: 200%;
    position: absolute;
    background: white;
    top: 80%;
    left: 0%;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.24);
    display: none;
    z-index: 1;
}
.links ul li {
    display: flex;
    padding-block: 6%;
    padding-inline: 6%;
    border-bottom: 1px solid rgba(50, 3, 192, 0.089);
    transition: .5s;
}
.links ul li a{
    color: var(--color);
    text-transform: none;
    font-size: 1vw;
}
.links ul li:first-child a {
    border: none;
    padding: 0;
    color: var(--color);
}
.links ul li:hover a
{
    color: white;
    transform: translateY(0);
    text-decoration: none;
}
.links ul li:hover {
    color: white;
    background: var(--color);
}
.links li:nth-child(2):hover ul, .links li:nth-child(4):hover ul {
    display: block;
}
nav span{display: none}

/* Here begins the pack codes */
#pack
{
    position: relative;
    color: white;
    display: grid;
    place-items: center;
    height: 85vh;
    background-image: url("/img/rig_two.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-color:  rgba(0, 0, 0, 0.45);
    background-blend-mode: color-burn;
    overflow: hidden;
}

#pack h1 {
    width: 100%;
    color: white;
    font-size: 4vw;
    margin: 0;
    padding: 1%;
    text-transform: uppercase;
}
 video
{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 50%;
    overflow: hidden;
    z-index:-1;
}
#svg-cnt {
    position: absolute;
    width: 10%;
    height: 30%;
    top: 40%;
    left: 22%;
}
#pack span {
    letter-spacing: .3vw;
    font-size: .8vw;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
}
#pack p {
    text-align: center;
    font-size: 1vw;
    padding: 2%;
    width: 70%;
    margin: 0 auto;
    opacity: 0;
}

#intro {
    width: 70%;padding: 4% 0;color: white;position: relative;
    margin: 0 auto;transition: 2s;background: rgba(10, 88, 119, 1);
    box-shadow: 0 0 42px 0 rgba(0, 0, 0, 0.137);overflow: hidden;
}

#absi
{
    position: absolute;width: 100%;height: 100%;left: 0;
    background: rgba(255, 0, 157, 0.189);top: 100%;transition: .54s;
}
#intro:hover, #services:hover {background-color: inherit;color: var(--color);}

#intro:hover #absi, #services div:hover #absi
{
    top: 0;}

#intro i, #services i
{
    font-size: 4vw;transition-duration: .5s;transition-delay: .5s;color: white;;

}

#intro:hover i, #services div:hover i
{
    transform: translateY(-20%);color: var(--color);
}

#intro h3 {
    width: 80%;font-size: 1.5vw;
    margin: 0 auto;
    text-transform: capitalize;
    max-width: 100%;
    white-space: nowrap;
    text-align: center;
    padding: 2% 0;
}

@keyframes type {
    0% {width: 0;}
    50% {width: 100%}
    to {width: 0;}
}

@keyframes blink {
    from, to {
        border-color:rgba(45, 2, 94, 0.036) ;
    }
    50% {
        border-color: rgba(45, 2, 94, 0.836);
    }
}

#intro article 
{
    width: 60%;
    font-size: .8vw;
    margin: 0 auto;;
    font-weight: lighter;
    line-height: 150%;
    text-align: center;
    padding: 0 2%;
}

#services 
{
    display: flex;
    height: 55vh;margin: 0 auto;
    width: 70%;
    justify-content: center;
    padding: 4% 1%;
}
#services div {
    width: 30%;position: relative;
    transition: .5s;overflow: hidden;
    display: grid;margin: 0 .5%;
    place-content: center;
    color: rgba(0, 0, 0, 0.75);box-shadow: 0 0 32px 0 rgba(7, 7, 7, 0.091);
}
#services i {
    font-size: 3vw;color: black;;transition-delay: .4s;
}

#services div:hover i 
{
    color: rgb(0, 179, 250)
}

#services h1 {
    text-align: center;
    font-size: 1vw;
    padding: 4% 0;
    text-transform: capitalize;
}
#services section {
    width: 80%;
    height: 50%;
    font-size: .8vw;
    line-height: 120%;
    display: grid;
    padding: 1% 0;
    transition: 1s;
    text-align: center;
    margin: 0 auto;
}

#services div:hover {
    color: var(--color);cursor: pointer;
    box-shadow: 0 0 8px 0 rgba(7, 7, 7, 0.171);
}

#services div #absi 
{
    background: rgba(255, 0, 157, 0.189);
}

@keyframes turn {
    0% {border: none}
    20% {border-top: 1px solid black;}
    40% {border-left: 1px solid black}
    60% {border-bottom: 1px solid black;}
    80% {border-right: 1px solid black}
    100% {border: 1px solid black;}
}
@keyframes spin {
    from {transform: rotateZ(0deg);}
    to{transform: rotateZ(45deg);}
}


.about
{
    position: relative;
    display: flex;margin-top: 2%;
    align-items: center;
    width: 100%;
    justify-content: center;
    height: 80vh;
    background-image: url('/img/staff.jpg');
    background-position: bottom;
    background-size: cover;filter: grayscale(60%);
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    overflow: hidden;margin-block: 0 4%;
}

.cover
{
    position: absolute;;
    background-image: url('/img/about-pic.jpg');
    background-position: no-repeat;
    background-position: top;
    background-size: cover;
    filter: grayscale(40%);
    opacity: 0.3;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.about div:first-child
{
    height: 70%;
    width: 28%;
    display: flex;
    align-items: end;
    background-image: url('../img/rig_five.jpg');
    background-position: top;
    background-size: 150%;
    background-color: rgba(0, 21, 44, 0);;
    background-repeat: no-repeat;
    background-blend-mode: soft-light;
    margin-right: 2%;
    margin-top: -6.5%;visibility: hidden;
}

.about div:first-child img
{
    width: 100%;
    height: 60%;;
    margin: 0;
}

.about div:first-child section
{
    width: 100%;
    height: 100%;
    display: grid;
    color: white;
    margin-top: -.5%;;
    place-content: center;
}

.about div:first-child article
{
    text-align: center;
    width: 90%;
    margin: 0 auto;
    font-size: 1vw;;
}

.about div:first-child p
{
    margin-top: 2%;
    width: 100%;position: relative;
    text-align: center;
}

.about div:last-child
{
    width: 40%;
    height: fit-content;
    display: flex;justify-content: center;
}

.about div:last-child section
{
    width: 80%;font-size: .8vw;
    height: 100%;
}

.about div:last-child section span
{
    color: rgb(255, 255, 255);
}
.about div:last-child section span:after,#about div:last-child section span::before
{
    content: " ~ ";
    color: inherit;

}

.about div:last-child section h1
{
    font-size: 3vw;
    color: var(--themeColor);
}

.about div:last-child section aside
{
    display: flex;;
    height: 80%;
    align-items: center;
}

.about aside p
{
    width: 28%;;
    display: grid;
    padding: 4% 8%;text-align: center;
    margin-inline: 0 2%;margin-block: 2%;
    border-radius: 10px;;transition: .5s;
    background-color: white;
    place-items: center;
    box-shadow: 0 0 32px 2px rgba(0, 0, 0, 0.199);
}

.about p i
{
    font-size: 2vw;
}

.about button
{
    display: grid;
    place-items: center;
    text-decoration: none;
    width: 30%;
    background: white;transition: .5s;
    color: var(--color);
    padding: 4% 0;
    ;
}

.about button:hover, .about aside p:hover
{
    background: rgba(10, 88, 119, 1);color: white;
}

.terms {
    width: 75%;
    height: 80vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.values 
{
    width: 50%;
    height: 100%;
    margin-inline:.8%;
}
.values div, #plans div
{
    width: 100%;
    height: auto;
} 
.values div img
{
    width: 100%;
    height: 100%;aspect-ratio: 7/5;
}
.values p 
{
    width: 20%;padding: 4% 0;
    margin: 0 auto;
} 
.values p img
{
    margin-top: -50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgb(0, 0, 0);
    filter: invert();
    box-shadow: 0px 5px 8px 1px rgba(255, 255, 255, 0.445);
}
.values article
{
    width: 95%;
    margin: 0 auto;
    font-size: .8vw;
    line-height: 150%;
    text-align: justify;
}
.values article h1 
{
    text-align: center;
    padding: 4% 0;
}

#eiva 
{
    width: 100%;height: 100vh;color: white;background-color: var(--color);
    padding: 2% 0;text-align: center;font-size: .8vw;position: relative
    ;
}

#eiva section:first-of-type
{
    width: 50%;height: 40%;padding: 2% 0;text-align: center;;margin: 0 auto;;
}

#eiva section:first-of-type h1
{
    font-size: 3vw;padding: 2% 0;
}

#eiva section:last-of-type
{
    width: 100%;height: auto;display: flex;;
    align-items: center;justify-items: center;padding: 0 6%;
}

#eiva section:last-of-type img
{
    width: 20%;aspect-ratio: 7/5;margin: 0 .2%;
}

#eiva button
{
    width: 12%;padding: 1.2% 0;;margin-block: 4%;background-color: inherit;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.103);color: white;transition: .5s;
}

#eiva button:hover {border-radius: 30px;cursor: pointer;background-color: white;color: var(--color);
}

#se 
{
    transform: rotate(-90deg);opacity: 0.5;
    position: absolute;top: 40%;left: 0;font-size: 10vw;font-weight: bolder;
}

#process {
    width: 100%;display: none;
    height: 70vh;
    /* display: flex;; */
    color: black;
    align-items: center;
    justify-content: end;
    background-image: url('/img/pngwing.com\ \(2\).png');
    background-repeat: no-repeat;
    background-size: 40%;
    background-position-x: 50%;background-position-y: 50%;;
}
#process section 
{
    width: 50%;display: none;
    filter: none;
}
#process section h1{
    font-size: 2vw;
}

#process article {
    width: 70%;
    font-size: .9vw;
    text-align: left;
    line-height: 120%;
}
#process article:first-child
{
    font-weight: bolder;
}
#process span, #process span::after, #process span::before
{
    content: " ~ ";
    font-size: .8vw;
    color: rgb(0, 51, 146);
}
#news {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--color);
    height: 80vh;
    padding-top: 5%;
    overflow: hidden;
}

#news section
{
    display: block;
    width: 20%;
    height: 80%;
    padding-bottom: 2%;
    margin: 0 1%;
    /* box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.111); */
}
#news img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 7/6;
}
#news article h1 
{
text-align: start;
width: 100%;
font-size: 1vw;
margin-block: 4%;
padding-inline-start: 2%;
text-transform: capitalize;
}

#news article{
    font-size: .8vw;
    text-align: start;
    width: 100%;
    height: 32%;;
    margin:0 auto;
    line-height: 120%;
}

#news button
{
    width: 35%;padding: 4% 0;background: rgb(10, 88, 119);color: white;transition: .5s;display: none;
}

#news button:hover
{
    background: white;color: var(--color);box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.233);
}

#ra {
    position: absolute;
    width: 100%;
    top: 3%;
    font-size: 1.5vw;
    text-align: center;
    font-weight: lighter;
    text-transform: capitalize;
    font-variant: small-caps;
}
#ra:after, #ra:before 
{
    content: " - ";

}

footer
{
    width: 100%;
    height: 55vh;
    background:  rgb(10, 88, 119);
}
footer li{transition: .5s}
footer li:hover 
{
    text-decoration: underline;
    cursor: pointer;
}
footer a {color: white;font-size: inherit;}
#layout-one
{
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer h6
{
    color: white;
    font-size: 1.2vw;
    padding-block: 2%;
}
footer section h1
{
    color: white;
    font-size: 1.4vw;
    padding-block: 5%;
}
#layout-one div 
{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
#layout-one div img
{
    width: 8%;
    margin-inline-end: 5%;
}

#layout-one ul li 
{
    list-style-type: none;
    font-size: .8vw;
    padding-block: 1%;
    color: white;
}
#layout-one div:last-child ul i
{
    font-size: 1vw;
    margin-inline-end: 3%;
    color: white;
}
#layout-one div > i
{
    font-size: 1.5vw;
    margin-inline-end: 5%;color: white;
}

#layout-two 
{
    width: 100%;
    height: 65%;
    display: flex;
}
#layout-two div 
{
    width: 35%;
    height: 100%;
    text-align: justify;
    padding-block-start: 0%;
    display: flex;
    justify-content: center;
    margin-inline-end: .1%;
    background-color: rgb(5, 61, 83);
}
    #layout-two section 
    {
        width: 70%;
        margin: 0 auto;
        padding-block: 5%;
    }
    
    #layout-two section article
    {
        width: 100%;
        margin:0 auto;
        line-height: 120%;
        color: white;
        text-align: start;
        font-weight: lighter;
        font-size: .8vw;
    }
    #layout-two li 
    {
        list-style-type: none;
        color: white;
        font-size: .8vw;
        line-height: 180%;
    }
    #layout-two div:nth-child(2), #layout-two div:nth-child(3)
    {
        width: 20%;
    }
    #layout-two div:nth-child(2) section, #layout-two div:nth-child(3) section
    {
        width: 90%;
    }

   #layout-two span
   {
    font-size: .7vw;
    padding-inline-end: 2%;
   }
    

#layout-three 
{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(5, 55, 75);
}
#layout-three div{
    width: 50%;
    height: 100%;
    display: grid;
    place-items: center;
}

/* Layout Three*/
#layout-three p 
{
    font-size: .7vw;
    color: white;
}
#layout-three ul 
{
    display: flex;
}
#layout-three li 
{
    list-style-type: none;
    font-size: .7vw;
}
#layout-three li:nth-child(2):before, #layout-three li:nth-child(3):before 
{
    content: " | ";
    color: white;
}



#teams-intro
{
    width: 100%;height: 60vh;
    background-repeat: no-repeat;background-size: 100%;background-blend-mode: soft-light;
    display: flex;align-items: center;padding-inline-start: 8%;background-position: bottom;
}


#teams-intro section
{
    color: rgb(0, 0, 0);background-color: rgba(255, 255, 255, 0.836);padding: 4%;width: 40%;margin-inline-start: 4%;
}

#teams-intro h1
{
    font-size: 2vw;;padding: 2% 0;
}

#teams-intro article
{
    padding: 6% 0;border-bottom: 2px solid rgb(88, 0, 77);width: 90%;
}   

.grid
{
    display: flex;align-items: center;justify-content: start;flex-wrap: wrap;width: 85%;margin: 0 auto;height: fit-content;;padding: 2% 0;
}

.grid section 
{
    width: 30%;;box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.103);margin: 1%;padding: 2%;;display: flex;align-items: center;transition: .5s;
}

.grid section:hover
{
    color: white;background-color: rgb(5, 61, 83);
}

.grid i 
{
    font-size: 1.5vw;color: rgb(131, 1, 114);transition: .1s;
}

.grid section:hover i, .grid section:hover span, .grid section:hover h1
{
    color: white;
}

.grid section:hover h1 { font-weight: bolder; }

.grid h1
{
    padding: 1% 0;;color: rgb(5, 61, 83);font-weight: 300;
}

.grid article span 
{
    font-size: .8vw;;color: rgb(131, 1, 114);
}








@media only screen and (max-width: 900px)
{
    *
    {
        margin:0;
        padding: 0;
    }
    
header {
    background: transparent;
    position: absolute;
    padding: none;
    height: 0;
}
header h1 {
    display: none;
}

#hmb
{
    position: absolute;
    top: 3%;
    right:5%;
    width: 20%;
    height: 40px;
    cursor: pointer;
    z-index: 99;
}

#hmb div
{
    height: 15%;
    background: whitesmoke;
    margin: 0 auto;;
    margin-block-end: 8%;
    border-radius: 30px;
}
#hmb div:first-child
{
    width: 40%;
}
#hmb div:nth-child(2)
{
    width: 60%;
}
#hmb div:last-child
{
    width: 40%;
}

nav 
{
    position: fixed;
    display: block;
    width: 0%;
    top: 0%;
    right:0;
    height: 100%;
    transition: .5s;
    z-index: 100;
    background: whitesmoke;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.5);
}

nav span
{
    display: none;
    font-size: 250%;
    padding-inline: 3%;
    width: 10%;
}


.links {
    display: block;
    height: 100%;
    transition: .5s;
    overflow: hidden;
}
header li {
    position: relative;
    list-style-type: none;
    width: 70%;
    height: 15%;
    display: grid;
    place-items: center;
    transition: .5s;
    border-bottom:.1px solid var(--color);
    margin: 0 auto;
}
header li:last-child{border-bottom: none;}

header li:hover
{
    background:
     var(--color);
     color: white;
}
header li:hover a
{
     color: white;
}

header li a {
    font-size: 100%;
    text-decoration: none;
    color: inherit;
    text-transform: capitalize;
    font-weight: 400;
}

.links ul {
    width: 100%;
    position: absolute;
    background: white;
    top: 80%;
    left: 0%;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.24);
    display: none;
    z-index: 1;
}
.links ul li {
    display: flex;
    width: 95%;
    padding-block: 3%;
    padding-inline: 1vw 2vw;
    border-bottom: 1px solid rgba(50, 3, 192, 0.189);
    transition: .5s;
}
.links ul li a{
    color: var(--color);
    text-transform: none;
    font-variant: small-caps;
    font-size: 120%;
}
.links ul li:first-child a {
    border: none;
    padding: 0;
    color: var(--color);
}
.links ul li:hover a{color: white}
.links ul li:hover {
    color: white;
    background: var(--color);
}
.links li:nth-child(2):hover ul, .links li:nth-child(4):hover ul {
    display: block;
}


#pack
{
    background-size: cover;
}

#pack h1 {
    width: 100%;
    color: white;
    font-size: 200%;
    margin: 0 auto;
    padding: 1%;
}
 video
{
    display: none;
}

#pack span {
    letter-spacing: .3vw;
    font-size: 80%;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
}
#pack p {
    font-size: 100%;
}


#intro {
    width: 100%;padding: 4% 0;margin: 0 auto;height: fit-content;
}


#intro i, #services i
{
    font-size: 250%;padding: 2% 0;
}

#intro h3 {
    width: 80%;font-size: 150%;padding: 3% 0;margin: 0 auto;
}

#intro article 
{
    width: 98%;font-size: 80%;
}    
#services 
{
    display: block;
    height: fit-content;
    width: 100%;
    padding: 3% 0;
    margin-block-start: 2%;
    height: auto;
}
    #services div {
        width: 95%;
        transition: .5s;
        margin: 0 auto;
        margin-bottom: 3%;
        border-radius: none;
        color: rgb(78, 78, 78);
        padding: 8% 0;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.076);
    }
    #services i {
        font-size: 500%;padding: 3% 0;
    }
    #services h1 {
        text-align: center;;
        font-size: 100%;color: var(--color);
        text-transform: uppercase;
    }
    #services section {
        width: 80%;
        height: 100%;
        font-size: 100%;
        text-align: center;
        line-height: 120%;
        margin: 0 auto;
    }

    #services div #absi {background: none}

    

.about
{
    position: relative;
    display: flex;margin-top: 2%;flex-direction: column;
    height: fit-content;padding: 15% 0;
}

.about div:first-child {display: none;}.cover {display: none;}

.about div:last-child
{
    width: 100%;margin: 0;padding: 0;
    height: fit-content;
}

.about div:last-child section
{
    width: 90%;font-size: 80%;padding: 0;margin: 0;text-align: center;
}

.about div:last-child section span {color: var(--color)}

.about div:last-child section h1
{
    font-size: 300%;padding: 2% 0;
    color: var(--themeColor);
}

.about div:last-child section aside
{
    display: flex;;
    height: fit-content;justify-content: center;
    align-items: center;padding: 2% 0;
}

.about aside p
{
    width: 30%;;background: rgb(10, 88, 119);color: white;
    display: grid;
    padding: 4% 8%;text-align: center;
    margin-inline: 0 2%;margin-block: 2%;
    border-radius: 10px;box-shadow: none;
}

.about p i
{
    font-size: 200%;
}

.about button
{
    width: 60%;margin: 2% auto;padding: 8% 0;box-shadow: 0 0 24px rgba(0, 0, 0, 0.137);
}
        
.terms {
    width: 100%;
    height: auto;
    display: block;
}
.values 
{
    width: 98%;
    height: auto;
    margin: 0 auto;
    margin-block: 5%;
}

.values p 
{
    width: 50%;
    margin: 0 auto;
} 

.values article
{
    width: 95%;
    margin:0 auto;
    font-size: 80%;
    line-height: 120%;;
    padding: 5% 0;
    text-align: justify;
}
.values article h1 
{
    text-align: center;
    padding: 2% 0;
}


#eiva 
{
    height: fit-content;padding: 2% 0;font-size: 80%;;
}

#eiva section:first-of-type
{
    width: 98%;height: fit-content;padding: 4% 2%;
}

#eiva section:first-of-type h1
{
    font-size: 300%;padding: 3% 0;
}

#eiva section:last-of-type
{
    width: 100%;height: auto;flex-direction: column;padding: 0;
}

#eiva section:last-of-type img
{
    width: 95%;margin: 1% 0;
}

#eiva button
{
    width: 40%;padding: 4% 0;;margin-block: 4%;background-color: white;color: var(--color);;
}

#eiva button:hover {border-radius: 30px;cursor: pointer;background-color: white;color: var(--color);
}

#se 
{
    opacity: 0.3;top: 40%;font-size: 500%;;
}


#process {
    width: 100%;
    height: 40vh;
    display: block;
    background-size: 100%;
    background-position: bottom;
}
#process section 
{
    width: 90%;
    padding: 2% 0;
    text-align: center;
    margin: 0 auto;;
}
#process section h1{
    font-size: 200%;
}

#process article {
    width: 100%;
    font-size: 90%;
    text-align: left;;
    line-height: 120%;
}
#process article:first-child
{
    font-weight: bolder;
    padding: 2% 0;
}
#process span, #process span::after, #process span::before
{
    font-size: 80%;
}
#consultancy {
    width: 100%;
    height: 400px;
    display: grid;
    place-items: center;
    background-size: cover;
}


#consultancy section 
{
    width: 100%;
    margin: 0 auto;
    padding: 5% 0;
    text-align: center;
}

#consultancy div h4{
    color: white;
    font-size: 200%;
    text-transform: capitalize;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 80%;
    padding: 3% 0;
}

#consultancy a 
{
    color: white;
    padding: 3% 15%;
    border-radius: 30px;
    border: .1vw solid rgba(230, 229, 229, 0.822);
    font-size: 100%;
    transition: .5s;
}

#consultancy div:last-child
{
    width: 100%;
    height: 50%;
    display: block;
}



#news {
    height: fit-content;flex-direction: column;
}

#news section
{
    display: block;
    width: 90%;
    height: inherit;
    padding: 4% 0;
    margin: 0;
}
#news img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 7/6;
}
#news article h1 
{
text-align: start;
width: 100%;
font-size: 100%;;
margin-block: 4%;
padding-inline-start: 2%;
text-transform: capitalize;
}

#news article{
    font-size: 80%;margin-block-end: 4%;
}

#news button
{
    width: 35%;padding: 4% 0;display: none
}

footer
{
    width: 100%;
    color: white;
    height: auto;
    background: rgb(16, 97, 129);;
}
footer li{transition: .5s}
footer li:hover 
{
    text-decoration: underline;
    cursor: pointer;
}
footer a {color: white;font-size: inherit;}
#layout-one
{
    width: 70%;
    height: auto;
    display: block;
}
footer h6
{
    color: white;
    font-size: 100%;
    font-weight: normal;
    padding-block: 2%;
    text-align: start;
}
footer section h1
{
    color: white;
    font-size: 100%;;
    padding-block: 5%;
}
#layout-one div 
{
    width: 70%;
    padding: 2% 0;
    height: inherit;
    margin: 0 auto;
    display: flex;
    background: inherit;
}
#layout-one div img
{
    width: 10%;
    margin-inline: 5%;
    object-fit: contain;
    object-position: center;
}
#layout-one ul{width: 80%;}
#layout-one ul li 
{
    list-style-type: none;
    font-size: 70%;
    padding-block: 1%;
    color: white;
}
#layout-one div:last-child a img 
{
    border-radius: none;
    background: none;
    margin-inline-end: 3%;
    transition: .5s;
    width: 8%;
}
#layout-one div:last-child a img:hover 
{
    filter: grayscale()
}

#layout-one div:last-child > i, #layout-one div:last-child > i
{
    font-size: 200%;
    margin-inline-end: 3%;
}
#layout-one div:last-child ul i
{
    font-size: 150%;
    margin-inline-end: 5%;
}

#layout-two 
{
    width: 100%;
    height: auto;
    display: block;
}
#layout-two div 
{
    width: 100%;
    height: auto;
    padding-block-start: 0%;
    display: flex;
    justify-content: center;
    margin-inline-end: .1%;
    background-color: rgb(5, 61, 83);
}
    #layout-two section 
    {
        width: 80%;
        margin: 0 auto;
        padding-block: 5%;
        border-bottom: .01px solid white;
    }
    
    #layout-two section article
    {
        text-align: justify;
        width: 100%;
        margin:0 auto;
        line-height: 120%;
        color: white;
        text-align: start;
        font-weight: normal;
        font-size: 80%;
    }
    #layout-two li 
    {
        list-style-type: none;
        color: white;
        font-size: 80%;
        line-height: 120%;
    }
    #layout-two div:nth-child(2), #layout-two div:nth-child(3)
    {
        width: 100%;
    }
    #layout-two div:nth-child(2) section, #layout-two div:nth-child(3) section
    {
        width: 80%;
        margin: 0 auto;
    }
    
    #layout-two div:last-child section{
        border-bottom: none;
    }

#layout-three 
{
    width: 100%;
    height: auto;
    display: block;
    background: rgb(5, 55, 75);
    padding: 2% 0;
}
#layout-three div{
    width: 100%;
    height: auto;
    display: block
}

/* Layout Three*/
#layout-three p 
{
    font-size: 80%;
    color: white;
    padding: 1% 0;
    text-align: center;
}
#layout-three ul 
{
    display: flex;
    align-items: center;
    justify-content: center;
}
#layout-three li 
{
    list-style-type: none;
    font-size: 70%;
    padding: 2% 0;
}
#layout-three li:nth-child(2):before, #layout-three li:nth-child(3):before 
{
    content: " | ";
    color: white;
}


#teams-intro
{
    width: 100%;height: 60vh;background-size: cover;display: flex;;padding-inline-start: 0;
}


#teams-intro section
{
    width: 95%;margin-inline-start: 0;margin: 0 auto;
}

#teams-intro h1
{
    font-size: 200%;padding: 2% 0;
}

#teams-intro article
{
    padding: 6% 0;border-bottom: 2px solid rgb(88, 0, 77);width: 90%;
}   

.grid
{
    flex-direction: column;flex-wrap: nowrap;width: 95%;height: fit-content;padding: 4% 0;
}

.grid section 
{
    width: 98%;;box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.103);margin: 1%;padding: 2%;;display: flex;align-items: center;transition: .5s;
}

.grid section:hover
{
    color: white;background-color: rgb(5, 61, 83);
}

.grid i 
{
    font-size: 120%;padding: 0 3%;;
}


.grid h1
{
    padding: 1% 0;;color: rgb(5, 61, 83);font-weight: 300;
}

.grid article span 
{
    font-size: 80%;
}

}