:root{--header:#0F337C;
--footer:#00143D;
--lightText:#ffffff;
--btnPrimary:#006FFF;
--darkText:#000000;
--lightBlue1:#82B1F4;
--lightBlue2:#E9F4FF;
--lightBlue3:#5485CC;}

body{margin:0px;
    padding:0px;
    overflow-x:hidden;
}

p{font-family: "Lexend", sans-serif;
font-optical-sizing: auto;
font-style: normal;}

p .darkText{color:var(--darkText);}

p .lightText{color:var(--lightText);}

h2, h3, h4, h5, h6{font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;}
    
h1{font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:"wdth" 100;}

img{width:100%;
margin:0 auto;}

input, textarea, label, form{width:100%;
border-radius:20px;
color:var(--lightText);
padding:7px;}

input, textarea{border:2px solid #ffffff;
color:#000000;}

label{font-size:25px;
margin:10px 0px 10px 0px;}

textarea{height:200px;
resize:none;}

button, a{font-family: "outfit", sans-serif !important;
font-weight: 400;}
/* Elements */

.primaryBtn{width:250px;
height:60px;
background-color:var(--btnPrimary);
color:#ffffff;
border:1px solid #ffffff;
transition: 0.6s all ease;
font-size:30px;}

.primaryBtn:hover{filter:brightness(1.4);
    border:1px solid #ffffff;
    transition:ease 0.6s all;}


.errorBtn{width:250px;
height:60px;
background-color:var(--btnPrimary);
color:#ffffff;
border:1px solid #ffffff;
font-size:30px;
transition:ease 0.6s all;}

.errorBtn:hover{background-color:var(--btnPrimary);
color:#ffffff;
filter:brightness(1.4);}

.darkText{color:var(--darkText);}

.lightText{color:var(--lightText);}

.card{margin:50px auto 50px auto;}

.secondaryHeader{font-size:50px;
font-family: "Merriweather", serif;
font-weight: 400;
font-style: normal;}

.blackBorder{border:1px solid #000000;}

#message{height:200px;}

.carouselBtn{width:60px;
    height:60px;
    border-radius: 50%;
    background-color: #44444466;
    margin:auto;
}

.rounded{border-radius: 50% !important;}

/* End of Elements */

/*------------------------------------------ Navbar ------------------------------------------ */
nav, .navbar{width:100vw;
background-color:var(--header);
position:fixed;
z-index:100;
box-shadow: 0px 0px 10px #000000;}

.navContainer{width:100%;
height:80px;
display:flex;
flex-direction:row;
align-items: center;
justify-content: space-between;}

.navbarLogo{height:80px;
width:auto;}

#navbarItems{padding:30px;}

.navbar-nav{margin:auto;
margin-right:0px;}

/* Nav Links */
.nav-link{color:#ffffff;
text-decoration: none;
transition: 1s all ease;}
/* Nav Links */
.nav-link:hover{color:#ffffff;
text-decoration: underline;
text-shadow: 0px 0px 2px #ffffff;}
/*------------------------------------------ End of Navbar ------------------------------------------ */

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Index.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/*------------------------------------------ Hero Section ------------------------------------------ */

.heroSection{width:100vw;
height:800px;
background-image:url("../images/GenesisLHheroImg.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position-x:center;
display:flex;}

.gradientCover{width:100vw;
height:800px;
position:absolute;
background: rgb(80, 73, 66, 0.71);
background: linear-gradient(90deg, rgba(80, 73, 66, 0.71) 26%, rgba(255,255,255,0) 55%);}

.heroDescriptor{width:40%;
height:500px;
margin:auto;
margin-left:50px;
margin-bottom:80px;
z-index:1;
}

.heroDescriptor > p{font-size: 1.3rem;}

/*------------------------------------------ End of Hero Section ------------------------------------------ */

/*------------------------------------------ Plans Section ------------------------------------------ */

.planSection{min-height:800px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding:30px;
background: rgb(210,210,210);
background: linear-gradient(180deg, rgba(210,210,210,1) 10%, rgba(255,255,255,1) 100%);
background-image:url("../images/GenesisPlanBg.jpg");
background-size:cover;
background-blend-mode: hard-light;}

.planGradient{width:100vw;
height:800px;
background: rgb(210,210,210);
background: linear-gradient(180deg, rgba(210,210,210,0.9) 10%, rgba(255,255,255,0) 100%);
position:absolute;}

.planAccordionItem > div > p{color:#000000;}

.planAccordionItem > *{color:#ffffff;}
/* Bootstrap Class */

.planHeading{text-shadow:0px 0px 2px #000000;}

#cardAccordionContainer{display:none;}

.planDescription{width:40vw;
height:auto;
padding:50px;
margin:auto;
z-index:2;
background-color:#ffffff;
border-radius:20px;}

.planContainer{width:40vw;}

.plan{width:500px;
    height:400px;
    background-color:rgb(255, 255, 255);
    border-radius:30px;
    border:1px solid #000000;
    margin:auto;
    display:flex;
    flex-direction:column;
}

.planHeader{text-align: center;
    background: var(--header);
    border-radius: 30px 30px 0px 0px;}

.planHeader > h1{color:#ffffff;}

.planBody > p{padding:15px;
font-size:20px;}

/*------------------------------------------ End of Plans Section ------------------------------------------ */

/*------------------------------------------ Contact Section ------------------------------------------ */

.contactSection{width:100vw;
height:800px;
background-color:var(--lightBlue1);
display:flex;
flex-direction:row;}

.contactImg{width:50%;
height:100%;
background-image:url("../images/GenesisContactImg.jpg");
background-size:cover;
background-position:center;}

.inputContainer{width:50%;
display: flex;
flex-direction: column;
justify-content: center;
padding:2em;
}

.inputContainer > h1{color:var(--lightText);}

.inputContainer > form{width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;}

/*------------------------------------------ End of Contact Section ------------------------------------------ */

/*------------------------------------------ Providers Section ------------------------------------------ */

.providersContainer{height:400px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow-x:hidden;}

.sliderContainer{overflow:hidden;
width:100vw;
white-space:nowrap;
display:inherit;
position:relative;}

.sliderContainer:before{width:250px;
height:100%;
position:absolute;
top:0px;
left:0px;
background: rgb(233,244,255);
background: linear-gradient(90deg, rgba(233,244,255,1) 0%, rgba(255,255,255,0) 100%);
content:"";
z-index: 1;}

.sliderContainer::after{width:250px;
height:100%;
position:absolute;
top:0px;
right:0px;
background: rgb(233,244,255);
background: linear-gradient(270deg, rgba(233,244,255,1) 0%, rgba(255,255,255,0) 100%);
content:"";
z-index: 1;}

.imgSlider{width:auto;
min-width:200%;
padding:30px 0px;
background-color:var(--lightBlue2);
animation: 15s slide infinite linear;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;}

.imgSlider > img{width:300px;
    height:auto;
    max-width: 300px;
    min-width: 300px;
    padding:10px;
}

/*------------------------------------------ End of Providers Section ------------------------------------------ */

/*------------------------------------------ Questions Section ------------------------------------------ */

.questionsContainer{padding:100px 30px;
background-color:var(--lightBlue3);
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;}

.questionsText{width:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin:auto;
margin-top:40px;}

.questionsText > h1{margin-bottom:30px;
text-align: center;}

.questionsText > p{font-size:20px;
text-align:left;}

.accordionContainer{width:50%;
margin:auto;
min-width:400px;
max-width:800px;
z-index: 3;}

.accordionTitle{width:100%;
height:80px;
background-color:var(--footer);
color:var(--lightText);
padding:5px;
border-radius: 15px 15px 0px 0px;
display:none;}

/*------------------------------------------ End of Questions Section ------------------------------------------ */

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

.phoneLink{display:none;}

footer{width:100vw;
background-color:var(--footer);
padding:40px 0px;}

.footerSection{display:flex;
flex-direction:row;
align-items:center;
justify-content:center;}

#footerLogo{width:20%;
    height:20vh;
    background-image:url("../images/LogoText.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    margin:25px auto;}

.footerSection > div{width:25%;
margin:auto;
text-align:center;}

.footerServing{text-align:center;
color:var(--lightText);
text-align:center;}

.footerContact{color:var(--lightText);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;}

.footerLink{color:var(--lightText);}

.footerHeartbeat{width:100vw;
height:80px;
background-image:url("../images/heartbeat.png");
background-size:150px;
background-repeat:repeat-x;
background-position:center;}

/*------------------------------------------ End of Footer ------------------------------------------ */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Keyframes @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@-webkit-keyframes slide {
    from{transform: translateX(0%);}
    to{transform: translateX(-100%);}
}

@-moz-keyframes slide {
    from{transform: translateX(0%);}
    to{transform: translateX(-100%);}
}

@-o-keyframes slide {
    from{transform: translateX(0%);}
    to{transform: translateX(-100%);}
}

@keyframes slide{
    from{transform: translateX(0%);}
    to{transform: translateX(-100%);}
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of Keyframes @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of Index.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Contact.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

#contactHeroSection{background-image:none;
background: rgb(15,70,147);
background: linear-gradient(135deg, rgba(15,70,147,1) 0%, rgba(1,26,63,1) 13%, rgba(6,31,66,1) 58%, rgba(19,50,94,1) 100%);}

.contactArrow{height:200px;
width:auto;
background-image:url("../images/arrow.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;}

.contactHeroText{position:relative;}

#conHeroText1{top:75px;}

#conHeroText2{top:-75px;}

.contactFormContainer{width:60%;
height:100%;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;}

.contactPageForm{width:90%;
min-width:500px;
height:70%;
margin:auto;
background-color:var(--lightBlue2);
margin-bottom:80px;
border-radius:50px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px;}

.contactPageForm > label{color:var(--darkText);}

#contactFaq{background-color:var(--lightBlue2);}

#contactFaq > *{color:var(--darkText);}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of Contact.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ About.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

#aboutHeroSection{height:400px;
background-image: none !important;}

#aboutTitle{width:60vw;
text-align: center;
margin:auto;
margin-top: 125px;
}

.descriptionSection{width:90vw;
    height:600px !important;
    display:flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    background-color: #ffffff !important;
    margin:auto;
}

.descriptionSection > p{width:35%;
    height:auto;
    margin:auto;
    font-size: 20px;
}

#aboutContactSection > .inputContainer{background-color:var(--lightBlue1);}

.descriptionImg{width:30%;
height:auto;
margin:auto;
margin-left:50px;
background-size:cover;
background-repeat: no-repeat;
background-position:center;}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of About.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Services.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

#servicesHeroSection{background-image:url("../images/GenesisServiceImg.jpg");
background-size:cover;
background-position:center;
background-position-y:top;}

#servicesHeroSection > .heroDescriptor{width:75vw;
margin:auto;
padding:0px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-shadow: 0px 0px 10px #000000;}

#servicesHeroSection > .heroDescriptor > p::before{content:"Selecting the right insurance plan is crucial, as it goes beyond just coverage—it's about ensuring your security, achieving peace of mind, and making smart financial decisions. At Genesis Life & Health, we specialize in simplifying the insurance process, helping you discover the best plan tailored to your health, life, or business needs without the usual hassle. Whether you’re looking for health insurance, life insurance, or coverage for your business, our expert team is here to guide you toward suitable options.";
}

#servicesHeroSection > .heroDescriptor > p{width:65%;}

.servicesSection{background-color:var(--lightBlue3);
height:auto;
padding:100px 50px;}

#servicesContactSection{flex-direction:row-reverse;}

#servicesPlanSection{background-image:none;
background-color:var(--lightBlue3);}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of Services.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 404.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.section404{width:100vw;
height:100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;}

.section404 > h1{font-size:4rem;
font-weight: bold;}

.section404 > *{margin-top:20px;}
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ End of 404.html @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */