:root {
    /* *============ CSS-змінні ============ */
    --color-light: #FFFFFF;
    --color-dark: #000000;
    --color-font-main: #212121;
    --color-font-second: #757575;
    --color-font-third: rgba(255, 255, 255, 0.6);
    --color-brand-main: #2196F3;
    --color-brand-active: #188CE8;
    --color-background-dark: #2F303A;
    --color-background-light: #F5F4FA;
    --color-border-header-line: #ECECEC;
    --color-border-portfolio: #EEEEEE;
    --color-background-overlay-hero: #c4c4c4;
    --color-background-overlay-img: rgba(47, 48, 58, 0.4);
    --color-background-icon-footer: rgba(255, 255, 255, 0.1);
    --color-clients: #AFB1B8;
    --color-background-activity-title: rgba(47, 48, 58, 0.8);
    --color-background-overlay: rgba(33, 150, 243, 0.9);
    --color-background-backdrop: rgba(0, 0, 0, 0.2);
    --color-background-form: rgba(33, 150, 243, 0);
    --color-border-button-close: rgba(0, 0, 0, 0.1);
    --color-border-modal: rgba(33, 33, 33, 0.2);
    --color-font-placeholder: rgba(117, 117, 117, 0.5);
    /* *========================================== */
    --color-background-another: #E5E5E5;
    /* *========================================== */
    --font-family: "Roboto", sans-serif;
    --second-family: "Raleway", sans-serif;
}

/** === 1.Властивість font-family === */
/** перевірка завантаження шрифта'Roboto' 400, 500, 700, 900 */
/*!  Виносимо однакові властивості єлементів до body  */
body {
    font-family: var(--font-family);
    /* font-family: 'Roboto', sans-serif; */
    font-size: 14px;
    background-color: var(--color-light);
    background-color: #d6efff;
}

/*!  ГОЛОВНИЙ Контейнер - обгортає відразу увесь контент сторінки */
.main-container {
    width: 1600px;
    margin: 0 auto;
    outline: 4px double #ff0000;
    /*todo --- Фіксований header --- */
    padding-top: 80px;
}

/*!  Контейнер - обгортає відразу увесь контент або секції  */
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    outline: 1px dashed tomato;
}

/*! -------------- webstudio.html --------------*/
/*! -------------- (index.html) --------------*/
/*? header */
.header {
    padding-top: 24px;
    padding-bottom: 25px;
    /* border-bottom: 1px solid var(--color-border-header-line); */
    border-bottom: 1px solid gray;
    background-color: var(--color-light);
    /* background-color: #d2fff2; */
    /*todo --- Фіксований header --- */
    position: fixed;
    width: 100%;
    max-width: 1600px;
    /* left: 0; */
    top: 0;
    z-index: 1;
    /* display: none; */
    /* outline: auto; */
}

/** --- Додаткові flex-властивості до container ---- */
/*todo var. 1 */
.flex,
.navigation,
.nav-list,
.contacts-list {
    display: flex;
    align-items: center;
}

/*todo. var. 2 */
.header .container,
.navigation,
.nav-list,
.contacts-list {
    display: flex;
    align-items: center;
}
/** _________________________________________________ */

.logo {
    margin-right: 93px;
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 26px;
    line-height: normal;
    font-style: normal;
    letter-spacing: 0.78px;
    color: var(--color-brand-main);
}
.logo-dark {
    color: var(--color-dark);
}

/** для розташування без margin */
/** var. 1, 2 */
.header .container {
    justify-content: space-between;
}

/** для розташування без margin */
.nav-list {
    /** var. 1 */
    /* justify-content: space-between;
    min-width: 281px; */
    /** var. 2 */
    gap: 50px;
    
    outline: 1px dotted blue;
}

.nav-link {
    /* font-family: 'Roboto'; */
    font-weight: 500;
    /* font-size: 14px; */
    /* letter-spacing: 0.02em; */
    letter-spacing: 0.28px;
    color: var(--color-font-main); 
}
.active-link {
    color: var(--color-brand-main);
    /* todo +++++ 2 семеcтр +++++ */
    position: relative;
}

