* {
    --primary: #00C2E8;
    --secondary: #009fc0;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}

a {
    text-decoration: none;
}

.section-info {
    position: relative;
    margin: 40px 0;
    padding: 20px 0;
}

.section-title {
    position: relative;
    font-size: 20px;
    color: #bdbdbd;
}

.section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -220px;
    transform: translateY(-50%);
    width: 210px;
    height: 1px;
    background-color: #bdbdbd;
}

.section-logo {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.section-logo-img-container {
    text-align: center;
}

.section-logo-text {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

/* TOP */
#top {
    background-color: var(--primary);
    background-image: url('/assets/img/section-bg-up-aqua.svg');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: start;
    align-items: end;
    height: 100vh;
    width: 100%;
}

.section-top-content {
    padding: 40px 100px;
}

.section-top-logo-container {
    text-align: center;
    margin-bottom: 40px;
}

.section-top-logo {
    width: 360px;
}

.section-top-title {
    font-size: 80px;
    font-weight: 700;
    color: #fff;
}
/* END TOP */

/* MAIN */
.section-main-grid {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    gap: 40px;
}

.section-main-grid-left {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.section-main-logo {
    width: 160px;
}

.section-main-title {
    font-size: 50px;
    font-weight: 600;
    margin: 40px 0;
}

.section-main-title br {
	display: none;	
}

.section-main-texts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-main-links {
    display: flex;
    gap: 20px;
}

.section-main-link:first-child .section-main-link-img {
	width: 200px;
}

.section-main-link:last-child .section-main-link-img {
	width: 219px;
}

.section-main-img-container {
    text-align: center;
}

.section-main-img {
    width: 440px;
}
/* END MAIN */

/* ABOUT */
.section-about-grid {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    gap: 40px;
}

.section-about-grid-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 80px;
}

.section-about-title {
    font-size: 50px;
    font-weight: 600;
}

.section-about-panel {
    border-radius: 20px;
    padding: 20px;
    font-size: 30px;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

.section-about-img-container {
    text-align: center;
}

.section-about-img {
    width: 400px;
}
/* END ABOUT */

/* SOLUTION */
.section-solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.section-solution-grid-left {
    display: flex;
    align-items: center;
}

.section-solution-title {
    font-size: 50px;
    font-weight: 600;    
}

.section-solution-list {
    margin: 0;
    padding: 20px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-solution-list-item {
    display: flex;
    align-items: start;
    gap: 20px;
}

.section-solution-list-item-icon {
    margin-top: 15px;
    width: 50px;
}

.section-solution-list-item-text {
    font-size: 30px;
}
/* END SOLUTION */

/* HELP */
.section-help-title {
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    margin: 30px 0;    
}

.section-help-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 60px;
}

.section-help-cell {
    position: relative;
}

.section-help-img {
    width: 100%;
}

.section-help-cell-block {
    position: absolute;
    z-index: 10;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
    background-color: #fff;
    width: 380px;
}

.section-help-cell-block-1 {
    bottom: 20%;
    right: -10%;
}

.section-help-cell-block-2 {
    bottom: 55%;
    right: 20%;
}

.section-help-cell-block-3 {
    bottom: 25%;
    right: 20%;
}

.section-help-cell-block-4 {
    bottom: 10%;
    right: -20%;
}

.section-help-cell-block-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.section-help-cell-block-text {
    font-size: 14px;
}
/* END HELP */

/* ADVANTAGES */
.section-advantages-title {
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    margin: 30px 0;    
}

.section-advantages-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1%;
    row-gap: 20px;
}

.section-advantages-list-item {
    width: 30%;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
	box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

.section-advantages-list-item-title {
    font-weight: 600;
    margin: 20px 0;
}

.section-advantages-list-item-img {
    width: 100px;
}
/* END ADVANTAGES */

/* FUTURE */
.section-future-title {
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    margin: 30px 0;   
}

.section-future-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 60px;
}

.section-future-list-item {
    position: relative;
}

.section-future-list-item-img {
    width: 100%;
}

.section-future-list-item-panel {
    position: absolute;
    z-index: 10;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    font-size: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

.section-future-list-item-panel-1 {
    bottom: 3%;
    right: 20%;
    width: 300px;
}

.section-future-list-item-panel-2 {
    bottom: 40%;
    right: 5%;
    width: 300px;
}

.section-future-list-item-panel-3 {
    bottom: 10%;
    right: 20%;
    width: 300px;
}

.section-future-list-item-panel-4 {
    bottom: 35%;
    right: -10px;
    width: 350px;
}

.section-future-list-item-panel-title {
    font-weight: 600;
}
/* END FUTURE */

/* JOIN */
.section-join-grid {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    gap: 40px;
}

.section-join-grid-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section-join-title {
    font-size: 50px;
    font-weight: 600;  
    margin-bottom: 40px;
}

.section-join-text {
    font-size: 30px;
}

.section-join-qrs {
    display: flex;
    gap: 20px;
}

.section-join-qr-img {
    width: 200px;
}

.section-join-img-container {
    text-align: center;
}

.section-join-img {
    width: 400px;
}
/* END JOIN */

/* BOTTOM LINKS */
.section-bottom-links-grid {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.section-bottom-link {
	text-align: center;	
}

.section-bottom-link:first-child .section-bottom-link-img {
	width: 200px;
}

.section-bottom-link:last-child .section-bottom-link-img {
	width: 219px;
}
/* END BOTTOM LINKS */

/* CONTACT */
#contact {
    background-color: var(--secondary);
    background-image: url('/assets/img/section-bg-up-aqua.svg');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;    
    color: #fff;
    margin-bottom: 0;
}

#contact a {
    color: #fff;
}

#contact .section-title {
    color: #fff;
}

