/* Desctop version */
@media (min-width: 992px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    column-count: 3
  }
    .custom-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 3px;
        bottom: -1px;
        left: 0;
        background-color: #FFAD4D;
        transition: width 0.3s ease;
    }
    .navbar-nav .nav-item { margin-right: 10px; }
    
    .navbar-nav .nav-item:hover .custom-link::after,
    .navbar-nav .nav-item.active .custom-link::after {
        width: 100%;
    }
}

/* Mobyle version : 991px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	h1{ font-size: 1.5em; }
	h2{ font-size: 1.6em; }
	h3{ font-size: 1.3em; }
	
	.content h1 {
	  font-size: 1.3em;
    margin: 0 0 30px;
    line-height: 1.5em;
	}  
	.content h2, .content h3 {
	  font-size: 1.2em;
	}  
	
	.category-item .title-wrapper .title {
    font-size: 16px;
    line-height: 22px;
    padding: 3px 0;
	}
	/* ---------------------------------
	  MENU
	--------------------------------- */
	.navbar > .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 20px;
    }

    #main-menu.navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background-color: #fff;
        z-index: 2000;
        padding: 80px 30px 40px;
        display: flex !important; 
        flex-direction: column;
        /* Изначально смещаем вправо */
        transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    
    #main-menu.navbar-collapse.is-opened {
        transform: translateX(0);
    }

    #main-menu.collapse:not(.show) {
        display: flex !important;
    }

    .navbar-nav {
        width: 100%;
        margin: 0;
    }

    .navbar-nav .nav-item {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        margin-bottom: 5px;
    }

    .navbar-collapse.is-opened .nav-item {
        opacity: 1;
        transform: translateX(0);
    }

    .custom-link {
        padding: 15px 0 !important;
        font-size: 16px !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Каскадная задержка */
    .is-opened .nav-item:nth-child(1) { transition-delay: 0.1s; }
    .is-opened .nav-item:nth-child(2) { transition-delay: 0.2s; }
    .is-opened .nav-item:nth-child(3) { transition-delay: 0.3s; }
    .is-opened .nav-item:nth-child(4) { transition-delay: 0.4s; }
    .is-opened .nav-item:nth-child(5) { transition-delay: 0.5s; }
	
	.card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    column-count: 3
  }
  
  .post-item-horizontal .px-4 {
      padding-left: 25px !important; 
      padding-right: 25px !important;
  }
  .post-card-accent {
      margin-inline: 10px; 
  }
  .post-date-edge {
      font-size: 13px;
      padding: 6px 14px;
  }
    
  .breadcrumb {
      font-size: 1em;
  }
  
  .blog-info .phrase p { 
      line-height: 1.3;
      font-size: 0.9em;
  }
}

/* Screens Resolution : 767px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	p{ line-height: 1.4; }

  h1 { font-size: 1.3em; margin: 0 0 10px; }
  h2 { font-size: 1.2em; margin: 0 0 20px 0; }
	h3{ font-size: 1.7em; }
	h4{ font-size: 1.5em; }
	h5{ font-size: 1.2em; }

	.section{ padding: 20px 0 10px; }

	.blog-article-area { 
    padding-top: 0;
  }

	/* ---------------------------------
	  MENU
	--------------------------------- */
	.menu-nav-icon{ display: inline-block; }

	
	/* ---------------------------------
	  SLIDER
	--------------------------------- */

	.main-slider{ height: calc(400px - 205px); min-height: 350px; }  
	.main-slider .ls-nav-prev,
	.main-slider .ls-nav-next{ display: none!important; }

	
	/* ---------------------------------
	  SINGLE POST
	--------------------------------- */
	
	.main-content { margin-bottom: 30px; }
	
	.load-more-btn{ margin: 20px 0 60px; }

	
	/* ---------------------------------
	   SIDEBAR
	--------------------------------- */

	.sidebar-section{ margin-bottom: 30px; }
	
	.sidebar-wrapper { margin-top: 20px; }

	.blog-area h1 {  font-size: 22px; margin: 0 0 20px; line-height: 26px; }
	
	.post__content h2 { font-size: 20px; line-height: 26px; margin: 20px 0px; }
	
	.green-area h2 {
    font-size: 20px;
    margin: 10px 0 10px;
    line-height: 24px;
	}
	.white-area h1 {
	  font-size: 20px;
    margin: 10px 15px 20px;
    line-height: 26px;
	}
	.with-back__content::before, .with-back__content::after  {
    width: 90px;
    height: 30px;
	}
	.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2
  }
  
  .mobile-only {
    display: block;
    margin-bottom: 20px;
    margin-top: 0;
  }
  
  .post-item {
    margin-bottom: 5px;
  }
  
  .only-desctop {
    display: none; 
  }
  
  .breadcrumb {
      font-size: 1em;
  }
}
  
/* Screens Resolution : 479px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

	body{ font-size: 14px;  }

	.left-area,
	.right-area{ float: none;  }

	.width-60,
	.width-50{ width: 100%; }

	.left-area li a,
	.right-area li a{ padding: 0 10px 0 0!important; }
	
	/* ---------------------------------
	5. SINGLE POST
	--------------------------------- */
	
	.single-post .icons ul.social-icons{ margin-top: 10px; }
	
	.main-info { padding: 20px; }

  .main-info .about-project{ font-size: 18px; line-height: 22px; }
  
  .main-info .project-name { font-size: 20px; line-height: 24px; font-weight: 500; }
  
  .main-info .phrase { font-size: 18px; }
  
  .post-style-2 p { padding: 5px 15px; font-size: 18px; line-height: 22px; }
  
  .post-item .title { font-size: 18px; }
  
	.single-post p { line-height: 24px; font-size: 18px; }
	
	.card-columns { 
	  -webkit-column-count: 1; 
	  -moz-column-count: 1;
    -ms-column-count: 1;
	  column-count: 1; 
	}
}