/* todo +++++ 2 семеcтр +++++ */
.nav-link.active-link::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;  
    bottom: -33px;
    background-color:  var(--color-brand-main);
    border-radius: 2px;
    /*? Анімація-1 - початковий стан */
    /* transform: scale(0);
    opacity: 0; */
    /*? Анімація-1 - шлях */
    transition:
        bottom 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 0ms,
        background-color 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 0ms,
        transform 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 0ms,
        opacity 1000ms cubic-bezier(0.83, -0.08, 0.32, 1) 0ms;
        
    /** Анімація-2 - @keyframes*/
    animation-name: underlining;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(0.83, -0.08, 0.32, 1);
    animation-delay: 0ms;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-direction: alternate;
}
/*? Анімація-1 - кінцевий стан + тригер */
.nav-item:hover .nav-link.active-link::after {
    /* transform: scale(1); */
    /* opacity: 1; */

    bottom: -25px;
    /*! Не працює разом з @keyframes underlining */
    /* transform: translateY(-8px); */

    background-color:  #b70000;

}
/** Анімація-2 - зміна стану + тригер */
@keyframes underlining {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* ? +++++ Пауза в анімації +++++ */
/* .nav-link.active-link:hover::after  {
    animation-play-state: paused;
} */
/* todo_____________________ */

/** для розташування без margin */
.contacts-list {
    display: flex;
    /** var. 1 */
    /* justify-content: space-between;
    min-width: 307px; */
    /** var. 2 */
    gap: 50px;
    outline: 1px dotted blue;
}

.contacts-link {
    /* font-family: 'Roboto'; */
    font-weight: 500;
    /* font-size: 14px; */
    letter-spacing: 0.02em;
    /* letter-spacing: 0.28px; */
    color: var(--color-font-second);
    /* todo +++++ 2 семеcтр +++++ */
    display: flex;
    align-items: center;
    gap: 10px;
    fill: var(--color-font-second);
}
.contacts-link:hover {
    color: var(--color-brand-main);
    /* todo +++++ 2 семеcтр +++++ */
    fill: var(--color-brand-main);
}


/*? main */
/*? section hero */
.hero {
    padding-top: 200px;
    padding-bottom: 200px;
    background-color: var(--color-background-dark);
}

/** --- Додаткові flex-властивості до container ---- */
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/** _________________________________________________ */

/*todo Фонове зображення з градієнтним накладенням */
.overlay {
    /** --- задати, якщо нема <div class="main-container">: --- */
    /* max-width: 1600px;
    height: 600px;
    margin: 0 auto;
    background-repeat: no-repeat; */
    /** ________________________________________________________ */
    background-color: var(--color-background-overlay-hero);
    /*todo var.1 (ДЗ-18)*/
    background-image: 
        linear-gradient(
            to right, 
            var(--color-background-overlay-img), 
            var(--color-background-overlay-img)
        ), 
        url(../images/background-img-hero.jpg);
    /*todo var.2 */
    /* background-image:
        url(../images/overlay-img.png),
        url(../images/background-img-hero.jpg); */
    /*todo ______________________________________________________ */
    background-position: center;
    background-size: cover;
}

.hero-title {
    max-width: 696px;
    /* margin: 0 auto 30px; */
    margin-bottom: 30px;
    /* font-family: 'Roboto'; */
    font-weight: 900;
    font-size: 44px;
    line-height: 60px; /* 136.364% */
    line-height: 1.36;
    font-style: normal;
    letter-spacing: 0.06em;
    /* letter-spacing: 2.64px; */
    text-transform: uppercase;
    text-align: center;
    color: var(--color-light);
    /* background-color: var(--color-dark); */
}

.hero-button {
    /* display: block; */
    /* margin: 0 auto; */
    padding: 10px 32px;
    /* font-family: 'Roboto'; */
    font-weight: 700;
    font-size: 16px;
    /* line-height: 187%; */
    line-height: 1.87;
    letter-spacing: 0.06em;
    /* letter-spacing: 0.96px; */
    text-align: center;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    color: var(--color-light);
    background-color: var(--color-brand-main);
}
.hero-button:active {
    background-color: var(--color-brand-active);
    background-color: red;
}

/*todo +++++++ HTML-код: backdrop + modal +++++++ */
.backdrop {
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background-backdrop);
    opacity: 1;
    /* ! */
    overflow-y: scroll;
}

.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
} 

.no-scroll {
    overflow: hidden;
}

