/*
=========================================================
Основной файл стилей сайта 0061.ru
Автор: Калуга Николай Владимирович

Назначение:
- оформление Landing Page;
- адаптивная верстка;
- анимации;
- стили Bootstrap-компонентов;
- мобильная адаптация.

=========================================================
*/


/* ======================================================
   Базовые настройки
====================================================== */


:root {

    /* Основные цвета сайта */

    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;

    --dark-color: #111827;
    --text-color: #374151;

    --light-color: #f8fafc;

    --white-color: #ffffff;


    /* Тени */

    --shadow:
        0 10px 30px rgba(0,0,0,0.08);


    /* Скругления */

    --radius:
        18px;

}



/*
Удаляем стандартные отступы
и задаем общие параметры
*/

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text-color);

    background:
        var(--white-color);

    line-height: 1.6;

}



/* Заголовки */


h1,
h2,
h3,
h4 {

    color:
        var(--dark-color);

    font-weight:
        700;

}



h2 {

    font-size:
        42px;

    margin-bottom:
        20px;

}



h3 {

    font-size:
        22px;

}



p {

    font-size:
        17px;

}



/* Ссылки */


a {

    text-decoration:
        none;

    transition:
        .3s ease;

}



/* Изображения */


img {

    max-width:
        100%;

    height:
        auto;

}



/* ======================================================
   Общие классы
====================================================== */


.section-padding {

    padding:
        90px 0;

}



.btn {

    border-radius:
        50px;

    padding:
        12px 30px;

    font-weight:
        600;

    transition:
        .3s ease;

}



.btn-primary {

    background:
        var(--primary-color);

    border-color:
        var(--primary-color);

}



.btn-primary:hover {

    background:
        var(--primary-dark);

    border-color:
        var(--primary-dark);

    transform:
        translateY(-3px);

}



/* ======================================================
   Навигация
====================================================== */


.navbar {

    padding:
        20px 0;

    background:
        rgba(17,24,39,0.85);

    backdrop-filter:
        blur(10px);

}



.navbar-brand {

    font-size:
        28px;

    color:
        white;

}



.nav-link {

    color:
        rgba(255,255,255,.85);

    margin-left:
        20px;

}



.nav-link:hover {

    color:
        white;

}



/* ======================================================
   Главный экран
====================================================== */


.hero {

    min-height:
        100vh;
		
	padding-top:
        110px;

    display:
        flex;

    align-items:
        center;

    background:

        linear-gradient(
            135deg,
            #eff6ff,
            #ffffff
        );

    overflow:
        hidden;

}



.hero h1 {

    font-size:
        clamp(38px,5vw,64px);

    line-height:
        1.15;

}



.hero p {

    max-width:
        650px;

}



.hero-image {

    animation:
        floating 4s ease-in-out infinite;

}



/* Анимация изображения */


@keyframes floating {


    0% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-15px);

    }


    100% {

        transform:
            translateY(0);

    }


}



.hero-item {

    margin-top:
        30px;

}



.hero-item h2 {

    color:
        var(--primary-color);

    margin-bottom:
        5px;

}



.hero-item p {

    font-size:
        15px;

}



/* ======================================================
   Карточки этапов работы
====================================================== */


.step-card {

    height:
        100%;

    background:
        white;

    padding:
        35px 25px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        .3s ease;

}



.step-card:hover {

    transform:
        translateY(-8px);

}



.step-number {

    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--primary-color);

    color:
        white;

    font-size:
        22px;

    font-weight:
        bold;

    margin-bottom:
        20px;

}



/* ======================================================
   Стоимость
====================================================== */


.price-card {

    background:
        white;

    padding:
        45px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}



.price-card li {

    margin-bottom:
        18px;

    font-size:
        18px;

}



.price-card i {

    color:
        var(--primary-color);

    margin-right:
        10px;

}



.price-value {

    margin-top:
        30px;

    font-size:
        28px;

}



/* ======================================================
   Портфолио
====================================================== */


.portfolio-card {

    overflow:
        hidden;

    background:
        white;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    height:
        100%;

    transition:
        .3s ease;

}



.portfolio-card:hover {

    transform:
        translateY(-10px);

}



.portfolio-card img {

     width: 100%;

    aspect-ratio: 900 / 405;

    object-fit: cover;

    display: block;

}



