:root {
    --color-gray-100: #f7f7f7;
    --color-gray-200: #f8f8f8;
    --color-gray-300: #e7e6e6;
    --color-gray-700: #333;
    --color-gray-900: #282828;
    --color-limeGreen: #a6ef00;
    --color-neonGreen: #00E194;
    --color-primaryGreen: #00a870;
    --color-dullGreen: #2b816d;
    --color-darkGreen: #0a5a5a;
    --color-primaryBlue: #0069CB;
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-black-60: rgba(0, 0, 0, 0.6);
}

.home {
     font-size: 16px;
     font-weight: 400;
     margin: 0 auto;
     color: var(--color-gray-900);
 }

 @media (max-width:1680px) {
     .home {
         font-size: 14px;
     }
 }

 @media (max-width:1440px) {
     .home {
         font-size: 12px;
     }
 }

 @media (max-width:736px) {
     .home {
         font-size: 10.35px;
     }
 }

 @media (max-width:414px) {
     .home {
         font-size: 2.5vw;
     }
 }

 .home .btn {
    background-color: var(--color-primaryGreen);
    color: #fff;
    border-radius: .25em;
    padding: .7em 1.2em;
    border: none;
    font-weight: 400;
    font-size: 1.125em;
    text-wrap: nowrap;
    display: flex;
    width: fit-content;
    text-decoration: none;
    margin-top: 2em;
    transition: background-color 0.3s ease-in-out;
}

.home .btn:hover {
    background-color: var(--color-dullGreen);
    transition: background-color 0.3s ease-in-out;
    text-decoration: none;
    color: #fff;
}