.modal {
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 528px;
    min-height: 581px;
    border-radius: 4px;
    background-color: seashell;
    /** Початковий стан */
    /* background-image:
        linear-gradient(
            to bottom,
            red 0%,
            orange 15%,
            yellow 30%,
            rgb(49, 128, 0) 45%,
            skyblue 65%,
            blue 80%,
            violet 100%
        ); */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /*? Анімація-1 - шлях */
    transition: 
        transform, opacity,
        1000ms 
        cubic-bezier(0.4, 0, 0.2, 1);
    /** Анімація-2 - @keyframes*/
    animation-name: rainbow-motion;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    /* animation-fill-mode: forwards; */
}
/*? Дія Анімація-1 */
.backdrop.is-hidden .modal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
}
/** Сценарій Анімація-2 "рух веселки" на background modal*/
@keyframes rainbow-motion {
    0% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(255, 0, 0, 0.5) 0%,
            rgba(255, 166, 0, 0.5) 15%,
            rgba(255, 255, 0, 0.5) 30%,
            rgba(49, 128, 0, 0.5) 45%,
            rgba(135, 207, 235, 0.5) 65%,
            rgba(0, 0, 255, 0.5) 80%,
            rgba(238, 130, 238, 0.5) 100%
        );
    }

    17% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(238, 130, 238, 0.5) 0%,
            rgba(255, 0, 0, 0.5) 15%,
            rgba(255, 166, 0, 0.5) 30%,
            rgba(255, 255, 0, 0.5) 45%,
            rgba(49, 128, 0, 0.5) 65%,
            rgba(135, 207, 235, 0.5) 80%,
            rgba(0, 0, 255, 0.5) 100%
        );
    }

    34% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 255, 0.5) 0%,
            rgba(238, 130, 238, 0.5) 15%,
            rgba(255, 0, 0, 0.5) 30%,
            rgba(255, 166, 0, 0.5) 45%,
            rgba(255, 255, 0, 0.5) 65%,
            rgba(49, 128, 0, 0.5) 80%,
            rgba(135, 207, 235, 0.5) 100%
        );
    }

    51% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(135, 207, 235, 0.5) 0%,
            rgba(0, 0, 255, 0.5) 15%,
            rgba(238, 130, 238, 0.5) 30%,
            rgba(255, 0, 0, 0.5) 45%,
            rgba(255, 166, 0, 0.5) 65%,
            rgba(255, 255, 0, 0.5) 80%,
            rgba(49, 128, 0, 0.5) 100%
        );
    }

    68% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(49, 128, 0, 0.5) 0%,
            rgba(135, 207, 235, 0.5) 15%,
            rgba(0, 0, 255, 0.5) 30%,
            rgba(238, 130, 238, 0.5) 45%,
            rgba(255, 0, 0, 0.5) 65%,
            rgba(255, 166, 0, 0.5) 80%,
            rgba(255, 255, 0, 0.5) 100%
        );
    }

    84% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(255, 255, 0, 0.5) 0%,
            rgba(49, 128, 0, 0.5) 15%,
            rgba(135, 207, 235, 0.5) 30%,
            rgba(0, 0, 255, 0.5) 45%,
            rgba(238, 130, 238, 0.5) 65%,
            rgba(255, 0, 0, 0.5) 80%,
            rgba(255, 166, 0, 0.5) 100%
        );
    }

    100% {
        background-image:
        linear-gradient(
            to bottom,
            rgba(255, 166, 0, 0.5) 0%,
            rgba(255, 255, 0, 0.5) 15%,
            rgba(49, 128, 0, 0.5) 30%,
            rgba(135, 207, 235, 0.5) 45%,
            rgba(0, 0, 255, 0.5) 65%,
            rgba(238, 130, 238, 0.5) 80%,
            rgba(255, 0, 0, 0.5) 100%
        );
    }
}
/** +++++ Пауза в анімації +++++ */
.modal:hover  {
    cursor: grab;
    animation-play-state: paused;
}

.modal__button-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-border-button-close);
    border-radius: 50%;
    color: var(--color-border-button-close);
    fill: var(--color-dark);
    background-color: var(--color-light);
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: linear;
}
.modal__button-close:hover {
    fill: var(--color-brand-main);
    stroke: var(--color-brand-main);
    stroke-width: 2;
    border-color: var(--color-font-placeholder);
    transform: rotate(360deg);
}

.modal__title {
    margin-bottom: 12px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--color-font-main);
}

/*? .modal-form */
.modal-form {
    background-color: inherit;
    /** для анімації */
    background-color: transparent;
}

/* .modal-form__field {
    outline: 1px solid tomato; 
} */
.modal-form__field:nth-child(-n + 3) {
    margin-bottom: 10px;
}
.modal-form__field:nth-child(4) {
    margin-bottom: 20px;
}
.modal-form__field:nth-child(5) {
    margin-bottom: 30px;
}

.modal-form__label {
    display: inline-block;
    margin-bottom: 4px;
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 12px;
    line-height: 1.17;
    letter-spacing: 0.01em;
    color: var(--color-font-second);
    /* outline: 1px solid orange;  */
}

.modal-field-wrap {
    position: relative;
}

