* {
    box-sizing: border-box;
}


header {
    display: grid;
    padding: 48px 100px;
    column-gap: 32px;
    flex-shrink: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


#head-title {
    margin: 0;
    font-family: "Bai Jamjuree", sans-serif;
    font-size: 6.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 7rem;
    letter-spacing: -0.3rem;
}

#head-subtitle {
    font-family: "Bai Jamjuree", sans-serif;
    width: 80%;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
}


#banner-celestia {
    background:
        radial-gradient(131.66% 62.61% at 5.94% 100%, rgba(65, 182, 230, 0.80) 0%, rgba(159, 224, 250, 0.00) 100%), 
        radial-gradient(103.44% 47.12% at 100% 100%, rgba(253, 206, 214, 0.80) 0%, rgba(255, 223, 229, 0.00) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.91%, rgba(0, 0, 0, 0.50) 100%), url(../assets/images/celestia-Mockup.png) lightgray 50% / cover no-repeat;
    background-blend-mode: normal, normal, multiply, normal;
    color: #FFF;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.812rem;
    display: flex;
    width: 320px;
    height: 300px;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 24px;
    overflow: hidden;
}

.tag {
    font-family: "Bai Jamjuree", sans-serif;
    font-weight: 400;
    display: flex;
    padding: 2px 16px;
    align-items: flex-start;
    border-radius: var(--Corner-Full, 1000px);
    border: 1px solid #fff;
    color: #fff;
}

#arrow {
    background: url(../assets/images/arrow.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 50% 50%;
    rotate: 45deg;
    width: 52px;
    height: 52px;
    border-radius: 1000px;
    border: solid 2px #FFF;
    transition: 0.1s ease-in;
    
}

#arrow:hover {
    transform: rotate(-45deg);
}

.banner-slide {
    background: 
    radial-gradient(73.58% 88.59% at -4.88% 100%, #06F0FF 0%, rgba(6, 240, 255, 0.00) 100%), 
    radial-gradient(75.44% 81.69% at 113.57% 97.61%, #F0B90B 0%, rgba(240, 185, 11, 0.00) 100%), 
    radial-gradient(85.18% 89.35% at 0% 3.45%, #00FFA3 0%, rgba(0, 255, 163, 0.00) 100%), 
    url(../assets/images/banner-image.jpg) 30% / 1920px no-repeat;
    display: flex;
    color: #fff;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.625rem;
    flex: 1 0 0;
    align-self: stretch;
    grid-row: 1 / span 2;
    grid-column: 2 / span 1;
    border-radius: 24px;
}

.banner-button {
    background: #fff;
    display: flex;
    height: 60px;
    padding: 25px 42px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: none;
    transition: 0.3s ease-in-out;
}

.banner-button:hover {
    background: #000;
    color: #fff;
}


footer {
    background: #F8F9FA;
    display: flex;
    padding: 12px 100px 0px;
    flex-direction:row;
    align-content:center;
    justify-content: space-between;
    gap: 21px;
}