:root {
  --clr-primary: #1b488c;
  --clr-neutral: #f3fdff;
  --clr-accent: #91d2ec;
  --clr-sections: linear-gradient(to top right, rgb(27, 72, 140), rgb(60, 109, 183)30%);

  --font-family-primary: "Poppins", sans-serif;
  font-family: "Poppins", sans-serif;

  --font-family-body: var(--font-family-primary);
  --font-family-heading: var(--font-family-primary);

  --font-weight-regular: 400;
  --font-weight-demi-bold: 500;
  --font-weight-bold: 700;
  --edge-size-headers: 0.3em;
  --edge-size-articles: 5em;
}



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

/*body > .skiptranslate {
  display: none;
}*/

#google_translate_element {
padding-top: 15px;
max-width: 200px;
}

/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}

/* Remove default margin in favour of better control in authored CSS */
* {
  margin: 0;
  padding: 0;
  font: inherit;

}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

html,
body {
  height: 100%;
  background-color: var(--clr-neutral);
}

/* Set core body defaults */
body {
line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}

/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}


/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}

h2 {
font-size: 1.2rem;
}


/* -----------------------White Section Title------------------------- */

.whiteSection-title h2 {
position: relative;
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
padding: 10px 15px;
z-index: 3;
background-color: var(--clr-neutral);

}

.whiteSection-title p {
position: relative;
text-align: center;
font-weight: var(--font-weight-demi-bold);
color: var(--clr-primary);
padding: 0 0 20px 0;
z-index: 3;
font-size: 0.8rem;
background-color: var(--clr-neutral);

}

.whiteSection-title {
margin-top: 85px;
display: flex;
align-items: center;
justify-content: center;

}

.whiteSection-title .container {
/* margin-top: 85px; */
display: flex;
align-items: center;
justify-content: center;

}

.whiteSection-title .container {
position: relative;
min-width: fit-content;
z-index: 2;
background-color: var(--clr-neutral);
}


.whiteSection-title .container::after {
position: absolute;
content: '';
width: 80px;
height: 30px;
bottom: -8px;
left: -8px;
z-index: -1;
background-color: var(--clr-accent);
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, var(--edge-size-headers) 100%, 0 calc(100% - var(--edge-size-headers)));
}

.whiteSection-title .container::before {
position: absolute;
content: '';
width: 80px;
height: 30px;
top: -8px;
right: -8px;
z-index: -1;
background-color: var(--clr-primary);
clip-path: polygon(0 0, calc(100% - var(--edge-size-headers)) 0, 100% var(--edge-size-headers), 100% 100%, 85% 80%, 20% 60%);
}



/*--------------------------------Blue Section Title------------------------*/
.blueSection-title {
margin-top: 85px;
display: flex;
align-items: center;
justify-content: center;

}

.blueSection-title h2 {
position: relative;
font-weight: var(--font-weight-bold);
padding: 15px 25px;
z-index: 3;
background-image: linear-gradient(to top left, rgb(27, 72, 140), rgb(60, 109, 183)60%);
border-bottom-right-radius: 0.2em;
color: var(--clr-neutral);
text-transform: capitalize;

}

.blueSection-title .container {
position: relative;
z-index: 2;
min-width: fit-content;

}



.blueSection-title .container::after {
position: absolute;
content: '';
width: 80px;
height: 30px;
bottom: -6px;
left: -6px;
z-index: -1;
background-color: var(--clr-neutral);
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, 0.3em 100%, 0 calc(100% - 0.3em));
}

.blueSection-title .container::before {
position: absolute;
content: '';
width: 80px;
height: 30px;
top: -6px;
right: -6px;
z-index: -1;
background-color: var(--clr-accent);
clip-path: polygon(0 0, calc(100% - 0.3em) 0, 100% 0.3em, 100% 100%, 85% 80%, 20% 60%);
}




/* -----------------------header------------------------- */
.header {
background: var(--clr-neutral);
box-shadow: 0.5px 0.5px 4px rgba(60, 109, 183, 0.233);
position: fixed;
width: 100%;
height: 68px;
z-index: 4;
}