.modal-form__input {
    padding-left: 42px;
    width: 100%;
    height: 40px;
    outline: none;
    border: 2px solid var(--color-border-modal);
    border-radius: 4px;
    border-color: orangered;
}
.modal-form__input:focus {
    border-color: var(--color-brand-main);
}

.modal-form__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    fill: var(--color-font-main);
}
.modal-form__input:focus + .modal-form__icon{
    fill: var(--color-brand-main);
}
/* .modal-form__input:not(:placeholder-shown) {
    border-color: orange;
} */
.modal-form__input:not(:placeholder-shown):required:invalid {
    border-color: orangered;
}
.modal-form__input:not(:placeholder-shown):required:valid {
    /* border-color: green; */
    border-color: var(--color-brand-main);
}

/** Анімація-2 - @keyframes(при події hover) */
.modal-form__label:hover ~ .modal-field-wrap > .modal-form__icon {
    /* fill: var(--color-brand-main); */
    /** Анімація-2 - @keyframes (при події hover)*/
    animation-name: pulse-icon; 
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/** Сценарій Анімація-2 на іконці при події hover */
@keyframes pulse-icon {
    0% {
        fill: var(--color-font-main);
    }
    50% {
        width: 24px;
        height: 24px;
        fill: var(--color-brand-main);
    }
    100% {
        fill: var(--color-font-main);
    }
}

.modal-form__text {
    display: block;
    padding: 12px 16px;
    width: 100%;
    height: 120px;
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 12px;
    letter-spacing: 0.01em;
    border: 2px solid var(--color-border-modal);
    border-radius: 4px;
    outline: none;
    resize: none;
    color: var(--color-font-main);
}
 /** Стилі ПЛЕЙСХОЛДЕРА */
.modal-form__text::placeholder {
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 12px;
    line-height: 1.14;
    letter-spacing: 0.01em;
    color: var(--color-font-placeholder);
}
.modal-form__text:focus {
    /* border-color: var(--color-brand-main); */
    border-color: rgba(255, 166, 0, 0.5);
}
.modal-form__text:not(:placeholder-shown) {
    border-color: orange;
}
.modal-form__text:not(:placeholder-shown):valid {
    /* border-color: green; */
    border-color: var(--color-brand-main);
}
/** ++++ */
.modal-form__label:hover + .modal-form__text::placeholder {
    color: var(--color-brand-main);
    font-weight: 700;
    /*! Анімація-2 - @keyframes на placeholder при події hover - НЕ ПРАЦЮЄ! */
    /* animation-name: pulse-placeholder; 
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate; */
}
/*! Сценарій Анімація-2 на placeholder при події hover */
@keyframes pulse-placeholder {
    0% {
        color: var(--color-font-main);
    }
    50% {
        /* transform: scale(1.05); */
        color: var(--color-brand-main);
    }
    100% {
        color: var(--color-font-main);
    }
}

/** ==================== checkbox ==================== */
.modal-form__field--position {
    position: relative;
    background-color: inherit;
}

.modal-form__check-input {
    position: absolute;
    left: 14px;
    bottom: 5px;
    z-index: -1;
    opacity: 0; /* ! */
}

.modal-form__check-text {
    margin-left: 12px;
    display: flex;
    align-items: center;
    /* outline: 2px dotted blue; */
}

.modal-form__check-icon-box {
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 15px;
    height: 16px;
    /* border-radius: 3px; */
    border-radius: 50%;
    /* border: 2px solid var(--color-font-main); */
    border: 2px solid orangered;
}
.modal-form__check-icon-box:hover {
    border-color:  var(--color-brand-main);
}
.modal-form__check-input:checked + .modal-form__check-text > .modal-form__check-icon-box {
    /* background-color: #00ca00; */
    background-color: var(--color-brand-main);
    border: none;
}

.modal-form__check-icon {
    fill: transparent;
}
.modal-form__check-input:checked + .modal-form__check-text .modal-form__check-icon {
    fill: var(--color-light);
    stroke: var(--color-light);
    stroke-width: 4;
}

.modal-form__agreement-text {
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: var(--color-font-second);
}
.modal-form__check-input:checked + .modal-form__check-text  .modal-form__agreement-text {
    /* color: #00ca00; */
    /* color: var(--color-brand-main); */
    /** Анімація-2 - @keyframes на modal-form__agreement-text при події checked*/
    animation-name: color-change;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/** Сценарій Анімація-2 на modal-form__agreement-text при події checked */
@keyframes color-change {
    0% {
        color: initial;
        /* font-weight: 400; */
    }
    100% {
        /* color: #00ca00; */
        color: var(--color-brand-main);
        /* font-weight: 700; */
    }
}

.modal-form__agreement-link {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--color-brand-main);
}
.modal-form__check-input:checked + .modal-form__check-text  .modal-form__agreement-link {
    /* display: none; */
    /** Анімація-2 - @keyframes на modal-form__agreement-link при події checked*/
    animation-name: element-disappearance;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/** Сценарій Анімація-2 на modal-form__agreement-link при події checked */
@keyframes element-disappearance {
    0% {
        opacity: 1;
        cursor: not-allowed;
        display: inline;
    }
    20% {
        opacity: 0.8;
        cursor: not-allowed;
    }
    40% {
        opacity: 0.6;
        cursor: not-allowed;
    }
    60% {
        opacity: 0.4;
        cursor: not-allowed;
    }
    80% {
        opacity: 0.2;
        cursor: not-allowed;
    }
    99% {
        opacity: 0;
        cursor: not-allowed;
    }
    100% {
        opacity: 0;
        cursor: not-allowed;
        /* cursor: none; */
        /* display: none; */
        /* visibility: hidden; */
        /* pointer-events: none; */
        
    }
}
/** _______________________ КІНЕЦЬ checkbox ___________ */

.modal-form__button-submit {
    display: block;
    margin: 0 auto;
    padding: 10px 52px;
    /* font-family: var(--font-family); */
    font-weight: 700;
    font-size: 16px;
    line-height: 1.87;
    letter-spacing: 0.06em;
    text-align: center;
    border: none;
    border-radius: 4px;
    color: var(--color-light);
    background-color: var(--color-brand-main);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}
/*! Так не працює, бо подія буде тільки при натисканні на кнопку, а це не КЛІК! */
/* .modal-form__button-submit:active ~ .modal-thanks {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
} */

/** колір фону input та textarea */
/* .modal-form input, 
.modal-form textarea {
    background-color: inherit;
} */

/** Модальне вікно-подяка */
.modal-thanks {
    /* display: none; */
    /* opacity: 0.5; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: seashell;
    /*? Анімація-1 - шлях */
    transition: 
        all,
        1000ms 
        cubic-bezier(0.4, 0, 0.2, 1);
    /** Анімація-2 - @keyframes*/
    animation-name: rainbow-motion;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    /* animation-fill-mode: forwards; */
}
/*todo _______ КІНЕЦЬ HTML-код: backdrop + modal _______ */

/*! ++++++++ Бєк-дроп з модальним вікном (приклад) ++++++++ */
/* .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.no-scroll {
    overflow: hidden;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 400px;
    min-height: 300px;
    padding: 15px;
    text-align: center;
    background-color: skyblue;
    transform: translate(-50%, -50%);
}

.modal .btn {
    position: absolute;
    top: 10px;
    right: 10px;
} */
/*! _______ Бєк-дроп з модальним вікном (приклад) _______ */


/*? section features */
.section-features {
    padding-top: 94px;
    background-color: #fffbd2;
}

/** --- Додаткові flex-властивості до container ---- */
/* відсутні */
/** ________________________________________________ */

/** стилізация  заголовків h2 у ВСІХ секціях */
.section-title {
    margin-bottom: 50px;
    /* font-family: 'Roboto'; */
    font-weight: 700;
    font-size: 36px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.03em;
    /* letter-spacing: 1.08px; */
    text-align: center;
    color: var(--color-font-main);
}

/*todo Приховуємо заговок */
.visually-hidden {
    /** var. 1 */
    /* display: none; */
    /** var. 2 */
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}

.features-list {
    display: flex;
    /** для розташування без margin */
    /** var. 1 */
    /* justify-content: space-between; */
    /** var. 2 */
    gap: 30px;
}

.features-item {
    /* flex-basis: 270px; */
    flex-basis: calc((100% - 90px) / 4);
}

/** ----------- додаєм зображення-іконки ----------- */
.features-item::before {
    content: "";
    display: block;
    /* width: 270px; */
    height: 120px;
    margin-bottom: 30px;
    border-radius: 4px;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-background-light);
}
.features-item:nth-child(1)::before { 
    /** var. 1-1 */
    background-image: url(../images/antenna.jpg); 
    /** var. 1-2 */
    /* background-image: url(../images/antenna.png); */
    /** var. 2 */
    /* background-image: url(../images/antenna.svg); */
}
.features-item:nth-child(2)::before { 
    /** var. 1 */
    background-image: url(../images/clock.png);
    /** var. 2 */
    /* todo +++++ 2 семеcтр +++++ */
    /* background-image: url(../images/clock.svg); */
    /* todo_____________________ */
}
.features-item:nth-child(3 )::before { 
    /** var. 1 */
    /* background-image: url(../images/diagram.png); */
    /** var. 2 */
    /* todo +++++ 2 семеcтр +++++ */
    background-image: url(../images/diagram.svg);
    /* todo_____________________ */
}
.features-item:nth-child(4)::before { 
    /** var. 1 */
    /* background-image: url(../images/astronaut.png); */
    /** var. 2 */
    /* todo +++++ 2 семеcтр +++++ */
    background-image: url(../images/astronaut.svg);
    /* todo_____________________ */
}
/** ________________________________________________ */

.features-title {
    margin-bottom: 10px;
    /* font-family: 'Roboto'; */
    font-weight: 700;
    /* font-size: 14px; */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-font-main);
}

