body {
    margin: 0;
    /* line-height: normal;
    background-image: url("../storage/images/background/student-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; */
}

:root {
    /* fonts */
    --font-poppins: Poppins;
    --font-roboto: Roboto;
    --font-changa-one: "Changa One";
    --font-dm-sans: "DM Sans";
    --font-tomorrow: Tomorrow;
    --font-montserrat: Montserrat;

    /* font sizes */
    --font-size-base: 16px;
    --font-size-21xl: 40px;
    --font-size-23xl: 42px;
    --font-size-5xl: 24px;
    --font-size-3xl: 22px;
    --font-size-lg: 18px;
    --font-size-17xl: 36px;
    --font-size-7xl: 26px;
    --font-size-xl: 20px;
    --font-size-13xl: 32px;
    --font-size-smi: 13px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-2xl: 21px;
    --font-size-20xl: 39px;
    --font-size-mid: 17px;

    /* Colors */
    --white2: #fff;
    --color-orange: #f99a0e;
    --color-darkorange: #dc880b;
    --color-silver-100: #bdbdbd;
    --st1: #5d4e7b;
    --color-darkslateblue-100: #23113d;
    --text-color-02: #8a8a8c;
    --color-gray-100: #888;
    --black2: #1e253a;
    --black1: #1c1c1f;
    --text-21: #151630;
    --black: #0d1118;
    --color-gray-200: rgba(0, 0, 0, 0.87);
    --other-outlined-border: rgba(0, 0, 0, 0.23);
    --color-indigo: #4e1d95;
    --color-aliceblue: #f3faff;
    --color-darkslategray-100: #434343;
    --color-darkslategray-200: #303030;
    --color-thistle: #dbc9ee;
    --color-blueviolet-100: #8a53ff;
    --st: #783efd;
    --color-blueviolet-200: #7d1ae5;
    --color-blueviolet-300: #5922ce;
    --color-lightslategray-100: #939eb4;
    --color-lightslategray-200: #949aa6;
    --color-lightslategray-300: #8a8b9f;
    --grey-mid: #838690;
    --color-gainsboro-100: #e6e6e6;
    --color-gainsboro-200: #e0e0e0;
    --color-whitesmoke-100: #f9f9f9;
    --text-color: #777e8a;
    --color-slategray-100: #576074;
    --text-2: #6b6570;
    --color-dimgray-100: #616161;
    --color-dimgray-200: #495367;
    --color-ghostwhite: #f3f5fa;
    --green: #3ecd7b;
    --green1: #34c98e;
    --nd: #fe8f66;
    --yellow-02: #ffcc40;
    --color-lavender-100: #d1d8ef;
    --red: #f32323;
    --color-slateblue: #4f46ba;
    --purple: #4e36fc;

    /* Gaps */
    --gap-xs: 12px;
    --gap-3xs: 10px;
    --gap-10xs: 3px;
    --gap-lgi: 19px;
    --gap-6xs: 7px;
    --gap-5xs: 8px;
    --gap-lg: 18px;
    --gap-base: 16px;
    --gap-12xs: 1px;
    --gap-35xl: 54px;
    --gap-11xl: 30px;
    --gap-31xl: 50px;
    --gap-xl: 20px;
    --gap-9xs: 4px;
    --gap-7xs: 6px;
    --gap-9xl: 28px;
    --gap-mini: 15px;
    --gap-5xl: 24px;
    --gap-12xl: 31px;
    --gap-8xs: 5px;
    --gap-smi: 13px;
    --gap-6xl: 25px;
    --gap-78xl: 97px;

    /* Paddings */
    --padding-121xl: 140px;
    --padding-11xl: 30px;
    --padding-3xs: 10px;
    --padding-17xl: 36px;
    --padding-81xl: 100px;
    --padding-xl: 20px;
    --padding-35xl: 54px;
    --padding-88xl: 107px;
    --padding-61xl: 80px;
    --padding-41xl: 60px;
    --padding-21xl: 40px;
    --padding-5xl: 24px;
    --padding-47xl: 66px;
    --padding-69xl: 88px;
    --padding-362xl: 381px;
    --padding-sm: 14px;
    --padding-37xl: 56px;
    --padding-199xl: 218px;
    --padding-lg: 18px;
    --padding-12xl: 31px;
    --padding-12xs: 1px;
    --padding-18xl: 37px;
    --padding-19xl: 38px;
    --padding-124xl: 143px;
    --padding-25xl: 44px;
    --padding-471xl: 490px;
    --padding-281xl: 300px;
    --padding-9xs: 4px;
    --padding-5xs: 8px;
    --padding-7xs: 6px;
    --padding-13xl: 32px;
    --padding-34xl: 53px;
    --padding-126xl: 145px;
    --padding-248xl: 267px;
    --padding-111xl: 130px;
    --padding-base: 16px;
    --padding-7xl: 26px;
    --padding-24xl: 43px;
    --padding-272xl: 291px;
    --padding-29xl: 48px;
    --padding-189xl: 208px;
    --padding-106xl: 125px;
    --padding-8xs: 5px;
    --padding-6xs: 7px;
    --padding-mini: 15px;
    --padding-140xl: 159px;
    --padding-101xl: 120px;
    --padding-9xl: 28px;
    --padding-64xl: 83px;
    --padding-2xs: 11px;
    --padding-xs: 12px;
    --padding-10xs: 3px;
    --padding-100xl: 119px;
    --padding-11xs: 2px;
    --padding-3xl: 22px;
    --padding-smi: 13px;

    /* border radiuses */
    --br-3xs: 10px;
    --br-8xs: 5px;
    --br-xl: 20px;
    --br-lgi-5: 19.5px;
    --br-mini: 15px;
    --br-2xs: 11px;
    --br-5xs: 8px;
    --br-9xs: 4px;
    --br-11xs: 2px;
    --br-base: 16px;
    --br-45xl: 64px;
    --br-11xl: 30px;
    --br-smi: 13px;
}