.navbar {
background-color: var(--clr-neutral);
height: 68px;
}

.navbar img {
max-width: 5em;
}

.header #logo {
padding-top: 10px;
margin-left: 20px;
float: left;
}



.header a {
color: var(--clr-primary);
font-weight: var(--font-weight-bold);
font-size: 1em;
}

.header ul {
margin: 0;
padding: 0;
list-style: none;
background-color: var(--clr-neutral);
position: relative;
z-index: 20;

}

.nav-item {
overflow: hidden;
}

.header ul a {
display: block;
padding: 5px 5px;
text-decoration: none;

}



#border-header:hover {
background-color: var(--clr-neutral);
cursor: default;
pointer-events: none;
}


.header .menu {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
background-color: var(--clr-neutral);



}

.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;

}

.header .menu-icon .nav-icon {
background: var(--clr-primary);
display: block;
height: 8px;
width: 50px;
position: relative;
transition: background .2s ease-out;
}

.header .menu-icon .nav-icon::before {
background: var(--clr-primary);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 15px;
}

.header .menu-icon .nav-icon::after {
background: var(--clr-primary);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -15px;
}

.header .menu-btn {
display: none;
}

.header .menu-btn:checked~.menu {
max-height: 500px;

}


.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon::before {
transform: rotate(-45deg);
top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
transform: rotate(45deg);
top: 0;
}

.header .menu-btn:checked~#overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

/*-----------------------------------------------Banner section----------------------------------------------------*/



/* Animation keyframes */
@keyframes playVideo {
  0%   { opacity: 0; z-index: 0; }
  1%   { opacity: 1; z-index: 1; }
  24%  { opacity: 1; z-index: 1; }
  25%  { opacity: 1; z-index: 1; }
  100% { opacity: 1; z-index: 1; }
}

.bg-video:nth-child(1) {
  animation: playVideo 15s infinite;
  animation-delay: 0s;
}

/* .bg-video:nth-child(2) {
  animation: playVideo 15s infinite;
  animation-delay: 5s;
}

.bg-video:nth-child(3) {
  animation: playVideo 15s infinite;
  animation-delay: 10s;
} */


.video-container {
  padding-top: 50px;
  position: relative;
  width: 100%;
  height: 32vh;
  border: 5px solid var(--clr-primary);
  overflow: hidden;
}
  
.bg-video {
  position: absolute;
  width: 100%;
  height: auto;
  object-fit: cover;
  top: 60px;
  opacity: 0;
  z-index: 0;
  transition: opacity 3s ease-out-in;
}

/* .video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); Adjust opacity (0.5 = 50% black tint) */
  /* z-index: 1;
} */

.slogan-wrapper {
  display: flex;
  position: relative;
  justify-content: space-between;
  top: 50px;
  z-index: 2;
}


.slogan {
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  color: var(--clr-neutral);
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.slogan span {
  color: var(--clr-accent);
}


.slogan img {
  width: 150px;
  max-width: none;
  padding: 1em 0;
} 

#left {
clip-path: polygon(0 0, calc(100% - 1em) 0%, 100% 1em, 100% 100%, 1em 100%, 0% calc(100% - 1em));

}

#right {
clip-path: polygon(1em 0, 100% 0, 100% calc(100% - 1em), calc(100% - 1em) 100%, 0 100%, 0 1em);

}

/*---------------------------------------Info--------------------------------------------*/
.info {
padding-top: 20px;
background-color: var(--clr-neutral);
}

.info-wrapper {
filter: drop-shadow(1px 1px 3px var(--clr-primary));
margin: auto;
}

.info-container {
margin: 1.5em 0.5em;
background-color: var(--clr-neutral);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
clip-path: polygon(1.5em 0, 100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 1.5em);
}


.text-container {
overflow: hidden;

}

.diagram-container {
display: flex;
align-items: center;
justify-content: center;
}

.info-container p {
padding: 20px;
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
}

.info-container span {
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
}

/* #diagram {
width: 100%;
padding: 0.3em;
} */