.features-description {
    /* font-family: 'Roboto'; */
    font-weight: 400;
    /* font-size: 14px; */
    /* line-height: 171%; */
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: var(--color-font-second);
}


/*? section activities */
.section-activities {
    padding-top: 94px;
    padding-bottom: 94px;
    background-color: #d2e4ff;
}

/** --- Додаткові flex-властивості до container ---- */
/* відсутні */
/** ________________________________________________ */

.activities-list {
    display: flex;
    /** для розташування без margin */
    /** var. 1 */
    /* justify-content: space-between; */
    /** var. 2 */
    gap: 30px;
}

/* todo +++++ 2 семеcтр +++++ */
.activities-item {
    position: relative;
    flex-basis: calc((100% - 60px) / 3);
}

.activities-title {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-top: 27px;
    padding-bottom: 27px;
    /* font-family: var(--font-family); */
    /* font-weight: 700; */
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-light);
    background-color: var(--color-background-activity-title);
}
/* todo_____________________ */


/*? section team */
.section-team {
    padding-top: 94px;
    padding-bottom: 94px;
    background-color: var(--color-background-light);
}

/** --- Додаткові flex-властивості до container ---- */
/* відсутні */
/** ________________________________________________ */

.team-list {
    display: flex;
    /** для розташування без margin */
    /** var. 1 */
    /* justify-content: space-between; */
    /** var. 2 */
    gap: 30px;
}