.icon {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    height: 1080px;
    object-fit: cover;
}
    .open-kids-login {
    position: relative;
    line-height: 40px;
}
.open-kids-login-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--padding-3xs) var(--padding-3xs) 0;
    align-items: flex-start;
    justify-content: flex-start;
}
.welcome-kiddo {
    align-self: stretch;
    position: relative;
    font-size: var(--font-size-21xl);
    line-height: 80px;
    text-transform: uppercase;
    display: flex;
    color: var(--color-indigo);
    align-items: center;
    justify-content: center;
    height: 44px;
    flex-shrink: 0;
}
.log-in-to {
    position: relative;
    line-height: 30px;
}
.log-in-to-access-your-profile-wrapper {
    display: flex;
    flex-direction: row;
    padding: 0 var(--padding-3xs) var(--padding-3xs);
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--color-gray-100);
}
.title {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 133px 0 45px;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    text-align: center;
}
.student-id {
    position: relative;
    display: inline-block;
    width: 397px;
}
.departure-field {
    border: 1px solid #cecece;
    background-color: transparent;
    border-radius: var(--br-8xs);
    box-sizing: border-box;
    width: 400px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 15px;
    font-weight: 400;
}
.login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.button,
.departure-field {
    font-size: var(--font-size-base);
    font-family: var(--font-poppins);
}
.button {
    position: relative;
    display: inline-block;
    color: var(--white2);
    text-align: center;
    width: 146.98px;
}
.search-flights-button {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
    border-radius: var(--br-3xs);
    background: linear-gradient(90deg, #7d1ae5, #ad6eff);
    width: 397px;
    height: 50px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.search-flights-button:hover {
    background-color: var(--color-darkorange);
}
.search-flights-button-wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--padding-17xl) var(--padding-3xs) var(--padding-3xs);
    align-items: flex-start;
    justify-content: flex-start;
}
.dr-liang-logo-png-1 {
    position: relative;
    width: 120px;
    height: 62.52px;
    flex-shrink: 0;
    object-fit: cover;
}
.dr-liang-logo-png-1-wrapper,
.search-container {
    display: flex;
    flex-direction: column;
    padding: 64px var(--padding-3xs) 0;
    align-items: center;
    justify-content: flex-start;
}
.search-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 950px;
    padding: 0 var(--padding-121xl);
    box-sizing: border-box;
    justify-content: center;
    gap: var(--gap-xs);
}
.search-section {
    align-self: stretch;
    position: relative;
    height: 1080px;
    flex-shrink: 0;
}
.hero-section,
.homepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hero-section {
    align-self: stretch;
    flex: 1;
}
.homepage {
    position: relative;
    background-color: var(--white2);
    width: 100%;
    height: 1080px;
    overflow: hidden;
    text-align: left;
    font-size: var(--font-size-base);
    color: var(--color-darkslateblue-100);
    font-family: var(--font-poppins);
}
.homepage:hover {
    background: linear-gradient(#fff, #fff), #87550a;
}
@media screen and (max-width: 1200px) {
.search-container,
.search-flights-button {
    align-items: center;
    justify-content: center;
}
.search-container {
    width: 100%;
}
.search-section {
    height: 800px;
}
.hero-section {
    height: 100%;
    align-items: center;
    justify-content: flex-start;
}
}
@media screen and (max-width: 960px) {
    .icon {
        width: 1440px;
        height: 1080px;
    }
    .search-flights-button {
        width: 397px;
        align-items: center;
        justify-content: center;
    }
    .search-container {
        padding-left: var(--padding-11xl);
        padding-right: var(--padding-11xl);
        box-sizing: border-box;
    }
}

@media screen and (max-width: 420px) {
.icon {
    height: 1080px;
}
.open-kids-login-wrapper {
    padding-top: var(--padding-81xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
}
.welcome-kiddo {
    font-size: var(--font-size-23xl);
    line-height: 48px;
}
.log-in-to-access-your-profile-wrapper {
    gap: var(--gap-3xs);
    padding-top: 25px;
    box-sizing: border-box;
}
.arrival-field,
.departure-field,
.student-id {
    width: 100%;
}
.search-flights-button {
    width: 100% !important;
}
.homepage {
    width: 100%;
}
.homepage:hover {
    background-color: var(--color-orange);
}
}