@font-face {
    font-family: 'GeneralSans-Bold';
    src: url('fonts/GeneralSans-Bold.woff2') format('woff2'),
            url('fonts/GeneralSans-Bold.woff') format('woff'),
            url('fonts/GeneralSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'GeneralSans-SemiBold';
    src: url('fonts/GeneralSans-Semibold.woff2') format('woff2'),
            url('fonts/GeneralSans-Semibold.woff') format('woff'),
            url('fonts/GeneralSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}        

@media (min-width: 1800px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1640px;
    }
}

:root {
    --bs-body-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-heading-font-family: 'GeneralSans-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-subheading-font-family: 'GeneralSans-SemiBold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --et-green: #B2C85C;
    --et-green-dark: #063B39;
}

[data-bs-theme="dark"]{
    --bs-body-bg: #063B39;
    --bs-body-color: #fefefe;
    --bs-gutter-x: 2.5rem;
}

/* Headings */
h1, h2, h3 {
    font-family: var(--bs-heading-font-family);
    font-weight: bold;
    line-height: 1.1 !important;
    text-transform: uppercase;
}

h4, h5, h6 {
    font-family: var(--bs-subheading-font-family);
    font-weight: bold;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

h2 {
    font-size: calc(1.625rem + 4.5vw);
    margin-bottom: 3rem;
    
    @media (min-width: 556px) {
        font-size: 3rem;
    }

    @media (min-width: 1200px) {
        font-size: 4rem;
        margin-bottom: 6rem;
    }  
}

strong {
    color: var(--et-green);
}

/* Content styles */
.et-logo {
    max-width: 650px;
    margin-bottom: 8rem;
}
.hero { 
    background: url('images/header-bg.avif') no-repeat top center; 
    background-size: cover; 

    @media (min-width: 1400px) {
        height: 1px;
        min-height: 85vh;
    }  

    .intro-block {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .container {
        height: 100%;
        
        .row {
            height: 100%;
        }
    }
}

.lead {
    line-height: 1.6;
}

/* Images */
.ilo {
    margin-bottom: 1.6rem;
}

.ico-small {
    width: 40px;
    height: 40px;
    margin-bottom: 0.625rem;
}

.arguments {
    h4 {
        text-transform: none;
        font-size: 1.25rem;
        font-family: var(--bs-subheading-font-family) !important;
    }
    strong {
        display: block;
        font-size: 2rem;
        line-height: 1;

        @media (min-width: 1400px) {
            font-size: 2.5rem;
        }  

        @media (min-width: 1800px) {
            font-size: 3rem;
        }                  
    }
}

.horkovod-schema {
    background: #DDE6C2;
    background: linear-gradient(180deg,rgba(221, 230, 194, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 0 4rem 4rem 0;
    margin-bottom: 5rem;
    position: relative;

    &::before {
        background: #DDE6C2;
        background: linear-gradient(180deg,rgba(221, 230, 194, 1) 0%, rgba(255, 255, 255, 1) 100%);
        content: '';
        display: block;
        width: 125px;
        height: 100%;
        position: absolute;
        border-radius: 125px 0 0 0;
        left: -125px;
    }

    &::after {
        content: '';
        display: block;
        width: 125px;
        height: 125px;
        left: -125px;
        top: 100%;
        position: absolute;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125' height='125' viewBox='0 0 33.073 33.073'%3E%3Cpath d='M0 0v33.073A33.073 33.073 0 0 1 33.073 0z' style='fill:%23fff;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:1.5'/%3E%3C/svg%3E");
        background-size: contain;
    }

    @media (min-width: 1200px) {
        border-radius: 0 125px 125px 0;
        margin-bottom: 8rem;
    }

    h2 {
        color: var(--et-green-dark);
        margin-top: 3rem;

        @media (min-width: 992px) {
            margin-top: 4rem;
        }

        @media (min-width: 1200px) {
            margin-top: 6rem;
        }

        @media (min-width: 1800px) {
            margin-top: 8remx;
        }        
    }

    img {
        margin-bottom: -19px;

        @media (min-width: 576px) {
            margin-bottom: -19px;
        }
        
        @media (min-width: 768px) {
            margin-bottom: -26px;
        }

        @media (min-width: 992px) {
            margin-bottom: -36px;
        }

        @media (min-width: 1200px) {
            margin-bottom: -42px;
        }

        @media (min-width: 1400px) {
            margin-bottom: -50px;
        }

        @media (min-width: 1800px) {
            margin-bottom: -63px;
        }                
    }
}

.vyhody {
    position: relative;
    margin-top: 10rem;
    margin-bottom: 5rem;

    &::before {
        background: linear-gradient(180deg,rgba(6, 59, 57, 0) 0%, rgba(6, 59, 57, 1) 100%), url('images/header-bg.avif');
        background-repeat: no-repeat; 
        background-position: top center;
        display: block;
        content: '';
        height: 100%;
        position: absolute;
        z-index: -5;
        border-radius: 125px 0 0 0;
        width: 100%;
        margin-left: -1rem;
        margin-right: -1rem;

        @media (min-width: 576px) {
            width: calc(100% + 25px); 
            margin-left: -25px;
            margin-right: -25px;
        }

        @media (min-width: 992px) {
            width: calc(100% + 50px); 
            margin-left: -37px;
            margin-right: -37px;
        }

        @media (min-width: 1200px) {
            width: calc(100% + 75px); 
            margin-left: -50px;
            margin-right: -50px;
        }

        @media (min-width: 1800px) {
            width: calc(100% + 200px); 
            margin-left: -112px;
            margin-right: -112px;
        }
    }

    &::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125' height='125' viewBox='0 0 33.073 33.073'%3E%3Cg style='fill:%2371b3da;fill-opacity:1'%3E%3Cpath d='M0 0v33.073A33.073 33.073 0 0 1 33.073 0Z' style='fill:%2371b3da;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:1.5' transform='rotate(180 16.536 16.536)'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;        
        
        content: '';
        width: 125px;
        height: 125px;
        top: -124px;
        right: 4px;

        @media (min-width: 576px) {
            right: -12px;
        }

        @media (min-width: 768px) {
            right: -12px;
        }

        @media (min-width: 992px) {
            right: -25px;
        }

        @media (min-width: 1200px) {
            right: -37px;
        }

        @media (min-width: 1800px) {
            right: -100px;
        }
    }

    h2 {        
        margin-top: 3rem;
        margin-bottom: 3rem;
        
        @media (min-width: 576px) {
            margin-top: 5rem;
        }

        @media (min-width: 992px) {
            margin-top: 10rem;
        }

        @media (min-width: 1200px) {
            margin-top: 13rem;
        }

        @media (min-width: 1600px) {
            margin-top: 20rem;
        }

        strong {
            color: var(--et-green-dark);

            @media (min-width: 1200px) {
               color: var(--et-green);
            }
        }
    }
}

/* Footer years */
.year-container {

    @media (min-width: 576px) {
        display: flex;
        justify-content: center;
        align-items: start;
        gap: 2rem;
        text-align: left;
    }
}

.year-start, .year-stop, .year-dash {
    font-size: 1.25rem;
    font-family: var(--bs-heading-font-family);

    strong, em {
        display: block;
        text-transform: uppercase;
        font-variant: normal;
        font-style: normal;
    }

    strong {
        font-size: 6rem;
        line-height: 1;
    }
    em {
        line-height: 1.1;
    }
}

.year-dash {
    font-size: 4rem;
    line-height: 1;
    display: none;
}

@media (min-width: 576px) {
    .year-start strong, .year-stop strong, .year-dash {
        font-size: 5rem;
    }     
    .year-dash {
        display: block;
    }
}

@media (min-width: 768px) {
    .year-start strong, .year-stop strong, .year-dash {
        font-size: 6rem
    }          
}

@media (min-width: 992px) {
    .year-start strong, .year-stop strong, .year-dash {
        font-size: 8rem
    }
    em {
        margin-left: .45rem;;
    }              
}

@media (min-width: 1200px) {
    .year-start strong, .year-stop strong, .year-dash {
        font-size: 10rem
    }
}

footer {
    background-color: #04312e;
    padding: 1rem;
}

/* Utilities */
.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.py-10 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}
.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}
.my-10 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}