html, body {
    overflow-x: hidden;
    margin:0;
    background-color: #F8F9FF;
  }
  
html {
    scroll-behavior:smooth;
}


h1 {
    font-family: "Istok Web", sans-serif;
    font-size: 72px;
    line-height: 1.1;
}

h2 {
    font-family: "Istok Web", sans-serif;
    font-size: 48px;
    line-height: 1.2;
}

h3 {
    font-family: "Istok Web", sans-serif;
    font-size: 32px;  
    line-height: 1.2;
}

h4 {
    font-family: "Istok Web", sans-serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 300;
}

p {
    font-family: "Istok Web", sans-serif;
    font-size: 22px;
    line-height: 1.4;
}

.revealUp1{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp2{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.50s;

}

.revealUp2.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp3{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.75s;

}

.revealUp3.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp1Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp2Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.50s;

}

.revealUp2Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp3Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.75s;

}

.revealUp3Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp4{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 2s;
}

.revealUp4.active{
    transform: translateY(0);
    opacity: 1;
}

.revealFade{
    position: relative;
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealFade.active{
    opacity: 1;
}

.footerLogo {
    width: 100%;
}

button {
    padding: 0px 50px;
    margin: 5px 0 0 0;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    text-align: right;
    float: right;
    height: 40px;
    font-size: 22px;
}

button:hover {
    background-color: #273FFA;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    color: #F8F9FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

button2 {
    padding: 10px 50px;

    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    text-align: right;
    float: left;
    font-size: 22px;
    font-family: "Istok Web", sans-serif;
}

button2:hover {
    background-color: #273FFA;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    color: #F8F9FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.button2 {
    padding: 0px 50px;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    text-align: right;
}


.button2:hover {
    background-color: #273FFA;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    color: #F8F9FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.noDecoration {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.4;
}

.noDecorationFooter {
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.4;
}

#cardIcon {
    margin-top: -110px;
}

#formDiamonds {
    margin-top: -35px;
    padding-left: 12px;
}

/* FORM CSS START */

form {
    margin: 0;
    padding: 0;
}

.form1 {
    margin: 0 auto;
    padding: 0 15px;
    border-radius: 5px;
}

/* Style for form input fields */
.input1[type="email"] {
    width: 55%;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 14px;
    border: 0px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Make sure padding is included in width */
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #F8F9FF;
    font-family: "Istok Web", sans-serif;
    display: inline;
}  

#form-button {
    width: 40%;
    padding: 15px;
    margin: 3px auto;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-size: 22px;
    float: right;
    display: inline;
}

#form-button:hover {
    background-color: #273FFA;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    color: #F8F9FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.form2 {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
}

/* Style for form input fields */
.input2[type="text"],
.input2[type="email"],
.input2[type="tel"],
.textarea2 {
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Make sure padding is included in width */
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    font-family: "Istok Web", sans-serif;
}

#form-button2 {
    width: 100%;
    padding: 15px;
    margin: 10px auto;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-size: 22px;
}

#form-button2:hover {
    background-color: #F8F9FF;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