.team-item {
    padding-bottom: 30px;
    flex-basis: calc((100% - 90px) / 4);
    border-radius: 0 0 4px 4px;
    box-shadow: 
        0 2px 1px 0 rgba(0, 0, 0, 0.2), 
        0 1px 1px 0 rgba(0, 0, 0, 0.14), 
        0 1px 3px 0 rgba(0, 0, 0, 0.12);
    background-color: var(--color-light);
}

.team-image {
    margin-bottom: 30px;
}

.team-name {
    margin-bottom: 10px;
    /* font-family: 'Roboto'; */
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--color-font-main);
}

.team-position {
    margin-bottom: 16px;
    /* font-family: 'Roboto'; */
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--color-font-second);
}

/* todo +++++ 2 семеcтр +++++ */
/* todo -------- Список соціальних контактів -------- */
.social-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    outline: 1px dashed blue;
}

.social-item {
    width: 44px;
    height: 44px;
    outline: 1px dotted tomato;
}

.instagram-icon-svg, /*! inline SVG  */ 
.social-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    fill: var(--color-clients);
    /* fill: #4affff; */
    /* background-color: blueviolet; */
}
.instagram-icon-svg:hover, /*! inline SVG  */
.social-item:hover .social-link{
    fill: var(--color-light);
    background-color: var(--color-brand-main);
}
/* todo_________Список соціальних контактів_________ */
/* todo_____________________ */


/* todo +++++ 2 семеcтр +++++ */
/*? section clients */
.section-clients {
    padding-top: 94px;
    padding-bottom: 94px;
    background-color: rgb(239, 230, 255);
}

/** --- Додаткові flex-властивості до container ---- */
/*! відсутні */
/** ________________________________________________ */

.clients-list {
    display: flex;
    /** var. 1 */
    /* justify-content: space-between; */
    /** var. 2 */
    gap: 30px;
}

.clients-item {
    /** var. 1 */
    /* width: 170px; */
    /** var. 2 */
    flex-basis: calc((100% - 150px) / 6);
    /* todo Приклад БЕЗ додаткового контейнера */
    padding: 15px 31px; /*! можна без нього */
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-clients);
    border-radius: 4px;
    /* outline: 1px dotted darkred; */
}