#contact .section-title::before {
    background-color: #fff;
}

#contact .section-logo-text {
    color: #fff;
}

.section-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.section-contact-title {
    font-size: 50px;
    font-weight: 500;
    margin: 80px 0 40px;    
}

.section-contact-list {
    margin: 20px 0;
    padding: 20px;
    list-style: none;
    border: 1px solid #fff;
    border-radius: 20px;
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-contact-list-item-link {
    font-size: 30px;
}

.section-contact-list-item-socials {
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

.section-contact-list-item-social-icon {
    width: 30px;
}

.section-contact-text {
    margin: 40px 0 40px;
    font-size: 30px;
    color: #bebebe;
}
/* END CONTACT */

@media (max-width: 1199px) {
    .section-main-img {
        width: 100%;
    }

    .section-about-img {
        width: 100%;
    }

    .section-help-cell-block {
        transform: translate(50%,50%);
    }

    .section-help-cell-block-1 {
        bottom: 20%;
        right: 50%;
    }

    .section-help-cell-block-2 {
        bottom: 60%;
        right: 50%;
    }

    .section-help-cell-block-3 {
        bottom: 20%;
        right: 50%;
    }

    .section-help-cell-block-4 {
        bottom: 60%;
        right: 50%;
    }

    .section-solution-list-item-text {
        font-size: 18px;
    }

    .section-future-list-item-panel-1 {
        right: 0;
    }

    .section-future-list-item-panel-2 {
        bottom: 60%;
    }

    .section-future-list-item-panel-4 {
        bottom: 50%;
    }

    .section-join-img {
        width: 100%;
    }
}

@media (max-width: 991px) {
	.hidden-lg {
		display: none;	
	}
	
	.section-title {
		display: none;	
	}
	
	.section-logo {
		display: none;	
	}
	
    .section-main-grid {
        grid-template-columns: 1fr;
    }
	
	.section-main-title br {
		display: block;	
	}
	
	.section-main-title-sm {
		margin-top: 40px;
		display: block;
		font-size: 18px;
		line-height: 1.5;	
	}

    .section-about-grid {
        grid-template-columns: 1fr;
    }

    .section-about-grid-left {
        gap: 20px;
    }

    .section-main-grid-left-top {
        text-align: center;
    }

    .section-main-links {
        justify-content: center;
		align-items: center;
    }

    .section-about-title {
        margin: 20px 0;
        text-align: center;
    }

    .section-about-panel {
        font-size: 18px;
    }

    .section-solution-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-solution-title {
        margin-top: 20px;
        text-align: center;
    }

    .section-help-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-future-list {
        grid-template-columns: 1fr 1fr;
    }

    .section-join-grid {
        grid-template-columns: 1fr;
    }

    .section-join-title {
        text-align: center;
    }

    .section-join-text {
        margin-bottom: 20px;
        text-align: center;
    }

    .section-join-qrs {
        justify-content: center;
    }

    #contact {
        background-image: none;
    }

    .section-contact-grid {
        grid-template-columns: 1fr;
		gap: 0;
    }

    .section-contact-title {
        text-align: center;
    }

    .section-contact-list {
        width: 100%;
        text-align: center;
		margin: 40px 0;
    }

    .section-contact-text {
        font-size: 18px;
        text-align: center;
    }

    .section-contact-text br {
        display: none;
    }
}

@media (max-width: 767px) {
    #top {
        background-size: cover;
        justify-content: center;
        align-items: center;
    }

    .section-top-content {
        padding: 15px;
    }

    .section-top-logo {
        width: 200px;
    }
    
    .section-top-title {
        font-size: 40px;
        text-align: center;
    } 

    .section-about-title br {
        display: none;
    }

    .section-advantages-list-item {
        width: 100%;
    }

    .section-help-grid {
        grid-template-columns: 1fr;
    }

    .section-help-img {
        width: 100%;
    }

    .section-help-cell-block {
        width: 100%;
    }

    .section-help-cell-block-1 {
        bottom: 60%;
    }

    .section-help-cell-block-2 {
        bottom: 60%;
    }

    .section-help-cell-block-3 {
        bottom: 60%;
    }

    .section-help-cell-block-4 {
        bottom: 60%;
    }

    .section-help-cell-block-title {
        font-size: 1.25rem;
    }

    .section-help-cell-block-text {
        font-size: 18px;
    }

    .section-future-list {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .section-future-list-item-img {
        width: 100%;
        display: none;
    }

    .section-future-list-item-panel {
        position: static;
        width: 100% !important;
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .section-main-logo-container {
        text-align: center;
    }

    .section-main-title {
        font-size: 30px;
    }

    .section-main-link:first-child .section-main-link-img {
        width: 150px;
    }
	
	.section-main-link:last-child .section-main-link-img {
        width: 169px;
    }

    .section-about-title {
        font-size: 30px;
    }

    .section-about-title br {
        display: none;
    }

    .section-about-panel {
        padding: 10px;
        border-radius: 10px;
    }

    .section-solution-title {
        font-size: 30px;
    }
	
	.section-solution-list-item-icon {
		margin-top: 10px;	
	}

    .section-help-title {
        font-size: 30px;
    }

    .section-help-cell-block {
        padding: 10px;
        border-radius: 10px;
    }

    .section-advantages-title {
        font-size: 30px;
    }

    .section-future-title {
        font-size: 30px;
    }

    .section-future-list-item-panel {
        padding: 10px;
        border-radius: 10px;
    }

    .section-join-title {
        margin-top: 40px;
        font-size: 30px;
    }

    .section-join-text {
        font-size: 18px;
    }

    .section-join-qr-img {
        width: 100%;
    }
	
	.section-bottom-link:first-child .section-bottom-link-img {
		width: 150px;
	}

	.section-bottom-link:last-child .section-bottom-link-img {
		width: 169px;
	}

    .section-contact-title {
        font-size: 30px;
    }
}