@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300&display=swap);
/*
! tailwindcss v3.2.0 | MIT License | https://tailwindcss.com
*/

*,
:after,
:before {
    border: 0 solid;
    box-sizing: border-box
}

:after,
:before {
    --tw-content: ""
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
    tab-size: 4
}

body {
    line-height: inherit;
    margin: 0
}

hr {
    border-top-width: 1px;
    color: inherit;
    height: 0
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: initial
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,
legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #9ca3af;
    opacity: 1
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    height: auto;
    max-width: 100%
}

[hidden] {
    display: none
}

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

::-webkit-backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.invisible {
    visibility: hidden
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.top-0 {
    top: 0
}

.left-0 {
    left: 0
}

.z-50 {
    z-index: 50
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-7 {
    margin-top: 1.75rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-40 {
    margin-top: 10rem
}

.mb-24 {
    margin-bottom: 6rem
}

.mt-24 {
    margin-top: 6rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-12 {
    margin-bottom: 3rem
}

.mt-16 {
    margin-top: 4rem
}

.mb-16 {
    margin-bottom: 4rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-9 {
    margin-bottom: 2.25rem
}

.mr-32 {
    margin-right: 8rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-7 {
    margin-bottom: 1.75rem
}

.mt-36 {
    margin-top: 9rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mt-32 {
    margin-top: 8rem
}

.mt-52 {
    margin-top: 13rem
}

.mr-24 {
    margin-right: 6rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-20 {
    margin-top: 5rem
}

.mb-20 {
    margin-bottom: 5rem
}

.-mt-12 {
    margin-top: -3rem
}

.-mt-\[12em\] {
    margin-top: -12em
}

.-mt-20 {
    margin-top: -5rem
}

.mt-8 {
    margin-top: 2rem
}

.-mt-16 {
    margin-top: -4rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mb-1 {
    margin-bottom: .25rem
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-56 {
    height: 14rem
}

.h-9 {
    height: 2.25rem
}

.h-screen {
    height: 100vh
}

.h-full {
    height: 100%
}

.h-\[220px\] {
    height: 220px
}

.h-\[30em\] {
    height: 30em
}

.h-\[14em\] {
    height: 14em
}

.h-16 {
    height: 4rem
}

.h-\[6em\] {
    height: 6em
}

.h-\[3em\] {
    height: 3em
}

.h-\[3\.4em\] {
    height: 3.4em
}

.h-\[40vh\] {
    height: 40vh
}

.h-\[50em\] {
    height: 50em
}

.h-\[18em\] {
    height: 18em
}

.h-\[100\%\] {
    height: 100%
}

.h-7 {
    height: 1.75rem
}

.h-1 {
    height: .25rem
}

.min-h-\[90vh\] {
    min-height: 90vh
}

.min-h-screen {
    min-height: 100vh
}

.min-h-\[50vh\] {
    min-height: 50vh
}

.w-full {
    width: 100%
}

.w-screen {
    width: 100vw
}

.w-\[350px\] {
    width: 350px
}

.w-96 {
    width: 24rem
}

.w-\[14em\] {
    width: 14em
}

.w-16 {
    width: 4rem
}

.w-\[6em\] {
    width: 6em
}

.w-\[3em\] {
    width: 3em
}

.w-\[7em\] {
    width: 7em
}

.w-\[4\.2em\] {
    width: 4.2em
}

.w-5 {
    width: 1.25rem
}

.w-\[80vw\] {
    width: 80vw
}

.min-w-\[100VW\] {
    min-width: 100VW
}

.grow {
    flex-grow: 1
}

.cursor-pointer {
    cursor: pointer
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-col {
    flex-direction: column
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-evenly {
    justify-content: space-evenly
}

.gap-4 {
    gap: 1rem
}

.gap-16 {
    gap: 4rem
}

.gap-24 {
    gap: 6rem
}

.gap-8 {
    gap: 2rem
}

.gap-12 {
    gap: 3rem
}

.gap-10 {
    gap: 2.5rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-9 {
    gap: 2.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-2 {
    gap: .5rem
}

.space-x-24>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(6rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(6rem*var(--tw-space-x-reverse))
}

.space-x-52>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(13rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(13rem*var(--tw-space-x-reverse))
}

.space-x-9>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2.25rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(2.25rem*var(--tw-space-x-reverse))
}

.space-x-16>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(4rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(4rem*var(--tw-space-x-reverse))
}

.space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)))
}

.space-x-7>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.75rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.75rem*var(--tw-space-x-reverse))
}

.space-y-14>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(3.5rem*var(--tw-space-y-reverse));
    margin-top: calc(3.5rem*(1 - var(--tw-space-y-reverse)))
}

.space-x-5>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.25rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.25rem*var(--tw-space-x-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(1rem*var(--tw-space-y-reverse));
    margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)))
}

.space-x-20>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(5rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(5rem*var(--tw-space-x-reverse))
}

.space-x-8>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(2rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(2rem*var(--tw-space-x-reverse))
}

.space-x-6>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1.5rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(1.5rem*var(--tw-space-x-reverse))
}

.space-x-4>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(1rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(1rem*var(--tw-space-x-reverse))
}

.space-x-12>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(3rem*(1 - var(--tw-space-x-reverse)));
    margin-right: calc(3rem*var(--tw-space-x-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-y-hidden {
    overflow-y: hidden
}

.overflow-x-scroll {
    overflow-x: scroll
}

.scroll-smooth {
    scroll-behavior: smooth
}

.whitespace-nowrap {
    white-space: nowrap
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded {
    border-radius: .25rem
}

.border-2 {
    border-width: 2px
}

.border {
    border-width: 1px
}

.border-gray-light {
    --tw-border-opacity: 1;
    border-color: rgb(240 240 240/var(--tw-border-opacity))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.bg-gray-light {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240/var(--tw-bg-opacity))
}

.bg-water {
    --tw-bg-opacity: 1;
    background-color: rgb(55 91 108/var(--tw-bg-opacity))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.bg-cover {
    background-size: cover
}

.bg-contain {
    background-size: contain
}

.object-cover {
    object-fit: cover
}

.object-left {
    object-position: left
}

.object-bottom {
    object-position: bottom
}

.object-center {
    object-position: center
}

.object-right {
    object-position: right
}

.p-24 {
    padding: 6rem
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-8 {
    padding: 2rem
}

.p-16 {
    padding: 4rem
}

.p-1 {
    padding: .25rem
}

.p-5 {
    padding: 1.25rem
}

.py-4 {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.py-3 {
    padding-bottom: .75rem;
    padding-top: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.pl-24 {
    padding-left: 6rem
}

.pr-24 {
    padding-right: 6rem
}

.pl-32 {
    padding-left: 8rem
}

.pr-32 {
    padding-right: 8rem
}

.pt-8 {
    padding-top: 2rem
}

.pl-52 {
    padding-left: 13rem
}

.pr-52 {
    padding-right: 13rem
}

.pb-5 {
    padding-bottom: 1.25rem
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pb-3 {
    padding-bottom: .75rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pl-96 {
    padding-left: 24rem
}

.pr-96 {
    padding-right: 24rem
}

.pl-16 {
    padding-left: 4rem
}

.pr-16 {
    padding-right: 4rem
}

.pb-8 {
    padding-bottom: 2rem
}

.pl-2 {
    padding-left: .5rem
}

.pr-2 {
    padding-right: .5rem
}

.pt-24 {
    padding-top: 6rem
}

.pl-40 {
    padding-left: 10rem
}

.pr-40 {
    padding-right: 10rem
}

.pt-16 {
    padding-top: 4rem
}

.pt-5 {
    padding-top: 1.25rem
}

.pl-60 {
    padding-left: 15rem
}

.pr-60 {
    padding-right: 15rem
}

.pt-7 {
    padding-top: 1.75rem
}

.pr-8 {
    padding-right: 2rem
}

.pl-8 {
    padding-left: 2rem
}

.pl-20 {
    padding-left: 5rem
}

.pr-20 {
    padding-right: 5rem
}

.pt-12 {
    padding-top: 3rem
}

.pt-10 {
    padding-top: 2.5rem
}

.pl-4 {
    padding-left: 1rem
}

.pt-2 {
    padding-top: .5rem
}

.pl-6 {
    padding-left: 1.5rem
}

.pr-6 {
    padding-right: 1.5rem
}

.pr-5 {
    padding-right: 1.25rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pt-14 {
    padding-top: 3.5rem
}

.pr-56 {
    padding-right: 14rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.font-medium {
    font-weight: 500
}

.font-light {
    font-weight: 300
}

.font-bold {
    font-weight: 700
}

.font-extralight {
    font-weight: 200
}

.leading-4 {
    line-height: 1rem
}

.leading-6 {
    line-height: 1.5rem
}

.leading-9 {
    line-height: 2.25rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-8 {
    line-height: 2rem
}

.text-green {
    --tw-text-opacity: 1;
    color: rgb(46 138 53/var(--tw-text-opacity))
}

.text-gray-dark {
    --tw-text-opacity: 1;
    color: rgb(142 142 142/var(--tw-text-opacity))
}

.text-gray {
    --tw-text-opacity: 1;
    color: rgb(191 191 191/var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.text-red {
    --tw-text-opacity: 1;
    color: rgb(222 0 26/var(--tw-text-opacity))
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}

.shadow-md,
.shadow-sm {
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.transition-all {
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.duration-300 {
    transition-duration: .3s
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:bg-gray-light:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 240 240/var(--tw-bg-opacity))
}

.hover\:text-gray:hover {
    --tw-text-opacity: 1;
    color: rgb(191 191 191/var(--tw-text-opacity))
}

@media (max-width:900px) {
    .max-\[900px\]\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:700px) {
    .max-\[700px\]\:h-5 {
        height: 1.25rem
    }
    .max-\[700px\]\:pl-4 {
        padding-left: 1rem
    }
}

@media (max-width:600px) {
    .max-\[600px\]\:p-0 {
        padding: 0
    }
}

@media (min-width:768px) {
    .md\:invisible {
        visibility: hidden
    }
    .md\:flex {
        display: flex
    }
    .md\:hidden {
        display: none
    }
}

@media (min-width:800px) {
    .min-\[800px\]\:block {
        display: block
    }
}

* {
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    left: 0;
    margin: 0;
    padding: 0;
    top: 0
}

.btn-green {
    border: 1px solid green;
    color: green
}

.btn-green,
.btn-white {
    font-size: .85rem;
    padding: .3rem .9rem
}

.btn-white {
    border: 1px solid #fff;
    color: #fff
}

.btn-red {
    border: 1px solid red;
    color: red;
    font-size: .85rem;
    padding: .3rem .9rem
}

.section-break {
    padding-bottom: 4em;
    padding-top: 4em
}

.title {
    font-size: 1.6em;
    font-weight: 400
}

.title-white {
    color: #fff;
    font-size: 2.4em;
    font-weight: 700
}

.title-red {
    color: #2e8a35
}

.bg-height {
    min-height: 100vh
}

.under-construction img {
    height: 100vh;
    object-fit: contain;
    width: 100vw
}

@media (max-width:768px) {
    .desktop-size {
        content-visibility: hidden;
        display: none;
        visibility: hidden
    }
}

@media (min-width:800px) {
    .mobile-size {
        content-visibility: hidden;
        display: none;
        visibility: hidden
    }
}

.home-hero {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center
}

.image {
    background-position: top;
    background-position-y: 23em;
    background-repeat: no-repeat;
    display: block;
    height: 100vh;
    object-fit: cover;
    width: 100vw
}

.gradient-hero {
    display: inline-block;
    position: relative
}

.gradient-hero:after {
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 35%, #fff 60%);
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.red-box {
    border: 5px solid #96d0a1;
    left: 6rem;
    padding-bottom: 29em;
    padding-right: 38em;
    top: 25%;
    z-index: 10
}

.hero-title-box,
.red-box {
    content: "";
    position: absolute
}

.hero-title-box {
    color: #000;
    left: 11em;
    top: 38%;
    z-index: 11
}

.hero-title {
    font-size: 2.4rem
}

.choose-figure {
    display: inline-block;
    position: relative
}

.chooseFigureImg {
    display: block;
    height: 25em
}

.choose-figure-data {
    left: 25%;
    position: absolute;
    top: 25%
}

.figures-num {
    color: #fff
}

.figures-num h2 {
    font-size: 1.6em
}

.figures-num p {
    font-size: .8em
}

.choose-info {
    padding-right: 9em;
    width: 58%
}

.offer-lists li {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 2em;
    text-align: center
}

.offer-lists li img {
    height: 3.5em;
    margin-bottom: 2em;
    width: 3.5em
}

.home-offers {
    align-items: center;
    display: flex;
    flex-direction: column
}

.our-story-content p {
    margin-top: 2em;
    width: 40em
}

.our-story-video video {
    height: 100%;
    width: 45em
}

.appreciate-vide video {
    height: 25em;
    width: 42em
}

.motivated-image img {
    height: 10em;
    object-fit: cover;
    width: 30em
}

.motivated-content {
    width: 70vw
}

.about-hero {
    display: inline-block;
    min-height: 90vh;
    position: relative
}

.hero-image {
    content: "";
    height: 100vh;
    left: 0;
    object-fit: cover;
    position: block;
    top: 0;
    width: 100vw
}

.about-hero:after {
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, .953) 60%);
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.hero-content {
    left: 6em;
    position: absolute;
    top: 33%;
    z-index: 2
}

.hero-content h2 {
    font-size: 2.4rem
}

.hero-paragraph {
    margin-bottom: 1em;
    padding-top: .7em;
    width: 30em
}

.ceo-picture img {
    height: 28em;
    object-fit: cover;
    width: 25em
}

.ceo-message {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .082);
    margin-left: -10px;
    padding: 2em;
    width: 50em
}

.leader-list img {
    border-radius: 100%;
    height: 7em;
    object-fit: cover;
    object-position: top;
    width: 7em
}

.leaders-box {
    min-height: 50vh;
    position: relative
}

.background-grad {
    background-color: #f5f5f5;
    bottom: 0;
    content: "";
    height: 9em;
    margin-top: -12em;
    position: block
}

@media (max-width:780px) {
    .background-grad {
        background-color: #f5f5f5;
        bottom: 0;
        content: "";
        height: 7.6em;
        margin-top: -7em;
        position: block
    }
}

.our-team-content {
    width: 40vw
}

.mission-pic {
    height: 10em;
    object-fit: cover;
    width: 22em
}

.partner-link img {
    height: 6em;
    object-fit: contain;
    width: 6em
}

.partner-link {
    background-color: #fff;
    height: 6em;
    width: 13em
}

.partner-link:hover {
    border-radius: 5px;
    box-shadow: 0 0 5px #dfdfdf
}

.worked-with-list img {
    height: 7em;
    object-fit: contain;
    width: 7em
}

.worked-with-list {
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: 8em;
    width: 15em
}

.worked-with-list:hover {
    box-shadow: 0 0 7px #ececec
}

.navbar {
    background: #fff;
    min-width: 100vw;
    position: fixed;
    z-index: 100
}

.logo-section img {
    height: 2em
}

.footer {
    height: 17em
}

.link-section ul li h2 {
    font-size: .9em;
    font-weight: 200;
    margin-top: .4em;
    padding-left: 1em
}

.link-section h2 {
    font-size: 1.2em
}

@media(max-width:800px) {
    .link-section ul li h2 {
        font-size: .9em;
        font-weight: 200;
        margin-top: .4em;
        padding-left: 0
    }
}

.hero-services img {
    height: 50vh;
    min-width: 100vw;
    object-fit: cover;
    object-position: bottom
}

.hero-services {
    display: inline-block;
    position: relative
}

.hero-services h2 {
    left: 45%;
    position: absolute;
    top: 60%
}

.services-hashlinks {
    width: 80em
}

.infrastructure-list img {
    height: 5em;
    margin-bottom: 1em;
    object-fit: contain;
    width: 5em
}

.construction-container img {
    height: 20em;
    object-fit: cover;
    width: 40em
}

.water-sector-container img {
    height: 20em;
    width: 100vw
}

.water-sector-img {
    display: inline-block;
    position: relative
}

.water-section-content-hero {
    left: 35%;
    position: absolute;
    top: 40%
}

.region-we-work-content {
    width: 60em
}

.region-we-work-lists li {
    margin-bottom: 1em;
    padding-left: 6em
}

.region-we-work-img img {
    height: 15em;
    object-fit: cover;
    width: 100em
}

.tim-image img {
    height: 23em;
    object-fit: cover;
    width: 20em
}

.tim-bio {
    width: 60em
}

.renewable-img-box img {
    height: 20em;
    object-fit: cover;
    width: 30em
}

.renewable-content-box {
    width: 35vw
}

.renewable-service-lists li img {
    height: 5em;
    margin-bottom: 1em;
    object-fit: contain;
    width: 4em
}

.renewable-projects-img img {
    height: 15em;
    object-fit: contain
}

.content-img-section img {
    width: 30em
}

.content-img-section p {
    width: 35vw
}

.test-material-list:nth-child(2) {
    flex-direction: row-reverse
}

.test-material-list div img {
    height: 12em;
    object-fit: cover;
    width: 60em
}

.recruitment-pic-list img {
    height: 14em;
    object-fit: cover;
    width: 20em
}

.k9-offers img {
    height: 22em;
    object-fit: cover;
    width: 48vw
}

.peb-container img {
    height: 20em;
    object-fit: cover;
    width: 40vw
}

.hero-capability {
    display: inline-block;
    position: relative
}

.hero-capability:after {
    background: linear-gradient(270deg, rgba(0, 0, 0, .864) 32%, rgba(0, 0, 0, .06) 38%);
    display: inline-block;
    height: 100%;
    width: 100%
}

.hero-capability:after,
.hero-image img {
    content: "";
    left: 0;
    position: absolute;
    top: 0
}

.hero-image img {
    height: 100vh;
    object-fit: cover;
    width: 100vw
}

.hero-text {
    box-sizing: initial;
    content: "";
    left: 70%;
    position: absolute;
    top: 45%;
    width: 25em;
    z-index: 8
}

.hero-text h2 {
    color: #fff;
    font-size: 2em
}

.tough-project-list {
    display: inline-block;
    position: relative
}

.tough-project-list:after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .749) 45%, rgba(0, 0, 0, .06) 58%);
    content: "";
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.img-tough-project img {
    height: 25em;
    object-fit: cover
}

.content-tough-project {
    content: "";
    position: absolute;
    top: 55%;
    z-index: 9
}

.img-box-project img {
    height: 15em;
    object-fit: cover;
    width: 20em
}

.project-single-info {
    width: 40em
}

.gallery-banner {
    display: inline-block;
    position: relative
}

.gallery-banner:after {
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw
}

.gallery-content {
    left: 45%;
    position: absolute;
    top: 60%
}

.image-popup {
    background: rgba(0, 0, 0, .666);
    display: none;
    height: 100vh;
    left: 0;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 100
}

.image-container .image-popup span {
    color: #f0f8ff;
    cursor: pointer;
    left: 90vw;
    position: absolute;
    top: 15vh;
    z-index: inherit
}

.image-container .image-popup img {
    border: 2px solid #fff;
    left: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 45vw
}

@media (max-width:780px) {
    .image-container .image-popup img {
        width: 70vw
    }
}

.banner-img img {
    height: 23em;
    object-fit: cover;
    width: 35em
}

.contact-main {
    height: 80vh;
    margin-top: 4em
}

.banner-content {
    width: 60em
}

.successfull-message {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.form-box {
    box-shadow: 0 2px 5px 0 rgba(50, 50, 105, .15), 0 1px 1px 0 rgba(0, 0, 0, .05)
}

/*# sourceMappingURL=main.ba388623.css.map*/