*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
    margin: 0;
    overflow-x: hidden;
}

/*---- COLOR PALETTE ----*/
:root {
    --color-primary: #0c7ea3;
    --color-primary-dark: #004c64;
    --color-primary-accent: #2296b0;
    --color-primary-light: #85dbee;
    --color-secondary: #6cb3db;
    --color-secondary-dark: #44a3d1;
    --color-secondary-accent: #3dc1e4;
    --color-secondary-light: #d5ecfb;
    --color-black: #000000;
    --color-grey-dark: #403f3f;
    --color-grey: #a8a8a8;
    --color-grey-light: #e6e6e6;
    --box-shadow: 0px 8px 16px 0px rgba(26, 26, 26, 0.2);
    --box-shadow-hover: 0px 10px 20px 0px rgba(12, 12, 12, 0.4);
    --color-accent: #e88c37;
    --color-accent-light: #eca868;
    --color-accent-dark: #d86728;
    --border-radius: 5px;
  }

/*---- TYPOGRAPY ----*/
html {
    /* 62.5% of 16px = 10px*/
    font-size: 62.5%;
}
  
body {
    font-family: Inter, Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 10rem;
}

h2 {
    font-size: 8rem;
}

h3 {
    font-size: 6rem;
    margin: 1rem 0 2rem 0;
    text-align: center;
    color: var(--color-primary-dark);
}
h4 {
    font-size: 1.8rem;
    margin: 1rem 0;
}
h5 {
    font-size: 1.3rem;
    margin: 1rem 0;
}
@media screen and (max-width: 900px) {
    h1 {
        font-size: 8rem;
    }
    
    h2 {
        font-size: 6rem;
    }
    
    h3 {
        font-size: 4rem;
    }
    h4 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.1rem;
    }
}



/*---- DECORATIONS ---- */
button {outline: none; border: none;}
button:focus { outline: none; }
button:hover {cursor: pointer;}
.border--left{
    border-left: 2px solid var(--color-primary);
    padding-left: 1rem;
}
.border--left-w{
    border-left: 2px solid #fff;
    padding-left: 1rem;
}
.border--round {
    border: 1px solid var(--color-primary-light);
    border-radius: var(--border-radius);
}
.border--round:hover{
    box-shadow: var(--box-shadow);
}
/* Scroll Snap */
.scroller {
    height: 100vh;
    /* overflow-y: scroll; */
    scroll-snap-type: y mandatory;
}
.scroller .s-section {
    scroll-snap-align: start;
}
.bg-img {
    background-image: url(images/landing.jpg);
    background-attachment: fixed;
    background-size: cover;
}
@media screen and (max-width: 900px) {
    .scroller{ scroll-snap-type: none;}
    .border--left{
        border-left: none;
        border-top: 2px solid var(--color-primary);
        margin: 0 3rem;
        padding-top: 1rem;
    }
    .border--left-w{
        border-left: none;
        border-top: 2px solid #fff;
        padding-top: 1rem;
    }
    
}