/* Style for form error messages */
.error {
    color: red;
    font-size: 0.8em;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Optional: Style for form container when it's displayed in smaller screens */
@media screen and (max-width: 600px) {
    .form1, .form2 {
        width: 80%;
    }
}
  
/* FORM CSS END */

/* Lander 1 CSS Start */

.lander-1-hero {
    background-color: #F8F9FF;
    background-image: url("../images/l1-hero-background.svg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 7% 3% 26% 12% 4% 48%;
    grid-template-areas:
      "logo logo logo . . . . . . . . . "
      "prehead prehead prehead prehead prehead prehead prehead . . . . ."
      "headline headline headline headline headline headline . . . . . ."
      "subhead subhead subhead subhead subhead subhead . . . . . ."
      "form form form form form form . . . . . ."
      "disclaimer disclaimer disclaimer disclaimer disclaimer disclaimer . . . . . .";
    column-gap: 24px;
    row-gap: 40px;
    padding: 30px 80px;
}

.lander-1-hero-logo {
    grid-area: logo;
}

.lander-1-hero-prehead {
    grid-area: prehead;
    color: #F8F9FF;
}

.lander-1-hero-headline {
    grid-area: headline;
    color: #F8F9FF;
}

.lander-1-hero-subhead {
    grid-area: subhead;
    color: #F8F9FF;
}

.lander-1-hero-form {
    grid-area: form;
    padding: 5px;
    background-color: #F8F9FF;
    border-radius: 10px;
    height: 60px;
    align-items: center;
    justify-content: center;
    display: inline;
}

.lander-1-hero-disclaimer {
    grid-area: disclaimer;
    color: #F8F9FF;
    margin: 0;
    padding: 0;
}

.lander-1-section1 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s1-background.svg");
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 35% 65%;
    grid-template-areas:
      ". . subhead subhead subhead subhead subhead subhead subhead subhead . ."
      "card1 card1 card1 card2 card2 card2 card3 card3 card3 card4 card4 card4";
    column-gap: 24px;
    row-gap: 80px;
    padding: 120px 80px 250px 80px;
}

.lander-1-s1-subhead {
    grid-area: subhead;
    text-align: center;
    color: #0A0F3D;
}

.lander-1-s1-c1 {
    grid-area: card1;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 25px 25px 25px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c1:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c2 {
    grid-area: card2;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 25px 25px 25px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c2:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c3 {
    grid-area: card3;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 25px 25px 25px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c3:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c4 {
    grid-area: card4;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 25px 25px 25px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c4:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-section2 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s2-background.svg");
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 13% 29% 29% 29%;
    grid-template-areas:
      ". . subhead subhead subhead subhead subhead subhead subhead subhead . ."
      "image1 image1 image1 image1 text1 text1 text1 text1 text1 . . ."
      ". . image2 image2 image2 image2 text2 text2 text2 text2 text2 ."
      "image3 image3 image3 image3 text3 text3 text3 text3 text3 . . .";
    column-gap: 24px;
    row-gap: 40px;
    padding: 250px 80px 250px 80px;
}

.lander-1-s2-subhead {
    grid-area: subhead;
    color: #0A0F3D;
    text-align: center;
}

.lander-1-s2-image1 {
    grid-area: image1;
    vertical-align: middle;
}

.lander-1-s2-text1 {
    grid-area: text1;
    color: #0A0F3D;
}

.lander-1-s2-image2 {
    grid-area: image2;
}

.lander-1-s2-text2 {
    grid-area: text2;
    color: #0A0F3D;
}

.lander-1-s2-image3 {
    grid-area: image3;
}

.lander-1-s2-text3 {
    grid-area: text3;
    color: #0A0F3D;
}

.lander-1-section3 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s3-background.svg");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 33% 33% 33%;
    grid-template-areas:
      "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3"
      "card4 card4 card4 card4 card5 card5 card5 card5 card6 card6 card6 card6"
      "card7 card7 card7 card7 card8 card8 card8 card8 card9 card9 card9 card9";
    column-gap: 24px;
    row-gap: 80px;
    padding: 200px 80px 250px 80px;
}

.s3card {
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    color: #0A0F3D;
    text-align: center;
    min-height: 260px;
    padding: 45px;
}

.lander-1-s3-c1 {
    grid-area: card1;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c1:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c2 {
    grid-area: card2;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c2:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c3 {
    grid-area: card3;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c3:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c4 {
    grid-area: card4;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c4:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c5 {
    grid-area: card5;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c5:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c6 {
    grid-area: card6;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c6:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c7 {
    grid-area: card7;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c7:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c8 {
    grid-area: card8;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c8:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c9 {
    grid-area: card9;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s3-c9:hover {
    background: #273FFA;
    box-shadow: 0px 0px 24px 1px rgba(85, 92, 152, 0.25);
    color: #ffffff;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-section4 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s4-background.svg");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas:
      "text text text text text text text . form form form form";
    column-gap: 24px;
    padding: 100px 80px 200px 80px;
}

.lander-1-s4-text {
    grid-area: text;
}

.lander-1-s4-form {
    grid-area: form;
    background-color: #273FFA;
    border-radius: 10px;
}

.lander-1-footer {
    background-color: #F8F9FF;
    background-image: url("../images/l1-footer-background.svg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 300px;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas:
      ". . . . . . . . logo logo logo logo";
    column-gap: 24px;
    padding: 80px;
}

.lander-1-footer-logo {
    grid-area: logo;
    margin-top: 110px;
    margin-bottom: auto;
    justify-content: center;
    align-items: center;
}

/* Lander 1 CSS End */

/* Mobile Optimization */

@media (max-width: 768px) {

h1 {
    font-family: "Istok Web", sans-serif;
    font-size: 42px;
    line-height: 1.1;
}

h2 {
    font-family: "Istok Web", sans-serif;
    font-size: 28px;
    line-height: 1.2;
}

h3 {
    font-family: "Istok Web", sans-serif;
    font-size: 22px;  
    line-height: 1.2;
}

h4 {
    font-family: "Istok Web", sans-serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 300;
}

p {
    font-family: "Istok Web", sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

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

.form1 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px;
    border-radius: 5px;
    width: 100%;
}

/* Style for form input fields */
.input1[type="email"] {
    width: 100%;
    padding: 0 0 0 10px;
    margin-bottom: 0px;
    margin-top: 16px;
    border: 0px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Make sure padding is included in width */
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #F8F9FF;
    font-family: "Istok Web", sans-serif;
    display: inline;
}  

#form-button {
    width: 101.5%;
    padding: 15px;
    margin: 33px 0px;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-size: 18px;
    float: center;
    display: inline;
}

#form-button:hover {
    background-color: #273FFA;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    color: #F8F9FF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.form2 {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
}

/* Style for form input fields */
.input2[type="text"],
.input2[type="email"],
.input2[type="tel"],
.textarea2 {
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Make sure padding is included in width */
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    font-family: "Istok Web", sans-serif;
}

#form-button2 {
    width: 100%;
    padding: 15px;
    margin: 10px auto;
    background-color: #FACA28;
    box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
    outline: none;
    border: 0;
    border-radius: 5px;
    text-align: center;
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-size: 22px;
}

#form-button2:hover {
    background-color: #F8F9FF;
    box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
    border-radius: 5px;    
    color: #273FFA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

/* Style for form error messages */
.error {
    color: red;
    font-size: 0.8em;
    margin-top: -10px;
    margin-bottom: 10px;
}

.diamondImage {
    max-height: 200px;
}

.lander-1-hero {
    background-color: #273FFA;
    background-image: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 7% 6% 18% 10% 11% 48%;
    grid-template-areas:
      "logo"
      "prehead"
      "headline"
      "subhead"
      "form"
      "disclaimer";
    column-gap: 24px;
    row-gap: 40px;
    padding: 30px 20px;
}

.lander-1-section1 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s1-background.svg");
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 12% 22% 22% 22% 22%;
    grid-template-areas:
      "subhead"
      "card1"
      "card2"
      "card3"
      "card4";
    column-gap: 24px;
    row-gap: 80px;
    padding: 120px 20px 350px 20px;
}

.lander-1-s1-c1 {
    grid-area: card1;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 45px 25px 45px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c2 {
    grid-area: card2;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 45px 25px 45px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c3 {
    grid-area: card3;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 45px 25px 45px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-s1-c4 {
    grid-area: card4;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    text-align: center;
    padding: 45px 45px 25px 45px;
    color: #0A0F3D;
    moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lander-1-section2 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s2-background.svg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 4% 10% 7% 10% 7% 10% 7%;
    grid-template-areas:
      "subhead subhead subhead"
      ". image1 ." 
      "text1 text1 text1"
      ". image2 ." 
      "text2 text2 text2"
      ". image3 ." 
      "text3 text3 text3";
    column-gap: 24px;
    row-gap: 80px;
    padding: 250px 20px 0px 20px;
}

.lander-1-section3 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s3-background.svg");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas:
      "card1"
      "card2"
      "card3"
      "card4"
      "card5"
      "card6"
      "card7"
      "card8"
      "card9";
    column-gap: 24px;
    row-gap: 80px;
    padding: 200px 30px 100px 30px;
}

.s3card {
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 1px rgba(85, 92, 152, 0.25);
    border-radius: 10px;
    color: #0A0F3D;
    text-align: center;
    min-height: 260px;
    padding: 15px 75px;
    margin: 30px 0;
}

.lander-1-section4 {
    background-color: #F8F9FF;
    background-image: url("../images/l1-s4-background.svg");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 45% 55%;
    grid-template-areas:
      "text"
      "form";
    column-gap: 24px;
    row-gap: 40px;
    padding: 50px 20px 200px 20px;
}

.lander-1-footer {
    background-color: #273FFA;
    background-image: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: grid;
    height: 300px;
    justify-content: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas:
      "logo";
    column-gap: 24px;
    padding: 80px;
}

}