/* BASE WEB SETTING  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  --red        : #e90000;
  --blue       : #0063ab;
  --yellow     : #eacc00;
  --white      : white;
  --black      : black;
  --transparent: transparent;
  --font4      : DJR2;
}

@font-face {
  font-family: "DJR2";
  font-weight: 600;
  font-style : normal;
  src        : url('../../src/fonts/djr2.ttf') format("truetype");
}

html {
  font-family: "DJR2";
}

body {
  background-image: url(/layout-artemon36/src/images/background-head/background-head-1024.png);
  background-repeat: no-repeat;
  background-size: contain;
}


/* TEXT DOCUMENT STRUCTURE  */

.header-title .inf {
  font-size: calc(1rem + .5rem);
  font-family: var(--font4);
}

.header-title-block > h1 {
  text-transform: uppercase;
  font-size: 2.5rem;
}

.container {
  margin: 0;
}

.header-title .inf a {
  color          : var(--red);
  text-decoration: underline;
}

.header-title-block {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: initial;
  flex-wrap: wrap;
  flex-direction: row;
}

h1,
h2,
h3,
h4 {
  text-align: center;
  margin    : 1rem 0;
}

.conetnt-title {
  text-align : center;
  font-weight: 600;
  font-size  : calc(1.5rem + .5rem);
}

.header-title {
  display        : flex;
  justify-content: center;
  font-weight    : 600;
  align-items    : center;
  margin         : 1.5rem 0;
}

/* GRID CONTAINER STRUCTURE */

/* section 1 */

.grid_content_container {
  /*border: solid red;*/
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.list-menu-desctop {
  margin-left: 0;
}

.container {
  display         : flex;
  background-color: rgb(0, 0, 0, .85);
  justify-content : center;
  align-items     : center;
  width: max-content;
  border-radius   : 15px;
  overflow        : clip;
  box-shadow      : 5px 7px 15px 0 rgb(0, 0, 0, .75);
}

.div1,
.div2,
.div3,
.div4,
.div5,
.div6,
.div7,
.div8,
.div9,
.div10,
.div11,
.div12,
.div13,
.div14,
.div15 {
  display           : flex;
  justify-content   : center;
  align-items       : center;
  /* color          : var(--transparent); */
}

.div11 {
  /* color: var(--transparent) */
  color: var(--white);
}

.parent {
  display              : grid;
  grid-template-columns: repeat(4, 4rem) 3.5rem;
  grid-template-rows   : repeat(6, 3rem);
  gap                  : 10px;
}

.div1 {
  grid-column     : span 2 / span 2;
  background-color: var(--red);
}

.div2 {
  grid-column-start: 3;
  Background-color : var(--white);
}

.div3 {
  grid-column-start: 4;
  background-color : var(--white);
}

.div4 {
  grid-column-start: 5;
  background-color : var(--white);
}

.div5 {
  grid-column     : span 2 / span 2;
  grid-row-start  : 2;
  background-color: var(--white);
  border-left     : solid rgb(0, 0, 0, .85) .5rem;
}

.div6 {
  grid-column      : span 2 / span 2;
  grid-column-start: 3;
  grid-row-start   : 2;
  background-color : var(--white);
}

.div7 {
  grid-row         : span 2 / span 2;
  grid-column-start: 5;
  grid-row-start   : 2;
  background-color : var(--white);
}

.div8 {
  grid-column     : span 2 / span 2;
  grid-row-start  : 3;
  background-color: var(--white);
  border-left     : solid rgb(0, 0, 0, .85) .5rem;
}

.div9 {
  grid-column      : span 2 / span 2;
  grid-row         : span 2 / span 2;
  grid-column-start: 3;
  grid-row-start   : 3;
  background-color : var(--blue);
}

.div10 {
  grid-row         : span 2 / span 2;
  grid-column-start: 5;
  grid-row-start   : 4;
  background-color : var(--yellow);
}

.div11 {
  grid-column      : span 2 / span 2;
  grid-column-start: 1;
  grid-row-start   : 4;
  background-color : var(--black);
  border-left      : solid rgb(37, 36, 36) .5rem;
}

.div12 {
  grid-column      : span 2 / span 2;
  grid-row         : span 2 / span 2;
  grid-column-start: 3;
  grid-row-start   : 5;
  background-color : var(--red);
}

.div13 {
  grid-column-start: 5;
  grid-row-start   : 6;
  background-color : var(--white);
}

.div14 {
  grid-row         : span 2 / span 2;
  grid-column-start: 1;
  grid-row-start   : 5;
  background-color : var(--yellow);
  border-left      : solid rgb(0, 0, 0, .85) .5rem;
}

.div15 {
  grid-row         : span 2 / span 2;
  grid-column-start: 2;
  grid-row-start   : 5;
  background-color : var(--white);
}

/* new */

/* section 2 */

.wrapper {
  border       : solid 1.5px rgb(164, 65, 230);
  margin       : 0 .5rem;
  position     : relative;
  padding      : .5rem;
  display      : flex;
  margin-bottom: 1rem;
}

.grid_content_container_slots {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  width                : 100%;
  padding              : 1rem;
  gap                  : .5rem;
  border               : solid 1.5px rgb(164, 65, 230);
}

#item-0 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(1\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 6 / span 6;
  grid-row        : span 2 / span 2;
}

