/* -------------------------->>> <<<--------------------------*/
/* ---->>> STRUCTURE <<<----*/
/* -------------------------->>> <<<--------------------------*/


body  {
width:100%;
max-width:100%;
margin:0;
overflow-x:hidden;
text-align: center;
background-color:#000e1d;
}
@media (max-width:1200px) {body {text-align:center; width:100%;}
}
@media (max-width:600px) {body {text-align:center; width:100%;}
}

/* ---->>> <<<----*/

div.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top:0px;
z-index: 100001 !important;
}

.km-desktop-nav .mobilehide {
display: inline;
}
@media (max-width:901px) {.mobilehide {display:none;}
}

.mobileshow {
display: none;
}
@media (max-width:900px) {.mobileshow {display:inline;}
}

/* ---->>> <<<----*/

.main-content-black {
width:100%;
text-align:center;
margin: 0 auto;
padding-top:0px;
background-color:#000e1d;
}
@media (max-width:1400px) {
.main-content-black {margin:0 auto; width:100%;}
}
@media (max-width:900px) {
.main-content-black {margin:0 auto; width:100%;}
}

.main-content-black-inner {
width:100%;
max-width:1280px;
min-height:250px;
text-align:center;
margin: 0 auto;
padding-top:0px;
}
@media (max-width:1400px) {
.main-content-black-inner {margin:0 auto; width:96%;}
}
@media (max-width:900px) {
.main-content-black-inner {margin:0 auto; width:96%;}
}

.main-content-white {
width:100%;
text-align:center;
margin: 0 auto;
padding-top:0px;
background-color:#ffffff;
}
@media (max-width:1400px) {
.main-content-white {margin:0 auto; width:100%;}
}
@media (max-width:900px) {
.main-content-white{margin:0 auto; width:100%;}
}

.main-content-white-inner {
width:100%;
max-width:1280px;
min-height:250px;
text-align:center;
margin: 0 auto;
padding-top:0px;
}
@media (max-width:1400px) {
.main-content-white-inner {margin:0 auto; width:96%;}
}
@media (max-width:900px) {
.main-content-white-inner {margin:0 auto; width:96%;}
}

.main-content-gray {
width:100%;
min-width:1280px;
min-height:250px;
text-align:center;
margin: 0 auto;
background-color: #f0f4f7;
}

@media (max-width:1400px) {
.main-content-gray {margin:0 auto; width:100%; min-width:300px;}
}
@media (max-width:900px) {
.main-content-gray {margin:0 auto; width:100%; min-width:300px;}
}

.main-content-gray-inner {
width:100%;
max-width:1280px;
min-height:250px;
text-align:center;
margin: 0 auto;
padding-top:0px;
}
@media (max-width:1400px) {
.main-content-gray-inner {margin:0 auto; width:96%;}
}
@media (max-width:900px) {
.main-content-gray-inner {margin:0 auto; width:96%;}
}





.main-content-blue {
width:100%;
min-width:1280px;
min-height:250px;
text-align:center;
margin: 0 auto;
background: linear-gradient(to top, #627587da, #627587ac, #627587fc);
}

@media (max-width:1400px) {
.main-content-blue {margin:0 auto; width:100%; min-width:300px;}
}
@media (max-width:900px) {
.main-content-blue {margin:0 auto; width:100%; min-width:300px;}
}


/* ---->>> WRAPPERS <<<----*/

.wrapper {
width:100%;
max-width:1280px;
padding-top:10px;
text-align: center;
margin: 0 auto;
}
@media (max-width:1400px) {.wrapper {margin:0 auto; width:100%;}
}

.masterframe-footer {
width:100%;
min-width:1280px;
min-height:110px;
text-align: left;
margin: 0 auto;
padding-top:10px;
}
@media (max-width:1400px) {
.masterframe-footer {margin:0 auto; width:100%; min-width:300px; padding:0%;}
}
@media (max-width:900px) {
.masterframe-footer {margin:0 auto; width:100%; min-width:300px; padding:0%;}
}

.wrapper-footer {
width:100%;
max-width:1280px;
padding-top:20px;
text-align: center;
margin: 0 auto;
}
@media (max-width:1400px) {.wrapper-footer {width:100%; max-width:100%;}
}
@media (max-width:900px) {.wrapper-footer {width:100%; max-width:100%;}
}

/* ---->>> NAVIGATION FLEX <<<----*/

@media (min-width:901px) {

.km-nav-wrapper {
display:flex !important;
align-items:center;
justify-content:space-between;
width:100% !important;
max-width:1280px;
margin:0 auto;
text-align:left;
}
@media (max-width:1400px) {km-nav-wrapper  {width:96%; padding:0% 2%;}
}
@media (max-width:900px) {km-nav-wrapper  {width:96%; max-width:100%;}
}

.header-nav-left  {
float:none !important;
width:auto !important;
align-items:left;
align-content: left;
text-align:left;
flex:0 0 auto;
margin-top:10px;
}


.header-nav-right {
float:none !important;
width:auto !important;
align-items:right;
text-align: right;
justify-content:flex-end;
flex:1 1 auto;
min-width:0;
margin-top:-20px;
margin-right:0%;
}


.km-desktop-nav {
display:flex !important;
align-items:center;
justify-content:flex-end;
gap:3%;
white-space:nowrap;
}

.km-desktop-nav {
display:flex !important;
}

.mobileshow {
display:none !important;
}

}

@media (max-width:900px) {

.km-desktop-nav {
display:none !important;
}

.mobileshow {
display:block !important;
}

.km-nav-wrapper {
display:flex;
align-items:left;
justify-content:space-between;
width:96%;
padding:0% 2%;
text-align:left;
}

.mobileshow {
display:block !important;
text-align:right;
padding-right:10px;
}

}

/* ---->>> PAGE FLEX <<<----*/

/* Base two-column flex row */

.flex-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6%;
width: 100%;
box-sizing: border-box;
}

/* Make all columns behave cleanly */
.flex-row > div {
box-sizing: border-box;
min-width: 0;
}

/* 30 / 70 layout */
.flex-30-70 > .flex-left {
flex: 0 1 29%;
text-align:left;
}
.flex-30-70 > .flex-right {
flex: 0 1 65%;
text-align:right;
}

/* 40 / 60 layout */
.flex-40-60 > .flex-left {
flex: 0 1 38%;
text-align:left;
}
.flex-40-60 > .flex-right {
flex: 0 1 56%;
text-align:left;
}

/* 45 / 45 layout */
.flex-45-45 > .flex-left {
flex: 0 1 47%;
text-align: left;
}
.flex-45-45 > .flex-right {
flex: 0 1 47%;
text-align: left;
}


/* 55 / 45 layout */
.flex-55-45 > .flex-left {
flex: 0 1 53%;
text-align: left;
}
.flex-55-45 > .flex-right {
flex: 0 1 43%;
text-align: right;
}


/* 50 / 50 layout */
.flex-50-50 > .flex-left {
flex: 0 1 47%;
text-align:left;
}
.flex-50-50 > .flex-right {
flex: 0 1 47%;
text-align:center;
}

/* 60 / 40 layout */
.flex-60-40 > .flex-left {
flex: 0 1 56%;
text-align:left;
}
.flex-60-40 > .flex-right {
flex: 0 1 38%;
text-align:right;
}

/* 65 / 35 layout */
.flex-65-35 > .flex-left {
flex: 0 1 62%;
text-align:left;
min-width:0
}
.flex-65-35 > .flex-right {
flex: 0 1 32%;
text-align:center;
min-width:0
}

/* 670 / 30 layout */
.flex-70-30 > .flex-left {
flex: 0 1 66%;
text-align:left;
}
.flex-70-30 > .flex-right {
flex: 0 1 28%;
text-align:right;
}

/* 80 / 20 layout */
.flex-80-20 > .flex-left {
flex: 0 1 79%;
text-align:left;
}
.flex-80-20 > .flex-right {
flex: 0 1 15%;
text-align:right;
}

.box-row {
  display: flex;
  gap: 0;
}

.box-row > div {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .box-row {
    flex-direction: column;
  }

  .box-row > div {
    flex: none;
    width: 100%;
  }
}

.flex-25-25-25-25 {
    display: flex;
    width: 100%;
    gap: 0;
    box-sizing: border-box;
}

.flex-25-25-25-25 > div {
    flex: 0 0 25%;
    width: 25%;
    min-width: 0;
    box-sizing: border-box;
}


/* MOBILE */
@media (max-width: 900px) {

    .flex-25-25-25-25 {
        flex-direction: column;
    }

    .flex-25-25-25-25 > div {
        flex: none;
        width: 100%;
    }
}




















.smb-price-wrap {
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:1.6%;
    width:100%;
    flex-wrap:wrap;
}

.smb-pricebox {
    flex:0 1 31%;
    max-width:31%;
    padding:0;
    box-sizing:border-box;
    text-align:center;
}

.review-wrap {
    display:flex;
    justify-content:center;
    align-items:stretch;
    column-gap:1.5%;
    width:100%;
}

.reviewbox {
    flex:1 1 0;
    min-width:0;
    text-align:center;
}

.review-divider {
    flex:0 0 1px;
    width:1px;
    background:#A5ACAF56;
}


.flex-auto {
display:flex;
flex-wrap:wrap;
justify-content:left;
gap:60px;
}

