header{
    position: fixed;
    width: 100%;
    padding-inline: calc((100% - 1380px) / 2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background-color: #FFF;
    z-index: 20;
    border-bottom: 1px solid var(--clr-gr);
    box-shadow: 0px 20px 40px 0px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    >.header-burger{
        display: none;
    }
    
    a{
        text-decoration: none;
    }

    nav{
        display: flex;
        align-items: center;
        a{
            color: var(--clr-black-lt);
            text-decoration: none;
            padding: 29px 10px;
            &.active{
                // padding-bottom: 26px;
                margin-bottom: -1px;
                border-bottom: 2px solid var(--clr-primary);
            }
            &.tel{
                display: none;
            }
            &.top-logo{
                margin-right: 30px;
                padding: 0;
                display: inline-flex;
                align-items: center;
            }
        }        
    }
    
    .right{

        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--clr-black);
        font-variant-numeric: lining-nums tabular-nums;
        line-height: 24px;
        margin-right: 30px;
    };
}

router-outlet{
    margin-top: 80px;
}

.banner{
    display: flex;
    padding-block: 30px;

    >div{
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        >*{    box-sizing: border-box;}

    }
    .banner-img{
        border-radius: 16px;
        background-image: url("../assets/img/banner.jpg");
        background-size: cover;
        background-position: center;
    }
}

footer{
    display: flex;
    flex-direction: column;
    background-color: var(--clr-gr-lt);
    padding-block: 60px;
    margin-top: 60px;
    .footer-main{
        display: flex;
        flex-direction: row;
        font-size: 16px;
        line-height: 24px;
        a{
            color: var(--clr-black);
            text-decoration: none;
            display: flex;
            gap: 16px;
            svg{
                flex-shrink: 0;
                color: var(--clr-black-lt);
            }
        }
        >div{
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .logo img{
            width: 152px;
            height: 152px;
        }
    }
    .copyright{
        border-top: 1px solid var(--clr-gr);
        margin-top: 30px;
        padding-top: 30px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

}

@media screen and (min-width: 1025px){
    header{
        .top-logo{
            margin-left: 30px;
        }
    }
    .banner{
        .banner-img{
            max-height: calc(50vw - 30px);
        }
    }
}

@media screen and (max-width: 1024px) {

    header{
        padding-inline: 48px 55px;
        .header-shadow{
            width: 100vw;
            height: calc(100vh - 80px);
            position:fixed;
            top: 80px;
            left: 0;
            background-color: var(--clr-black-lt);
        }
        >.header-burger{
            display: block;
            border: none;
            background-color: transparent;
            color: var(--clr-black-lt);
            cursor: pointer;
        }
        nav{
           .nav-items{
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 79px;
            left:0;
            gap: 24px;
            background-color: #FFF;
            width: 100vw;
            align-items: flex-start;
            padding: 30px 24px 30px;
            border-bottom: 1px solid var(--clr-gr);
            a{
                padding: 0px;
                &.tel{
                    display: flex;
                    margin-top: 30px;
                }
            }
           }
           .nav-hide{
                display: none
            }

        }
        .right{
            display: none;
        }
    }

    .banner{
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
    
        .banner-text{
            margin-block: 40px 20px;
    
        }
        .banner-img{
            flex:auto;
            aspect-ratio: 21/16;
            margin-left: -20px;
            margin-top: -15px;
            width: calc(100% + 40px);
            height: calc(50vw - 30px);
            background-image: url("../assets/img/banner.jpg");
            background-size: cover;
            background-position: center;
            border-radius: 0;
        }
    }

    footer{

        .footer-main{
            flex-direction: column;
            gap: 30px;
            .footer-info{
                padding-inline: 30px 15px;
            }
            .logo{
                margin-left: 15px;
            }
            .footer-nav{
                display: none;
            }
        }
        .copyright{
            padding-inline: 15px;
        }

    }
}

@media screen and (max-width: 768px) {
    header{
        padding-inline: 4px 10px;
    }
  }