:root {
    --white: #fff;
    --black: #232323;
    --orange: #f7931e;
    --blue: #0090e8;
    --blue_09: rgba(0, 144,232, 0.9);
    --blue-light: #a2e3fc;
    --gray: #595959;
}

html {
    height: 100%; margin: 0; font-family: "Inter", sans-serif; color: var(--white); background: var(--white);
}

body {
    height: 100%; margin: 0; 
}

h1 {
    margin: 0; color: var(--orange); font-size: 48px; line-height: 56px;
}

h1 span {
    color: var(--blue);
}

a {
    text-decoration: none;
}

img {
    display: block;
}

.header {
    position: absolute; width: 100%; padding-top: 16px;
}

.header .container {
    width: 1800px; margin: 0 auto; display: flex; align-items: end;
}

.header .container .left {
    display: flex; align-items: end; gap: 30px;
}

.header .container .left .separator {
    height: 29px; width: 3px; background: var(--blue-light); margin-bottom: 4px; border-radius: 4px;
}

.header .container .left .solar_carports {
    color: var(--gray); font-size: 24px; font-weight: 700; margin-bottom: 4px;
}

.header .container .right {
    margin-left: auto;
}

.header .container .right a {
    background: var(--blue); color: var(--white); height: 42px; width: 134px; display: flex; border-radius: 21px; align-items: center; font-size: 16px; font-weight: 700; 
    justify-content: center;
}

.hero {
    background: url("../images/bg.jpg"); height: 100%; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat;
}

.hero .content {
    width: 540px; position: absolute; top: 38%; left: 27%;
}

.hero .content .download {
    display: flex; gap: 20px; margin-top: 20px;
}

.hero .content .download a {
    background: var(--blue); color: var(--white); height: 40px; border-radius: 20px; display: flex; align-items: center; padding: 0 20px; gap: 8px; font-weight: 700; font-size: 16px;
}

.qr_list {
    display: none; gap: 30px; position: absolute; right: 106px; bottom: 128px; z-index: 2;
}

.qr_list .qr {
    height: 165px; width: 160px; border-radius: 10px; background: var(--white); display: flex; flex-direction: column; align-items: center; box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.3);
}

.qr_list .qr img {
    margin: auto;
}

.qr_list .qr .title {
    background: var(--blue); color: var(--white); height: 35px; font-size: 20px; font-weight: 700; width: 100%; display: flex; align-items: center; justify-content: center;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}

.footer {
    width: 100%; position: absolute; bottom: 0; height: 200px; background: linear-gradient(360deg, #e0e7ec 24.36%, rgba(219, 232, 240, 0) 77.09%); display: flex; align-items: flex-end;
    padding-bottom: 24px; box-sizing: border-box;
}

.footer .container {
    width: 1700px; margin: 0 auto; display: flex; color: var(--black); font-weight: 700; font-size: 20px; height: 100%; justify-content: space-between; align-items: flex-end;
}

.footer .container a {
    color: var(--black);
}

.footer .container > div {
    display: flex; gap: 12px; align-items: flex-end;
}

@media only screen and (max-width: 1824px) {
    .header .container {
        width: calc(100% - 24px); margin: 0 auto;
    }
}

@media only screen and (max-width: 1724px) {
    .footer .container {
        width: calc(100% - 24px); margin: 0 auto;
    }
    
    .qr_list {
        right: 24px;
    }
}

@media only screen and (max-width: 1500px) {
    .footer .container {
        font-size: 18px;
    }
    
    .footer .container > div {
        gap: 4px;
    }
}

@media only screen and (max-width: 1340px) {
    h1 {
        left: 20%;
    }
    
    .header {
        padding-top: 4px;
    }
    
    .footer {
        padding-bottom: 12px; background: linear-gradient(360deg, #e0e7ec 58.07%, rgba(219, 232, 240, 0) 77.09%); height: 260px;
    }
    
    .footer .container {
        font-size: 16px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
    }
    
    .qr_list {
        bottom: 12px;
    }
}

@media only screen and (max-width: 1120px) {
    .hero .content {
        left: 50%; transform: translateX(-50%);
    }
}

@media only screen and (max-width: 740px) {
    h1 {
        font-size: 42px; line-height: 44px;
    }
    
    .qr_list {
        top: 60%; left: 50%; transform: translate(-50%, -50%); bottom: unset; width: 350px;
    }
    
    .header .container .left {
        gap: 12px;
    }
    
    .hero {
        background: url(../images/bg-mobile.jpg); background-position: top left; background-size: cover; background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 600px) {
    .header .container .left {
        flex-direction: column; align-items: flex-start; gap: 4px;
    }
    
    .header .container .left .separator {
        display: none;
    }
    
    .header .container .left .solar_carports {
        font-size: 14px; font-weight: 700;
    }
    
    .hero .content {
        width: calc(100% - 24px); left: 0; transform: none; position: relative; margin: 0 auto; top: 25%;
    }
    
    .hero .content .download {
        flex-direction: column;
    }
    
    .hero .content .download a {
        align-self: flex-start;
    }
    
    .header .container .right {
        margin: auto 0 auto auto;
    }
}

@media only screen and (max-width: 500px) {
    h1 {
        font-size: 38px; line-height: 44px;
    }
}

@media only screen and (max-width: 440px) {
    .header .container .left img {
        width: 150px;
    }
        
    .qr_list {
        width: 100%; justify-content: space-evenly; gap: 0;
    }
}