@font-face {
    font-family: "MyFont";
    src: url("https://amir-battal.github.io/Thmfont/Nt%20Panorama%20Font/WEB/NTPanoramaNaskh-Regular.woff") format("woff");
}

* {
    font-family: "MyFont";
    font-feature-settings:
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "swsh" 1;
}

/* =========================================
   APP
========================================= */

.app{
    /* background-color:#D6C8BD; */
}

/* =========================================
   NAVBAR
========================================= */

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:0 100px;
    z-index:999;
}

#main-nav .flex.items-center.h-full.relative.gap-3{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

/* =========================================
   HEADER LAYOUT
========================================= */

.header-right,
.header-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
}

.header-right{
    justify-content:flex-start;
}

.header-left{
    justify-content:flex-end;
}

.header-center{

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:12px;

    flex:2;

}

.header-center .order-2{
    display:flex !important;
    position:static !important;
}

.header-center .order-1{
    position:static !important;
    transform:none !important;
    margin-top:3%;
}

/* =========================================
   HERO
========================================= */

.hero-slide-content{

    position:relative;
    overflow:hidden;

    background:#834E43;

    background:linear-gradient(
        180deg,
        rgba(131,78,67,1) 0%,
        rgba(214,200,189,1) 100%
    );

}

.hero-wave-layer{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:2;

    margin-right:100%;

}

.hero-text-item{

    position:relative;
    z-index:5;

}

.wave-particle{

    position:absolute;

    width:2px;
    height:2px;

    border-radius:50%;

    background:white;

    opacity:.8;

    box-shadow:0 0 6px rgba(255,255,255,.8);

    will-change:transform;

}

/* =========================================
   TABLET
========================================= */

@media (max-width:992px){

nav{

    padding:0 24px;

}

#main-nav .flex.items-center.h-full.relative.gap-3{

    min-height:70px;

}

.header-right{

    flex:1;

    justify-content:flex-start;

    gap:10px;

}

.header-center{

    flex:1;

    flex-direction:row;

}

.header-left{

    flex:1;

    justify-content:flex-end;

}

.header-center .hidden.lg\:flex{

    display:none !important;

}

.header-center img,
.header-center svg{

    max-height:42px;
    width:auto;

}

.header-left a,
.header-right a,
.header-left button,
.header-right button{

    min-width:40px;
    min-height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

}

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

nav{

    padding:0 16px;

}

.header-right,
.header-left{

    gap:8px;

}

.header-center{

    gap:0;

}

.header-center img,
.header-center svg{

    max-width:150px;
    max-height:36px;

}

}

/* =========================================
   SMALL PHONES
========================================= */

@media (max-width:480px){

nav{

    /* padding:0 5px; */
  padding-right: -10px;

}

.header-left,
.header-right{

    gap:6px;

}

.header-center img,
.header-center svg{

    max-width:120px;
    margin-right: -40%;

}

.header-left a,
.header-right a,
.header-left button,
.header-right button{

    width:36px;
    height:36px;

}

.hero-wave-layer{

    display:block;

}

}