:root {
    --text-white: #ffffff;
    --text-dark: #161616;
    --text-gray: #878787;
    --background-dark: #161616;
    --background-dark-t: #1616167c;
    --background-dark-t: #1616161c;
    --background-light: #ffffff;
    --background-light-t: #ffffff00f;
    --background-light-10: #ffffff0f;
    --light-blue: #93fdfb;
    --hover-dark: #222222;

}

@font-face {
    font-family: 'Montserrat';
    src: url(Montserrat-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Karla';
    src: url(Karla-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Shadows';
    src: url(ShadowsIntoLight-Regular.ttf);
}
@font-face {
    font-family: 'Rocksalt';
    src: url(RockSalt-Regular.ttf);
}
@font-face {
    font-family: 'Lexend';
    src: url(Lexend-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Inter';
    src: url(Inter_VariableFont_opsz_wght.ttf);
}
@font-face {
    font-family: 'Source Sans';
    src: url(SourceSans3-VariableFont_wght.ttf);
}

ul {

}
li {
    display: block;
}

input {
    transition: all 0.2s;
}

input:hover {
    background: var(--hover-dark) !important;
}

.hidden-l {
    position: fixed;
    background: #222222;
    width: 100%;
    height: 100%;
    display: flex;
    top: 0%;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 150000;
    transition: all 0.3s;
}
.move-l {
    top: 100%;
    transition: all 0.3s;
}

.hide-banner {
    width: 100%;
    height: 72px;
    background: var(--background-dark);
    position: relative;
    top: -64px;
    z-index: 100;
}
.hide-banner-s {
    width: 100%;
    height: 72px;
    background: var(--background-dark);
    position: relative;
    top: -48px;
    z-index: 100;
}


.x {
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    box-sizing: border-box;
}

.bg-d {
    background: var(--background-dark);
}
.bg-t-d {
    background: var(--background-dark-t);
}
.bg-l {
    background: var(--background-light);
}
.bg-flower {
    background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: left;
    background-position-y: 372px;
    background-attachment: fixed;
}
.bg-flower-hd {
    background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: left;
    background-position-y: 372px;
    background-attachment: fixed;
}


.mh85vh {
    min-height: 85vh;
}
.w100p {
    width: 100%;
}
.w80p {
    width: 80%;
}
.mw50p {
    max-width: 50%;
}
.mw85p {
    max-width: 85%;
}
.wsect {
    width: 1280px;
}
.h200p {
    height: 200px;
}
.mh200p {
    max-height: 200px;
}

.p-tb-100p {
    padding-top: 100px;
    padding-bottom: 100px;
}
.p-tb-72p {
    padding-top: 72px;
    padding-bottom: 72px;
}
.p-t-72p {
    padding-top: 72px;
}
.p-t-16p {
    padding-top: 16px;
}
.p-b-72p {
    padding-bottom: 72px;
}
.p-lr-20p {
    padding-left: 20px;
    padding-right: 20px;
}

.mr-a {
    margin-right: auto;
}
.ml-a {
    margin-left: auto;
}
.mb-16p {
    margin-bottom: 16px;
}
.mb-32p {
    margin-bottom: 32px;
}
.mt-16p {
    margin-top: 16px;
}

.df {
    display: flex
}
.jcc {
    justify-content: center;
}
.jcfs {
    justify-content: flex-start;
}
.jcsb {
    justify-content: space-between;
}
.aic {
    align-items: center;
}
.fdc {
    flex-direction: column;
}
.fb-50p {
    flex-basis: 50%;
}

.hd-img {
    background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/header.jpg);
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: left;
    background-position-y: -20px;
    background-attachment: fixed;
}

.c-l {
    color: var(--light-blue)
}
.c-g {
    color: var(--text-gray)
}

.ta-c {
    text-align: center;
}
.ta-l {
    text-align: left;
}

.ff-src {
    font-family: 'Source Sans', serif;
}
.ff-int {
    font-family: 'Inter', serif;
}
.ff-mon {
    font-family: 'Montserrat', serif;
}
.ff-kar {
    font-family: 'Karla', serif;
}
.ff-sha {
    font-family: 'Shadows', serif;
}
.ff-roc {
    font-family: 'Rocksalt', serif;
}
.ff-lex {
    font-family: 'Lexend', serif;
}
.fs-56 {
    font-size: 56px;
}
.fs-46 {
    font-size: 46px;
}
.fs-32 {
    font-size: 32px;
}
.fs-24 {
    font-size: 24px;
}
.fs-20 {
    font-size: 20px;
}
.fs-18 {
    font-size: 18px;
}
.fs-16 {
    font-size: 16px;
}
.fs-12 {
    font-size: 12px;
}
.fw-700 {
    font-weight: 700;
}
.fw-500 {
    font-weight: 500;
}
.fw-400 {
    font-weight: 400;
}
.fw-300 {
    font-weight: 300;
}
.fw-200 {
    font-weight: 200;
}
.ls-4p {
    letter-spacing: 4px;
}
.ls-2p {
    letter-spacing: 2px;
}
.ls-1p {
    letter-spacing: 1px;
}
.ls-0p {
    letter-spacing: 0px;
}

.tx-w {
    color: var(--text-white);
}

.bw {
    border: 2px solid var(--text-white);
}
.br-10p {
    border-radius: 10px;
}

.buttonw {
    display: inline-flex;
    min-height: 56px;
    padding: 8px 32px;
    border-radius: 4px;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    background: var(--background-light-t);
    transition: all 0.3s;
}
.buttonw:hover {
    color: var(--text-dark);
    background: var(--background-light);
}

.in-t-l {
    padding: 14px 10px;
    font-size: 18px;
    background: none;
    border: none;
    border-bottom: 2px solid var(--text-white);
    width: 100%;
    color: var(--text-white);
    transition: all 0.3s;
}
.in-t-l:focus-visible {
    outline: none;
    background-color: var(--background-light-10);
    border-bottom: 2px solid var(--light-blue);
}
.in-ta-l {
    padding: 14px 10px;
    font-size: 18px;
    background: none;
    border: none;
    min-height: 200px;
    border-bottom: 2px solid var(--text-white);
    width: 100%;
    color: var(--text-white);
    transition: all 0.3s;
}
.in-ta-l:focus-visible {
    outline: none;
    background-color: var(--background-light-10);
    border-bottom: 2px solid var(--light-blue);
}

/* FOR CUSTOM SCROLL BAR */
/* ALL ITEMS WILL SIT INSIDE OF THIS FAKE BODY DIV */
.bd {
    overflow-y: scroll;
  }
  /* /* To style the document scrollbar, remove `.custom-scrollbar` */
  .bd::-webkit-scrollbar {
    width: 10px;
  }
  .bd::-webkit-scrollbar-track {
    background : #ffffff00;
    border-radius: 10px;
  }
  .bd::-webkit-scrollbar-thumb {
    background : rgba(255,255,255,0.5);
    border-radius: 10px;
    box-shadow:  0 0 6px rgba(0, 0, 0, 0.5);
  } 

  /* FOR DESKTOP 4K */
  @media (max-width: 1536px) {
    .wesct {
        width: 1280px;
    }
  }

  /* FOR DESKTOP */
  @media (max-width: 1280px) {
    .wsect {
        width: 1160px;
    }
  }

  /* FOR TABLETS */
  @media (max-width: 1024px) {
    .mh85vh {
        min-height: 85vh;
    }
    .w100p {
        width: 100%;
    }
    .w80p {
        width: 80%;
    }
    .mw50p {
        max-width: 50%;
    }
    .mw85p {
        max-width: 85%;
    }
    .wsect {
        width: 80%;
    }
    .mx85p {
        width: 85% !important;
    }
    .h200p {
        height: 200px;
    }
    .mh200p {
        max-height: 200px;
    }
    .fs-56 {
        font-size: 46px;
    }
    .fs-46 {
        font-size: 36px;
    }
    .fs-32 {
        font-size: 26px;
    }
    .fs-24 {
        font-size: 20px;
    }
    .fs-20 {
        font-size: 18px;
    }
    .fs-18 {
        font-size: 16px;
    }
    .fs-16 {
        font-size: 14px;
    }
    .fs-12 {
        font-size: 10px;
    }
    .bg-flower {
        background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
        background-size: auto, cover;
        background-repeat: no-repeat;
        background-blend-mode: normal;
        background-position: center;
        background-attachment: fixed;
        background-position-y: 240px;
    }
    
  }

  /* FOR TABLETS */
  @media (max-width: 540px) {

    .bg-flower {
        background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
        background-size: auto;
        background-repeat: no-repeat;
        background-blend-mode: normal;
        background-position: center;
    }
    .bg-flower-hd {
        background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
        background-size: auto;
        background-repeat: no-repeat;
        background-blend-mode: normal;
        background-position: center;
    }

  }

  /* FOR PHONES */
  @media (max-width: 430px) {
    .hide-banner {
        width: 100%;
        height: 85px;
        background: var(--background-dark);
        position: relative;
        top: -90px;
        z-index: 100;
    }
    .fd-ci {
        flex-direction: column-reverse;
    }
    .fd-c {
        flex-direction: column;
    }
    .fb-50p {
        flex-basis: 100%;
    }
    .mh85vh {
        min-height: 85vh;
    }
    .mx85p {
        width: 85% !important;
    }
    .w100p {
        width: 100%;
    }
    .w80p {
        width: 80%;
    }
    .mw50p {
        max-width: 100%;
    }
    .mw85p {
        max-width: 85%;
    }
    .wsect {
        width: 95%;
    }
    .h200p {
        height: 200px;
    }
    .mh200p {
        max-height: 200px;
    }
    .fs-56 {
        font-size: 46px;
    }
    .fs-46 {
        font-size: 36px;
    }
    .fs-32 {
        font-size: 26px;
    }
    .fs-24 {
        font-size: 20px;
    }
    .fs-20 {
        font-size: 18px;
    }
    .fs-18 {
        font-size: 16px;
    }
    .fs-16 {
        font-size: 14px;
    }
    .fs-12 {
        font-size: 10px;
    }


    .bg-flower {
        background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
        background-size: auto, cover;
        background-repeat: no-repeat;
        background-blend-mode: normal;
        background-position: center;
    }
    .bg-flower-hd {
        background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.25) 0%, rgba(22, 22, 22, 0.25) 100%), url(assets/flower.jpg);
        background-size: auto, cover;
        background-repeat: no-repeat;
        background-blend-mode: normal;
        background-position: center;
    }

    
  }

  /* FOR SMALLER PHONES */
  @media (max-width: 390px) {

    .fs-56 {
        font-size: 36px;
    }
    .fs-46 {
        font-size: 28px;
    }
    .fs-32 {
        font-size: 22px;
    }
    .fs-24 {
        font-size: 18px;
    }
    .fs-20 {
        font-size: 16px;
    }
    .fs-18 {
        font-size: 14px;
    }
    .fs-16 {
        font-size: 12px;
    }
    .fs-12 {
        font-size: 9px;
    }

    .buttonw {
        padding: 0px;
        width: 100%;
    }

  }