* {
	box-sizing: border-box;
	--red-color: #FF4040;
	--black-color: #273444;
	--yellow-color: #F8D964;
    --brown-color: #453C1B;
}

@media only screen and (max-width: 1250px) {
    .container {
        width: 1100px;
    }

    .contact-item {
        width: 300px;
    }

    .banner-title {
        font-size: 50px;
    }

    .banner-advantages {
        margin-top: 40px !important;
    }

    .content-item:nth-child(1)::before {
        left: 108px;
    }

    .content-item:nth-child(2)::before {
        left: 475px;
    }

    .content-item:nth-child(3)::before {
        left: 842px;
    }

}

@media only screen and (max-width: 1150px) {
    .container {
        width: 1000px;
    }

    .banner-title {
        font-size: 44px;
    }

    .banner-subtitle {
        font-size: 20px;
    }

    .how-list {
        justify-content: center;
    }

    .consultation-container {
        padding: 20px;
    }

    .content-item:nth-child(1)::before {
        left: 91px;
    }

    .content-item:nth-child(2)::before {
        left: 425px;
    }

    .content-item:nth-child(3)::before {
        left: 759px;
    }
}

@media only screen and (max-width: 1050px) {
    .container {
        width: 900px;
    }

    .banner-advantages-list {
        justify-content: center;
    }

    .banner-title {
        font-size: 38px;
    }

    .banner-button {
        width: 200px;
    }

    .banner-subtitle {
        font-size: 18px;
    }

    .consultation-text {
        margin-left: 200px;
        margin-right: 50px;
    }

    .consultation-icon {
        width: 70px;
    }

    .content-item:nth-child(1)::before {
        left: 75px;
    }

    .content-item:nth-child(2)::before {
        left: 375px;
    }

    .content-item:nth-child(3)::before {
        left: 675px;
    }

}

@media only screen and (max-width: 950px) {
    .container {
        width: 800px;
    }

    .price-wrapper {
        padding: 50px;
    }

    .price-table td:nth-child(1) {
        width: 40%;
    }

    .banner-title {
        font-size: 40px;
    }

    .banner-subtitle {
        font-size: 17px;
    }

    .banner-image img{
        width: 400px;
    }

    .content-image {
        width: 100%;
    }

    .contact-item {
        align-items: flex-start;
    }

    .banner-title {
        font-size: 34px;
    }

    .banner-button {
        width: 180px;
    }

    .banner-subtitle {
        font-size: 17px;
    }

    .courses-wrapper {
        width: 100%;
    }

    .content-item:nth-child(1)::before {
        left: 58px;
    }

    .content-item:nth-child(2)::before {
        left: 325px;
    }

    .content-item:nth-child(3)::before {
        left: 592px;
    }
}

@media only screen and (max-width: 850px) {
    .banner {
        height: 1000px !important;
    }

    .container {
        width: 700px;
    }

    .banner-image img{
        width: 300px;
    }

    .banner-advantages-list {
        display: block;
        padding: 0 0 0 20px;
    }

    .consultation-text {
        margin-left: 100px;
    }

    .consultation-button {
        width: 200px;
    }

    .consultation-icon {
        left: 25px;
    }

    .consultation-icon {
        width: 70px;
    }

    .content-item:nth-child(1)::before {
        left: 41px;
    }

    .content-item:nth-child(2)::before {
        left: 275px;
    }

    .content-item:nth-child(3)::before {
        left: 509px;
    }

    .banner-advantages-item  {
        width: 250px;
    }

    .banner-icon-verif {
        width: 20px;
        height: 20px;
    }

    .banner-advantages-item span {
        font-size: 14px;
    }


    /* header */

    .navbar-contact,
    .navbar-logo {
        z-index: 300;
    }

    .nav {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #FFFFFF;
        overflow: hidden;
        transition: all .3s ease-in-out;

    }

    .nav li span {
        font-size: 30px;
    }

    .nav li:not(:last-child) {
        margin-bottom: 3rem;
    }

    .nav li.nav-active span::before,
    .nav li:hover span::after {
        display: none;
    }

    .show-menu {
		height: 100%;
		overflow: visible;
	}

    /* burger */

    .header-burger {
		display: block;
		position: relative;
		width: 50px;
		height: 40px;
		cursor: pointer;
		z-index: 300;
        order: 2;
	}

    .header-burger::before,
	.header-burger::after {
		content: '';
		background: var(--brown-color);
		position: absolute;
		width: 100%;
		height: 5px;
		left: 0;
		transition: all .3s ease-in-out;
	}

    .header-burger.burger i {
		opacity: 0;
	}

	.header-burger.burger::before {
		top: 40%;
		transform: rotate(45deg);
	}

	.header-burger.burger::after {
		bottom: 44%;
		transform: rotate(-45deg);
	}
    
    .header-burger::before {
		top: 0;
	}

	.header-burger::after {
		bottom: 1px;
	}

	.header-burger i {
		position: absolute;
		background-color: var(--brown-color);
		left: 0;
		width: 100%;
		height: 5px;
		top: 50%;
        transform: translate(0,-50%);
		transition: opacity .3s ease-in-out !important;
	}

    .navbar-contact {
        display: none;
    }


    .navbar-contact-row {
        display: block;
    } 
}

