/* @import url(https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;800;900&display=swap); */
/* @import url(https://fonts.googleapis.com/css2?family=Forum&display=swap); */
/* font-family: 'Forum', display; */

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;800;900&display=swap);

body {

  font-family: 'Montserrat', sans-serif;
    /* font-family: 'Raleway', sans-serif; */
  background: url('../img/components/bg.jpg') repeat;
  position: relative;
  overflow-x: hidden;
  font-variant-numeric: lining-nums;

}

@media(min-width: 320px) and (max-width: 720px){
    body {
        /* background: url('../img/components/bg-mobile.jpg') repeat; */
      }
}

.mainContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.mainTitle{
    width: calc(100% - 480px);
}

.mainTitle h1{
    color: #D22D16;
    font-size: 46px;
}

.mainTitle ul{
    margin-top: 10px;
}

.mainTitle ul li{
    display: flex;
    align-items: center;
    margin-top: 15px;
    color: #575757;
    font-size: 16px;
}

.mainTitle ul li::before{
    content: '';
    display: inline-block;
    background: url('../img/components/star-icon.png') no-repeat center / cover;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.mainBtnContent{
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.mainUsers{
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.mainUsersImgs{
    display: flex;
    align-items: center;
}

.mainUsersImgs img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: -12px;
}

.mainUserText p{
    font-size: 16px;
    color: #666;
}

.mainImg{
    width: 420px;
}

.mainImg img{
    width: 100%;
}

@media(min-width: 320px) and (max-width: 480px){
    .mainContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap-reverse;
    }
    
    .mainTitle{
        text-align: center;
        width: 100%;
    }
    
    .mainTitle h1{
        font-size: 32px;
    }
    
    .mainTitle ul li{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mainBtnContent{
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mainUsers{
        display: flex;
        justify-content: center;
        margin-left: 0;
        width: 100%;
        margin-top: 20px;
    }
    
    .mainUsersImgs{
        display: flex;
        align-items: center;
    }
    
    .mainUserText p{
        margin-left: 20px;
    }
    
    .mainImg{
        width: 100%;
    }
    
    .mainImg img{
        width: 100%;
    }
}

@media(min-width: 480px) and (max-width: 720px){
    .mainContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap-reverse;
    }
    
    .mainTitle{
        text-align: center;
        width: 100%;
    }
    
    .mainTitle h1{
        font-size: 32px;
    }
    
    .mainTitle ul li{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mainBtnContent{
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mainUsers{
        display: flex;
        justify-content: center;
        margin-left: 0;
        width: 100%;
        margin-top: 20px;
    }
    
    .mainUsersImgs{
        display: flex;
        align-items: center;
    }
    
    .mainUserText p{
        margin-left: 20px;
    }
    
    .mainImg{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .mainImg img{
        width: 300px;
    }
}

@media(min-width: 720px) and (max-width: 980px){
    .mainContainer{
        gap: 20px;
    }
    
    .mainTitle{
        width: calc(100% - 350px);
    }
    
    .mainTitle h1{
        font-size: 32px;
    }

    .mainImg{
        width: 320px;
    }
}

@media(min-width: 980px) and (max-width: 1200px){
    .mainTitle h1{
        font-size: 48px;
    }
}

.advantagesContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.advantageItem{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 50px 25px;
    background: #fff;
    border: 1px solid #ddd;
}

.advantageImg{
    display: flex;
    justify-content: center;
}

.advantageImg img{
    width: 65px;
}

.advantageText{
    text-align: center;
}

.advantageText h2{
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 15px;
    color: #D22D16;
}

.advantageText p{
    margin-top: 10px;
    color: #575757;
    font-size: 14px;
}

@media(min-width: 320px) and (max-width: 550px){
    .advantagesContainer{
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media(min-width: 550px) and (max-width: 1200px){
    .advantagesContainer{
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

.discountsContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    flex-wrap: wrap;
}

.discountItem{
    padding: 15px;
    width: 270px;
    border: 1px solid #ddd; 
    border-radius: 20px;
    margin-top: 35px;
    background: #fff;
}

.discountsImg{
    position: relative;
    width: 270px;
    height: 270px;
}

.discountsImg  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.discountPrice{
    position: absolute;
    left: 15px;
    bottom: 15px;
    padding: 10px 20px;
    border-radius: 50px;
    background: #ffffff96;
    border: 1px solid #333;
    font-weight: bold;
}

.discountText p{
    margin-top: 12px;
    font-size: 16px;
    width: 100%;
    font-weight: bold;
    color: #333;
}

.discountBtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.discountBtn img{
    width: 35px;
}

@media(min-width: 320px) and (max-width: 700px){
    .discountsContainer{
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }

    .discountItem{
        width: 300px;
    }

    .discountsImg{
        width: 300px;
        height: 300px;
    }
}

@media(min-width: 700px) and (max-width: 920px){
    .discountsContainer{
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;

        gap: 20px;
    }
}


.serviceContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-flow: dense;
    color: #fff;
    margin-top: 45px;
}

.serviceItem{
    width: 32%; 
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.2s;
    margin-bottom: 20px;
    margin-top: 20px;
}


.serviceItemHeader{
    padding: 20px 20px 0;
}

.serviceItemHeader p, .serviceItemHeader a{
    display: inline-block;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #333;
    text-transform: uppercase;
    width: 100%;
}

.serviceItemContent{
    padding: 5px 20px 20px;
}

.serviceElementItem{
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px;
    background: #FFF5F8;
    color: #666;
    border-radius: 5px;
    font-size: 14px;
}

.serviceElementItem span{
    width: 80px;
    text-align: right;
}

@media(min-width: 320px) and (max-width: 760px){
    .serviceItem{
        width: 100%;
    }
}


@media(min-width: 760px) and (max-width: 980px){
    .serviceContainer{
        grid-template-columns: repeat(2, 1fr);
    }

    .serviceItem{
        width: 45%;
    }
}

.complexContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 35px;
}

.complexItem{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 20px;
}

.complexItemTitle{
    width: 100%;
    text-align: center;
}

.complexItemTitle h2{
    font-weight: 500;
    font-size: 20px;
    color: #333;
}

.complexItem ul{
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.complexItem ul li{
    margin-top: 8px;
    color: #575757;
}

.complexItemPrice{
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.complexItemPrice p{
    font-weight: bold;
    font-size: 24px;
    color: #333;
}

.complexItemBtnCont{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

@media(min-width: 320px) and (max-width: 550px){
    .complexContainer{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

@media(min-width: 550px) and (max-width: 980px){
    .complexContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media(min-width: 980px) and (max-width: 1320px){
    .complexContainer{
        gap: 20px;
    }
}

.staffContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 35px;
}

.staffPhoto{
    height: 420px;
    width: 100%;
}

.staffPhoto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.staffText{
    text-align: center;
}

.staffText h2{
    color: #333;
    font-weight: 600;
    font-size: 18px;
    margin-top: 10px;
}

.staffText p{
    font-size: 14px;
    color: #999;
}

@media(min-width: 320px) and (max-width: 550px){
    .staffContainer{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .staffPhoto{
        height: 50vw;
    }
}

@media(min-width: 550px) and (max-width: 780px){
    .staffContainer{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .staffPhoto{
        height: 50vw;
    }
}


@media(min-width: 780px) and (max-width: 980px){
    .staffContainer{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .staffPhoto{
        height: 30vw;
    }
}

@media(min-width: 980px) and (max-width: 1200px){
    .staffPhoto{
        height: 30vw;
    }
}

.aboutContainer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 35px;
}

.aboutImg{
    width: 460px;
}

.aboutImg img{
    width: 100%;
    border-radius: 20px;
}

.aboutText{
    width: calc(100% - 520px);
    color: #575757;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 20px;
}

.aboutImgContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.aboutImgItem{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
}

@media(min-width: 320px) and (max-width: 550px){
    .aboutContainer{
        justify-content: center;
    }

    .aboutImg{
        width: 100%;
    }

    .aboutText{
        width: 100%;
        margin-top: 25px;
    }

    .aboutImgContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .aboutImgItem{
        width: 100%;
        height: 40vw;
    }
}

@media(min-width: 550px) and (max-width: 780px){
    .aboutContainer{
        justify-content: center;
    }

    .aboutImg{
        width: 100%;
    }

    .aboutImg img{
        width: 320px;
    }

    .aboutText{
        width: 100%;
        margin-top: 25px;
    }

    .aboutImgContainer{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 30px;
    }

    .aboutImgItem{
        width: 100%;
        height: 20vw;
        object-fit: cover;
        border-radius: 20px;
    }
}

@media(min-width: 780px) and (max-width: 980px){
    .aboutImg{
        width: 320px;
    }
    
    .aboutText{
        width: calc(100% - 400px);
    }
}

.certificatesContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 30px;
}

.certificateItem{
    width: 100%;
    border-radius: 20px;
}

@media(min-width: 320px) and (max-width: 550px){
    .certificatesContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* reviews */

.review{
    margin-top: 60px;
}

.reviewsContainer{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.reviewsContent{
    column-count: 2;
    column-gap: 0;
    gap: 20px;
    width: calc(100% - 520px);
}

.reviewsContent3{
    column-count: 3;
    column-gap: 0;
    gap: 10px;
    width: 100%;
}

.reviewItem{
    padding: 20px;
    margin-bottom: 15px !important; 
    display: inline-block;
    /* display: flex;
    justify-content: space-between; */
    width: calc(100% - 40px);
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 20px;
    margin: 0 auto;
}

.reviewItemLeft{
    float: left;
}

.reviewItemAva{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: #D22D16;
}

.reviewItemAva img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewItemAva span{
    color: #fff;
}

.reviewItemRight{
    width: calc(100% - 55px);
    float: right;
}

.reviewItemRight h3{
    color: #333;
    font-size: 16px;
}

.reviewItemInfo{
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.reviewItemStars{
    display: flex;
}

.reviewItemStars svg{
    width: 15px;
}

.reviewItemStars img{
    width: 16px;
}

.reviewItemInfo span{
    color: #666;
    font-size: 14px;
    margin-left: 10px;
}

.reviewItemRight p{
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}

/* reviewsAbout */

.reviewsAbout{
    width: 460px;
}

.reviewsAboutTitle{
    width: 100%;
    color: #333;
    font-weight: unset;
    font-size: 24px;
}

.reviewsAboutTitle span{
    display: flex;
    font-weight: bold;
    width: 100%;
}

.reviewsAboutContentBg{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 20px;
    padding: 25px;
    margin-top: 25px;
}

.reviewsAboutContainer{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.reviewsEvaluation p{
    font-size: 52px;
    font-weight: 500;
}

.reviewsEvaluationStars{
    display: flex;
}

.reviewsCustomerEvaluation{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.reviewsCustomerEvaluation p{
    text-align: right;
    width: 100%;
    font-size: 20px;
    color: #333;
}

.reviewsCustomerEvaluationContainer{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.customerEvaluationPlatformItem img{
    height: 54px;
}

.reviewsAboutContainer{
    margin-top: 20px;
}

.reviewsAboutContainer a{
    text-decoration: underline;
    color: #11AA11;
    transition: .4s;
}

.reviewsAboutContainer a:hover{
    text-decoration: none;
}

.reviewsBtn{
    margin-top: 30px;
}

@media(min-width: 320px) and (max-width: 550px){
    
    .reviewsContainer{
        flex-wrap: wrap-reverse;
    }

    .reviewsContent, .reviewsContent3{
        column-count: 1;
        width: 100%;
        margin-top: 20px;
    }

    .reviewItem{
        margin-bottom: 15px !important; 
    }

    /* reviewsAbout */

    .reviewsAbout{
        width: 100%;
    }

   

    .reviewsAboutContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .reviewsAboutContainer a{
        text-align: center;
        width: 100%;
    }

    .reviewsEvaluation p{
        text-align: center;
        font-size: 52px;
        font-weight: 500;
    }

    .reviewsEvaluationStars{
        display: flex;
    }

    .reviewsCustomerEvaluation{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .reviewsCustomerEvaluation p{
        text-align: center;
    }

    .reviewsCustomerEvaluationContainer{
        justify-content: center;
    }

    .reviewsBtn{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}

@media(min-width: 550px) and (max-width: 1200px){
    
    .reviewsContainer{
        flex-wrap: wrap-reverse;
    }

    .reviewsContent, .reviewsContent3{
        column-count: 2;
        width: 100%;
        margin-top: 20px;
    }

    .reviewItem{
        margin-bottom: 15px !important; 
    }

    /* reviewsAbout */

    .reviewsAbout{
        width: 100%;
    }

    .reviewsAboutContainer{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .reviewsEvaluation p{
        text-align: center;
    }

    .reviewsEvaluationStars{
        display: flex;
    }
}


.telegramContainer{
    display: flex;
    justify-content: space-between;
    background: #249EDB;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.telegramText{
    color: #fff;
    width: calc(100% - 320px);
    padding: 30px;
    z-index: 1;
}

.telegramText h2{
    font-size: 32px;
}

.telegramText p{
    font-size: 16px;
    margin-top: 20px;
}

.telegramText .btn{
    border: 1px solid #fff;
    color: #fff;
    margin-top: 25px;
}


.telegramText .btn:hover{
    background: #fff;
    color: #D22D16;
}

.telegramImg{
    position: absolute;
    right: -45px;
    top: -30px;
}

.telegramImg img{
    width: 300px;
}

@media(min-width: 320px) and (max-width: 720px){
    .telegramContainer{
        justify-content: center;
        flex-wrap: wrap;
    }

    .telegramText{
        width: 100%;
        padding: 20px 20px 80px;
    }


    .telegramText p{
        font-size: 16px;
        margin-top: 20px;
    }

    .telegramText .btn{
        border: 1px solid #fff;
        color: #fff;
        margin-top: 25px;
    }

    .telegramImg{
        position: absolute;
        right: -40px;
        bottom: -30px;
        top: auto;
    }

    .telegramImg img{
        width: 200px;
    }
}

.blogContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 35px;
}

.blogItemPhoto{
    overflow: hidden;
    border-radius: 20px;
}

.blogItemPhoto img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; 
    transition: .4s;
}

.blogItemText h2{
    font-size: 16px;
    color: #333;
    margin-top: 15px;
    transition: .4s;
}

.blogItemText p{
    margin-top: 5px;
    font-size: 14px;
    color: #999;
}

.blogItem:hover .blogItemPhoto img{
    transform: scale(1.1, 1.1);
}

.blogItem:hover .blogItemText h2{
    color: #D22D16;
}

@media(min-width: 320px) and (max-width: 550px){
    .blogContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .blogItemText h2{
        font-size: 14px;
    }
    
    .blogItemText p{
        font-size: 12px;
    }
}


@media(min-width: 550px) and (max-width: 780px){
    .blogContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.masterContainer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 25px;
}

.masterText ul{
    margin-top: 10px;
}

.masterText ul li{
    display: flex;
    align-items: center;
    margin-top: 20px;
    color: #575757;
    font-size: 20px;
}

.masterText ul li::before{
    content: '';
    display: inline-block;
    background: url('../img/components/star-icon.png') no-repeat center / cover;
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

.absoluteImgContent{
    position: relative;
    width: 420px;
    margin-top: 20px;
}

.absoluteImgContent img{
    width: 420px;
    object-fit: cover;
    z-index: 1;
    position: relative;
    border-radius: 20px;
}

.absoluteElementPhotoTop, .absoluteElementPhotoBottom{
    display: flex;
    position: absolute;
    width: 200px;
    height: 200px;
    background: #D22D16;
    border-radius: 20px;
}

.absoluteElementPhotoTop{
    left: -20px;
    top: -20px;
}

.absoluteElementPhotoBottom{
    right: -20px;
    bottom: -20px;
}

@media(min-width: 320px) and (max-width: 920px){
    .masterContainer{
        justify-content: center;
        flex-wrap: wrap-reverse;
        margin-top: 55px;
    }
    
    .masterText ul{
        margin-top: 45px;
    }
    
    .masterText ul li{
        font-size: 16px;
    }

    .absoluteImgContent{
        width: 300px;
    }
    
    .absoluteImgContent img{
        height: auto;
        width: 300px;
        object-fit: cover;
        z-index: 1;
        position: relative;
        border-radius: 20px;
    }
    
    .absoluteElementPhotoTop, .absoluteElementPhotoBottom{
        width: 150px;
        height: 150px;
    }
}


@media(min-width: 920px) and (max-width: 1200px){
    .masterContainer{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 25px;
    }

    .absoluteImgContent{
        width: 320px;
    }
 
    .absoluteImgContent img{
        height: auto;
        width: 320px;
        object-fit: cover;
        z-index: 1;
        position: relative;
        border-radius: 20px;
    }
    
    .absoluteElementPhotoTop, .absoluteElementPhotoBottom{
        display: flex;
        position: absolute;
        width: 200px;
        height: 200px;
        background: #D22D16;
        border-radius: 20px;
    }
    
    .absoluteElementPhotoTop{
        left: -20px;
        top: -20px;
    }
    
    .absoluteElementPhotoBottom{
        right: -20px;
        bottom: -20px;
    }
    
}


/* contact */

.contactsContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 40px;
    margin-top: 30px;
}


.contactItemBlock{
    margin-top: 15px;
}

.contactItemBlock h3{
    font-size: 18px;
    color: #575757;
    margin-bottom: 10px;
}

.contactItemBlock p , .contactItemBlock a{
    color: #898989;
    font-size: 16px;
}

.contactSocialContainer {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-top: 15px;
}

.contactSocialContainer a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    font-size: 16px;
    background: #D22D16;
    transition: .4s;
}

.contactSocialContainer a img {
    width: 18px;
}

.contactSocialContainer a:first-child {
    margin-left: 0;
}

.contactAddressBlock{
    margin-top: 25px;
}

.contactAddressBlock p{
    color: #999;
}

.contactAddressBlock img{
    width: 100%;
    border-radius: 20px;
    margin-top: 10px;
}

.contactItemMap{
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

@media(min-width: 320px) and (max-width: 720px){
    .contactsContainer{
        grid-template-columns: 1fr;
    }
}

@media(min-width: 720px) and (max-width: 920px){
    .contactsContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .contactItem:nth-child(3) {
        grid-column: 1 / -1;
        height: 300px;
    }
}

/* footer */

footer{
    margin-top: 45px;
}

.footerTop{
    display: flex;
    justify-content: center;
    padding: 50px 0;
    background: #222;
}

.footerLogo h2{
    font-weight: unset;
    font-size: 48px;
}

.footerTopContainer{
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
}

.footerItem h2{
    color: #D22D16;
}

.footerItem a{
    display: inline-block;
    color: #fff;
    margin-top: 10px;
    width: 100%;
    font-size: 14px;
}

.footerSocialContainer{
    display: flex;
    width: 100%;
    margin-top: 20px;
}

.footerSocial{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
    margin-right: 10px;
    transition: .4s;
    background: #D22D16;
}

.footerSocial img{
    width: 16px;
}

.footerSocial:hover{
    transform: scale(1.1, 1.1);
}

/* footerBottom */

.footerBottom{
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background: #D22D16;
}

.footerBottomContainer{
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.footerBottomContainer p{
    font-size: 14px;
}

.footerBotomLeft{
    display: flex;
}

.footerBotomLeft a{
    margin-left: 30px;
    font-size: 14px;
}

.footerBottomContainer a{
    color: #fff;
    text-decoration: underline;
}


@media(min-width: 320px) and (max-width: 550px){
    .footerTopContainer{
        gap: 40px;
        grid-template-columns: repeat(1, 1fr);
    }

    .footerSocialContainer{
        justify-content: center;
    }

    .footerItem{
        text-align: center;
        width: 100%;
    }

    .footerBottom{
        flex-wrap: wrap;
    }

    .footerBottomContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        color: #fff;
    }

    .footerBottomContainer p{
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .footerBotomLeft{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .footerBotomLeft a{
        display: inline-block;
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }

    .footerBotomRight{
        width: 100%;
    }

    .footerBottomContainer a{
        display: inline-block;
        color: #fff;
        text-decoration: underline;
    }
}


@media(min-width: 550px) and (max-width: 720px){
    .footerTopContainer{
        gap: 40px;
        grid-template-columns: repeat(2, 1fr);
    }

    .footerSocialContainer{
        justify-content: center;
    }

    .footerItem{
        text-align: center;
        width: 100%;
    }

    .footerBottom{
        flex-wrap: wrap;
    }

    .footerBottomContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        color: #fff;
    }

    .footerBottomContainer p{
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .footerBotomLeft{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .footerBotomLeft a{
        display: inline-block;
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }

    .footerBotomRight{
        width: 100%;
    }

    .footerBottomContainer a{
        display: inline-block;
        color: #fff;
        text-decoration: underline;
    }
}

@media(min-width: 720px) and (max-width: 1290px){
    .footerTopContainer{
        gap: 40px;
        grid-template-columns: repeat(3, 1fr);
    }

    .footerSocialContainer{
        justify-content: center;
    }

    .footerItem{
        text-align: center;
        width: 100%;
    }

    .footerBottom{
        flex-wrap: wrap;
    }

    .footerBottomContainer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        color: #fff;
    }

    .footerBottomContainer p{
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .footerBotomLeft{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .footerBotomLeft a{
        display: inline-block;
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }

    .footerBotomRight{
        width: 100%;
    }

    .footerBottomContainer a{
        display: inline-block;
        color: #fff;
        text-decoration: underline;
    }
}


/* page: category */

.categoryPageContainer{
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-top: 30px;
}

.categoryPageService{
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.categoryPageServiceItem{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
    background: #FFF5F8;
    border-radius: 5px;
}

.categoryPageText{
    margin-top: 25px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

@media(min-width: 320px) and (max-width: 720px){
    .categoryPageContainer{
        justify-content: center;
        flex-wrap: wrap;
        gap: 60px;
    }

    .categoryPageLeft{
        width: 100%;
    }
}

/* page */

.pageContainer{
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-top: 35px;
}

.pageText{
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 40px);
}

@media(min-width: 320px) and (max-width: 720px){
    
    .pageContainer{
        justify-content: center;
        flex-wrap: wrap-reverse;
        gap: 60px;
        margin-top: 35px;
    }

    .pageText{
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 40px);
    }
}

.interiorContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 35px;
}

.interiorItem{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; 
    transition: .4s;
    border-radius: 20px;
}

@media(min-width: 320px) and (max-width: 550px){
    .interiorContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media(min-width: 550px) and (max-width: 920px){
    .interiorContainer{
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.trainingContainer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.trainingText{
    width: calc(100% - 620px);
}

.trainingText h2{
    font-weight: bold;
    color: #D22D16;
    font-size: 36px;
}

.trainingText p{
    margin-top: 15px;
    color: #575757;
}

.trainingText .btn{
    margin-top: 20px;
}

.trainingImg{
    width: 580px;
}

.trainingImg img{
    width: 100%;
    border-radius: 20px;
}

@media(min-width: 320px) and (max-width: 720px){
    .trainingContainer{
        justify-content: center;
        flex-wrap: wrap-reverse;
    }

    .trainingText{
        width: 100%;
        margin-top: 20px;
    }
    
    .trainingImg{
        width: 100%;
    }

    .trainingText h2{
        font-size: 20px;
    }
}

@media(min-width: 720px) and (max-width: 920px){
    .trainingContainer{
        flex-wrap: wrap-reverse;
    }

    .trainingText{
        width: 100%;
        margin-top: 20px;
    }
    
    .trainingImg{
        width: 480px;
    }

    .trainingText h2{
        font-size: 26px;
    }
}

@media(min-width: 920px) and (max-width: 1200px){
    .trainingText{
        width: calc(100% - 460px);
    }
    
    .trainingText h2{
        font-size: 32px;
    }
    
    .trainingImg{
        width: 420px;
    }
}

.treningsContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 35px;
}

.treningItem{
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    padding: 25px;
    background: #fffafb;
    border-radius: 20px;
}

.treningItemTop{
    text-align: center;
    width: 100%;
    color: #D22D16;
}

.treningItemTop h2{
    font-size: 20px;
}

.treningDescription{
    color: #575757;
    text-align: left;
    font-size: 16px;
    margin-top: 15px;
}

.treningItemFooter{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

.treningItemFooter span{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #D22D16;
}

.treningItemFooter .btn{
    margin-top: 15px;
}

@media(min-width: 320px) and (max-width: 720px){
    .treningsContainer{
        grid-template-columns: repeat(1, 1fr);
    }

    .treningDescription{
        font-size: 14px;
    }
}

@media(min-width: 720px) and (max-width: 1200px){
    .treningsContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .treningItem{
        padding: 15px;
    }

    .treningDescription{
        font-size: 14px;
    }
}

.labelCheckbox{
    display: flex !important;
    align-items: center;
    text-align: left;
    margin-top: 15px;
    width: 100%;
}

.labelCheckbox input{
    width: auto !important;
    margin: 0 !important;
}

.labelCheckbox p{
    margin-left: 10px;
    font-size: 14px !important;
    font-weight: unset !important;
    color: #666;
    margin-top: 0 !important;
}

.labelCheckbox p a{
    color: #D22D16
}