/* todo Приклад с додатковим контейнером */
.clients-link- {
    display: block;
    height: 92px;
    /*! можна без padding: 15px 31px; */
    /* padding: 15px 31px;  */
    /* todo НЕ ПОТРІБНО в Прикладі с додатковим контейнером */
    display: flex;
    justify-content: center;
    align-items: center;
    /* todo _______________________________________________ */
    fill: var(--color-clients);
    border: 1px solid var(--color-clients);
    border-radius: 4px;
    /* outline: 1px dotted darkred; */
}
.clients-link-:hover {
    border-color: var(--color-brand-main);
    fill: var(--color-brand-main);
}

/* todo Приклад с додатковим контейнером */
.clients-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e1e1e1;
}
.clients-link:hover .clients-box {
    background-color: #b6d8f3;
}
/*! не вірний приклад використання hover */
/* .clients-box:hover {
    background-color: #b6d8f3;
} */

/* todo Приклад БЕЗ додаткового контейнера */
.clients-link {
    /*! Якщо є padding: 15px 31px; */
    /* width: 100%;
    height: 100%; */
    width: 106px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* todo _______________________________________________ */
    fill: var(--color-clients);
    background-color: #fff6d9;
    /* outline: 1px dotted green; */
}
.clients-item:hover,
.clients-item:hover .clients-link {
    border-color: var(--color-brand-main);
    fill: var(--color-brand-main);
}
.clients-item:hover .clients-link {
    background-color: #cfe9ff;
}
/* todo_____________________ */


/*? footer */
.footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--color-background-dark);
}

/** --- Додаткові flex-властивості до container ---- */
/* відсутні */
/** ________________________________________________ */

/* todo +++++ 2 семеcтр +++++ */
/** --- Додаткові flex-властивості до container ---- */
.flex-footer {
    display: flex;
}
/** ________________________________________________ */

/*! ===== div#1 Контактна інформація ===== */
.footer-address-box{
    margin-right: 70px;
    outline: 1px dashed yellowgreen;
}
/* todo_____________________ */

.footer .logo {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 20px;
}

.logo-light {
    color: var(--color-light);
    /* background-color: var(--color-dark); */
}

.footer-item:not(:last-child) {
    margin-bottom: 9px
}

.footer-link {
    /* font-family: 'Roboto'; */
    /* font-weight: 400; */
    /* font-size: 14px; */
    /* line-height: 171%; */
    line-height: 1.71;
    font-style: normal;
    letter-spacing: 0.03em;
    color: var(--color-font-third);
    /* background-color: var(--color-dark); */
}
.white-color {
    color: var(--color-light);
}

/* todo +++++ 2 семеcтр +++++ */
/*! ===== div#2 Список кнопок соціальних мереж ===== */
.footer-social-box {
    margin-top: 12px;
    margin-right: 93px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    align-self: flex-start;
    outline: 1px dashed yellow;
}

.footer-social-title {
    margin-bottom: 20px;
    /* font-family: var(--font-family); */
    font-weight: 700;
    /* font-size: 14px; */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-light);
}

.footer-social {
    fill: var(--color-light);
    background-color: var(--color-background-icon-footer);
}

/*! ===== div#3 Форма "Підпишіться на розсилку" ===== */
.form-subscr {
    margin-top: 12px;
    align-self: flex-start;
    outline: 1px dashed teal;
}

.form-subscr__label {
    display: inline-flex;
    margin-bottom: 20px;
    /* font-family: var(--font-family); */
    font-weight: 700;
    /* font-size: 14px; */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-light);
}

.form-subscr__field-box {
    display: flex;
    gap: 12px;
}

.form-subscr__input {
    /* width: 100%;   */
    width: 358px; 
    height: 50px;
    padding-left: 16px;
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: var(--color-light);
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background-color: var(--color-background-form);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}
 /** Стилі ПЛЕЙСХОЛДЕРА */
.form-subscr__input::placeholder {
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: var(--color-font-third);
}

.form-subscr__button {
    display: flex;
    align-items: center;
    /* align-self: center; */
    gap: 10px;
    padding: 10px 28px;
    /* font-family: var(--font-family); */
    font-weight: 700;
    font-size: 16px;
    line-height: 1.87;
    letter-spacing: 0.06em;
    text-align: center;
    border: none;
    border-radius: 4px;
    color: var(--color-light);
    fill: var(--color-light);
    background-color: var(--color-brand-main);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}
/* todo_____________________ */
/*? _____________КІНЕЦЬ footer _________________ */



/*! -------------- portfolio.html --------------*/
/*? section portfolio */
.section-portfolio {
    padding-top: 94px;
    padding-bottom: 94px;
    background-color: #ade2ff;
}