@media (max-width: 736px) {
    .home .btn {
        font-size: 1.5em;
    }

    .home .btn.center {
        margin: 4vw auto;
    }
}

 .home .section-box {
     position: relative;
     margin: 0 auto;
 }

 .home .section-container {
     left: 0;
     right: 0;
     margin: 0 auto;
 }

 .home .banner {
    height: 38em;
    background: var(--color-darkGreen) url('images/solutionx-hero.jpg') 50% 0 no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .home .banner .w-container {
    width: 85.375em;
    margin: 0 auto;
    max-width: 90%;
}

.home .banner .text {
    padding: 0 50% 0 0
}

.home .banner .solutionx-logo {
    width: 11em;
}

.home .banner h1 {
    font-size: 3.5em;
    font-weight: 300;
    margin: .5em 0;
    line-height: 1.1
}

.home .banner p {
    font-size: 1.25em;
    color: var(--color-white-80);
}

@media(max-width: 736px) {
    .home .banner {
        background: var(--color-darkGreen) url('images/solutionx-hero_m.jpg') 50% 0 no-repeat;
        background-size: 100%;
        height: auto
    }

    .home .banner .w-container {
        width: auto
    }

    .home .banner .text {
        padding: 5em 0 25em;
        text-align: center
    }

    .home .banner h1 {
        font-size: 3.5em;
        margin: .75em 0 .25em
    }

    .home .banner h1 br {
        display: none
    }

    .home .banner p {
        font-size: 1.5em
    }

    .home .banner img {
        max-width: 33vw
    }
}

 .home .action {
     background: #005564;
     color: #fff;
 }

 .home .action .wrapper {
     padding: 3em;
 }

 .home .action .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
 }

 .home .action .text {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 1.5em;
     padding: 0 4em;
 }

 .home .action a {
     color: #000;
     display: inline-block;
     padding: 0.25em 1em;
     min-width: 8em;
     background: #ffcb00;
     text-align: center;
     text-decoration: none;
     border-radius: 0.25em;
     font-weight: 300;
 }

 @media (max-width:736px) {
     .home .action {
         padding-top: 1em;
     }

     .home .action .text {
         flex-direction: column;
     }

     .home .action .line {
         display: none;
     }

     .home .action .w-container {
         width: auto;
     }

     .home .action .text>span,
     .home .action .text>a {
         margin: 0.5em 0;
     }
 }

 .home .a {
     background: #fff;
 }

 .home .a .wrapper {
     padding: 6em 0;
 }

 .home .a .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
 }

 .home .a h2 {
     font-size: 2.75em;
     font-weight: 300;
     line-height: 1.2;
     margin-bottom: 0.5em;
 }

 .home .a p {
     font-size: 1.15em;
     line-height: 1.5;
 }

 .home .a p+p {
     margin-top: 1em;
 }

 .home .a .text {
     display: flex;
     justify-content: space-between;
 }

 .home .a .text .txt {
     width: 48%;
 }

 .home .a .text .img {
     width: 45%;
 }

 .home .a .text .img>img {
     max-width: 100%;
 }

 @media (max-width:736px) {
     .home .a .wrapper {
         padding: 4em 0;
         text-align: center;
     }

     .home .a p {
         font-size: 1.6em;
     }

     .home .a .w-container {
         width: auto;
     }

     .home .a .text {
         display: block;
         padding: 0 20px;
     }

     .home .a .text .txt,
     .home .a .text .img {
         width: auto
     }

     .home .a .text .img {
         margin-top: 3em;
     }
 }

 .home .b {
     background: var(--color-gray-100);
 }

 .home .b .wrapper {
     padding: 6em 0;
 }

 .home .b .eyebrow {
    font-size: 1.125em;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--color-dullGreen);
    text-align: center;
    margin-bottom: 1em;
 }

 .home .b h2 {
     font-size: 2.75em;
     font-weight: 300;
     line-height: 1.2;
     margin-bottom: 0.5em;
     text-align: center;
 }

 .home .b h3 {
     font-size: 1.75em;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 0.5em;
 }

 .home .b p {
     font-size: 1em;
     line-height: 1.6;
     color: var(--color-black-60);
 }

 .home .b .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
 }

 .home .b .list {
     overflow: hidden;
     margin: 4em 0 0 0;
 }

 .home .b .swiper-slide .txt {
     margin-top: 1em;
 }

 .home .b .swiper-slide img {
     max-width: 100%;
     border-radius: 0.5em;
 }

 .home .b .swiper-slide img.mobile {
     display: none;
 }

 .home .b .box {
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
 }

 .home .b .box.reverse {
     flex-direction: column-reverse;
     display: flex;
     justify-content: space-between;
 }

 .home .b .box.reverse .txt {
     margin: 0;
 }

 .home .b .info {
     text-align: center;
     margin-top: 4em;
 }

 .home .b .info a {
     color: var(--color-primaryGreen);
     text-wrap: nowrap;
 }

 @media (max-width:736px) {
     .home .b .wrapper {
         padding: 4em 0;
         text-align: center;
     }

     .home .b h3 {
         font-size: 2em;
     }
     .home .b p, .home .b .eyebrow {
         font-size: 1.4em;
     }
     

     .home .b .w-container {
         width: auto;
     }

     .home .b .text {
         padding: 0 20px;
     }

     .home .b .list {
         margin: 3em -10px 0 -10px;
         text-align: left;
     }

     .home .b .swiper-slide {
         width: 66%;
     }

     .home .b .swiper-slide img.pc {
         display: none;
     }

     .home .b .swiper-slide img.mobile {
         display: block;
     }

     .home .b .box.reverse .txt {
         margin-bottom: 1em;
     }
 }

 @media (min-width: 737px) {
     .home .b .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em;
    }

    .home .b .swiper-slide {
        flex: 1 1 0;
    }
 }

 .home .c {
     background: var(--color-gray-900);
     color: white;
 }

 .home .c .wrapper {
     padding: 6em 0;
 }

 .home .c .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
 }

 .home .c h2 {
     font-size: 2.75em;
     font-weight: 300;
     text-align: center;
     line-height: 1.2;
 }

 .home .c h3 {
     font-size: 1.75em;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 0.5em;
 }

 .home .c p {
     font-size: 1.15em;
     line-height: 1.6;
     color: var(--color-white-60)
 }

 .home .c .list {
     display: flex;
     justify-content: space-between;
     margin-top: 4em;
 }

 .home .c .item {
     width: 31.2%;
 }

 .home .c .item img {
     width: 3em;
 }

 .home .c .txt {
     padding-top: 1em;
 }

 @media (max-width:736px) {
     .home .c .wrapper {
         padding: 4em 0;
         text-align: center;
     }

     .home .c h3 {
         font-size: 2em;
     }

     .home .c p {
         font-size: 1.5em;
     }

     .home .c .w-container {
         width: auto;
     }

     .home .c .text {
         padding: 0 20px;
     }

     .home .c .list {
         display: block;
         margin-top: 2em;
     }

     .home .c .item {
         width: auto;
     }

     .home .c .item+.item {
         margin-top: 2em;
     }
 }

 .home .d {
     background: var(--color-gray-900);
     color: white;
 }

 .home .d .wrapper {
     padding: 6em 0;
 }

 .home .d .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
 }

 .home .d h2 {
     font-size: 2.75em;
     font-weight: 300;
     line-height: 1.2;
 }

 .home .d h3 {
     font-size: 1.5em;
     font-weight: 400;
     line-height: 1.2;
     margin-bottom: 0.5em;
 }

 .home .d p {
     font-size: 1em;
     line-height: 1.5;
     color: var(--color-white-60);
     margin-bottom: 1em;
 }

 .home .d a {
     color: var(--color-neonGreen);
     font-size: 1em;
     line-height: 1.5;
     text-underline-offset: 4px;
 }

 .home .d .eyebrow {
    font-size: 1.125em;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--color-neonGreen);
    margin-bottom: 1em;
 }

 .home .d .list {
     display: flex;
     flex-direction: row;
     margin-top: 4em;
     gap: 1em;
 }

 .home .d .item {
     flex: 1 1 0;
     padding: 1.5em;
 }

 .home .d .item:first-child {
     border: var(--color-neonGreen) 1px solid;
     border-radius: 0.5em;
 }

 .home .d .img {
     text-align: center;
 }

 .home .d p.note {
     font-size: 14px;
     margin-top: 2em;
 }

 @media (max-width:736px) {
     .home .d .wrapper {
         padding: 4em 0;
     }

     .home .d h3 {
         font-size: 1.75em;
     }
     
     .home .d p, .home .d .eyebrow, .home .d a {
         font-size: 1.25em;
     }

     .home .d .w-container {
         width: auto;
     }

     .home .d .list {
         display: grid;
         grid-template-columns: 1fr 1fr;
         margin-top: 3.5em;
     }

     .home .d .list img {
         max-width: 8vw;
     }

     .home .d .item {
         width: auto;
     }

     .home .d p.note {
         font-size: 12px;
     }
 }

 .home .e {
     background: linear-gradient(180deg, var(--color-darkGreen), var(--color-dullGreen));
     color: #fff;
 }

 .home .e .wrapper {
     padding: 6em 0;
 }

 .home .e .w-container {
     width: 85.375em;
     margin: 0 auto;
     max-width: 90%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .home .e h2 {
     font-size: 2.75em;
     font-weight: 300;
     text-align: center;
     line-height: 1.2;
     margin-bottom: 0.5em;
 }

 .home .e p {
     font-size: 1.15em;
     line-height: 1.5;
     text-align: center;
     color: var(--color-white-80);
 }

 .home .e .legal {
     margin-top: 0.75em;
 }
 
 .home .e .legal p {
     font-size: 0.85em;
     line-height: 1.5;
     text-align: left;
     margin-top: 0.5em;
 }

 .home .e form {
     width: 100%;
     max-width: 50em;
     display: flex;
     flex-direction: column;
     gap: 1em;
 }

 .home .e .input {
    background: var(--color-white-5);
    border: 1px solid var(--color-white-40);
    padding: 0.8em 1.15em;
    color: white;
    font-size: 1em;
    flex: 1 1 0;
    line-height: 1.5;
    border-radius: .35em;
 }

 .home .e .row-to-column .input {
    width: 50%;
 }

 .home .e select.input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 256 256'>\<path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/>\</svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:1rem;
  padding-right:2.5rem;
}

 .home .e .input::placeholder {
    color: var(--color-white-60);
 }

 .home .e .initial-dialog {
     display: flex;
     flex-direction: column;
     gap: 1em;
     margin-top: 2em;
     justify-content: center;
     border-radius: 0.5em;
 }

 .home .e .after-dialog.hidden, .home .e .initial-dialog.hidden {
    display: none;
 }

 .home .e .after-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .home .e .initial-dialog .row-to-column {
     display: flex;
     flex-direction: row;
     gap: 1em;
     flex: 1 1 0;
 }

 .home .e .btn {
    margin-left: auto;
    margin-right: auto;
}

 @media (max-width:736px) {
     .home .e .wrapper {
         padding: 4em 0;
         text-align: center;
     }

     .home .e p, .home .e .input {
         font-size: 1.4em;
     }

     .home .e .legal p {
         font-size: 1.3em;
     }

     .home .e .w-container {
         width: auto;
     }

     .home .e .initial-dialog {
         flex-direction: column;
         margin-top: 2em;
     }

     .home .e .initial-dialog .btn {
       margin-top: 2em;
    }

 }