﻿* { box-sizing: border-box; }
:root { --primary-color: #f68d2e; --secondary-color: #FBDFC5; --text-color: #000; --band-margin: 100px; --global-padding-inline: 190px; }

html, body { margin: 0; padding: 0; font-size: 1rem; }
h1, h2, h3, h4, h54, h6 { margin: 0; }

body { font-family: "DM Sans", sans-serif; }

img { height: auto; display: block; }

::-webkit-scrollbar-track { background-color: #FFF; }
::-webkit-scrollbar { width: 6px; background-color: #FFF; }
::-webkit-scrollbar-thumb { background: var(--primary-color); }

.header-wrapper { display: flex; justify-content: center; height: 135px; }
.header-logo { width: 300px; height: auto; }

.header-image-wrapper { position: relative; }
.header-image-wrapper:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 10; }
.header-image { width: 100%; height: auto; display: block; }
.header-text-wrapper { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); text-align: center; width: 90%; z-index: 20; }
.header-text-title { color: #FFF; font-size: 5rem; line-height: 5.3rem; font-weight: 600; text-shadow: 0 0 5px rgba(0,0,0,.3); }
.header-text-abstract { color: #FFF; font-size: 4.2rem; line-height: 4.2rem; font-weight: 600; }

.content-inner-wrapper { padding: 50px; }
.content-inner-wrapper:nth-child(odd) { background: var(--secondary-color); }
.content-inner-wrapper > *:not(.videos-wrapper), .video-wrapper { }
.content-inner-wrapper .flex-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px; max-width: 80%; margin-inline: auto; }
.content-inner-wrapper .flex-content a { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--text-color); font-size: 1.8rem; line-height: 1.1; text-decoration: none; background: var(--primary-color); padding: 12px 35px; border-radius: 50px; width: fit-content; transition: .3s linear; }
.content-inner-wrapper .flex-content a > svg { width: 30px; height: 30px; }

.intro-text-wrapper { text-align: center; }
.intro-title { font-size: 5rem; line-height: 5.3rem; color: var(--primary-color); font-weight: 700; margin-bottom: 50px; }
.intro-abstract { color: var(--text-color); font-size: 1.8rem; line-height: 2.4rem; }

.videos-wrapper { margin-bottom: var(--band-margin); }
.video-wrapper { text-align: center; }
.video-wrapper:not(:last-child) { margin-bottom: calc(var(--band-margin) * 0.8); }
.video-title { font-size: 2.65rem; line-height: 3rem; color: var(--primary-color); font-weight: 700; margin-bottom: 40px; }
.video-item { width: 100%; height: auto; display: block; }

.banner-contacts-wrapper { position: relative; }
.banner-contacts-wrapper:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 10; }
.banner-contacts-image { width: 100%; height: auto; display: block; object-fit: cover; min-height: 300px; }
.banner-contacts-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%; z-index: 20; }
.banner-contacts-title { color: #FFF; font-size: 5rem; line-height: 5.3rem; text-transform: uppercase; font-weight: 600; margin-bottom: 30px; }
.banner-contacts-link { color: #FFF; display: inline-block; text-decoration: none; border: 2px solid #FFF; padding: 12px 35px; border-radius: 40px; font-size: 1.3rem; transition: 0.3s linear; }

.footer-wrapper { background-color: #FFF; padding-block: 50px; padding-inline: var(--global-padding-inline); display: flex; justify-content: space-between; align-items: center; }
.footer-logo { width: 180px; margin-bottom: 20px; }
.footer-copyright { color: var(--text-color); font-size: 0.95rem; line-height: 1.3rem;}
.footer-sx {margin-inline:auto; text-align: center;}

.logo-siglacom-wrapper { width: 100px; height: 51px; display: inline-block; }
.logo-siglacom-wrapper > svg { width: 100px; height: 51px; fill: #000; filter: brightness(0); }

/*RGB*/
/*.header-image {box-sizing: border-box; border: solid var(--b) #0000; object-fit: cover; border-radius: calc(2*var(--b)); background: repeating-conic-gradient(from var(--a, 0deg), var(--l, #0000 0% 70%, #0000ff7f)) border-box; filter: var(--f, url(#glow-0)); animation: a 2s linear infinite; --f: url(#glow-1); --l: #ff45457f, #00ff997f, #006aff7f, #ff00957f, #ff45457f}*/

@property --a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

@keyframes a { to { --a: 1turn } }

@media (pointer:fine) {
    .banner-contacts-link:hover { background: var(--secondary-color); }
    .content-inner-wrapper .flex-content a:hover { transform: scale(1.05); }
}

@media (min-width:2200px) {
    :root { --global-padding-inline: 250px; }
}

@media (max-width:1800px) {
    :root { --global-padding-inline: 150px; }
    .intro-title { font-size: 4.5rem; line-height: 4.8rem; }
    .banner-contacts-title { font-size: 4.5rem; line-height: 4.8rem; }
}

@media (max-width:1600px) {
    :root { --global-padding-inline: 120px; }
    .header-text-title { font-size: 4.5rem; line-height: 4.8rem; }
    .header-text-abstract { font-size: 4rem; line-height: 4rem; }
    .intro-title { font-size: 4.2rem; line-height: 4.5rem; }
    .intro-abstract, .content-inner-wrapper .flex-content a { font-size: 1.6rem; line-height: 2.2rem; }
    .banner-contacts-title { font-size: 4.2rem; line-height: 4.5rem; }
    .video-title { font-size: 2.5rem; line-height: 2.8rem; }
}

@media (max-width:1400px) {
    :root { --band-margin: 80px; --global-padding-inline: 100px; }
    .header-logo { width: 280px; }
    .header-text-title { font-size: 4rem; line-height: 4.3rem; }
    .header-text-abstract { font-size: 3.8rem; line-height: 3.8rem; }
    .intro-title { margin-bottom: 35px; }
    .video-title { font-size: 2.35rem; line-height: 2.65rem; }
}

@media (max-width:1200px) {
    :root { --band-margin: 60px; --global-padding-inline: 60px; }
    .header-text-abstract { font-size: 3.6rem; line-height: 3.6rem; }
    .intro-title { font-size: 3.8rem; line-height: 4rem; }
    .intro-abstract, .content-inner-wrapper .flex-content a { font-size: 1.5rem; line-height: 2rem; }
    .video-title { margin-bottom: 30px; }
    .banner-contacts-title { font-size: 4rem; line-height: 4.3rem; }
}

@media (max-width:1023px) {
    :root { --band-margin: 60px; --global-padding-inline: 40px; }
    .header-text-title { font-size: 3.5rem; line-height: 3.8rem; }
    .header-text-abstract { font-size: 3.3rem; line-height: 3.3rem; }
    .intro-title { font-size: 3.3rem; line-height: 3.5rem; }
    .video-title { font-size: 2.2rem; line-height: 2.4rem; }
    .banner-contacts-title { font-size: 3.7rem; line-height: 4rem; }
    .content-inner-wrapper .flex-content { gap: 30px; max-width: 90%; }
}

@media (max-width:767px) {
    .header-wrapper { height: 120px; }
    .header-logo { width: 240px; }
    .header-text-title { font-size: 3rem; line-height: 3.5rem; }
    .header-text-abstract { font-size: 3rem; line-height: 3rem; }
    .video-title { font-size: 2.15rem; line-height: 2.45rem; }
    .footer-wrapper { display: block; text-align: center; }
    .footer-sx { margin-bottom: 50px; }
    .content-inner-wrapper { padding: 30px; }
    .content-inner-wrapper .flex-content { align-items: center; text-align: center; max-width: unset; }
}

@media (max-width:640px) {
    :root { --band-margin: 30px; --global-padding-inline: 30px; }
    .header-text-title { font-size: 2.5rem; line-height: 3rem; }
    .header-text-abstract { font-size: 2.5rem; line-height: 2.5rem; }
    .intro-title { font-size: 2.5rem; line-height: 2.5rem; }
    .intro-abstract, .content-inner-wrapper .flex-content a { font-size: 1.45rem; line-height: 2rem; }
    .video-title { font-size: 2rem; line-height: 2.2rem; }
    .banner-contacts-title { font-size: 3.2rem; line-height: 3.5rem; }
}

@media (max-width:480px) {
    :root { --global-padding-inline: 25px; }
    .header-wrapper { height: 100px; }
    .header-logo { width: 200px; }
    .header-text-wrapper { position: static; transform: none; width: 100%; background: var(--primary-color); padding: 20px 30px; box-sizing: border-box; }
    /*.header-image-wrapper:after { display: none; }*/
    .header-text-title { font-size: 2.2rem; line-height: 2.2rem; }
    .header-text-abstract { font-size: 2rem; line-height: 2rem; }
    .intro-title { font-size: 1.8rem; line-height: 1.8rem; margin-bottom: 15px; }
    .intro-abstract { font-size: 1.3rem; line-height: 1.8rem; }
    .content-inner-wrapper .flex-content a { font-size: 1.3rem; line-height: 1.1; padding:8px 16px; gap:10px; }
    .content-inner-wrapper .flex-content a > svg {width:22px; height: 22px;}
    .video-title { font-size: 1.8rem; line-height: 2rem; }
    .videos-wrapper { margin-bottom: 0; }
    .video-wrapper { padding-block: 20px; }
    .video-wrapper:not(:last-child) { margin-bottom: 0; }
}

@media (max-width:375px) {
    .banner-contacts-title { font-size: 2.8rem; line-height: 3rem; }
}


