@media screen and (max-width: 950px) 
{
body {
    overflow-x: hidden;font-size: 90%;
}

.abs-close
    {
        color:red;background: rgb(255, 255, 255);width: 30px;height: 30px;display: grid;place-items: center;
        font-size: 100%;position: absolute;left: 0;top: 0;padding-block: 0;font-weight: bolder;
    }

.mobile-header-cont
{
    display: flex;width: 100%;height: 70px;background: var(--extremeDarkThemeColor);
}

.mobile-header-cont section
{
    display: flex;align-items: center;height: 100%;
}

.mobile-header-cont section:first-of-type
{
    width: 80%;
}
.mobile-header-cont section:last-of-type {width: 20%;}
.mobile-header-cont h1
{
    font-size: 120%;margin-inline-start: 0;color: white;
}

.mobile-header-cont figure
{
    width: 100%;height: 200px;background-image: url('../img/rigOnWater.jpg');background-position: center;
    background-repeat: no-repeat;background-size: cover;background-color: rgba(0, 0, 0, 0.349);background-blend-mode: soft-light;
}

.mobile-header-cont img
{
    width: 15%;margin-inline-start: 0;padding-block: 8%;padding-inline: 4% 2%;
}

.nav 
{
    width: 60%;height: 60%;
}

.nav section
{
    width: 100%;height: 90%;margin: 0 auto;
}

.nav article 
{
width: 75%;height: 15%;;background: white;
margin: 4% auto;border-radius: 10px;
}

.nav-list 
{
    position: fixed;width: 60%;height: 70vh;background: linear-gradient(to bottom, black 85%, var(--extremeDarkThemeColor) 15%);
    top: 0;;right: 0;box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.164);z-index: 10;display: none;
    transform: translateX(100%);animation-duration: .5s;animation-timing-function: linear;animation-fill-mode: both;
}

.mobile-header-cont section li 
{
    width: 100%;height: 15%;display: flex;align-items: center;padding: 0 8%;background: var(--extremeDarkThemeColor);
    border-bottom: 1px solid rgba(255, 255, 255, 0.418);list-style-type: none;transition: .5s;color: white;
    animation-duration: .5s;animation-iteration-count: 1;animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    animation-fill-mode: both;transform: translateX(100%);
}

.mobile-header-cont section li:hover { color: var(--secondaryThemeColor); background: black; }

.mobile-header-cont section li:first-of-type { animation-delay: .2s }
.mobile-header-cont section li:nth-of-type(2) { animation-delay: .3s }
.mobile-header-cont section li:nth-of-type(3) { animation-delay: .4s }
.mobile-header-cont section li:nth-of-type(4) { animation-delay: .5s }
.mobile-header-cont section li:last-of-type { animation-delay: .7s }

@keyframes enter {
   0% {
    transform: translateX(100%);
   }
   100% {
    transform: translateX(0%)
   }
}



@keyframes exit {
    0% {
        transform: translateX(0%);
       }
       100% {
        transform: translateX(100%)
       }
}

@keyframes enter2 {
    0% {
     transform: translateX(300%);
    }
    100% {
     transform: translateX(0%)
    }
 }



 @keyframes exit2 {
     0% {
         transform: translateX(0%);
        }
        100% {
         transform: translateX(300%)
        }
 }
#nav-list-item:nth-of-type(2) 
{
    position: relate;box-shadow: none;overflow: visible;
}

#nav-list-item:nth-of-type(2) ul 
{
    position: absolute;height: fit-content;z-index: 10;width: 60%;padding: 0;
    background: var(--extremeDarkThemeColor);color: white;top: 0;left: -63%;
    animation-duration: .5s;animation-iteration-count: 1;animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    animation-fill-mode: both;transform: translateX(300%);animation-delay: .2s;
}

#nav-list-item:nth-of-type(2) span {font-size: 100%;content: " "; }

#nav-list-item:nth-of-type(2) ul li
{
    font-size: 100%;height: 60px;list-style-type: none;
    overflow: visible;
}

.ol-list
{
    animation-duration: .5s;animation-iteration-count: 1;animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    animation-fill-mode: both;transform: translateX(300%);animation-delay: .2s;
}

#nav-list-item:nth-of-type(2)::after
{
    content: " ";width: 20px;height: 20px;background: rgb(15, 15, 15);
    transform: translateX(-480%) rotate(45deg);background: inherit;visibility: hidden;
}

#nav-list-item:nth-of-type(2):hover::after {visibility: visible;}


header
{
    display: none;
}

#intro 
{
    height: 85vh;background: rgba(47, 6, 56, 0.459);
    background-size: cover;background-image: url('../img/assetFirstSectionImage.jpg');
    flex-direction: column;justify-content: center;
}