.flex-auto > div {
flex:0 0 auto;
}


/* Mobile / smaller screens */
@media (max-width: 1400px) {
  .flex-row {
    flex-direction: column;
    gap: 0;
  }

  .flex-row > div {
    width: 96%;
    flex: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .flex-right {
    margin-top: 20px;
  }
}

@media (max-width: 900px) {
  .flex-row > div {
    width: 96%;
  }
}


/* ---->>> MOBILE ALIGN <<<----*/

/* Mobile / smaller screens */
@media (max-width:1400px) {

.flex-row {
flex-direction: column;
gap: 60px;
}

.flex-row > div {
width: 96%;
flex: none;
margin-left: auto;
margin-right: auto;
}

.flex-65-35 .flex-left,
.flex-65-35 .flex-right {
text-align: center;
}

.flex-60-40 .flex-left,
.flex-60-40 .flex-right {
text-align: center;
}

.flex-50-50 .flex-left,
.flex-50-50 .flex-right {
text-align: center;
}

.flex-45-45 .flex-left,
.flex-45-45 .flex-right {
text-align: center;
}

.flex-80-20 .flex-left,
.flex-80-20 .flex-right {
text-align: center;
}

.flex-auto {
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:center;
        gap:30px;
        width:100%;
    }

    .flex-auto > div {
        flex:none;
        width:100%;
        text-align:center;
    }

.flex-auto .text_3 > div {
margin-left:0 !important;
}

.photos-mobile-break {
display:block;
flex-basis:100%;
margin-top:40px;
}

.smb-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    overflow: visible;
}

.smb-pricebox {
    flex: none;
    width: 80%;
    max-width: 80%;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.smb-pricebox:hover,
.smb-pricebox:focus-within {
    z-index: 9999;
}

    .review-wrap {
        flex-direction:column;
        align-items:center;
        gap:30px;
    }

    .reviewbox {
        flex:none;
        width:96%;
    }

    .review-divider {
        display:none;
    }

.metric-row{
display:flex;
flex-wrap:wrap;
width:100%;
gap:0px;
}

.flex-row.flex-30-70{
gap:0px;
}

.flex-30-70 .flex-left,
.flex-30-70 .flex-right{
text-align:center;
gap:0px;
}

.flex-30-70 .metric-row{
gap:10px;
justify-content: center;
}

.flex-30-70 .score-bar{
width:70%;
}

.metric-pill {
text-align:center;
gap:10px;
}

}


.mobile-break{
display:none;
}












.wrapper-left-94 {
	width:94%;
	margin-top:20px;
	text-align: left;
	}
	@media (max-width:900px) {.wrapper-left-94 {margin:0 auto; width:96%; padding-left:2%; padding-right:2%;}
}

.wrapper-left-70 {
	width:70%;
	margin-top:20px;
	text-align: left;
	}
	@media (max-width:900px) {.wrapper-left-70 {margin:0 auto; width:96%; padding-left:2%; padding-right:2%;}
}

.wrapper-center-98 {
margin: 0 auto;
width:98%;
padding:1%;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-98 {width:96%; padding-left:2%; padding-right:2%;}
}

.wrapper-center-98-blue {
margin: 0 auto;
width:90%;
margin-top:20px;
padding:5%;
text-align: center;
background: url(../images/blue-background-1.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
background-color:#f0f4f7;
border:0px solid #f0f4f7;
border-radius:2px;
}
@media (max-width:1200px) {.wrapper-center-98-blue {width:92%; padding:2%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-98-gray {
margin: 0 auto;
width:90%;
margin-top:20px;
padding:5%;
text-align: center;
background: url(../images/gray-background-1.svg);
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
background-color:#f0f4f7;
border:0px solid #f0f4f7;
border-radius:2px;
}
@media (max-width:1200px) {.wrapper-center-98-gray {width:92%; padding:2%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-70 {
margin: 0 auto;
width:90%;
padding-top:30px;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-70 {width:96%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-70b {
margin: 0 auto;
width:66%;
padding-top:30px;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-70b {width:96%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-70-blue {
margin: 0 auto;
width:94%;
margin-top:30px;
padding:3%;
text-align: center;
background: linear-gradient(to bottom, #002244ef, #002244de, #002244cd), url(../images/home-header-small-business-owner.png) no-repeat; 
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
border:2px solid #ffffff;
border-radius:4px;
}
@media (max-width:900px) {.wrapper-center-70-blue {width:91%; padding:2%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-70-gray {
margin: 0 auto;
width:70%;
margin-top:30px;
padding:4%;
text-align: center;
background-color:#f0f4f7;
border:0px solid #f0f4f7;
border-radius:2px;
}
@media (max-width:900px) {.wrapper-center-70-gray {width:96%; padding-left:2%; padding-right:2%;}
}

.wrapper-center-90 {
margin: 0 auto;
width:90%;
padding-top:20px;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-90 {margin:0 auto; width:96%;}
}

.wrapper-center-50 {
margin: 0 auto;
width:80%;
padding-top:0px;
text-align: center;
}
@media (max-width:1400px) {.wrapper-center-50 {width:96%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-50-blue {
margin: 0 auto;
width:82%;
margin-top:30px;
padding:3%;
text-align: center;
background-color:#f0f4f7;
border:0px solid #f0f4f7;
border-radius:2px;
}
@media (max-width:900px) {.wrapper-center-50-blue {width:92%; padding:2%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-50b {
margin: 0 auto;
width:50%;
padding-top:120px;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-50b {width:96%; margin-left:2%; margin-right:2%;}
}

.wrapper-center-40 {
margin: 0 auto;
width:60%;
text-align: center;
}
@media (max-width:900px) {.wrapper-center-40 {width:96%; margin-left:2%; margin-right:2%; margin-top:0px;}
}

.reviewbox-1 {
float:left;
width:21.2%;
padding-right:2.25%;
border-right:1px solid #A5ACAF56;
text-align:center;
}
@media (max-width:1400px) {.reviewbox-1 {float:none; width:96%; padding-left:2%; padding-right:2%; border-right:none;}
}

.reviewbox-2 {
float:left;
width:21.2%;
padding-left:2.25%;
padding-right:2.25%;
border-right:1px solid #A5ACAF56;
text-align:center;
}
@media (max-width:1400px) {.reviewbox-2{float:none; width:96%; padding-left:2%; padding-right:2%; border-right:none;}
}

.reviewbox-3 {
float:left;
width:21.2%;
padding-left:2.25%;
text-align:center;
}
@media (max-width:1400px) {.reviewbox-3 {float:none; width:96%; padding-left:2%; padding-right:2%; border-right:none;}
}


.blog-box {
	float:left;
	width:23.3%;
	text-align:center;
	border:1px solid #b9cbd656;
	border-radius:4px;
	}
	@media (max-width:1400px) {.blog-box {float:none; margin:0 auto; width:96%; text-align:center;}
  }

.box-bullet-wrapper {
width:100%;
}
@media (max-width:1400px) {.box-bullet-wrapper {margin:0 auto; width:90%;}
}

.box-bullets {
margin-top:10px;
}
@media (max-width:1400px) {.box-bullets {margin-top:20px;}
}

/* ---->>> PAGE SECTIONS <<<----*/
/* -------------------------->>> <<<--------------------------*/

.top-nav-bar {
width:100%;
text-align:left;
margin: 0 auto;
height:86px;
background-color:#000e1d;
padding-top:10px;
padding-bottom:10px;
}


.home-header {
width:100%;
text-align:center;
margin: 0 auto;
padding-top:20px;
min-height:550px;
}
@media (max-width:1400px) {.home-header {width:100%; min-height: inherit;}
}
@media (max-width:900px) {.home-header {width:100%; min-height: inherit;}
}

.smb-header {
width:100%;
text-align:center;
margin: 0 auto;
padding-top:20px;
min-height:598px;
background: linear-gradient(to top, #002244da, #002244fc, #002244fc);
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
}
@media (max-width:1400px) {
.smb-header {width:100%; }
}
@media (max-width:900px) {
.smb-header {width:100%; }
}



/* ---->>> <<<----*/

.homepage-header-content-wrapper {
margin:0 auto;
width:94%;
border-radius:6px;
}
@media (max-width:1400px) {
.homepage-header-content-wrapper {margin:0 auto; width:98%;}
}
@media (max-width:900px) {
.homepage-header-content-wrapper {margin:0 auto; width:98%;}
}

.homepage-header-content {
margin:0 auto;
width:100%;
padding-top:20px;
background:linear-gradient(90deg,#000e1dbc, #000e1dab, #000e1dbc); 
}
@media (max-width:1400px) {
.homepage-header-content {margin:0 auto; width:98%;}
}
@media (max-width:900px) {
.homepage-header-content {margin:0 auto; width:98%;}
}



.header-content-right {
float:left;
width:33%;
margin-top:10px;
text-align:right;
}
@media (max-width:1200px) {
.header-content-right {float:none; width:96%; padding-right:2%; text-align:center;}
}
@media (max-width:600px) {
.header-content-right {float:none; width:96%; padding-right:2%; text-align:center;}
}

.page-header {
width:100%;
text-align:center;
margin: 0 auto;
padding-top:20px;
min-height:110px;
background: linear-gradient(to top, #002244da, #002244fc, #002244fc);
background-repeat:no-repeat;
background-size:cover;
background-position:bottom;
}
@media (max-width:1400px) {
.page-header {width:100%; }
}
@media (max-width:900px) {
.page-header {width:100%; }
}

.page-title {
margin-top:30px;
text-align:left;
}
@media (max-width:1400px) {
.page-title {text-align:center; margin-top:20px;}
}
@media (max-width:900px) {
.page-title {text-align:center; margin-top:20px;}
}

.page-left-60 {
float:left;
width:52%;
margin-right:8%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-60 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-left-60 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-right-40 {
float:left;
width:40%;
margin-top:0px;
text-align:right;
}
@media (max-width:1400px) {
.page-right-40 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-right-40 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-right-40-text {
float:left;
width:40%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-right-40-text {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-right-40-text {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-left-40 {
float:left;
width:40%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-40 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-left-40 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-right-60 {
float:left;
width:54%;
margin-left:6%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-right-60 {float:none; width:96%; text-align:center; margin-top:0px; margin-left:0%;}
}
@media (max-width:900px) {
.page-right-60 {float:none; width:96%; text-align:center; margin-top:0px; margin-left:0%;}
}

.page-left-70 {
float:left;
width:62%;
margin-right:8%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-70 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-left-70 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-right-30 {
float:left;
width:30%;
margin-top:0px;
text-align:right;
}
@media (max-width:1400px) {
.page-right-30 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-right-30 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-left-65 {
float:left;
width:61%;
margin-right:4%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-65 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:0px;}
}
@media (max-width:900px) {
.page-left-65 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:0px;}
}

.page-right-35 {
float:left;
width:31%;
margin-left:4%;
margin-top:0px;
text-align:right;
}
@media (max-width:1400px) {
.page-right-35 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:0px; margin-left:0%;}
}
@media (max-width:900px) {
.page-right-35 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:0px; margin-left:0%;}
}

.page-left-50 {
float:left;
width:48%;
margin-right:2%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-50 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}
@media (max-width:900px) {
.page-left-50 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-right:0%;}
}

.page-right-50 {
float:left;
width:48%;
margin-left:2%;
margin-top:0px;
text-align:right;
}
@media (max-width:1400px) {
.page-right-50 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-left:0%;}
}
@media (max-width:900px) {
.page-right-50 {float:none; width:96%; padding:0%; text-align:center; margin-top:0px; margin-left:0%;}
}

.page-left-55 {
float:left;
width:53%;
margin-right:2%;
margin-top:0px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-55 {float:none; width:96%; text-align:center; margin-top:60px;}
}
@media (max-width:900px) {
.page-left-55 {float:none; width:96%; text-align:center; margin-top:60px;}
}

.page-right-45 {
float:left;
width:43%;
margin-left:2%;
margin-top:0px;
text-align:right;
}
@media (max-width:1400px) {
.page-right-45 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:90px;}
}
@media (max-width:900px) {
.page-right-45 {float:none; width:96%; padding-left:2%; padding-right:2%; text-align:center; margin-top:90px;}
}

.page-right-55 {
float:left;
width:51%;
margin-left:4%;
margin-top:00px;
text-align:left;
}
@media (max-width:1400px) {
.page-right-55 {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center; margin-top:60px;}
}
@media (max-width:900px) {
.page-right-55 {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center; margin-top:60px;}
}

.page-left-45 {
float:left;
width:41%;
margin-right:4%;
margin-top:00px;
text-align:left;
}
@media (max-width:1400px) {
.page-left-45 {float:none; width:96%; padding-left:2%; padding-right:2%; margin-right:0%; text-align:center; margin-top:60px;}
}
@media (max-width:900px) {
.page-left-45 {float:none; width:96%; padding-left:2%; padding-right:2%; margin-right:0%; text-align:center; margin-top:60px;}
}

.page-left-45-even {
float:left;
width:43%;
padding:2.5%;
text-align:left;
margin-right:3.6;
background:linear-gradient(180deg,#62758712, #000e1d); 
border-radius:4px;

}
@media (max-width:1400px) {
.page-left-45-even {float:none; width:96%; padding-left:2%; padding-right:2%; margin-right:0%; text-align:left;}
}
@media (max-width:900px) {
.page-left-45-even {float:none; width:96%; padding-left:2%; padding-right:2%; margin-right:0%; text-align:left;}
}

.page-right-45-even {
float:left;
width:43%;
padding:2.5%;
text-align:left;
margin-left:3.6%;
background:linear-gradient(180deg,#62758712, #000e1d); 
border-radius:4px;
}
@media (max-width:1400px) {
.page-right-45-even {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:left;}
}
@media (max-width:900px) {
.page-right-45-even {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:left;}
}

.content-50-left {
float:left;
margin-top:20px;
width:46%;
text-align:left;
margin-right:4%;
}
@media (max-width:1400px) {
.content-50-left {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center;}
}
@media (max-width:900px) {
.content-50-left {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center;}
}

.content-50-right {
float:left;
margin-top:20px;
width:46%;
text-align:left;
margin-left:4%;
}
@media (max-width:1400px) {
.content-50-right {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center;}
}
@media (max-width:900px) {
.content-50-right {float:none; width:96%; padding-left:2%; padding-right:2%; margin-left:0%; text-align:center;}
}

.page-bullets-left-50 {
float:left;
width:46%;
margin-right:4%;
margin-top:20px;
text-align:left;
}
@media (max-width:1400px) {
.page-bullets-left-50 {float:none; width:96%; padding:2%; text-align:center; margin-top:0px;}
}
@media (max-width:900px) {
.page-bullets-left-50 {float:none; width:96%; padding:2%; text-align:center; margin-top:0px;}
}

.page-bullets-right-50 {
float:left;
width:46%;
margin-left:4%;
margin-top:20px;
text-align:left;
}
@media (max-width:1400px) {
.page-bullets-right-50 {float:none; width:96%; padding:2%; text-align:center; margin-top:0px; margin-left:0%;}
}
@media (max-width:900px) {
.page-bullets-right-50 {float:none; width:96%; padding:2%; text-align:center; margin-top:0px; margin-left:0%;}
}

.contact-page-form {
text-align:left;
margin-left:120px;
}
@media (max-width:1400px) {.contact-page-form {width:96%; padding-left:2%; padding-right:2%; margin-left:0px; text-align:center;}
}
@media (max-width:900px) {.contact-page-form {width:96%; padding-left:2%; padding-right:2%; margin-left:0px; text-align:center;}
}

.smb-pricebox {
float:left;
width:31%;
padding:0px;
}
@media (max-width:1400px) {.smb-pricebox{float:none; margin: 0 auto; width:80%; text-align:center;}
}
@media (max-width:900px) {.smb-pricebox {float:none; margin: 0 auto; width:80%; text-align:center;}
}

.team-pricebox {
float:left;
width:31%;
margin-left:3.5%;
min-height:370px; 
margin-top:0px; 
padding:0px;
}
@media (max-width:1400px) {.team-pricebox {float:none; margin: 0 auto; width:80%; margin-left:10%; text-align:center;}
}
@media (max-width:900px) {.team-pricebox {float:none; margin: 0 auto; width:80%; margin-left:10%; text-align:center;}
}

.corporate-pricebox {
float:left;
width:31%;
margin-left:3.5%;
min-height:370px; 
margin-top:0px; 
padding:0px;
}
@media (max-width:1400px) {.corporate-pricebox {float:none; margin: 0 auto; width:80%; margin-left:10%; text-align:center;}
}
@media (max-width:900px) {.corporate-pricebox {float:none; margin: 0 auto; width:80%; margin-left:10%; text-align:center;}
}

.countertext-2-left {
float:left;
width:44%;
padding-right:6%;
text-align:center;
}
@media (max-width:1400px) {.countertext-2-left {float:none; width:86%; padding-left:7%; padding-right:7%; text-align:center;}
}
@media (max-width:900px) {.countertext-2-left {float:none; width:86%; padding-left:7%; padding-right:7%; text-align:center;}
}

.countertext-2-right {
float:left;
width:44%;
padding-left:6%;
text-align:center;
}
@media (max-width:1400px) {.countertext-2-right {float:none; width:86%; padding-left:7%; padding-right:7%; text-align:center;}
}
@media (max-width:900px) {.countertext-2-right {float:none; width:86%; padding-left:7%; padding-right:7%; text-align:center;}
}

.countertext-3 {
float:left;
width:27%;
padding-left:3%;
padding-right:3%;
text-align:center;
}
@media (max-width:1400px) {.countertext-3 {float:none; width:80%; padding-left:10%; padding-right:10%; text-align:center;}
}
@media (max-width:900px) {.countertext-3 {float:none; width:80%; padding-left:10%; padding-right:10%; text-align:center;}
}

.float-25-left {
float:left;
width:25%;
padding:1%;
margin-right:4.1%;
border:1px solid #35464e;
border-radius:4px;
}
@media (max-width:1400px) {.float-25-left {float:none; width:80%; padding-left:10%; padding-right:10%; margin-right:0px; text-align:center;}
}
@media (max-width:900px) {.float-25-left {float:none; width:86%; width:80%; padding-left:10%; padding-right:10%; margin-right:0px; text-align:center;}
}

.float-25-center {
float:left;
width:25%;
padding:1%;
margin-right:5.1%;
margin-left:5.1%;
border:1px solid #35464e;
border-radius:4px;
}
@media (max-width:1400px) {.float-25-center {float:none; width:80%; padding-left:10%; padding-right:10%; margin-right:0px; margin-left:0px; text-align:center;}
}
@media (max-width:900px) {.float-25-center {float:none; width:80%; padding-left:10%; padding-right:10%; margin-right:0px; margin-left:0px; text-align:center;}
}

.float-25-right {
float:left;
width:25%;
padding:1%;
margin-left:4.1%;
border:1px solid #35464e;
border-radius:4px;
}
@media (max-width:1400px) {.float-25-right {float:none; width:80%; padding-left:10%; padding-right:10%; margin-left:0px; text-align:center;}
}
@media (max-width:900px) {.float-25-right {float:none; width:86%; width:80%; padding-left:10%; padding-right:10%; margin-left:0px; text-align:center;}
}

.content-59-left {
float:left;
width:59%;
margin-right:3%;
text-align:left;
}
@media (max-width:1400px) {
.content-59-left {float:none; width:96%; margin-left:2%; margin-right:2%; text-align:center;}
}
@media (max-width:900px) {
.content-59-left {float:none; width:96%; margin-left:2%; margin-right:2%; text-align:center;}
}

.content-35-right {
float:left;
width:35%;
margin-left:3%;
text-align:left;
}
@media (max-width:1400px) {
.content-35-right {float:none; width:96%; margin-left:2%; margin-right:2%; text-align:center;}
}
@media (max-width:900px) {
.content-35-right {float:none; width:96%; margin-left:2%; margin-right:2%; text-align:center;}
}

.mid-page-banner {
margin:0 auto;
width:90%;
background-color:#29353d;
border:1px solid #29353d;
border-radius:4px;
text-align:center;
}
@media (max-width:1400px) {
.mid-page-banner  {float:none; width:96%; margin-left:2%; margin-right:2%; margin-left:0%; text-align:center;}
}
@media (max-width:900px) {
.mid-page-banner  {float:none; width:96%; margin-left:2%; margin-right:2%; margin-left:0%; text-align:center;}
}

.banner-left-image{
float:left;
width:33%;
text-align:left;
}
@media (max-width:1400px) {
.banner-left-image  {float:none; width:100%; text-align:center;}
}
@media (max-width:900px) {
.banner-left-image  {float:none; width:100%; text-align:center;}
}

.banner-right-content {
float:left;
width:64%;
margin-left:3%;
text-align:left;
}
@media (max-width:1400px) {
.banner-right-content  {float:none; width:100%; padding:0%; margin-left:0%; text-align:center;}
}
@media (max-width:900px) {
.banner-right-content  {float:none; width:100%; padding:0%; margin-left:0%; text-align:center;}
}

.affiliate-form-iframe {
width:72%; 
height:720px; 
margin:0px; 
padding:0px; 
}
@media (max-width:1400px) {
.affiliate-form-iframe  {margin:0 auto; width:96%; padding-left:2%; text-align:center;}
}
@media (max-width:900px) {
.affiliate-form-iframe  {margin:0 auto; width:96%; padding-left:2%; text-align:center;}
}

.competitive-column-1 {
float:left;
width:40%;
text-align:left;
min-height:30px;
height:30px; 
padding:1%; 
border-right:1px dotted #627587; 
border-bottom:1px dotted #627587;
}
@media (max-width:1400px) {
	.competitive-column-1  {width:52%;}
}

.competitive-column-2 {
float:left;
width:19%;
text-align:center;
min-height:30px;
height:30px; 
padding:1%; 
border-right:1px dotted #627587; 
border-bottom:1px dotted #627587;
}
@media (max-width:1400px) {
.competitive-column-2  {width:20%;}
}

.competitive-column-3 {
float:left;
width:19%;
text-align:center;
min-height:30px;
height:30px; 
padding:1%; 
border-bottom:1px dotted #627587;
}
@media (max-width:1400px) {
.competitive-column-3  {width:20%;}
}


.price-compare-wrapper {
margin:0 auto;
text-align:left;
width:100%;
}
@media (max-width:1400px) {.price-compare-wrapper  {width:96%; text-align:center;}}

.price-compare-left {
float:left;
width:75%;
text-align:left;
}
@media (max-width:1400px) {.price-compare-left  {float:none; margin:0 auto; width:96%; text-align:center;}}


.price-compare-right {
float:left;
width:25%;
text-align:right;
}
@media (max-width:1400px) {.price-compare-right  {float:none; margin:0 auto; width:96%; text-align:center;}}

/* ---->>> ELEMENTS <<<----*/
/* -------------------------->>> <<<--------------------------*/

.tooltip {
position: relative;
display: inline-block;
color: #0092FF;
border-bottom: 0px dotted #1D94A3;
font-size:17px;
line-height:1.6;
cursor: pointer;
}

.tooltiptext {
top: 100%;
left: -23%;
visibility: hidden;
width: inherit;
min-width:240px;
background-color:#000000;
font-size:14px;
line-height:1.3;
font-weight:normal;
color: #ffffff;
text-align: left;
border:1px solid #b9cbd6;
border-radius: 4px;
padding: 10px;
position: absolute;
z-index: 10;
}

.tooltip:hover .tooltiptext {
visibility: visible;
cursor: pointer;
}

::placeholder {
font-family: "Oxygen", system-ui;
color: #ffffff;
font-size:18px;
font-weight:normal;
opacity: 1; /* Firefox */
}

select {
font-family: "Oxygen", system-ui;
color: #ffffff;
font-size:18px;
font-weight:normal;
}

select option {
font-family: "Oxygen", system-ui;
color: #ffffff;
font-size:18px;
font-weight:normal;
}

.formfield { 
display: none 
} 

.big20 {
font-size:120%;
line-height:1.5;
}

.big30 {
font-size:130%;
line-height:0.8;
}

.big50 {
font-size:150%;
}

.big200 {
font-size:300%;
}

.smaller {
font-size:80%;
}

.smaller2 {
font-size:40%;
}

#answer2, #answer3, #answer4, #answer5, #answer6 {
display: none;
}

.contact-form-iframe {
width:100%;
min-height:600px;
}
@media (max-width:1400px) {.contact-form-iframe {margin: 0 auto; width:50%; padding-left:25%; padding-right:25%; margin-left:0px; text-align:center;}
}
@media (max-width:900px) {.contact-form-iframe {margin: 0 auto; width:90%; padding-left:5%; padding-right:5%; margin-left:0px; text-align:center;}
}

.grey-box-60 {
margin:0 auto;
width:60%;
padding:1%;
background-color:#052635;
border-radius:4px;
text-align:center;
}
@media (max-width:1400px) {.grey-box-60 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}
@media (max-width:900px) {.grey-box-60 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}

.grey-box{
margin:0 auto;
width:96%;
padding:2%;
background:linear-gradient(360deg,#62758701, #62758701);
}
@media (max-width:1400px) {.grey-box {margin: 0 auto; width:96%; text-align:center;}
}
@media (max-width:900px) {.grey-box {margin: 0 auto; width:96%; text-align:center;}
}

.grey-box-80 {
margin:0 auto;
width:90%;
padding:3%; 
background-color: #f0f4f7;
border-radius:4px;
}
@media (max-width:1400px) {.grey-box-80 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}
@media (max-width:900px) {.grey-box-80 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}

.purple-box-80 {
margin:0 auto;
width:80%;
padding:4%;
background-color:#375364;
border-radius:4px;
}
@media (max-width:1400px) {.purple-box-80 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}
@media (max-width:900px) {.purple-box-80 {margin: 0 auto; width:90%; padding:3%; text-align:center;}
}

.grey-box-100 {
margin:0 auto;
width:92%;
padding:4%;
background-color:transparent;
border-radius:4px;
}
@media (max-width:1400px) {.grey-box-100 {margin: 0 auto; width:96%; text-align:center;}
}
@media (max-width:900px) {.grey-box-100 {margin: 0 auto; width:96%; text-align:center;}
}


.contact-info-box {
float:left;
width:65%;
text-align:left;
}
@media (max-width:1400px) {.contact-info-box {float:none; margin: 0 auto; width:96%; text-align:center;}
}
@media (max-width:900px) {.contact-info-box {float:none; margin: 0 auto; width:96%; text-align:center;}
}

.contact-address-box {
float:left;
width:25%;
margin-left:10%;
text-align:left;
}

@media (max-width:1400px) {.contact-address-box {float:none; margin: 0 auto; width:96%; text-align:center;}
}
@media (max-width:900px) {.contact-address-box {float:none; margin: 0 auto; width:96%; text-align:center;}
}

/* ---->>> COLORS <<<----*/
/* -------------------------->>> <<<--------------------------*/

.pink {
color:#1D94A3;
text-decoration:none; 
}

.black {
color:#000000;
text-decoration:none; 
}

.white {
color:#ffffff;
text-decoration:none; 
}

.nav-gray{
color:#cfd3d7;
text-decoration:none;
}

.gray {
color:#b9cbd6;
}

.light-gray {
color:#f0f4f7;
}

.blue {
color:#0092FF;
}

.blue2 {
color:#004eb6;
}

.green {
color: #69BE28;
}

li::marker {
color: #69BE28;
}


/* ---->>> IMAGES <<<----*/
/* -------------------------->>> <<<--------------------------*/

.video-2 {
border:2px solid #8D98A7; 
padding:1px; 
object-fit:cover; 
width:390px; 
height:390px;
}
@media (max-width:1300px) {
.video-2 {width:355px; height:300px;}
}
@media (max-width:600px) {
.video-2 {width:355px; height:300px;}
}

.thumbnail { 
top:-50px; 
left:-35px; 
display:block; 
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.2s; 
-webkit-transition-timing-function: ease; 
} 

/*change the number below to scale to the appropriate size*/ 
.thumbnail:hover { 
transform: scale(1.9); 
}

.thumbnail2 { 
top:-50px; 
left:-35px; 
display:block; 
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 0.2s; 
-webkit-transition-timing-function: ease; 
}

/*change the number below to scale to the appropriate size*/ 
.thumbnail2:hover { 
transform: scale(1.6); 
}

.header-image {
width:100%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1200px) {
.header-image {width:50%; margin-top:50px; vertical-align:bottom;}
}
@media (max-width:600px) {
.header-image {width:70%; margin-top:50px; vertical-align:bottom;}
}

.header-image-smb {
width:92%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1200px) {
.header-image-smb {width:50%; margin-top:50px; vertical-align:bottom;}
}
@media (max-width:600px) {
.header-image-smb {width:50%; margin-top:50px; vertical-align:bottom;}
}

.page-image-100 {
width:100%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image-100 {width:52%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:901px) {
.page-image-100 {width:52%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:900px) {
.page-image-100 {width:96%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image {
width:98%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image {width:52%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image {width:52%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image {width:96%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image-90 {
width:90%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image-90 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image-90 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image-90 {width:90%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image-80 {
	width:80%;
	margin-bottom:0px;
	vertical-align:bottom;
	}
	@media (max-width:1400px) {
	.page-image-80 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
	}
	@media (max-width:1200px) {
	.page-image-80 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
	}
	@media (max-width:600px) {
	.page-image-80 {width:90%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
	}

.page-image-70 {
width:70%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image-70 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image-70 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image-70 {width:90%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image-50 {
width:50%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image-50 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image-50 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image-50 {width:90%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image-40 {
width:30%;
margin-bottom:0px;
vertical-align:bottom;
}
@media (max-width:1400px) {
.page-image-40 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image-40 {width:50%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image-40 {width:70%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}

.page-image-smb {
width:100%;
border:2px solid #a9bcc5;
border-radius:6px;
}
@media (max-width:1400px) {
.page-image-smb {width:60%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:1200px) {
.page-image-smb {width:60%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}
@media (max-width:600px) {
.page-image-smb {width:80%; text-align:center; margin-top:0px; margin-bottom:0px; vertical-align:bottom;}
}


/* ------ FLEX STRUCTURE ------- */

.div-flexcontainer {
display: flex;
gap: 16px;
width: 100%;
}
@media (max-width:1300px) {
.div-flexcontainer {flex-direction: column; margin:0 auto; width:96%; text-align:center;}
}



/* -------------------------->>> <<<--------------------------*/
/* ---->>> TEXT <<<----*/
/* -------------------------->>> <<<--------------------------*/

p {
padding:0px;
margin:0px;
}

/* ---->>> <<<----*/

.underlined {
  position: relative;
  margin-right: 0rem;
}

.underlined:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  height: 7px;
  width: 100%;
  border: solid 4px #ffffff;
  border-color: #ffffff transparent transparent transparent;
  border-radius: 50%;
}

.underlined2 {
  position: relative;
  margin-right: 0rem;
}

.underlined2:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  height: 7px;
  width: 100%;
  border: solid 2px #627587;
  border-color:#627587 transparent transparent transparent;
  border-radius: 20%;
}

.underlined3 {
	position: relative;
	margin-right: 0rem;
  }
  
  .underlined3:after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 0;
	height: 5px;
	width: 100%;
	border: solid 2px #3c4a52;
	border-color:#3c4a52 transparent transparent transparent;
	border-radius: 20%;
  }


/* ---->>> <<<----*/

.header-title {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:60px;
font-weight:bold;
font-stretch:ultra-condensed;
line-height:1.2;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.header-title {font-size:43px; line-height:1.2; font-weight:bold;}
}
@media (max-width:600px) {
.header-title {font-size:43px; line-height:1.2; font-weight:bold;}
}

/* ---->>> <<<----*/

h1 {
font-family: "Cal Sans", sans-serif;
font-optical-sizing: auto;
font-size:58px;
font-weight:400;
color:#ffffff;
font-stretch:ultra-condensed;
line-height:1.2;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
h1 {font-size:50px; line-height:1.1; font-weight:bold;}
}
@media (max-width:600px) {
h1 {font-size:50px; line-height:1.1; font-weight:bold;}
}

/* ---->>> <<<----*/

h2 {
font-family: "Cal Sans", sans-serif;
font-optical-sizing: auto;
font-size:48px;
font-weight:400;
color:#ffffff;
line-height:1.2;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
h2 {font-size:40px; line-height:1.2; font-weight:bold;}
}
@media (max-width:600px) {
h2 {font-size:40px; line-height:1.2; font-weight:bold;}
}

h3 {
font-family: "Cal Sans", sans-serif;
font-optical-sizing: auto;
font-size:26px;
font-weight:400;
color:#ffffff;
font-stretch:ultra-condensed;
line-height:1.3;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
h3{font-size:24px; line-height:1.1;}
}
@media (max-width:600px) {
h3 {font-size:24px; line-height:1.1;}
}


h4 {
font-family: "Cal Sans", sans-serif;
font-optical-sizing: auto;
font-weight:200;
color:#ffffff;
font-size:20px;
font-stretch:ultra-condensed;
font-weight:normal;
line-height:1.4;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
h4{font-size:20px;}
}
@media (max-width:600px) {
h4 {font-size:20px;}
}


h5 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:23px;
font-weight:normal;
line-height:1.5;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
h5 {font-size:20px;}
}
@media (max-width:600px) {
h5 {font-size:18px;}
}

/* ---->>> <<<----*/

.splashprice {
font-family: "Cal Sans", sans-serif;
font-size:60px; 
color:#ffffff;
font-weight:strong;
margin:0px; 
padding:0px;
line-height:1.0;
}

/* ---->>> <<<----*/

.quote {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:17px;
font-stretch:ultra-condensed;
font-weight:normal;
line-height:1.4;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.quote{font-size:24px;}
}
@media (max-width:600px) {
.quote {font-size:24px;}
}

/* ---->>> <<<----*/

.numberrotation {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:80px;
font-stretch:ultra-condensed;
font-weight:normal;
line-height:1.3;
padding:0px;
margin:0px;
}
@media (max-width:750px) {.numberrotation {font-size:40px; text-shadow:none;}
}

.numberrotation2 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:60px;
font-stretch:ultra-condensed;
font-weight:normal;
line-height:1.3;
padding:0px;
margin:0px;
}
@media (max-width:750px) {.numberrotation2 {font-size:40px; text-shadow:none;}
}

/* ---->>> <<<----*/

.countertext {
font-family: "Cal Sans", sans-serif;
font-optical-sizing: auto;
font-size:56px;
font-weight:400;
color:#69BE28;
line-height:1.1;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.countertext {font-size:42px; line-height:1.2; font-weight:bold;}
}
@media (max-width:600px) {
.countertext {font-size:42px; line-height:1.2; font-weight:bold;}
}

/* ---->>> <<<----*/

.eyebrow {
font-family: "Oxygen", system-ui;
color:#b9cbd6;
font-size:15px;
font-weight:normal;
line-height:1.5;
padding:0px;
margin:0px;
opacity: 0.5; 
}
@media (max-width:1200px) {
.eyebrow {font-size:15px;}
}
@media (max-width:600px) {
.eyebrow {font-size:15px;}
}

.text_0 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:20px;
font-weight:strong;
line-height:1.6;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.text_0 {font-size:18px;}
}
@media (max-width:600px) {
.text_0 {font-size:18px;}
}

.text_0b {
font-family: "Oxygen", system-ui;
color:#000000;
font-size:20px;
font-weight:normal;
line-height:1.4;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.text_0b {font-size:20px;}
}
@media (max-width:600px) {
.text_0b {font-size:20px;}
}

.text_1 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:16px;
font-weight:normal;
line-height:1.5;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.text_1 {font-size:16px;}
}
@media (max-width:600px) {
.text_1 {font-size:16px;}
}

.text_1b {
font-family: "Oxygen", system-ui;
color:#000000;
font-size:16px;
font-weight:normal;
line-height:1.5;
padding:0px;
margin:0px;
}
@media (max-width:1200px) {
.text_1b {font-size:16px;}
}
@media (max-width:600px) {
.text_1b {font-size:16px;}
}


.text_2 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:15px;
font-weight:normal;
line-height:1.1;
padding:0px;
margin:0px;
}

@media screen and (max-width: 1536px) {text_2{font-size:18px;}
}
@media screen and (max-width: 768px) {text_2{font-size:18px;}
}
@media screen and (max-width: 750px) {text_2{font-size:18px;}
}

.text_3 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:14px;
font-weight:normal;
line-height:1.8;
padding:0px;
margin:0px;
}
@media screen and (max-width: 768px) {text_3{font-size:18px;}
}
@media screen and (max-width: 750px) {text_3{font-size:18px;}
}

.text_3b {
font-family: "Oxygen", system-ui;
color:#000000;
font-size:14px;
font-weight:normal;
line-height:1.8;
padding:0px;
margin:0px;
}
@media screen and (max-width: 768px) {text_3b{font-size:14px;}
}
@media screen and (max-width: 750px) {text_3b{font-size:14px;}
}

.text_4 {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:13px;
font-weight:normal;
line-height:1.8;
padding:0px;
margin:0px;
}
@media screen and (max-width: 768px) {text_4{font-size:13px;}
}
@media screen and (max-width: 750px) {text_4{font-size:13px;}
}

.text_4b {
font-family: "Oxygen", system-ui;
color:#000000;
font-size:12px;
font-weight:normal;
line-height:1.8;
padding:0px;
margin:0px;
}
@media screen and (max-width: 768px) {text_4b {font-size:12px;}
}
@media screen and (max-width: 750px) {text_4b {font-size:12px;}
}







/* -------------------------->>> <<<--------------------------*/
/* ---->>> NAVIGATION <<<----*/
/* -------------------------->>> <<<--------------------------*/

.dropbtn {
font-family: "Oxygen", system-ui;
color:#ffffff;
font-size:15px; 
font-weight:normal;
line-height:1.2;
text-decoration:none;
border: none;
}

.dropdown {
margin-top:0px;
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
margin-top:0px;
border:1px solid #A5ACAF45;
border-radius:4px;
position: absolute;
background-color: #000e1def;
padding:10px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 10000;
left:-0em;
right: auto;
text-align:left;
}
@media (max-width:1300px) {
.dropdown-content  {left:-16em; background-color: #000e1def;}
}


.dropdown-content a {
color:#ffffff;
font-family: "Oxygen", system-ui;
font-size:14px; 
font-weight:normal;
line-height:1.2;
text-decoration:none;
padding: 5px 4px 5px 4px;
text-decoration: none;
display: block;
border-bottom:0px solid #ffffff;
border-left:0px solid #ffffff;
}
.dropdown-content a:hover {background-image: linear-gradient(to right, #0092FF); color:#ffffff; text-decoration:none; border-left:4px solid #A5ACAF45; animation: mymove1 2s infinite;}
@keyframes mymove1 {
  90% {border-left-color: #627587;}
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {color:#627587; padding-bottom:4px; border-bottom:0px solid #a0acbd; border-radius:10%; animation: mymove 2s infinite;}
@keyframes mymove {
  90% {border-bottom: 0px solid #a0acbd;  border-radius:50%;}
}

.button1_nav {
font-family: "Oxygen", system-ui;
color:#ffffff; 
font-size:18px; 
font-weight:strong;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 40px;
background-color:#0092FF;
border:2px solid #0092FF;
border-radius:12px;
}
@media (max-width:1300px) {
.button1_nav {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
.button1_nav {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}

.button1_nav:hover {
font-family: "Oxygen", system-ui;
color:#ffffff; 
font-size:18px; 
font-weight:strong;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 40px;
background-color:#627587;
border:2px solid #627587;
border-radius:12px;
}
@media (max-width:1300px) {
.button1_nav:hover {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
.button1_nav:hover {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}

.button2_nav {
font-family: "Oxygen", system-ui;
color:#0092FF; 
font-size:18px; 
font-weight:strong;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 40px;
background-color:transparent;
border:2px solid #0092FF;
border-radius:12px;
}
@media (max-width:1300px) {
.button2_nav {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
.button2_nav {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}

.button2_nav:hover {
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:18px; 
font-weight:strong;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 40px;
background-color: transparent;
border:2px solid #627587;
border-radius:12px;
}
@media (max-width:1300px) {
.button2_nav:hover {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
.button2_nav:hover {font-size:18px; min-width:300px; padding:15px 15px 15px 15px;}
}


.button1_nav:disabled  {
font-family: "Oxygen", system-ui;
color:#ffffff; 
font-size:18px; 
font-weight:strong;
line-height:1.4;
align:left;
text-decoration:none;
padding:20px 50px 20px 50px;
background-color:#627587;
border:1px solid #627587;
border-radius:2px;
}

.question1, .question2, .question3, .question4, .question5, .question6 {
font-family: "Oxygen", system-ui;
color:#1D94A3; 
font-size:18px; 
font-weight:normal;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 20px 15px 20px;
background-color:#ffffff;
border:1px solid #1D94A3;
border-radius:2px;
}
@media (max-width:1300px) {
.question1, .question2, .question3, .question4, .question5, .question6 {font-size:50px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
.question1, .question2, .question3, .question4, .question5, .question6 {font-size:50px; min-width:300px; padding:15px 15px 15px 15px;}
}

.question1:hover, .question2:hover, .question3:hover, .question4:hover, .question5:hover, .question6:hover {
font-family: "Oxygen", system-ui;
color:#002D3B; 
font-size:18px; 
font-weight:normal;
line-height:1.4;
align:left;
text-decoration:none;
padding:15px 20px 15px 20px;
background-color:#ffffff;
border:1px solid #002D3B;
border-radius:2px;
}
@media (max-width:1300px) {
.question1:hover, .question2:hover, .question3:hover, .question4:hover, .question5:hover, .question6:hover {font-size:20px; padding:15px 30px 15px 30px;}
}
@media (max-width:600px) {
.question1:hover, .question2:hover, .question3:hover, .question4:hover, .question5:hover, .question6:hover {font-size:20px; padding:15px 30px 15px 30px;}
}

.signup_button {
font-family: "Oxygen", system-ui;
color:#ffffff; 
font-size:17px; 
font-weight:normal;
line-height:1.4;
align:left;
text-decoration:none;
padding:20px 20px 20px 20px;
background-color:#1D94A3;
border:1px solid #1D94A3;
border-radius:2px;
}
@media (max-width:1300px) {
signup_button {font-size:50px; min-width:300px; padding:15px 15px 15px 15px;}
}
@media (max-width:600px) {
signup_button {font-size:50px; min-width:300px; padding:15px 15px 15px 15px;}
}

.signup_button:hover {
font-family: "Oxygen", system-ui;
color:#ffffff; 
font-size:17px; 
font-weight:normal;
line-height:1.4;
align:left;
text-decoration:none;
padding:20px 20px 20px 20px;
background-color:#002D3B;
border:1px solid #002D3B;
border-radius:2px;
}
@media (max-width:1300px) {
signup_button:hover {font-size:20px; padding:15px 30px 15px 30px;}
}
@media (max-width:600px) {
signup_button:hover {font-size:20px; padding:15px 30px 15px 30px;}
}

.pagenav {
overflow: hidden;
font-family: "Oxygen", system-ui;
color:#0092FF;
font-size:17px; 
font-weight:normal;
line-height:1.6;
text-decoration:underline;
}
@media (max-width:1300px) {
pagenav {font-size:20px}
}
@media (max-width:600px) {
pagenav {font-size:20px;}
}

.pagenav:hover {
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:17px; 
font-weight:normal;
line-height:1.6;
text-decoration:underline; 
}

.pagenav2 {
overflow: hidden;
font-family: "Oxygen", system-ui;
color:#0092FF; 
font-size:16px; 
font-weight:normal;
line-height:1.6;
text-decoration:none;
}
@media (max-width:1300px) {
pagenav2 {font-size:16px}
}
@media (max-width:600px) {
pagenav2 {font-size:16px;}
}

.pagenav2:hover {
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:16px; 
font-weight:normal;
line-height:1.6;
text-decoration:none; 
}

.pagenav3 {
overflow: hidden;
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:18px; 
font-weight:normal;
line-height:1.6;
text-decoration:underline;
}
@media (max-width:1300px) {
pagenav3 {font-size:20px}
}
@media (max-width:600px) {
pagenav3 {font-size:20px;}
}

.pagenav3:hover {
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:18px; 
font-weight:normal;
line-height:1.6;
text-decoration:underline; 
}

.footernav {
overflow: hidden;
font-family: "Oxygen", system-ui;
color:#0092FF; 
font-size:15px; 
font-weight:normal;
line-height:1.8;
text-decoration:none;
}
@media (max-width:1300px) {
footernav {font-size:16px}
}
@media (max-width:600px) {
footernav {font-size:16px;}
}

.footernav:hover {
font-family: "Oxygen", system-ui;
color:#627587; 
font-size:15px; 
font-weight:normal;
line-height:1.8;
text-decoration:none; 
}


.blogposttitle {
    overflow: hidden;
    font-family: 'Questrial', sans-serif;
    color:#ffffff; 
    font-size:20px; 
    font-weight:normal;
    line-height:1.5;
    text-decoration:none;
    }
    @media (max-width:1300px) {
      blogposttitle {font-size:18px}
    }
    @media (max-width:600px) {
      blogposttitle{font-size:18px;}
    }
    
    .blogposttitle:hover {
    font-family: 'Questrial', sans-serif;
    color:#35464e; 
    font-size:20px; 
    font-weight:normal;
    line-height:1.5;
    text-decoration:none; 
    }

  .blogpostnav {
    overflow: hidden;
    font-family: 'Questrial', sans-serif;
    color:#d6e8f3; 
    font-size:17px; 
    font-weight:normal;
    line-height:1.5;
    text-decoration:none;
    }
    @media (max-width:1300px) {
      blogpostnav {font-size:18px}
    }
    @media (max-width:600px) {
      blogpostnav {font-size:18px;}
    }
    
    .blogpostnav:hover {
    font-family: 'Questrial', sans-serif;
    color:#35464e; 
    font-size:17px; 
    font-weight:normal;
    line-height:1.5;
    text-decoration:none; 
    }


/* -------------------------->>> <<<--------------------------*/
/* ---->>> WORD SLIDER <<<----*/
/* -------------------------->>> <<<--------------------------*/

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 14px;
}
.slidingVertical span{
	animation: topToBottom 12s linear infinite 0s;
	-ms-animation: topToBottom 12s linear infinite 0s;
	-webkit-animation: topToBottom 12s linear infinite 0s;
	color:#ec6320;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-40px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(20px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-40px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(20px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-40px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(20px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}


/*Vertical Sliding*/

.slidingVertical2{
display: inline;
text-indent: 0px;
line-height:1.3;
}
@media (max-width:1300px) {
.slidingVertical2 {text-align:center;}
}

.slidingVertical2 span{
animation: topToBottom 20s linear infinite 0s;
-ms-animation: topToBottom 20s linear infinite 0s;
-webkit-animation: topToBottom 20s linear infinite 0s;
color:#69BE28;
opacity: 0;
overflow: hidden;
position: absolute;
}

.slidingVertical2 span:nth-child(2){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVertical2 span:nth-child(3){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}
.slidingVertical2 span:nth-child(4){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}
.slidingVertical2 span:nth-child(5){
	animation-delay: 16s;
	-ms-animation-delay: 16s;
	-webkit-animation-delay: 16s;
}

/*Vertical Sliding*/
.slidingVertical3{
	display: inline;
	text-indent: 0px;
}

.slidingVertical3 span{
	animation: topToBottom 20s linear infinite 0s;
	-ms-animation: topToBottom 20s linear infinite 0s;
	-webkit-animation: topToBottom 20s linear infinite 0s;
	color:#69BE28;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical3 span:nth-child(2){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVertical3 span:nth-child(3){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}
.slidingVertical3 span:nth-child(4){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}
.slidingVertical3 span:nth-child(5){
	animation-delay: 16s;
	-ms-animation-delay: 16s;
	-webkit-animation-delay: 16s;
}



/*Vertical Sliding*/
.slidingVertical4{
	display: inline;
	text-indent: 0px;
}
.slidingVertical4 span{
	animation: topToBottom 10s linear infinite 0s;
	-ms-animation: topToBottom 10s linear infinite 0s;
	-webkit-animation: topToBottom 10s linear infinite 0s;
	color:#06479a;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical4 span:nth-child(2){
	animation-delay: 2s;
	-ms-animation-delay: 2s;
	-webkit-animation-delay: 2s;
}
.slidingVertical4 span:nth-child(3){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVertical4 span:nth-child(4){
	animation-delay: 6s;
	-ms-animation-delay: 6s;
	-webkit-animation-delay: 6s;
}
.slidingVertical4 span:nth-child(5){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}


/*Vertical Sliding*/
.slidingVertical5{
	display: inline;
	text-indent: 0px;
}
.slidingVertical5 span{
	animation: topToBottom 20s linear infinite 0s;
	-ms-animation: topToBottom 20s linear infinite 0s;
	-webkit-animation: topToBottom 20s linear infinite 0s;
	color:#06479a;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical5 span:nth-child(2){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVertical5 span:nth-child(3){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}
.slidingVertical5 span:nth-child(4){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}
.slidingVertical5 span:nth-child(5){
	animation-delay: 16s;
	-ms-animation-delay: 16s;
	-webkit-animation-delay: 16s;
}


/*Vertical Sliding*/
.slidingVertical6{
	display: inline;
	text-indent: 0px;
}
.slidingVertical6 span{
	animation: topToBottom 16s linear infinite 0s;
	-ms-animation: topToBottom 16s linear infinite 0s;
	-webkit-animation: topToBottom 16s linear infinite 0s;
	color:#06479a;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical6 span:nth-child(2){
	animation-delay: 3s;
	-ms-animation-delay: 3s;
	-webkit-animation-delay: 3s;
}
.slidingVertical6 span:nth-child(3){
	animation-delay: 6s;
	-ms-animation-delay: 6s;
	-webkit-animation-delay: 6s;
}
.slidingVertical6 span:nth-child(4){
	animation-delay: 9s;
	-ms-animation-delay: 9s;
	-webkit-animation-delay: 9s;
}
.slidingVertical6 span:nth-child(5){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay: 12s;
}

/*Vertical Sliding*/
.slidingVerticaldash{
	display: inline;
	text-indent: 0px;
}
.slidingVerticaldash span{
	animation: topToBottom 16s linear infinite 0s;
	-ms-animation: topToBottom 16s linear infinite 0s;
	-webkit-animation: topToBottom 16s linear infinite 0s;
	color:#ffffff;
	opacity: 0;
	position: absolute;
}
.slidingVerticaldash span:nth-child(2){
	animation-delay: 4s;
	-ms-animation-delay: 4s;
	-webkit-animation-delay: 4s;
}
.slidingVerticaldash span:nth-child(3){
	animation-delay: 8s;
	-ms-animation-delay: 8s;
	-webkit-animation-delay: 8s;
}
.slidingVerticaldash span:nth-child(4){
	animation-delay: 12s;
	-ms-animation-delay: 12s;
	-webkit-animation-delay:12s;
}



/* -------------------------->>> <<<--------------------------*/
/* ---->>> TABS SLIDERS MISC <<<----*/
/* -------------------------->>> <<<--------------------------*/

/* Style the tab */
.tab2 {
overflow: hidden;
background-color: transparent;
}

/* Style the buttons inside the tab */
.tab2 button {
float:center;
width:210px;
margin-right:10px;
margin-left:10px;
margin-top:10px;
outline: none;
cursor: pointer;
transition: 0.3s;
font-family: "Oxygen", system-ui;
color:#ffffff; 
background-color:#0092FF; 
font-size:18px; 
font-weight:normal;
line-height:1.4;
align:left;
text-decoration:none;
padding:10px 15px 10px 15px;
border:1px solid; 
border-image:linear-gradient(360deg, #A5ACAF45, #62758701) 1;

text-align:center;
}
@media (max-width: 1300px) {
.tab2 button {float:none;}
}
@media (max-width:600px) {
.tab2 button {float:none;}
}


/* Change background color of buttons on hover */
.tab2 button:hover {
background-color:#627587;
color:#ffffff; 
border:1px solid; border-image:linear-gradient(360deg, #A5ACAF45, #62758701) 1;
}

/* Create an active/current tablink class */
.tab2 button.active {
color:#8c9cab; 
border:1px solid; 
border-image:linear-gradient(360deg, #A5ACAF45, #62758701) 1;
font-family: "Oxygen", system-ui;
font-size:18px;
font-weight:normal;
line-height:1.4;
background-color: transparent;
}

/* Style the tab content */
.tab2content {
display: none;
}


/* -------------------------->>> <<<--------------------------*/
/* ---->>> ACCORDION <<<----*/
/* -------------------------->>> <<<--------------------------*/

.accordion {
font-family: "Oxygen", system-ui;
background-color: transparent;
color: #000000;
cursor: pointer;
padding: 1%;
width: 100%;
margin-top:20px;
border:none;
text-align:left;
outline:none;
font-size:17px;
font-weight:normal;
border-radius:0;
transition:background-color .3s ease;
border-bottom:1px solid #b9cbd6;
}
@media (max-width: 1300px) {
.accordion {font-size:17px;}
}

.accordion:hover,
.accordion.active {
background-color:transparent;
}

.panel {
display:none;
padding:1%;
text-align:left;
background-color:transparent;
overflow:hidden;
border-bottom:1px solid #b9cbd6;
}

/* Plus icon */
.accordion::after {
content:"+";
float:right;
font-size:20px;
font-weight:bold;
color:#0092FF;
transition:transform .3s ease;
transform-origin:center center;
}

/* Rotate to an X when open */
.accordion.active::after {
transform:rotate(45deg);
}


.float-in-top {
opacity: 0;
transform: translateY(80px); /* deeper float */
transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}

.float-in-top.visible {
opacity: 1;
transform: translateY(0);
}

.float-in-left {
opacity: 0;
transform: translateX(-40px); /* comes from the left */
transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
z-index:0;
position: relative
}

/* Final state: fully visible in position */
.float-in-left.visible {
opacity: 1;
transform: translateX(0);
z-index:0;
position: relative
}

.float-in-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
position: relative;
z-index: 1;
}

/* Final state: fully visible and in place */
.float-in-right.visible {
opacity: 1;
transform: translateX(0);
z-index:0;
position: relative
}

@media (max-width:900px) {
.float-in-left,
.float-in-right {
transform:translateY(30px);
}

.float-in-left.visible,
.float-in-right.visible {
transform:translateY(0);
}
}








/* -------------------------->>> <<<--------------------------*/
/* ---->>> IMAGE HOVER <<<----*/
/* -------------------------->>> <<<--------------------------*/

.image-hover {
    position: relative;
    display: inline-block;
}

.image-hover .zoom-image {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 85vw;
    max-height: 85vh;
    z-index: 9999;
    border: 2px solid #000e1def;
    box-shadow: 0 0 35px rgba(255,255,255,0.18);
    border-radius: 4px;
    background: #000e1def;
}

.image-hover:hover .zoom-image {
    display: block;
}

.image-hover::after {
    content: "";
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9998;
}

.image-hover:hover::after {
    display: block;
}




/* ---->>> AI REPORT REPLICA <<<----*/

.metric-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2%;
width: 100%;
box-sizing: border-box;
}

@media (max-width:1400px) {
.metric-row {gap: 1%;}
}

.score-bar {
width:123px;
height:25px;
background:#EEF8FF;
border-radius:3px;
overflow:hidden;
border:1px solid #d3d7da;
flex-shrink:0;
display: flex;
}

.score-bar2 {
width:80%;
height:25px;
background:#EEF8FF;
border-radius:3px;
overflow:hidden;
border:1px solid #d3d7da;
flex-shrink:0;
}

.score-bar-fill {
width: calc(var(--score) * 1%);
height: 100%;
background: var(--bar-color);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 2px;
box-sizing: border-box;
transition: width 0.8s ease;
}

.score-bar-number {
font-family: "Oxygen", system-ui;
color:#000000;
font-size:12px;
font-weight:normal;
white-space:nowrap;
}

.metric-pill {
padding-left:8px;
padding-right:8px;
height: 25px;
width:111px;
background: #EEF8FF;
border-radius: 3px;
overflow: hidden;
border: 1px solid #d3d7da;
flex-shrink: 0;
font-family: "Oxygen", system-ui;
color:#000000;
font-size:12px;
font-weight:normal;
display: flex;
align-items: center;
justify-content: center; /* this is the missing piece */
}

.metric-pill-colored {
padding-left:8px;
padding-right:8px;
padding-top:1.5px;
height: 25px;
border-radius: 3px;
width:108px;
border: 1px solid #d3d7da;
flex-shrink: 0;
font-family: "Oxygen", system-ui;
color:#000000;
font-size:12px;
font-weight:normal;
display: flex;
align-items: center;
justify-content: center; /* this is the missing piece */
}

.attribution-pill {
padding:8px;
width:120px;
background: #ffffff;
border-radius: 4px;
overflow: hidden;
border: 2px solid #b9cbd6;
flex-shrink: 0;
font-family: "Oxygen", system-ui;
color:#000000;
font-size:12px;
line-height:1.5;
text-align: center;
font-weight:normal;
display: flex;
align-items: center;
justify-content: center; /* this is the missing piece */
box-shadow: 0 10px 28px rgba(10, 32, 52, 0.18);
}
@media (max-width:1400px) {
.attribution-pill {width:100px;}
}

.attribution-arrows {
padding:8px;
width:120px;
border-radius: 3px;
overflow: hidden;
border: 0px solid #d3d7da;
flex-shrink: 0;
font-family: "Oxygen", system-ui;
display: flex;
align-items: center;
justify-content: center; /* this is the missing piece */
}




.ringing-phone {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: ring 1.2s ease-in-out infinite;
}

@keyframes ring {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(18deg); }
    10%  { transform: rotate(-16deg); }
    15%  { transform: rotate(18deg); }
    20%  { transform: rotate(-16deg); }
    25%  { transform: rotate(12deg); }
    30%  { transform: rotate(-12deg); }
    35%  { transform: rotate(6deg); }
    40%  { transform: rotate(-6deg); }
    45%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); } /* pause before next ring */
}



.typewriter {
    color: #000000;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    text-align: left;
    width: 0;
    display: inline-block;
}

/* The animation exists only after JavaScript adds .animate */
.typewriter.animate {
    animation-name: typing;
    animation-duration: 3.5s;
    animation-timing-function: steps(40, end);
    animation-fill-mode: forwards;
}

.typewriter-1.animate {
    animation-delay: 0s;
}

.typewriter-2.animate {
    animation-delay: 1s;
}

.typewriter-3.animate {
    animation-delay: 2s;
}

.typewriter-4.animate {
    animation-delay: 3s;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}






.call-routing-diagram {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* Keep the SVG contained inside the diagram */
.call-routing-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Keep all existing diagram content above the lines */
.call-routing-diagram > *:not(.call-routing-lines) {
    position: relative;
    z-index: 2;
}

.call-route {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;

    stroke-dasharray: 18 82;
    stroke-dashoffset: 100;
    opacity: 0;

    animation: route-call 2.5s ease-in-out infinite;
}

.route-1 {
    animation-delay: 0s;
}

.route-2 {
    animation-delay: 0.2s;
}

.route-3 {
    animation-delay: 0.4s;
}

.route-4 {
    animation-delay: 1.2s;
}

.route-5 {
    animation-delay: 1.4s;
}

.route-6 {
    animation-delay: 1.6s;
}

@keyframes route-call {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .call-routing-diagram {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .call-routing-lines {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-route {
        animation: none;
        opacity: 0.4;
        stroke-dasharray: 6 8;
        stroke-dashoffset: 0;
    }
}


.flow-arrow {
    display: inline-block;
    animation: flowArrow 1.2s ease-in-out infinite;
}

.arrow-flow {
    display: inline-block;
    animation: arrowFlow 1.6s linear infinite !important;
    will-change: transform, opacity;
}

@keyframes arrowFlow {
    0% {
        transform: translateY(-6px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(6px);
        opacity: 0;
    }
}



.transcript-card {
  box-sizing: border-box;
  position: relative;
  padding: 28px;
  background: #fff;
  border: 1px solid #b9cbd6;
  border-radius: 15px;
  box-shadow: 0 30px 75px rgba(24, 55, 75, .13);
  font-family: "Oxygen", system-ui, sans-serif;
  color: #0a2034;
}



.call-meta {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #edf1f4;
}

.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-right: 12px;
  border-radius: 50%;
  background: #002244;
  color: #fff;
  font-weight: 700;
}

.call-meta > div {
  display: flex;
  flex-direction: column;
}

.call-meta small {
  color: #8295a3;
}

.positive {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 20px;
  background: #eff8e8;
  color: #468b18;
  font-size: 10px;
  font-weight: 700;
}

.wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 80px;
  padding: 15px;
}

.wave i {
  width: 5px;
  height: 15px;
  border-radius: 5px;
  background: #7dcaff;
}

.wave i:nth-child(3n) { height: 40px; }
.wave i:nth-child(2n) { height: 27px; background: #0092ff; }
.wave i:nth-child(5n) { height: 52px; }

.ai-note {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-left: 3px solid #0092ff;
  border-radius: 4px;
  background: #f1f8fd;
}

.ai-note > span {
  color: #0092ff;
}

.ai-note small {
  color: #5083a6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.ai-note p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tags span {
  padding: 5px 10px;
  border: 1px solid #dbe5eb;
  border-radius: 18px;
  color: #687d8d;
  font-size: 9px;
}






.km-scorecard {
      width: min(100%, 570px);
      padding: 2%;
      border: 1px solid #b9cbd6;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 30px 75px rgba(24, 55, 75, .13);
      color: #0a2034;
    }
    .km-scorecard__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 15px;
      margin-bottom: 6px;
      border-bottom: 1px solid #edf1f4;
    }
    .km-scorecard__eyebrow { display: block; margin-bottom: 4px; color: #5083a6; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
    .km-scorecard__title { margin: 0; font-size: 19px; line-height: 1.2; }
    .km-scorecard__spark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eaf6ff; color: #0092ff; font-size: 19px; }
    .km-scorecard__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf1f4; }
    .km-scorecard__row:last-child { border-bottom: 0; padding-bottom: 0; }
    .km-scorecard__label { color: #627587; font-size: 12px; font-weight: 700; }
    .km-scorecard__value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
    .km-scorecard__bar { position: relative; width: min(100%, 185px); height: 27px; overflow: hidden; border-radius: 5px; background: #e9f0f3; }
    .km-scorecard__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--score); border-radius: inherit; background: linear-gradient(90deg, #a3d881, #69be28); }
    .km-scorecard__bar span { position: absolute; inset: 0 10px 0 auto; display: flex; align-items: center; color: #17380c; font-size: 11px; font-weight: 700; }
    .km-scorecard__tag { display: inline-block; padding: 6px 9px; border: 1px solid #dbe5eb; border-radius: 6px; background: #fff; color: #405b6e; font-size: 10px; line-height: 1.1; }
    .km-scorecard__tag--blue { border-color: #cae7fa; background: #f1f8fd; color: #006eaf; }
    .km-scorecard__tag--amber { border-color: #f1d594; background: #fff6df; color: #9a6500; font-weight: 700; }
    .km-scorecard__tag--green { border-color: #cce8bd; background: #eff8e8; color: #468b18; }
    .km-scorecard__tag--alert { border-color: #e8d0d0; background: #fff4f4; color: #a34b4b; }
    .km-scorecard__value strong { color: #002244; font-size: 12px; }
    @media (max-width: 300px) {
      
      .km-scorecard { padding: 20px; }
      .km-scorecard__row { grid-template-columns: 1fr; gap: 6px; }
      .km-scorecard__bar { width: min(100%, 230px); }
    }