/*---------------------------------------How it works--------------------------------------------*/

.howItWorks {
padding-top: 20px;
background-image: var(--clr-sections);
padding-bottom: 20px;
}

.howItWorks-wrapper {
filter: drop-shadow(1px 1px 3px var(--clr-primary));
margin: auto;
}

.howItWorks-container {
margin: 1.5em 0.5em;
background-color: var(--clr-neutral);
/* padding: 1.5em; */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
clip-path: polygon(0 0, calc(100% - 1.5em) 0%, 100% 1.5em, 100% 100%, 1.5em 100%, 0% calc(100% - 1.5em));
}


.howItWorks-container {
overflow: hidden;

}

/* .howItWorks-subcontainer {
padding: 0.5em;
} */

.howItWorks-container p {
padding: 10px;
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
line-height: 1.2em;
}


/*---------------------------------------Buisness--------------------------------------------*/
/* .business .whiteSection-title {
  padding: 85px 10px
} */

.business h2 {
  font-size: 1.0rem;
  
}

/*------------------------------FAQ-----------------------------*/


.accordion {
max-width: 1400px;
/* width: 80%; */
box-shadow: 0 0 10px var(--clr-primary);
border-radius: 5px;
overflow: hidden;
background: var(--clr-neutral);
margin: 0px auto;

}

.question,
.answer {
padding: 10px 30px;

}

.question {
display: block;
color: var(--clr-primary);
font-weight: var(--font-weight-bold);
cursor: pointer;
position: relative;
transition: background 0.1s;
box-shadow: 0 0 10px var(--clr-primary);
}

.question:hover {
background: rgba(0, 0, 0, 0.1);

}

.question::after {
content:"^";
position: absolute;
top: 50%;
/* transform: translateY(-50%); */
right: 20px;
height: 6;
width: 12px;
background-size: contain;
transition: transform 0.4s;
}

.answer {
background: var(--clr-neutral);
color: var(--clr-primary);
line-height: 1.6;
font-size: 0.85em;
display: none;
}

.accordion_input {
display:none;
}

.accordion_input:checked ~ .answer {
display: block;
}

.accordion_input:checked ~ .question::after {
transform: translateY(-50%) rotate(0.5turn);
}


/*------------------------Footer---------------------------------*/

.footer {
background: var(--clr-sections);
width: 100%;
margin: 0;
padding: 70px 0;
z-index: -2;
}

.footer ul,
.footer li {
list-style: none;
}

.footer .container {
width: 100%;
max-width: 1400px;
}

.footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

.footer-col {
width: 55%;
margin: 0.8em auto;
z-index: 0;

}

.footer-col h4 {
margin: auto;
padding: 0.3em 0.5em;
/* font-size: 1.2rem; */
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
background: var(--clr-sections);


}

.footer-col h4::before {
content: '';
position: absolute;
left: -4px;
bottom: -4px;
background-color: var(--clr-accent);
height: 25px;
width: 65px;
box-sizing: border-box;
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, 0.2em 100%, 0 calc(100% - 0.2em));
z-index: -1;
}

.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}

.footer-col ul li a {
font-size: 0.8rem;
text-transform: capitalize;
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
display: block;
transition: all 0.s ease;
text-decoration: none;
}

.footer-col span {
font-size: 0.8rem;
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
display: block;
}



.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background: var(--clr-primary);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: var(--clr-neutral);
transition: all 0.5s ease;

}



.footer-col img {
width: 60%;
}


/*----------------------------------------- 48em = 768px @ 16pt font ----------------------------------------- */

