/* ================================================================== */
/* T E M P L A T E S                                                  */
/* ================================================================== */

.block-text__title {
    font-weight: 600;
    font-size: calc(48vw / 14.4);
    color: var(--blue-color1);
}

.block-text__text {
    font-weight: 500;
    font-size: calc(18vw / 14.4);
    color: var(--black-color);
}

/* ------------> MOBILE <------------ */
@media (max-width: 768px) {
    .block-text__title {
        font-size: calc(32vw / 4);
    }

    .block-text__text {
        font-weight: 500;
        font-size: calc(18vw / 14.4);
        color: var(--black-color);
    }
}


/* ================================================================== */
/*                                                                    */
/* S E C T I O N - 1                                                  */
/*                                                                    */
/* ================================================================== */

.section1 {
    margin: calc(131vw / 14.4) 0 0 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

.section1__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    gap: calc(30vw / 14.4);
}

.section1__title{
    color: var(--blue-color1);
}

/* ------------> MOBILE <------------ */
@media (max-width: 768px) {
    .section1 {
        margin: calc(110vw / 4) 0 0 0;
    }
    
    .section1__container {
        gap: calc(20vw / 4);
    }

    .section1__title{
        font-size: calc(40vw / 4);
    }
    
    .section1__text{
        font-size: calc(13vw / 4);
    }
}

/* ================================================================== */
/*                                                                    */
/* S E C T I O N - 6                                                  */
/*                                                                    */
/* ================================================================== */

.section6 {
    padding: calc(60vw / 14.4) 0 calc(60vw / 14.4) 0;
}

.section6__container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    position: relative;
    width: 100%;
    gap: calc(50vw / 14.4);
}

.section6__title{
    text-transform: uppercase;
    color: var(--blue-color1);
    padding: 0 0 0 calc(50vw / 14.4);
}

.section6__content{
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: calc(30vw / 14.4);
    justify-content: space-between;
}

.section6__block1{
    display: flex;
    flex-direction: column;
    gap: calc(30vw / 14.4);
    flex: 1 1 calc(431vw / 14.4);
}

.section6__block2{
    overflow: hidden;
    border-radius: calc(35vw / 14.4);
    -webkit-border-radius: calc(35vw / 14.4);
    -moz-border-radius: calc(35vw / 14.4);
    -ms-border-radius: calc(35vw / 14.4);
    -o-border-radius: calc(35vw / 14.4);
    flex: 1 1 calc(919vw / 14.4);
    height: calc(564vw / 14.4);
}

.section6__block2 iframe{
    width: 100%;
    height: 100%;
}

.section6__item{
    overflow: hidden;
    position: relative;
    border-radius: calc(35vw / 14.4);
    -webkit-border-radius: calc(35vw / 14.4);
    -moz-border-radius: calc(35vw / 14.4);
    -ms-border-radius: calc(35vw / 14.4);
    -o-border-radius: calc(35vw / 14.4);
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    background-color: var(--black-color);
    width: 100%;
    height: calc(168vw / 14.4);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.section6__item_link{
    position: absolute;
    width: 100%;
    height: 100%;
}

.section6__item__content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: calc(50vw / 14.4) 0 calc(50vw / 14.4) calc(50vw / 14.4);
    gap: calc(20vw / 14.4);
    
}

.section6__text_title{
    font-weight: 500;
    font-size: calc(24vw / 14.4);
    text-transform: uppercase;
    color: var(--white-color);    
}

.section6__text{
    font-weight: 600;
    font-size: calc(18vw / 14.4);
    color: var(--white-color);    
}

.section6__item__icon{
    display: flex;
    align-items: flex-start;
    padding: calc(40vw / 14.4) calc(50vw / 14.4) calc(40vw / 14.4) 0;
}

.section6__item__icon svg{
    width: calc(50vw / 14.4);
    height: calc(50vw / 14.4);
}

.section6__item__icon svg circle,.section6__item__icon svg path,
.section6__text_title, .section6__text{
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

/* ------------> HOVER EFFECT <------------ */
@media (hover: hover) {
    .section6__item_link:hover ~ .section6__item__icon svg circle{
        fill: var(--blue-color2);
    }
    
    .section6__item_link:hover ~ .section6__item__icon svg path{
        fill: var(--white-color);
    }
    
    .section6__item_link:hover ~ .section6__item__content .section6__text_title, 
    .section6__item_link:hover ~ .section6__item__content .section6__text {
        color: var(--blue-color2);
    }
}

@media (hover: none) {
    .section6__item_link:active ~ .section6__item__icon svg circle{
        fill: var(--blue-color2);
    }
    
    .section6__item_link:active ~ .section6__item__icon svg path{
        fill: var(--white-color);
    }
    
    .section6__item_link:active ~ .section6__item__content .section6__text_title, 
    .section6__item_link:active ~ .section6__item__content .section6__text {
        color: var(--blue-color2);
    }
}

/* ------------> MOBILE <------------ */
@media (max-width: 768px) {
    .section6 {
        padding: calc(25vw / 4) 0 calc(25vw / 4) 0;
    }
    
    .section6__container{
        align-items: center;
        gap: calc(30vw / 4);
    }
    
    .section6__title{
        padding: 0;
    }
    
    .section6__content{
        flex-direction: column;
        gap: calc(20vw / 4);
        justify-content: center;
    }

    .section6__block1{
        gap: calc(20vw / 4);
        width: 100%;
        flex: none;
    }
    
    .section6__block2{
        border-radius: calc(25vw / 4);
        -webkit-border-radius: calc(25vw / 4);
        -moz-border-radius: calc(25vw / 4);
        -ms-border-radius: calc(25vw / 4);
        -o-border-radius: calc(25vw / 4);
        flex: none;
        width: 100%;
        height: calc(250vw / 4);
    }
    
    .section6__item{
        border-radius: calc(25vw / 4);
        -webkit-border-radius: calc(25vw / 4);
        -moz-border-radius: calc(25vw / 4);
        -ms-border-radius: calc(25vw / 4);
        -o-border-radius: calc(25vw / 4);
        height: calc(160vw / 4);
}
    
    .section6__item__content{
        padding: calc(30vw / 4) 0 calc(30vw / 4) calc(30vw / 4);
        gap: calc(10vw / 4);
        
    }
    
    .section6__text_title{
        font-size: calc(26vw / 4);    
    }
    
    .section6__text{
        font-size: calc(18vw / 4); 
    }
    
    .section6__item__icon{
        padding: calc(20vw / 4) calc(30vw / 4) calc(30vw / 4) 0;
    }
    
    .section6__item__icon svg{
        width: calc(45vw / 4);
        height: calc(45vw / 4);
    }
    
    .section6__item__icon svg circle,.section6__item__icon svg path,
    .section6__text_title, .section6__text{
        transition: 0.3s ease-in-out;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
    }
    
    .section6__item_link:hover ~ .section6__item__icon svg circle{
        fill: var(--blue-color2);
    }
    
    .section6__item_link:hover ~ .section6__item__icon svg path{
        fill: var(--white-color);
    }
    
    .section6__item_link:hover ~ .section6__item__content .section6__text_title, 
    .section6__item_link:hover ~ .section6__item__content .section6__text {
        color: var(--blue-color2);
    }
    
    
}