/* -------------------------
+ Author : Marcus Briggs
+ © Marcus Briggs
------------------------- */

/* ================================= */
/* HOME :: HERO */

.sec-home-hero { padding: 0; height: calc(100vh - 0px); height: calc(calc(var(--vh, 1vh) * 100) - 0px); background-color:#111418; background-position: center; background-size: cover; z-index: 1; overflow: hidden; } 
.sec-home-hero:after { content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.9; background: linear-gradient(-47deg, #0073ab 0%, #0073ab 100%); }
.sec-home-hero .sec-wrap { height: 100%; max-width: 100%; }
.sec-home-hero .sec-content { height: 100%; align-items: flex-start; position: relative;  z-index: 3; }
.sec-home-hero .row { width:100%; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sec-home-hero .row .logo {  width:100%; margin: 0 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center;  }
.sec-home-hero .row .logo img { width:100%; max-width: 220px; }
.sec-home-hero .row h1.slug { margin: 20px 0 0 0; text-align: center; color:white; font-size: 2.6rem; font-weight: 700; line-height: 54px; }
.sec-home-hero .row h2.label { margin: 20px 0 0 0; text-align: center; color:white; font-size: 1rem; font-weight: 500; line-height: 26px; letter-spacing: 2px; }
.sec-home-hero .row .cta { width:100%; margin: 30px 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero .row .cta .btn-cta { width: 220px; margin: 30px 0 0 0; padding: 16px 24px; margin: 0 10px; border-radius: 10px; background: #006490; border: 2px solid white; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-home-hero .row .cta .btn-cta span { font-size: 0.8rem; color:white; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.sec-home-hero .row .mockups { width:100%; margin: 40px 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero .row .mockups img { width:100%; max-width: 800px; position:relative; z-index: 10;	-webkit-animation:bounce-hero 3s infinite; -moz-animation:bounce-hero 3s infinite; animation:bounce-hero 3s infinite;  }

@media (max-width: 748px) {
    .sec-home-hero .row .logo img { max-width: 180px; }
    .sec-home-hero .row h1.slug { font-size: 2.0rem; line-height: 40px; margin: 20px 0 0 0; }
    .sec-home-hero .row h2.label { font-size: 0.8rem; margin: 10px 0 0 0; }

    .sec-home-hero .row .cta { margin: 20px 0 0 0; }
    .sec-home-hero .row .cta .btn-cta { width: 160px; padding: 16px 5px; }
    .sec-home-hero .row .cta .btn-cta span { font-size: 0.7rem; }

    .sec-home-hero .row .mockups { margin: 30px 0 0 0; }

    .sec-home-hero .wave-one { background-size:50% 50px; }
    .sec-home-hero .wave-two { background-size:50% 60px; }
    .sec-home-hero .wave-three {  background-size:50% 50px; }

}

/* ================================= */
/* HOME :: HERO ALT */

.sec-home-hero-alt { display: none; padding: 0; height: calc(100vh - 0px); height: calc(calc(var(--vh, 1vh) * 100) - 0px); background-color:#111418; background-position: center; background-size: cover; z-index: 1; overflow: hidden; } 
.sec-home-hero-alt:after { content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.9; background: linear-gradient(-47deg, #0073ab 0%, #0073ab 100%); }
.sec-home-hero-alt .sec-wrap { height: 100%; max-width: 100%; }
.sec-home-hero-alt .sec-content { height: 100%; align-items: center; position: relative;  z-index: 3; }
.sec-home-hero-alt .row { width:100%; max-width: 1280px; padding: 0 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero-alt .row .left { width: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center;  }
.sec-home-hero-alt .row .right { flex:1;  display: flex; flex-direction: column; justify-content: center; align-items: center;  }

.sec-home-hero-alt .row .logo { width:100%; margin: 0 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero-alt .row .logo img { width:100%; max-width: 220px; }
.sec-home-hero-alt .row h1.slug { margin: 20px 0 0 0; text-align: center; color:white; font-size: 2.6rem; font-weight: 700; line-height: 54px; }
.sec-home-hero-alt .row h2.label { display:none; margin: 25px 0 0 0; text-align: center; color:white; font-size: 1rem; font-weight: 500; line-height: 26px; letter-spacing: 2px; }
.sec-home-hero-alt .row .cta { width:100%; margin: 30px 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero-alt .row .cta .btn-cta { width: 180px; margin: 30px 0 0 0; padding: 16px 24px; margin: 0 10px; border-radius: 10px; background: #006490; border: 2px solid white; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-home-hero-alt .row .cta .btn-cta span { font-size: 0.8rem; color:white; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.sec-home-hero-alt .row .mockups { width:100%; margin: 40px 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-hero-alt .row .mockups img { width:100%; max-width: 800px; position:relative; z-index: 10;	-webkit-animation:bounce-hero 3s infinite; -moz-animation:bounce-hero 3s infinite; animation:bounce-hero 3s infinite;  }

@media (max-width: 748px) {
    .sec-home-hero-alt .row .logo img { max-width: 150px; }
    .sec-home-hero-alt .row h1.slug { font-size: 2.0rem; line-height: 40px; margin: 20px 0 0 0; }
    .sec-home-hero-alt .row h2.label { font-size: 0.8rem; margin: 10px 0 0 0; }

    .sec-home-hero-alt .row .cta { margin: 20px 0 0 0; }
    .sec-home-hero-alt .row .cta .btn-cta { width: 160px; padding: 16px 5px; }
    .sec-home-hero-alt .row .cta .btn-cta span { font-size: 0.7rem; }

    .sec-home-hero-alt .row .mockups { margin: 30px 0 0 0; }

    .sec-home-hero-alt .wave-one { background-size:50% 50px; }
    .sec-home-hero-alt .wave-two { background-size:50% 60px; }
    .sec-home-hero-alt .wave-three {  background-size:50% 50px; }
}


/* ================================= */
/* HOME :: MODULES */

.sec-home-core-modules { background: white; padding: 60px 20px 80px 20px; }
.sec-home-core-modules .sec-wrap { max-width: 1280px; }

.sec-home-core-modules .row { width:100%; position: relative; }

.sec-home-core-modules .row-welcome { width:100%; margin: 0 0 100px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sec-home-core-modules .row-welcome h3 { font-size: 1.8rem; line-height: 30px; font-weight: 700; text-align: center; letter-spacing: -1px; }
.sec-home-core-modules .row-welcome h2 { font-size: 1rem; line-height: 28px;  margin: 10px 0 0 0; font-weight: 400; color: #535353; text-align: center; }

.sec-home-core-modules .row-module { margin: 0 0 120px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-core-modules .row-module.row-reverse { flex-direction: row-reverse; }

.sec-home-core-modules .row-module .left { flex:1; z-index: 1; position: relative; background: white; border-radius: 10px; padding: 26px 10px 10px 10px; /*border:20px solid white;*/ box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);  }
.sec-home-core-modules .row-module .left img { width:100%; border-radius: 10px; position: relative; }
.sec-home-core-modules .row-module .left::after { content: ''; position: absolute; display: block; width: 10px; height: 10px; background: #d0d0d0; box-shadow: 18px 0 #d0d0d0, 36px 0 #d0d0d0; left: 22px; top: 8px; border-radius: 50%; }

.sec-home-core-modules .row-module .right { width: 500px; padding: 0 0 0 100px; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sec-home-core-modules .row-module .right h3 { font-size: 2.6rem; font-weight: 700; line-height: 44px; letter-spacing: -2px; }
.sec-home-core-modules .row-module .right h4 { font-size: 1rem; font-weight: 500; margin: 16px 0 0 0; color: #6c6c6c; }
.sec-home-core-modules .row-module .right .features { width:100%; margin: 25px 0 0 0; }
.sec-home-core-modules .row-module .right .features ul { width:100%; }
.sec-home-core-modules .row-module .right .features ul li { width:100%; padding: 10px 18px; margin: 0 0 2px 0; font-size: 0.9rem; font-weight: 600; background: white; color:black; border-radius: 10px; cursor: pointer; position: relative; border-bottom: 2px solid #dbdbdb; }
.sec-home-core-modules .row-module .right .features ul li .title { width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.sec-home-core-modules .row-module .right .features ul li .body { width:100%; margin: 20px 0 0; padding: 0 0 6px 0; font-size: 0.9rem; font-weight: 500; color: grey; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.sec-home-core-modules .row-module .right .features ul li i { margin: 0 10px 0 0; color: #0073ab; font-size: 1.4rem; }
.sec-home-core-modules .row-module .right .features ul li::after { position: absolute; right:18px; top:11px; font-size: 1rem; content:"\f078"; font-family: "Font Awesome 6 Free"; color:#aaa; }
.sec-home-core-modules .row-module .right .features ul li:nth-child(even) i { /*color: #E31837;*/ }

.sec-home-core-modules .row-module.row-reverse h3 { text-align: right; }
.sec-home-core-modules .row-module.row-reverse h4 { text-align: right; }
.sec-home-core-modules .row-module.row-reverse .right { padding: 0 100px 0 0; align-items: flex-end; }


.sec-home-core-modules .shape-one { position: absolute; left: -200px; top: -54px; height: 489px; width: 489px; background-repeat: no-repeat; }


@media (max-width: 748px) {
    .sec-home-core-modules .row h3 { font-size: 1rem; line-height: 18px; }
    .sec-home-core-modules .row h2 { font-size: 0.7rem; line-height: 18px; margin: 5px 0 0 0; } 
}


/* ================================= */
/* HOME :: MODULES */

.sec-home-summary { background: #0073ab; padding: 60px 20px 80px 20px; }
.sec-home-summary .row { width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sec-home-summary h2 { font-size: 2rem; line-height: 60px; font-weight: 700; color: white; text-align: center; letter-spacing: -1px;  }
.sec-home-summary h3 { margin: 20px 0 0 0; font-size: 1rem; line-height: 24px; font-weight: 500; color: white; text-align: center; }
.sec-home-summary .cta { width:100%; margin: 30px 0 0 0; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.sec-home-summary .cta .btn-cta { width: 220px; margin: 30px 0 0 0; padding: 16px 24px; margin: 0 10px; border-radius: 10px; background: #006490; border: 2px solid white; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-home-summary .cta .btn-cta span { font-size: 0.8rem; color:white; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }

/* ===================================== */
/* GENERIC :: HERO */

.sec-generic-hero { margin: 0; padding: 70px 20px 70px 20px; background-color:#111418; background-position: center; background-size: cover; position: relative; }
.sec-generic-hero:after { background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 2; }
.sec-generic-hero .sec-content { z-index: 4; }
.sec-generic-hero a { color: #df3625; font-size: 1.0rem; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px dotted #4d4882; font-weight: 600; font-family: 'Outfit', Helvetica, sans-serif; text-transform: uppercase; }
.sec-generic-hero a i { margin: 0 5px 0 0; }
.sec-generic-hero h1 { width:100%; font-size: 2rem; color: white; text-align: center; line-height: 110%; }
.sec-generic-hero .btn-cta { margin: 30px 0 0 0; padding: 16px 24px; background: black;  display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-generic-hero .btn-cta span { font-size: 0.8rem; color:white; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; }

@media (max-width: 748px) {
    .sec-generic-hero { padding: 60px 20px 60px 20px; }
    .sec-generic-hero a { color: white; font-size: 0.8rem; }
    .sec-generic-hero h1 { font-size: 1rem; font-weight: 800; line-height: 20px; }
    .sec-generic-hero .btn-cta { height:50px; padding: 0 25px; } 
    .sec-generic-hero .btn-cta span { font-size: 0.8rem; letter-spacing: 2px; }
}

/* ===================================== */
/* GENERIC :: PAGE NOT FOUND */

.sec-generic-pagenotfound { padding: 140px 30px; height: 50vh; background: #111418; }
.sec-generic-pagenotfound h2 { color: white; font-size: 1.2rem; text-align: center; font-weight: 600; line-height: 150%; }
.sec-generic-pagenotfound a { display: inline-block; margin: 40px 0 0 0; padding: 16px 24px; background: white; border-radius: 30px; display: flex; justify-content: center; align-items: center; }
.sec-generic-pagenotfound a span { color: black; font-size: 0.8rem; margin: 0 0 1px 0; letter-spacing: 1px; font-weight: 700; }

@media (max-width: 748px) {
    .sec-generic-pagenotfound { padding: 50px 20px; }
    .sec-generic-pagenotfound h2 { font-size: 1rem; line-height: 20px; } 
    .sec-generic-pagenotfound a { padding: 14px 20px; }
    .sec-generic-pagenotfound a span { font-size: 0.8rem; line-height: 18px; }
}

/* ===================================== */
/* GENERIC :: PAGE GENERIC */

.sec-generic-general { padding: 80px 40px 80px 40px; background: white; }
.sec-generic-general .sec-wrap { max-width: 980px; }
.sec-generic-general .sec-content { align-items: flex-start; }
.sec-generic-general h2 { color:black; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; letter-spacing: 1px; line-height: 110%; }
.sec-generic-general h3 { color:black; margin: 0 0 20px 0; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; line-height: 110%; }
.sec-generic-general p { color:black; margin: 0 0 20px 0; font-size: 0.9rem; }
.sec-generic-general p a { color:black; font-size: 0.9rem; }
.sec-generic-general p span { color:black; font-size: 0.9rem; }
.sec-generic-general ul { color:black; margin: 0 0 20px 0; font-size: 0.9rem; }
.sec-generic-general ul li { color:black; margin: 0 0 10px 0; font-size: 0.9rem; }
.sec-generic-general ol { color:black; margin: 0 0 20px 0; font-size: 0.9rem; }
.sec-generic-general ol li { color:black; margin: 0 0 10px 0; font-size: 0.9rem; }


@media (max-width: 748px) {
    .sec-generic-general { padding: 30px 20px 20px 20px; }
    .sec-generic-general h2 { font-size: 1.4rem; }
    .sec-generic-general h3 { font-size: 1.2rem; }
    .sec-generic-general p { font-size: 0.8rem; } 
    .sec-generic-general ul li { font-size: 0.8rem; }
    .sec-generic-general ol li { font-size: 0.8rem; }
}



@keyframes bounce-hero {
    0% 		{top:0px;}
    50% 	{top:25px;}
    100% 	{top:0px;}
}

/* Wave effect */
.wave-effect {
    position:absolute;
	z-index:3;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    height:150px;
    overflow:hidden;
}

.waves-shape.shape-one {
    z-index:15;
    opacity:0.5;
}

.waves-shape.shape-two {
    z-index:10;
    opacity:0.75;
}

.waves-shape.shape-three {
    z-index:5;
}

.wave {
    position:absolute;
    left:0;
    width:200%;
    height:100%;
    background-repeat:repeat no-repeat;
    background-position:0 bottom;
    transform-origin:center bottom;
}

.waves-shape {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wave-one {
	background-image:url('../images/bg-wave/wave-1.png');
    background-size:50% 100px;
}

.wave-two {
	background-image:url('../images/bg-wave/wave-2.png');
    background-size:50% 120px;
}

.wave-anim .wave-two {
    -webkit-animation:move-wave 10s linear infinite;
	   -moz-animation:move-wave 10s linear infinite;
			animation:move-wave 10s linear infinite;
}

.wave-three {
	background-image:url('../images/bg-wave/wave-3.png');
    background-size:50% 100px;
}

.wave-anim .wave-three {
    -webkit-animation:move-wave 15s linear infinite;
	   -moz-animation:move-wave 15s linear infinite;
			animation:move-wave 15s linear infinite;
}

@keyframes move-wave {
    0% {
        transform:translateX(0) translateZ(0) scaleY(1);
    }
	
    50% {
        transform:translateX(-25%) translateZ(0) scaleY(0.55);
    }
	
    100% {
        transform:translateX(-50%) translateZ(0) scaleY(1);
    }
}