/** --- Додаткові flex-властивості до container ---- */
/*todo flex-column */
/** _________________________________________________ */

/*todo Список кнопок */
.portfolio-button-list {
    padding-bottom: 16px;
    margin-bottom: 34px;
    display: flex;
    /** для розташування без margin */
    /** var. 1 */
    /* justify-content: space-between;
    min-width: 575px; */
    /** var. 2 */
    gap: 8px;

    outline: 2px dotted blue;
}

.portfolio-button {
    padding: 6px 22px;
    /* font-family: var(--font-family); */
    font-weight: 500;
    font-size: 16px;
    /* line-height: 162%; */
    line-height: 1.6;
    letter-spacing: 0.03em;
    /* text-align: center; */
    border: none;
    border-radius: 4px;
    color: var(--color-font-main);
    background-color: var(--color-background-light);
}
.portfolio-button:active {
    color: var(--color-light);
    background-color: var(--color-brand-main);
    box-shadow: 
        1px 4px 6px 0 rgba(0, 0, 0, 0.16), 
        0 4px 4px 0 rgba(0, 0, 0, 0.06), 
        0 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/*todo Список карток */
.portfolio-card-list {
    display: flex;
    flex-wrap: wrap;
    /** var. 1 */
    /** для розташування без margin */
    /* justify-content: space-between; */
    /* align-content: space-between; */
    /* min-height: 1272px; */
    /** var. 3 */
    gap: 30px;
    /* todo Центрування Додаткового рядка */
    /* justify-content: center; */

    /* outline: 2px dotted green; */
}

.card-item {
    display: flex;
    flex-direction: column; 
    /* padding-bottom: 20px; */
    /** для розташування без margin */
    /** var. 1, 2 */
    flex-basis: calc((100% - 60px) / 3);
    /*todo ❌ border var. 1 - невірний */
    /* border: 1px solid #fffa69;; */
    /*? Анімація-1 */
    transition: 
        box-shadow,
        1000ms 
        cubic-bezier(0.4, 0, 0.2, 1);
    /* outline: 1px dotted rgb(255, 94, 247); */
}
.card-item:hover {
    box-shadow: 
        1px 4px 6px 0 rgba(0, 0, 0, 0.16), 
        0 4px 4px 0 rgba(0, 0, 0, 0.06), 
        0 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.card-link {
    display: flex;
    flex-direction: column;
}

/*todo  overlay-текст */
.card-overlay-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: 294px; */
}

.card-text {
    /* z-index: 1; */
    position: absolute;
    /* todo var.1 */
    /* top: 0; */
    /* transform: translateY(100%); */
    /* todo _____ */
    /* width: 370px; */
    /* height: 294px; */
    /* width: 100%; */
    /* height: 100%; */
    padding: 63px 24px;
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    font-size: 18px;
    line-height: 1.555;
    letter-spacing: 0.03em;
    color: var(--color-light);
    /* background-color: var(--color-background-overlay); */
    background-color: #222222;
    /*? Анімація-1 */
    transition: 
        transform, background-color,
        1000ms 
        cubic-bezier(0.4, 0, 0.2, 1);
}
.card-item:hover .card-text {
    background-color: var(--color-background-overlay);
    /* todo var.1 */
    /* transform: translateY(0); */
    /* todo var.2 */
    /* transform: translateY(-294px); */
    transform: translateY(-100%);
}

.card-text-box {
    /* ! */
    /* display: flex;
    flex-direction: column;
    justify-content: flex-end; */
    /* ! */
    flex-grow: 1;
    padding: 20px 24px;
    /*todo ✅ border var. 2 - вірний */
    border-right: 1px solid var(--color-border-portfolio);
    border-bottom: 1px solid var(--color-border-portfolio);
    border-left: 1px solid var(--color-border-portfolio);
    /* outline: 2px dotted rgb(255, 247, 94); */
}

.card-title {
    margin-bottom: 4px;
    /* font-family: var(--font-family); */
    font-weight: 700;
    font-size: 18px;
    /* line-height: 200%; */
    line-height: 2.0;
    letter-spacing: 0.06em;
    color: var(--color-font-main);
    /* outline: 2px dotted rgb(255, 247, 94); */
}

.card-description {
    /* font-family: var(--font-family); */
    font-size: 16px;
    /* line-height: 187%; */
    line-height: 1.87;
    letter-spacing: 0.03em;
    color: var(--color-font-second);
    /* outline: 2px dotted rgb(255, 247, 94); */
}