@media only screen and (max-width: 750px) {
    .container {
        width: 600px;
    }

    .banner-image img {
        width: 300px;
    }

    .banner-title {
        font-size: 35px;
    }

    .banner-subtitle {
        font-size: 15px;
    }

    .banner-item span {
        font-size: 15px;
    }

    .banner-content {
        width: 450px;
        position: relative;
        z-index: 1;
    }


    .banner-image img{
        position: absolute;
        right: 0px;
        top: 250px;
        width: 350px;
        z-index: 0;
    }

    .content-item:nth-child(1)::before {
        left: 25px;
    }

    .content-item:nth-child(2)::before {
        left: 225px;
    }

    .content-item:nth-child(3)::before {
        left: 425px;
    }
}

@media only screen and (max-width: 650px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }

    .banner {
        height: 900px !important;
    }

    .banner-container {
        display: block;
        margin-top: 170px !important;
    }

    .banner-title {
        font-size: 40px;
    }

    .banner-subtitle {
        font-size: 20px;
    }

    .banner-subtitle br,
    .banner-title br {
        display: none;
    }

    .banner-content {
        width: 100%;
    }

    .banner-image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-image img {
        position: absolute;
        top: 0;
    }

    .banner-button {
        width: 220px;
    }

    .prev {
        padding-top: 140px;
    }

    .tabs-list {
        flex-wrap: wrap;
        width: 100%;
    }

    .content-item::before  {
        display: none;
    }
}

@media only screen and (max-width: 550px) {
    .banner-image img {
        position: relative;
        right: 0;
        top: 0;
    }


    .banner {
        height: 1200px !important;
    }

    .price-wrapper {
        padding:  50px 0;
    }

    .banner-title {
        font-size: 35px;
    }

    .banner-subtitle {
        font-size: 17px;
    }

    .banner-button:first-child {
        margin-right: 1rem;
    }

    .consultation-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 150px 30px 30px 30px;
    }

    .consultation-text {
        margin: 0 0 50px 0;
    }
    .consultation-icon {
        top: 40px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .content-title {
        font-size: 28px;
    }

    .content-subtitle {
        font-size: 16px;
    }

    .content-text {
        font-size: 12px;
    }

    .content-element {
        font-size: 12px;
    }

    .content-element::before {
        top: 7px;
    }

    .content-list {
        padding: 0 !important;
    }

    .content-item {
        padding: 40px 20px;
    }
}

@media only screen and (max-width: 490px) {
    .banner-title {
        font-size: 30px;
    }

    .banner-subtitle {
        font-size: 15px;
    }

}

@media only screen and (max-width: 450px) {
    .banner-image img {
        width: 100%;
    }

    .title {
        font-size: 35px;
    }

    .courses-table td {
        font-size: 14px;
    }
    .price-table td {
        font-size: 14px;
    }

    .banner {
        height: 1300px !important;
    }

    .price-button {
        width: 100px;
    }

    .banner-item {
        padding: 20px;
    }

    .banner-buttons {
        display: block;
    }

    .banner-button {
        width: 100%;
    }

    .banner-button:first-child {
        margin-right: 0;
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 600px) {
    .prev-title {
        font-size: 25px;
    }

    .content-table th {
        padding: 0;
        font-size: 10px;
    }

    .content-table td {
        font-size: 10px;
    }

    .content-flex {
        flex-direction: column;
    }
}

@media only screen and (max-width: 450px) {
    .prev-title {
        font-size: 20px;
    }
}

@media only screen and (max-width: 410px) {
    .prev-title {
        font-size: 16px;
    }
}

@media only screen and (max-width: 390px) {
    .banner-title {
        font-size: 35px !important;
    }

    .banner-subtitle {
        font-size: 17px;
    }

    .banner-container {
        padding: 0;
    }

    .nav-contact-active {
        height: 400px !important;
    }

    .price-list-container,
    .popup-container {
        width: 100%;
    }

    .courses-table td:nth-child(1) {
        width: 40% !important;
    }

    .content-table td {
        font-size: 6px;
    }

    .banner {
        height: 1450px !important;
    }
}

@media only screen and (max-width: 330px) {
    .prev,
    .banner,
    .container {
        width: 330px !important;
    }
}