.portfolio-content {

    padding:
        25px;

}



.portfolio-content a {

    color:
        var(--primary-color);

}



/* ======================================================
   Информационные блоки
====================================================== */


.info-card {

    background:
        white;

    padding:
        35px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}



.info-card li {

    margin-bottom:
        12px;

}

/* ======================================================
   Блок "Почему со мной удобно работать"
====================================================== */


.advantage-card {

    height:
        100%;

    background:
        white;

    padding:
        35px 25px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    text-align:
        center;

    transition:
        .3s ease;

}



.advantage-card:hover {

    transform:
        translateY(-8px);

}



.advantage-card i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.1);

    color:
        var(--primary-color);

    font-size:
        30px;

    margin-bottom:
        20px;

}



/* ======================================================
   FAQ
====================================================== */


.accordion {

    max-width:
        900px;

    margin:
        auto;

}



.accordion-item {

    border:
        none;

    margin-bottom:
        15px;

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

}



.accordion-button {

    font-size:
        18px;

    font-weight:
        600;

    padding:
        25px;

}



.accordion-button:not(.collapsed) {

    color:
        var(--primary-color);

    background:
        white;

    box-shadow:
        none;

}



.accordion-body {

    padding:
        25px;

    font-size:
        17px;

}



/* ======================================================
   Контакты
====================================================== */


.contact-card {

    background:
        white;

    padding:
        40px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}



.contact-card p {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        20px;

}



.contact-card i {

    color:
        var(--primary-color);

    font-size:
        24px;

}



.contact-card a {

    color:
        var(--dark-color);

}



.contact-card a:hover {

    color:
        var(--primary-color);

}



/* ======================================================
   Форма обратной связи
====================================================== */


.contact-form {

    background:
        white;

    padding:
        40px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}



.contact-form h3 {

    margin-bottom:
        25px;

}



.form-control {

    border-radius:
        12px;

    padding:
        14px;

    border:
        1px solid #d1d5db;

}



.form-control:focus {

    border-color:
        var(--primary-color);

    box-shadow:
        0 0 0 .25rem rgba(37,99,235,.15);

}



/* ======================================================
   Footer
====================================================== */


.footer {

    background:
        #111827;

    color:
        rgba(255,255,255,.75);

    padding:
        60px 0 30px;

}



.footer h3 {

    color:
        white;

}



.footer p {

    font-size:
        15px;

}



.footer a {

    color:
        rgba(255,255,255,.8);

}



.footer a:hover {

    color:
        white;

}



.footer hr {

    border-color:
        rgba(255,255,255,.2);

}



/* ======================================================
   Анимация появления
====================================================== */


.fade-animation {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        .8s ease;

}



.fade-animation.active {

    opacity:
        1;

    transform:
        translateY(0);

}



/* ======================================================
   Кнопка наверх
====================================================== */


.scroll-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    background:
        var(--primary-color);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .3s ease;

    z-index:
        999;

}



.scroll-top.active {

    opacity:
        1;

    visibility:
        visible;

}



/* ======================================================
   Адаптивность
====================================================== */


@media(max-width: 991px) {


    h2 {

        font-size:
            34px;

    }



    .navbar {

        padding:
            15px 0;

    }



    .nav-link {

        margin-left:
            0;

        padding:
            10px 0;

    }



    .hero {

        padding-top:
            90px;

        text-align:
            center;

    }



    .hero h1 {

        font-size:
            42px;

    }



    .hero-image {

        margin-top:
            40px;

    }


}



@media(max-width: 767px) {


    .section-padding {

        padding:
            60px 0;

    }



    h2 {

        font-size:
            30px;

    }



    .hero h1 {

        font-size:
            34px;

    }



    .hero .btn {

        width:
            100%;

        margin-bottom:
            15px;

    }



    .hero-item {

        margin-bottom:
            20px;

    }



    .price-card,
    .contact-form,
    .contact-card {

        padding:
            25px;

    }



    .portfolio-card img {

        height:
            200px;

    }



}



/* ======================================================
   Очень маленькие экраны
====================================================== */


@media(max-width: 400px) {


    h1 {

        font-size:
            30px!important;

    }



    p {

        font-size:
            15px;

    }



    .btn {

        padding:
            12px 20px;

    }


}