#item-1 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(2\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 2 / span 2;
  grid-row        : 3;
}

#item-2 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(3\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 2 / span 2;
  grid-row        : 3;
}

#item-3 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(4\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 2 / span 2;
  grid-row        : 3;
}

#item-4 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(2\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 3 / span 3;
  grid-row        : 4;
}

#item-5 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: #02022e;
  background      : url(../images/grafic/\ \(2\).jpg) center / cover no-repeat;
  border          : solid .5px rgb(164, 65, 230);
  grid-column     : span 3 / span 3;
  grid-row        : 4;
}

.sidebar {
  top       : 0;
  left      : 0;
  height    : 100vh;
  width     : 260px;
  background: #11101d;
  z-index   : 100;
  transition: all 0.5s ease;
}

.sidebar.close {
  width: 78px;
}

.sidebar .logo-details {
  height         : 60px;
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.sidebar .logo-details i {
  font-size  : 30px;
  color      : #fff;
  height     : 50px;
  min-width  : 78px;
  text-align : center;
  line-height: 50px;
}

.sidebar .logo-details .logo_name {
  font-size       : 22px;
  color           : #fff;
  font-weight     : 600;
  transition      : 0.3s ease;
  transition-delay: 0.1s;
}

.sidebar.close .logo-details .logo_name {
  transition-delay: 0s;
  opacity         : 0;
  pointer-events  : none;
}

.sidebar .nav-links {
  height  : 100%;
  padding : 30px 0 150px 0;
  overflow: auto;
}

.sidebar.close .nav-links {
  overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar {
  display: none;
}

.sidebar .nav-links li {
  position  : relative;
  color     : rgb(243, 152, 67);
  list-style: none;
  transition: all 0.4s ease;
}

.sidebar .nav-links li:hover {
  background: #1d1b31;
}

.sidebar .nav-links li .iocn-link {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.sidebar.close .nav-links li .iocn-link {
  display: block
}

.sidebar .nav-links li i {
  height     : 50px;
  min-width  : 78px;
  text-align : center;
  line-height: 50px;
  color      : #fff;
  font-size  : 20px;
  cursor     : pointer;
  transition : all 0.3s ease;
}

.sidebar .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}

.sidebar.close .nav-links i.arrow {
  display: none;
}

.sidebar .nav-links li a {
  display        : flex;
  align-items    : center;
  text-decoration: none;
}

.card {
  grid-template-columns: none;
}

.container-main {
  transform: translateY(2.5rem);
}

.sidebar .nav-links li a .link_name {
  font-size  : 18px;
  font-weight: 400;
  color      : #fff;
  transition : all 0.4s ease;
}

.sidebar.close .nav-links li a .link_name {
  opacity       : 0;
  pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
  padding   : 6px 6px 14px 80px;
  margin-top: -10px;
  background: #1d1b31;
  display   : none;
}

.sidebar .nav-links li.showMenu .sub-menu {
  display: block;
}

.sidebar .nav-links li .sub-menu a {
  color      : #fff;
  font-size  : 15px;
  padding    : 5px 0;
  white-space: nowrap;
  opacity    : 0.6;
  transition : all 0.3s ease;
}

.sidebar .nav-links li .sub-menu a:hover {
  opacity: 1;
}

.sidebar.close .nav-links li .sub-menu {
  position      : absolute;
  left          : 100%;
  top           : -10px;
  margin-top    : 0;
  padding       : 10px 20px;
  border-radius : 0 6px 6px 0;
  opacity       : 0;
  display       : block;
  pointer-events: none;
  transition    : 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
  top           : 0;
  opacity       : 1;
  pointer-events: auto;
  transition    : all 0.4s ease;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity  : 1;
  display  : block;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity       : 1;
  pointer-events: auto;
  padding       : 3px 20px 6px 16px;
  opacity       : 0;
  pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
  top      : 50%;
  transform: translateY(-50%);
}

.one {
  width           : 80%;
  margin-left     : 10%;
  background-color: black;
  height          : 400px;
}

.sidebar .profile-details {
  position       : fixed;
  bottom         : 0;
  width          : 260px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  background     : #1d1b31;
  padding        : 12px 0;
  transition     : all 0.5s ease;
}

.sidebar.close .profile-details {
  background: none;
}

.sidebar.close .profile-details {
  width: 78px;
}

.sidebar .profile-details .profile-content {
  display    : flex;
  align-items: center;
}

.sidebar .profile-details img {
  height       : 52px;
  width        : 52px;
  object-fit   : cover;
  border-radius: 16px;
  margin       : 0 14px 0 12px;
  background   : #1d1b31;
  transition   : all 0.5s ease;
}

.sidebar.close .profile-details img {
  padding: 10px;
}

.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
  color      : #fff;
  font-size  : 18px;
  font-weight: 500;
  white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job {
  display: none;
}

.sidebar .profile-details .job {
  font-size: 12px;
}

.home-section {
  position  : relative;
  background: #E4E9F7;
  height    : 100vh;
  left      : 260px;
  width     : calc(100% - 260px);
  transition: all 0.5s ease;
}

.sidebar.close~.home-section {
  left : 78px;
  width: calc(100% - 78px);
}

.home-section .home-content {
  height     : 60px;
  display    : flex;
  align-items: center;
}

.home-section .home-content .bx-menu,
.home-section .home-content .text {
  color    : #11101d;
  font-size: 35px;
}

.home-section .home-content .bx-menu {
  margin: 0 15px;
  cursor: pointer;
}

.home-section .home-content .text {
  font-size  : 26px;
  font-weight: 600;
}

@media (max-width: 420px) {
  .sidebar.close .nav-links li .sub-menu {
    display: none;
  }
  .header-title-block > h1 {
    text-transform: uppercase;
    font-size: 2rem;
  }
}

/* section 3 */

.img {
  width           : 100%;
  display         : block;
  height          : 100%;
  object-fit      : cover;
  background-color: #02022e;
}

h2 {
  font-size  : clamp(1rem, 0.8750rem + 0.6250vw, 1.5rem);
  line-height: 1.3;
  font-weight: 700;
}

.gallerey {
  display              : grid;
  grid-template-columns: 25% 30% 15% 25%;
  gap                  : 15px;
  place-content        : center;
  grid-template-rows   : 50% 50%;
  height               : 80vh;
  min-height           : 460px;
  padding              : max(2vh, 1.5rem);
}

@media screen and (max-width: 768px) {
  .gallerey {
    height: 65vh;
  }

  #item-0 {
    background : url(../images/grafic/\ \(1\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 1;
  }

  #item-1 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 2;
  }

  #item-2 {
    background : url(../images/grafic/\ \(3\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 2;
  }

  #item-3 {
    background : url(../images/grafic/\ \(4\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 3;
  }

  #item-4 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 3;
  }

  #item-5 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 4;
  }
}

@media screen and (max-width: 470px) {
  .gallerey {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows   : repeat(3, 35%);
  }
}

.gallerey .card {
  border-radius: 25px;
  box-shadow   : -2px 4px 15px rgba(0, 0, 0, 0.26);
}

@media screen and (max-width: 470px) {
  .gallerey .card {
    grid-column: span 1;
  }
}

.gallerey .card:nth-child(2) {
  grid-column: 2/3;
  grid-row   : span 2;
}

@media screen and (max-width: 768px) {
  .gallerey .card:nth-child(2) {
    grid-column: span 1;
    grid-row   : span 1;
  }
}

.gallerey .card:nth-child(3) {
  grid-column: span 2;
}

@media screen and (max-width: 768px) {
  .gallerey .card:nth-child(3) {
    grid-column: 2/4;
    grid-row   : 1/2;
  }
}

@media screen and (max-width: 768px) {
  .gallerey .card:nth-child(6) {
    grid-column: 2/4;
    grid-row   : 2/3;
  }
}

@media screen and (max-width: 470px) {
  .gallerey .card:nth-child(5) {
    grid-column: span 2;
  }
}

.gallerey .card p {
  font-size  : clamp(0.9rem, 0.8750rem + 0.1250vw, 1rem);
  line-height: 1.4;
}

.gallerey .card .card__img {
  position: relative;
  height  : 100%;
}

.img {
  border-radius: 1rem;
}

.gallerey .card .card__img .card__overlay {
  position       : absolute;
  bottom         : 0;
  left           : 0;
  content        : "";
  color          : #fff;
  padding        : clamp(0.938rem, 5vw, 1.563rem);
  background     : #02022e6c;
  border-radius: 1rem;
  background     : linear-gradient(0deg, rgba(0, 0, 0, 0.57) 0%, rgba(255, 255, 255, 0) 100%);
  width          : 100%;
  height         : 100%;
  display        : flex;
  justify-content: flex-end;
  flex-direction : column;
}

.gallerey .card .card__img span {
  position     : absolute;
  top          : 25px;
  left         : min(2vmax, 1.563rem);
  color        : #ff7b29;
  background   : #fff;
  border-radius: 50px;
  align-items: center;
  padding      : 2px 8px 2px 6px;
  display      : flex;
  box-shadow   : 0px 1px 20px #0000002b;
}

@media screen and (max-width: 768px) {
  .gallerey .card .card__img span {
    top: 20px;
  }
}

@media screen and (max-width: 470px) {
  .gallerey .card .card__img span {
    top: 15px;
  }
}

.gallerey .card .card__img span svg {
  fill        : #ff7b29;
  width       : 20px;
  margin-right: 2px;
}

/* media requare */
@media screen and (max-width: 420px) {
  #item-0 {
    background : url(../images/grafic/\ \(1\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 1;
  }

  #item-1 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 2;
  }

  #item-2 {
    background : url(../images/grafic/\ \(3\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 3;
  }

  #item-3 {
    background : url(../images/grafic/\ \(4\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 4;
  }

  #item-4 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 5;
  }

  #item-5 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : 6;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #item-0 {
    background : url(../images/grafic/\ \(1\).jpg) center / contain no-repeat;
    grid-column: span 6 / span 6;
    grid-row   : span 2 / span 2;
  }

  #item-1 {
    background: url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    border    : solid .5px rgb(164, 65, 230);
    grid-row  : 3;
  }

  #item-2 {
    background : url(../images/grafic/\ \(3\).jpg) center / contain no-repeat;
    grid-column: span 2 / span 2;
    grid-row   : 3;
  }

  #item-3 {
    background : url(../images/grafic/\ \(4\).jpg) center / contain no-repeat;
    grid-column: span 2 / span 2;
    grid-row   : 3;
  }

  #item-4 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 4;
  }

  #item-5 {
    background : url(../images/grafic/\ \(2\).jpg) center / contain no-repeat;
    grid-column: span 3 / span 3;
    grid-row   : 4;
  }
}