/* ================================
CONFIG
================================ */

:root{
  --container-width:1440px;
  --player-height:130px;
  --sidebar-width:360px;
  --mobile-gap:5px;
}

/* ================================
RESET
================================ */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:sans-serif;
  padding-bottom:calc(var(--player-height) + 20px);
}

/* ================================
PLAYER
================================ */

.player{
  position:fixed;
  bottom:5px;
  height:var(--player-height);
  background:#8f4a4a;
  /* color:white; */
  display:flex;
  flex-direction: column;
  /* align-items:center; */
  justify-content:space-between;
  z-index:1000;

  backdrop-filter: blur(10px); /* بلور پشت */
  -webkit-backdrop-filter: blur(10px); /* برای Safari */
  padding: 15px;
  border-radius: 25px;
  transition: .5s;
}

@media (max-width:1400px){
  .player{
    width:calc(100% - 10px);
    left:5px;
  }
}

@media (min-width:1400px){
  .player{
    width:var(--container-width);
    left:50%;
    transform:translateX(-50%);
  }
}

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

.header{
  width:100%;
  height:100vh;
  background:#03134b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  color:white;
}
@media (max-width:1400px){
    .header{
        display: none;
    }
}

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

.nav{
  width:100%;
  background:#111;
  color:white;
  z-index:900;
}

@media (min-width:1400px){
  .nav{
    position:sticky;
    top:0;
  }
}

@media (max-width:1400px){
  .nav{
    position:fixed;
    top:0;
    left:0;
  }
}

.nav-inner{
  max-width:var(--container-width);
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
}

.logo{
  font-weight:bold;
}

.menu{
  display:flex;
  gap:20px;
}

.menu a{
  color:white;
  text-decoration:none;
}

.hamburger{
  display:none;
  font-size:26px;
  cursor:pointer;
}

@media (max-width:1400px){

  .menu{
    position:absolute;
    top:60px;
    left:0;
    width:100%;
    background:#222;
    flex-direction:column;
    display:none;
  }

  .menu.active{
    display:flex;
  }

  .hamburger{
    display:block;
  }

}

/* ================================
SIDEBAR
================================ */

.sidebar{
  background:#0c795ee3;

  backdrop-filter: blur(10px); /* بلور پشت */
  -webkit-backdrop-filter: blur(10px); /* برای Safari */
  padding: 20px;
  border-radius: 25px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width:1400px){

  .sidebar{
    position:fixed;
    width:var(--sidebar-width);
    top:75px;
    bottom:calc(var(--player-height) + 20px);
    right:calc(50% - 720px);
    left: auto !important;
    z-index: 9001;
  }

}

@media (max-width:1400px){

  .sidebar{
    width:calc(100% - 20px);
    height:300px;
    position:sticky;
    position: fixed;
    top: calc(100% - 320px - var(--player-height));
    z-index: 999;
    left: 10px;
    transition: .5s;
  }

}

/* ================================
CONTAINERS
================================ */

.section{
  width:100%;
  /* min-height:600px; */
  position:relative;
  padding:40px 0;
}

.rtl{
    direction: rtl;
}

/* DESKTOP GRID */

@media (min-width:1400px){
   .section{
    display: flex;
    justify-content: center;
   }

  .row{
    /* position:absolute; */
    /* width:calc(var(--container-width) - var(--sidebar-width) - 8px); */
    /* left:calc(50% - 720px); */
    /* background:#eee; */
    /* padding:40px; */
    padding-right: calc(18px + var(--sidebar-width));
    width: 1440px;
  }

}

/* MOBILE GRID */

@media (max-width:1400px){

  .row{
    width:100%;
    position:relative;
    padding:30px;
    /* background:#eee; */
  }

}

/* demo colors */

.section:nth-child(odd){
  /* background:#f2f2f2; */
}

.section:nth-child(even){
  /* background:#ddd; */
}