/* header */
    header{
        display: flex;
        background: var(--white);
    }
    
    header.scrolled{
        position: fixed;
        top: 0; left: 0;
        z-index: 100000;
        width: 100%;
    }
    
    .box_header_logo{
        flex: 0 0 12%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .header_logo{
        width: 65%; height: 65%;
    }
    
    .header_logo img{
        width: 100%; height: 100%;
        object-fit: contain;
    }
    
    .right_header{
        flex: 0 0 88%;
    }
    
    .box_header_contact{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
        background: var(--second);
        padding: 8px 32px;
        padding-left: 64px;
        clip-path: polygon(3% 0%, 100% 0, 100% 100%, 0% 100%);
    }
    
    .box_header_contact p{
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .box_header_contact p span{
        color: var(--white);
    }
    
    .box_header_contact p i{
        color: var(--white);
        transform: translatey(1px);
    }
    
    .right_header_contact{
        display: flex;
        align-items: center;
        gap: 32px;
    }
    
    .header_social{
        display: flex;
        gap: 16px;
    }
    
    .header_social a{
        width: 32px; height: 32px;
        background: var(--first);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    
    .header_social a i{
        color: var(--white);
    }
    
    .header_social a:hover{
        transform: translatey(-3px);
    }
    
    .header_contact a:not(:last-child){
        margin-right: 16px;
    }
    
    .header_contact a{
        color: var(--white);
    }
    
    .header_contact a:hover{
        color: var(--first);
        text-decoration: underline;
    }
    
    .header_contact a i{
        color: var(--white);
        margin-right: 8px;
        transform: translatey(3px);
    }
    
    /* navbar */
        nav{
            display: flex;
            gap: 16px;
            justify-content: flex-end;
            background: #00000010;
            padding: 8px 32px;
            padding-left: 64px;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 100%);
        }
        
        .menu{
            list-style: none;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 25px;
            position: relative;
        }
        
        .menu li a:hover, .menu_item.active a{
            color: var(--first);
            text-decoration: underline;
        }
        
        .btn_menu,  .btn_menu i, .header_nav_logo, .btnClose{
            display: none;
        }
    /* navbar */
/* header */

/* responsive */
    @media screen and (max-width: 1200px){
        nav, .box_header_contact{
            clip-path: none;    
        }
        
        nav .flexBtn .btn{
            border-radius: 8px;
        }
        
        .btn_menu{
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--second);
            width: 35px; height: 35px;
            border-radius: 8px;
            i{
                font-size: 25px;
                color: var(--white);
            }
        }
        
        .btn_menu i{
            display: block;
        }
        
        .btn_menu span{
            display: none;
        }
        
        .menu{
            position: fixed;
            top: 0; right: 0;
            flex-direction: column;
            justify-content: flex-start;
            height: 100dvh;
            background: var(--first);
            min-width: 230px;
            align-items: flex-start;
            gap: 0;
            padding: 16px 32px;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            z-index: 10000;
            border-left: 1px solid var(--light-white);
        }
        
        .menu.active{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        
        .btnClose{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            i{
                color: var(--white);
                font-size: 25px;
                transform: translatex(12px);
            }
        }
        
        .menu li{
            padding: 16px 0;
        }
        
        .menu li a, .menu_item.active a{
            color: var(--white);
        }
        
        .menu li a:hover{
            color: var(--second);
        }
    }
    
    @media screen and (max-width: 950px){
        .header_social{
            display: none;
        }
    }
    
    @media screen and (max-width: 715px){
        .box_header_logo{
            display: none;
        }
        
        .right_header{
            flex: 0 0 100%;
        }
        
        nav{
            justify-content: space-between;
            padding: 8px 25px;
        }
        
        .header_nav_logo{
            display: block;
            width: auto; height: 45px;
        }
        
        .header_nav_logo img{
            width: 100%; height: 100%;
            object-fit: contain;
        }
        
        .box_header_contact p{
            display: none;
        }
        
        .box_header_contact{
            padding: 8px;
        }
        
        .right_header_contact{
            justify-content: center;
            width: 100%;
        }
    }
/* responsive */