@media (min-width: 1280px) {

.goog-te-combo {
  width: 120px;
  height: 30px;
  font-size: 0.7rem !important
}

h2 {
  font-size: 3rem;
}

.header {
  height: 68px;
  background: var(--clr-neutral);
}

.header a {
  font-size: 1.3rem;
}

.header ul a {
  padding: 20px 10px 20px 10px;
}

.header li {
  float: left;
}

.header li:hover {
  border: 1px solid var(--clr-primary);
  border-radius: 5px;
  border-bottom: none;
}

.header .menu {
  height: 68px;
  display: block;
  clear: none;
  float: right;
  max-height: 68px;
}

.header .menu-icon {
  display: none;
}
.header #logo {
  margin-left: 60px;
  margin-top: 5px;
  width: 10%;
}
#border-header {
  width: 0px;
  height: 60px;
  padding: 5px;
  margin-top: 5px;
  border-left: 2px solid var(--clr-primary);
}

.navbar img {
  float: left;

}

/*----------------------------------------- Banner----------------------------------------- */

.banner {
  max-width: 1400px;
}

.video-container {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease-in-out;
}

/* Slogan wrapper */
.slogan-wrapper {
  /* position: absolute; */
  top: 75%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content:space-between;
  gap: 150px;
  z-index: 2;
  pointer-events: none;
  width: auto;
}

.slogan {
  margin: auto;
  color: var(--clr-neutral);
  text-align: center;
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.6);
  font-size: 1.5rem;
  font-weight: var(--font-weight-demi-bold);
}

.slogan img {
  width: 300px;
}


/*-----------------------------------------Info-----------------------------------------*/

.info-container {
  max-width: 1400px;
  margin: 3em auto;
  flex-direction: row;

}

/* .text-container {
  padding: 1em;
  margin: 50px 0.5em;

} */

.text-container a {
  color: var(--clr-primary);
}

.text-container p {
  font-size: 1.2rem;
}

.diagram-container {
  min-width: 20em;
  margin: 0.5em 0.5em;
}

.diagram-container img {
  width: 100%;
}

/*-----------------------------------------How it works-----------------------------------------*/


.howItWorks-container {
  max-width: 1400px;
  margin: 3em auto;
  flex-direction: row;

}

/* .text-container {
  padding: 1em;
  margin: 50px 0.5em;

} */

.howItWorks-subcontainer .text-container a {
  color: var(--clr-primary);
}

.howItworks-subcontainer p {
  font-size: 0.5rem;
}


/*------------------------------------Business-----------------------------------------*/
.business h2 {
  font-size: 3rem;
  
}

#txt p {
  line-height: 1.2em;
}






/*----------------------------FAQ---------------------------------*/

.accordion {
width: 100%;
}

.accordion .question {
font-size: 1.3rem;
}

.accordion .answer {
font-size: 1.2rem;
}



/*---------------------------------------Footer--------------------------------------------*/

.footer .container {
margin: auto;
}

.footer-col {
width: 20%;
margin: 0 2%;
padding: 0 15px;
}

.footer-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: baseline;

}

.footer-col ul li a:hover {
color: var(--clr-accent);
padding-left: 10px;
padding-bottom: 0;
}

.footer-col .social-links a:hover {
color: #24262b;
background-color: var(--clr-accent);
}

}






@media (max-width:21em) {
.header {
  display: none;
}
.text-container {
  font-size: 60%;
}
#slogan {
  font-size: 100%;
}
/*--------------------------------------Info--------------------------------------*/
.info h2 {
  font-size: 1.5rem;
}

.info-header .container::after {
  width: 40px;
  height: 15px;
  bottom: -6px;
  left: -6px;
}

.info-header .container::before {
  width: 40px;
  height: 15px;
  top: -5px;
  right: -5px;
}





/*----------------------------------Testimonials---------------------------------------*/


.section-header .container::after {
  width: 40px;
  height: 15px;
  bottom: -6px;
  left: -6px;
}

.section-header .container::before {
  width: 40px;
  height: 15px;
  top: -5px;
  right: -5px;
}

}



 /* Responsive video scaling */
 @media (max-aspect-ratio: 4/3) {
  .video-container {
    width: 100%;
    height: 30vh;
  }
  
  .bg-video {
    width: 100%;
    height: auto;
  }
}

/* @media (min-aspect-ratio: 4/3) {
  .video-container {
    width: 100%;
    height: auto;
  }
  .bg-video {
    width: auto;
    height: 100%;
  }
} */