#intro section
{
    width: 95%;margin-inline-start: 0;padding: 2% 4%;font-size: 80%;
}

#intro span
{
    color: rgb(250, 230, 255);
}

#intro h2
{
    font-size: 200%;width: 90%;line-height:120%;padding: 3% 0;;
}

#intro button 
{
    width: 50%;height: 50px;border-radius: 30px;
}

.apm 
{
    height: fit-content;flex-direction: column;padding-block: 0 4%;
}

.apm section
{
    flex-direction: column;width: 100%;margin: 0 auto;box-shadow: none;
}

.apm article:first-of-type
{
    padding: 10%;width: 100%;
}


.apm h2 
{
    font-size: 150%;padding: 2%;
}

.apm article:first-of-type p
{
    height: 5fit-content;padding: 4% 2%;
}

.apm article:last-of-type
{
    padding: 4% 3%;
}
.apm input
{
    width: 100%;height: 60px;margin: 1% 0;padding: 0 4%;
}

.apm input:focus, .apm input:hover
{
    background-color: inherit;
}

.apm input[type="submit"]
{
    width: 100%;
}

#about-div 
{
    flex-direction: column;height: fit-content;background-image: none;padding: 4% 0;
}

#about-div div:first-of-type
{
    width: 90%;padding: 4% 2%;margin: 0 auto;margin-left: 0;
}

#about-div div:first-of-type h1
{
    font-size: 150%;line-height: 120%;padding-top: 2%;
}

#about-div div:first-of-type p:first-of-type
{
    width: 100%;font-size: 90%;
}

#about-div div:first-of-type article:first-of-type
{
    flex-direction: column;
}
#about-div div:first-of-type article:first-of-type aside{ display: none;}
#about-div div:first-of-type ul {width: 100%;margin: 3% 0;}
#about-div div:first-of-type li {padding: 1% 0;}
#about-div div:first-of-type #big {font-size: 180%;}
#about-div div:first-of-type li i {font-size: 80%;}
#about-div div:first-of-type em {font-size: 80%;}

#about-div div:first-of-type article:last-of-type
{
    width: 100%;flex-direction: column;
}
#about-div div:first-of-type article:last-of-type button
{
    width: 50%;border-radius: 30px;margin-block-end: 3%;height: 50px;
}
#about-div div:first-of-type article:last-of-type p {display: none;}

#about-div div:last-child
{
    width:95%;height: 400px;margin: 3% 0;;
}

#about-div div:last-child article
{
    width: 80%;height: 100px;padding: 2% 0;display: flex;
    bottom: -5%;line-height: 100%;right: -30%;text-align: center;
}
#about-div div:last-child article b
{
    font-size: 150%;font-weight: bolder;
}#about-div div:last-child article span {font-size: 70%;}

#partners
{
 width: 100%;height: fit-content;flex-direction: column;
 padding: 4%;
}

#partners section:first-of-type
{
 width: 100%;padding: 2% 0;
}
#partners section:first-of-type h4
{
 font-size: 150%;
}
#partners section:first-of-type article {width: 90%;}

#partners section:last-of-type
{
 width: 60%;flex-direction: column;
}

#partners section:last-of-type img 
{
 width: 100%;margin: 2%;;
}

#phx 
{
 width: 100%;height: fit-content;flex-direction: column;
 background: none;padding: 4% 0;
 }

#phx div:first-of-type {
 width: 90%;height: 95%;margin: 0 auto;margin-inline-end: 2%;
}

#phx div:first-of-type section figure 
{
    width: 100%;height: 400px;;box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.199);
}

#phx div:first-of-type section:last-of-type figure {margin-left: 0%;}
#phx div:first-of-type section article 
{
    width: 80%;
}
#phx div:first-of-type section article b 
{
    font-size: 200%;
}

#phx div:last-of-type 
{
    width: 90%;padding: 8% 0;
}

#phx div:last-of-type h1 {font-size: 150%;padding: 4% 0;}
#phx div:last-of-type p {color: grey;font-weight: bolder;padding: 2% 0;}
#phx div:last-of-type aside {flex-direction: column;}

#phx div:last-of-type aside i {
 font-size: 120%;margin: 3% 3% 3% 0;color: white;background-color: var(--secondaryThemeColor);
 box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.123);padding: 4%;border-radius: 50%;
}

#phx div:last-of-type ul {flex-direction: column;}
#phx div:last-of-type ul li {width: 95%;margin: 0 auto;padding: 1% 0;;}

#mini-services {
 height: fit-content;padding: 4%;;flex-direction: column;
}
#mini-services section:first-of-type {width: 95%;margin-inline-end: 0;}
#mini-services section:last-of-type {width: 95%;}
#mini-services h1 {font-size: 200%;padding: 2% 0;}
#mini-services button {
 width: 50%;height: 50px;border-radius: 30px;;margin: 4% 0;
}