/*---- RESPONSIVENESS ----*/
.bg {
    position: relative; 
    height: 100vh;
    width: 100vw;
}
.bg-sml {
    position: relative; 
    height: 65vh;
    width: 100vw;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='600' preserveAspectRatio='none' viewBox='0 0 1440 600'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M27 600L627 0L840 0L240 600z' fill='url(%23SvgjsLinearGradient1019)'%3e%3c/path%3e%3cpath d='M546.2 600L1146.2 0L1764.2 0L1164.2 600z' fill='url(%23SvgjsLinearGradient1019)'%3e%3c/path%3e%3cpath d='M1393 600L793 0L583 0L1183 600z' fill='url(%23SvgjsLinearGradient1020)'%3e%3c/path%3e%3cpath d='M915.8 600L315.79999999999995 0L-185.20000000000005 0L414.79999999999995 600z' fill='url(%23SvgjsLinearGradient1020)'%3e%3c/path%3e%3cpath d='M1097.1654778582047 600L1440 257.16547785820467L1440 600z' fill='url(%23SvgjsLinearGradient1019)'%3e%3c/path%3e%3cpath d='M0 600L342.83452214179533 600L 0 257.16547785820467z' fill='url(%23SvgjsLinearGradient1020)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1440' height='600' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1019'%3e%3cstop stop-color='rgba(12%2c 126%2c 163%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(12%2c 126%2c 163%2c 1)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1020'%3e%3cstop stop-color='rgba(12%2c 126%2c 163%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(12%2c 126%2c 163%2c 1)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-ft {
    position: relative; 
    height: 35vh;
    width: 100vw;
}
.container {
    position: relative;
    display: block;
    max-width: 920px;
    margin: auto;
    padding: 8rem 0;
}
.top_btn {
    position: absolute;
    bottom: 50px;
    right: -150px;
    transform: rotate(270deg);
    background-color: var(--color-primary-light);
    width: 35px;
    height: 40px;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    text-decoration: none;
    z-index: 99;
}
.top_btn a {
    color: #fff;
    text-decoration: none;
}
.top_btn a::after {
    content: none;
}
.top_btn:hover {
    background-color: var(--color-primary);
}
.grid {
    display: grid;
}
.grid1x2{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid1x3{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid1x4{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid-fitflare{    
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
}

.mob--hide { display: inline-block; }
.mob--show { display: none; }

@media screen and (max-width: 890px) {
    /* .top_btn { right: 50px; } */
    .container { padding: 2rem 1rem; }
    .mob--hide { display: none; }
    .mob--show { display: inline-block; }
    .grid1x2{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .grid1x3{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .grid1x4{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .grid-fitflare{    
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .bg     { height: auto; }
    .bg-sml { height: auto; }
    .bg-ft  { height: auto; min-height: 100vh; }
}



/*---- LANDING ----*/
.landing {
    display: block;
    font-size: normal;
}
.lading--block {
    width: 40vw;
    height: 100vh;
    background-image: linear-gradient(to bottom right, #219ab5d8,#0e4e61aa);
    color: #fff;
    padding: 5rem 8rem 14rem 8rem;
    z-index: 3;
}
.landing h2 {
    margin: 1rem 0;
}
.landing a {
    font-size: 3rem;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1rem 0;
    transition: color 0.6s,;
    white-space: nowrap;
}
.landing a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}
.landing a::before {
    content: none;
}
.landing img {
    top: 0;
    z-index: 2;
    height: 100px;
    margin-left: -3rem;
}
@media screen and (max-width: 1100px) {
    .landing { 
        background-image: url(images/landingM.jpg); 
        font-size: smaller;
        height: 100vh;
    }
    .lading--block {
        width: 100vw;
        padding: 8rem 5rem;
    }
    .landing a {
        font-size: 2.3rem;
        padding: 1.5rem 0;
    }
    .landing a::before { content: "> "; }   
}




/*---- ABOUT US ----*/
.about-overlay{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(#ffffffc3,#ffffffc3);
}
.about-overlay h3 {
    text-align: right;
    color: var(--color-primary);
    margin-bottom: 2rem;
    padding-right: 2.5rem;
}
.about-overlay p {
    font-size: 1.8rem;
    margin: 0;
}
.cert {
    margin: 1rem;
    padding: 1rem;
}
.cert img {
    max-height: 250px;
    display: block;
    margin: 0 auto;
}
.cert p{
    font-size: 1.4rem;
    text-align: center;
    padding: 1rem;
}
@media screen and (max-width: 900px) {
    .about-overlay{ position: relative; }
    .about-overlay h3 { text-align: center; }
    .about-overlay p { margin: 0; }
    .cert img {max-height: 150px;}
    .cert { 
        margin: 0.5rem 4rem; 
        padding-bottom: 0;
    }
    .cert p {
        padding: 0;
        font-size: 1rem;
    }
}





/*---- PROCESS ----*/
.proc-block {
    position: relative;
    background-color: rgba(242, 242, 242, 0.933);
    border-radius: var(--border-radius);
    margin: 3rem 1.5rem 3rem 3rem;
    padding: 1.5rem 2rem;
    height: 300px;
    font-size: 1.1rem;
}
.proc-block:hover{box-shadow: var(--box-shadow);}
.proc-block h4 {z-index: 4;}
.proc-block ul {padding-left: 2rem;}
.proc-block li {padding: 0.2rem 0;}
.proc-block .number {
    position: absolute;
    font-size: 40px;
    font-weight: 600;
    top: -5%;
    left: -20%;
    background-color: #fff;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    text-align: center;
    color: var(--color-primary);
}
.proc-block h5 {
    color: var(--color-primary-accent);
}
@media screen and (max-width: 900px) {
    .proc-block {
        padding: 0.2rem 0.2rem 0.2rem 3.4rem;
        height: 240px;
        margin: 0.5rem 1.5rem 1rem 2.5rem;
        font-size: 1.5rem;
    }
    .proc-block .number {
        top: -10px;
        left: -20px;
    }
    .proc-block li {padding: 0;}
    .proc-block p {margin: 0;}
    .proc-block ul {margin: 0;}
}




/*---- OPTIONS ----*/
.opt img {
    height: 100px;
    display: block;
    margin: auto;
}
.opt h5 {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.8rem;
}
.opt p {
    font-size: 1.5rem;
    padding: 0 2rem;
}
.opt .border--left { height: 500px; }
@media screen and (max-width: 900px) {    
    .opt img { height: 60px; }  
    .opt p {
        font-size: 1.3rem;
        padding: 0 1rem;
        line-height: 1.3rem;
    }     
    .opt .border--left { height: 340px; }
}


/*---- PREVIOUS PROJECTS ----*/                   
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.m_phone { width: 400px; }
.m_normal { width: 960px; }
/* The Close Button */
.modal-close,
.modal-close2,
.modal-close3,
.modal-close4 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modal-close:hover,
.modal-close:focus,
.modal-close2:hover,
.modal-close2:focus,
.modal-close3:hover,
.modal-close3:focus,
.modal-close4:hover,
.modal-close4:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.mod-btn {
    width: 200px;
    height: 200px;
    margin: 1.5rem;
    display: block;
    border-radius: var(--border-radius);
    background-color: var(--color-primary-dark);
}
.vid-frm {
    border-radius: var(--border-radius);
    /* background-color: red; */
    background-image: linear-gradient(rgb(255, 50, 50),rgb(215, 12, 12));
    height: 180px;
    width: 180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 30px 50px;
    overflow: hidden;
}
.vid-frm img {
    background-color: #fff;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vid-frm p {
    color: #fff;
    width: 70%;
    padding: 0;
    margin: 0;
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
}
.vid-frm ._1 {
    display: inline-block;
    width: 15%;
    padding: 0;
    transform: rotate(90deg);
}
.desc {
    background-color: #fff;
    text-align: left;
    padding: 0.5rem;
    color: #858282;
}
.mod-btn:hover {
    border-radius: 7px;
}
.mod-btn:hover .vid-frm{
    width: 175px;
    height: 175px;
    border-radius: 8px;
    background-image: linear-gradient(rgb(255, 54, 54),rgb(255, 0, 0));
}
.mod-btn:hover  .vid-frm p {
    font-weight: 700;
}
@media screen and (max-width: 900px) {   
    .mod-btn {
        width: 240px;
        height: 150px;
        margin:  0.3rem auto;
    }   
    .vid-frm {
        height: 140px;
        width: 225px;
        grid-template-columns: 1fr;
        grid-template-rows: 80px 25px 35px;
    } 
    .mod-btn:hover .vid-frm{
        width: 220px;
        height: 135px;
    }
    .desc { padding: 0 0.1rem ; }
    .m_phone, .m_normal{ width: 300px; }
}




/*---- FOOTER ---- */
footer {
    background-color: var(--color-primary);
    color: #fff;
    padding: 2rem 15rem;
}
footer > div.grid {
    height: 25vh;
}
footer a {
    font-size: 1.5rem;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1rem 0;
}
footer a:hover {
    color: var(--color-secondary-accent);
}
footer .cc {
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding-top: 1rem;
}
.contact { padding-right: 5rem; }
.contact h4 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.5rem;
    font-weight: 500;
    font-size: 3rem;
    color: var(--color-primary-light);
    margin: 0;
}
.contact input,
.contact textarea {
    display: block;
    padding: 0.3rem;
    margin: 0.5rem 0;
    width: 100%;
    outline: none;
    border: 3px solid var(--color-primary-light);
    border-radius: var(--border-radius);
    background-color: var(--color-secondary-light);
}
.contact textarea{
    resize: none;
}
.contact button {
    padding: 5px 20px;
    background-color: var(--color-primary);
    border: 3px solid var(--color-primary-light);
    color: var(--color-primary-light);
    border-radius: var(--border-radius);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    margin-top: 5px;
}

.contact button:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);

}
.contact input::placeholder,
.contact textarea::placeholder  {
    color: var(--color-primary);
}

@media screen and (max-width: 900px) {   
    footer {padding: 0.5rem 1rem;}
    .cc {
        position: absolute;
        bottom: 0;
    }
    .contact { padding: 0 1rem; }
}