#flex-layout {width: 100%;height: auto;flex-direction: column;}
#flex-layout section {width: 100%;height: fit-content;margin: 0 auto;}
#flex-layout figure {height: 400px;;}
#flex-layout h1 {font-size: 100%;}
#flex-layout article {height: fit-content;width: 80%;padding: 4% 2%;}
#flex-layout span i {font-size: 150%;}

#services {height: fit-content;padding: 10% 0;}
#services div:last-of-type {width: 100%;margin: 0 auto;height: fit-content;flex-direction: column;}
#services div:last-of-type section {width: 80%;;margin-inline-end: 0;padding: 4% 0;}
#services div:last-of-type section i {font-size: 200%;;}


#exp 
{
 height: fit-content;padding: 4% 0;
 background-size: cover;flex-direction: column;
}

#exp section:first-of-type
{
 width: 95%;padding: 6%;margin: 2% 0;
}

#exp section:last-of-type
{
 width: 95%;height: fit-content;
}

#exp section:first-of-type h1 {font-size: 200%;padding: 4% 0;}
#exp section:first-of-type article:first-of-type {width: 95%;}
#exp section:first-of-type article:last-of-type
{
 display: flex;align-items: center;;padding: 4% 0;justify-content: center;
}
#exp section:first-of-type article:last-of-type p {width: 30%;margin: 0 1%;}
#exp section:first-of-type article:last-of-type p i {font-size: 120%;padding: 3% 0;}#exp article:last-of-type p span {font-size: 80%;}
#exp em {font-size: 80%;}

#exp section:last-of-type article 
{
 width: 100%;height: 60%;transform: translate(0, 0);;
}

#diff {width: 100%;height: fit-content;padding: 4% 0;flex-direction: column;}
#diff section:first-of-type {width: 85%;height: fit-content;}
#diff section:last-of-type {width: 85%;height: fit-content;}
#diff section:first-of-type h1 {font-size: 200%;padding: 2% 0;}
#diff_p{width: 100%;padding: 4% 0;}#diff section:last-of-type article:first-of-type {width: 100%;height: 400px;}
#diff section:last-of-type {display: flex;;height: fit-content;}
#diff section:last-of-type article:last-of-type {display: none;}
#diff section:last-of-type article:first-of-type figure:first-of-type {display: block;width: 100%;height: 95%;;}

#teams-intro
{
    height: 60vh;background-size: 100%;
    flex-direction: column;padding-inline-start: 0%;background-position: bottom;
}

#teams-intro section
{
    padding: 6% 0;width: 80%;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 var(--themeColor);font-size: 100%;
}

.staffs-cont
{
    flex-direction: column;flex-wrap: wrap;padding: 4%;;
}

.staffs-cont section
{
    width: 95%;margin: 4% auto;
}

.staffs-cont figure
{
    height: 400px;
}

.staffs-cont article
{
    padding: 4% 0%;transition: .5s;background: var(--themeColor);color: white;padding: 8%;
}

.staffs-cont article p i
{
    padding: 2%;border-radius: 50%;transition: .5s;margin: 0 .5%;
}

.staffs-cont article p span 
{
    font-size: 90%;transition: .2s;color: white;padding: 2% 0;display: block;
}

.staffs-cont h1
{
    font-size: 150%;padding: 2% 0;
}

.staffs-cont section:nth-of-type(2) > figure
{
    background-image: url("../img/ayo\ .jpg");background-size: 90%;background-position: center;
}


footer {height: fit-content;padding: 0;padding-block: 7% 0;}
footer section {width: 85%;height: fit-content;margin: 0 auto;padding: 2% 0;}footer div:first-of-type {width: 100%;padding: 2% 0;display: block;}
footer hr {width: 30%;}footer section:nth-of-type(2), footer section:nth-of-type(3) {width: 80%;margin: 0 auto;}footer h1 {text-transform: uppercase;height: 10%;}
footer section:nth-of-type(2) hr, footer section:nth-of-type(3) hr {width: 30%;}footer article {height: 88%;padding-block-start: 8%;}
footer img {width: 18%;;padding-inline: 0 4%}footer section:first-of-type p {width: 95%;padding: 1% 0;}
footer ul {height: 80%;;}footer li i {color: var(--secondaryThemeColor)}footer section:last-of-type i {padding: 2%;font-size: 100%;color: var(--secondaryThemeColor)}
footer div:last-of-type {font-size: 60%;display: block;;text-align: center;;}
footer div:last-of-type p:first-of-type {width: 100%;}footer section:first-of-type span {font-size: 150%;}
}