/*  Responsive Css */

@media only screen and (max-width: 5000px){
  
  .boxed_wrapper{
    overflow-x: hidden;
  }

    .mobile-menu-close{
    display:none;
  }

}


@media only screen and (max-width: 1200px){

  .anim-icon{
    display: none !important;
  }

  .mobile-menu-close{
    display:none;
  }

  .about-section{
    padding-bottom: 150px;
  }

  .service-section .inner-content{
    margin: 0px;
  }

  .service-section .owl-nav{
    left: -324px;
  }

  .classes-section .inner-block .lower-content .info-box li:before,
  .feature-section .image-column{
    display: none;
  }

  .event-block-one .inner-box{
    padding-right: 15px;
  }

  .event-block-one .inner-box .content-box{
    padding-left: 250px;
  }

  .faq-content{
    margin-left: 0px;
  }

  .gallery-section{
    padding-left: 30px;
    padding-right: 30px;
  }

  .news-block-one .inner-box .lower-content{
    padding-left: 25px;
  }

  .main-footer .footer-top .link-widget{
    margin-left: 30px;
  }

  .main-footer .footer-bottom .right-content .footer-logo:before,
  .activities-section .image-box .image:before{
    display: none;
  }

  .main-footer .footer-bottom .right-content .footer-logo{
    margin-right: 120px;
  }

  .fact-counter .counter-block{
    padding-left: 70px;
  }

  .activities-section .image-box {
    margin-left: 0px;
  }

  .testimonial-video .testimonial-column .testimonial-content {
    padding-left: 30px;
  }

  .main-header.style-two .main-menu .navigation > li{
    margin: 0px 35px;
  }

  .classes-section.style-three .owl-nav{
    left: -405px;
  }

  .activities-section.style-two .image-box{
    margin-left: 0px;
    margin-right: 0px;
  }

  .news-block-two .inner-box{
    margin-bottom: 30px;
  }

  .about-section.style-two .image-box{
    margin-left: 160px;
  }

  .faq-page-section .faq-content{
    margin-top: 30px;
  }

  .classes-section .inner-block .lower-content {
    padding: 34px 30px 37px 30px;
  }

  .class-details .inner-box .info-box li:first-child:before, 
  .class-details .inner-box .info-box li:nth-child(2):before{
    display: none;
  }

  .class-details .inner-box .info-box{
    padding: 27px 15px 23px 15px;
  }

  .class-details .inner-box .info-box li{
    margin-right: 20px;
  }

  .class-details .inner-box .info-box li .theme-btn{
    padding: 17px 30px;
  }

  .teachers-block-one{
    margin-bottom: 30px;
  }

  .our-teachers{
    padding-bottom: 120px;
  }

  .pricing-section .pricing-table .table-header{
    padding: 49px 30px 43px 30px;
  }

  .pricing-section .pricing-table .table-header:before{
    display: none;
  }

  .pricing-section .pricing-table .table-content{
    padding: 30px 20px 19px 20px;
  }

  .pricing-section .pricing-table .table-footer{
    padding-left: 20px;
  }

  .event-details .event-details-content .countdown-box h3{
    display: block;
    margin-right: 0px;
    margin-bottom: 10px;
  }

  .shop-details .content-box{
    margin-left: 0px;
  }

  .countdown-box{
    text-align: center;
  }

  .shop-section .shop-sidebar{
    margin-bottom: 40px;
  }

  .blog-page-section .news-block-one .more-btn{
    left: 25px;
  }

}


/* 992–1199: container narrows to 960px, so the full-size (115px) logo
   plus the nav no longer fit on one line and the nav wraps below the
   logo. Shrink the logo here (same height already used for the sticky
   header) to free up room without touching the mobile stacked layout. */
@media only screen and (min-width: 992px) and (max-width: 1199px){

  .main-header:not(.header-transparent) .logo-box .logo img{
    height: 82px;
  }

}



@media only screen and (max-width: 991px){

  .sticky-header{
    display: none;
  }

  .main-header .logo-box{
    position: relative;
    display: block;
    float: none;
    text-align: center;
  }

  .main-header .nav-outer,
  .main-header .menu-area{
    position: relative;
    float: none;
  }

  /* header-bottom uses flex row — absolute outer-box breaks alignment */
  .main-header .header-bottom .outer-box{
    position: static;
    top: auto;
    right: auto;
    margin: 0;
  }

  .main-header .logo-box .logo:before,
  .about-section .image-box:before{
    display: none;
  }

  .about-section .image-box .image-2{
    position: relative;
    left: 0px;
    top: 0px;
  }

  .about-section .image-box{
    margin: 0px;
    margin-bottom: 40px;
  }

  .about-section .image-box .image-1{
    margin-bottom: 30px;
  }

  .service-section .inner-content{
    margin-bottom: 40px;
  }

  .service-section .carousel-content{
    margin: 0px;
  }

  .classes-section .inner-block{
    margin-bottom: 30px;
  }

  .classes-section{
    padding-bottom: 120px;
  }

  .testimonial-content{
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .news-block-one .inner-box{
    margin-bottom: 70px;
  }

  .news-section{
    padding-bottom: 118px;
  }

  .main-footer .footer-top .about-widget,
  .main-footer .footer-top .link-widget{
    margin: 0px 0px 30px 0px;
  }

  .main-footer .footer-top .contact-widget{
    margin-left: 0px;
  }

  .main-footer .footer-bottom .left-content,
  .main-footer .footer-bottom .right-content{
    float: none;
    display: block;
    text-align: center;
  }

  .main-footer .footer-bottom .right-content .footer-logo{
    margin: 15px 0px;
    display: block;
    text-align: center;
  }

  .main-menu .navigation > li > ul > li{
    padding: 0px;
  }

  .main-menu .navigation > li > ul > li:hover{
    /* background: #333; */
    border-color: #fff;
  }

  .main-menu .navigation > li > ul > li > ul > li > a{
    color: #fff !important;
  }

  .offer-section .single-offer-block{
    margin-bottom: 30px;
  }

  .offer-section{
    padding-bottom: 120px;
  }

  .fact-counter .counter-block{
    margin: 15px 0px;
  }

  .activities-section .image-box{
    margin-top: 0px;
  }

  .activities-section .image-box .image{
    float: none;
  }

  .testimonial-video .video-column{
    width: 100%;
  }

  .testimonial-video .video-column,
  .testimonial-video .video-column .video-inner{
    position: relative;
  }

  .testimonial-video .testimonial-column{
    float: none;
    width: 100%;
  }

  .testimonial-video .testimonial-column .testimonial-content{
    max-width: 100%;
  }

  .service-style-two .service-block-one{
    margin-bottom: 30px;
  }

  .main-header.style-two .main-menu .navigation > li.logo-box{
    display: none;
  }

  .main-header.style-two .main-menu .navbar-header{
    padding-top: 15px;
  }

  .classes-section.style-three .inner-content{
    margin: 0px 0px 30px 0px;
  }

  .classes-section.style-three .owl-nav,
  .service-section .owl-nav{
    display: none;
  }

  .classes-section.style-three .carousel-content{
    margin: 0px;
  }

  .parallax-icon{
    display: none !important;
  }

  .activities-section.style-two .image-box{
    margin: 0px;
    margin-bottom: 50px;
  }

  .teachers-block-two .inner-box{
    margin-bottom: 30px;
  }

  .contact-section .outer-container .contact-column{
    position: relative;
    width: 100%;
  }

  .contact-section .outer-container .map-column{
    float: none;
    width: 100%;
  }

  .about-section.style-two .image-box{
    margin: 0px;
  }

  .about-section.style-two .content-box,
  .class-details .class-details-content{
    margin: 0px 0px 30px 0px;
  }

  .about-section.style-two .image-box .image-2{
    left: 0px;
    bottom: 0px;
  }

  .about-section.style-two{
    padding-bottom: 150px;
  }

  .testimonial-video .testimonial-column .testimonial-content{
    margin: 0px;
  }

  .testimonial-video .video-column .video-inner{
    padding: 216px 0px 215px 0px;
  }

  .class-details .inner-box .info-box li{
    margin-right: 50px;
  }

  .pricing-section .pricing-table{
    margin-bottom: 30px;
  }

  .pricing-section{
    padding-bottom: 120px;
  }

  .event-details .event-details-content{
    margin: 0px 0px 50px 0px;
  }

  .shop-details .product-details-content .image-box,
  .blog-details .blog-details-content{
    margin: 0px 0px 30px 0px;
  }

  .cart-section .table-outer .othre-content .coupon-box input{
    max-width: 100%;
    margin-bottom: 15px;
    margin-right: 0px;
  }

  .checkout-section .additional-info,
  .contact-info-section .single-info-box .inner-box{
    margin-bottom: 30px;
  }

  .contact-info-section{
    padding-bottom: 120px;
  }

  .blog-page-section .news-block-one .inner-box{
    margin-bottom: 30px;
  }

  .main-header .menu-area{
    margin-right: 0px;
  }


}


@media only screen and (max-width: 767px){
	
  .about-section,
  .feature-section{
    padding: 70px 0px;
  }

  .sec-pad,
  .testimonial-faq,
  .cta-section,
  .main-footer .footer-top,
  .activities-section{
    padding: 64px 0px 70px 0px;
  }

  .event-section,
  .news-section{
    padding: 64px 0px 40px 0px;
  }

  .main-footer .footer-top .contact-widget{
    margin-bottom: 30px;
  }

  .main-slider.style-two .slide{
    padding-bottom: 175px;
  }

  .fact-counter .counter-block{
    margin: 15px auto;
    max-width: 210px;
    width: 100%;
  }

  .fact-counter{
    padding: 50px 0px;
  }

  .testimonial-video .testimonial-column .testimonial-content{
    padding: 65px 30px 20px 30px;
  }

  .main-header.style-two .header-top .header-info{
    margin-top: 0px;
    margin-bottom: 15px;
  }

  .main-header.style-two .outer-content{
    float: none;
    display: block;
    text-align: center;
  }

  .about-style-two .image-inner .image-box{
    margin-bottom: 30px;
  }

  .about-style-two .image-inner{
    margin-bottom: 0px;
  }

  .classes-section.style-three{
    padding: 64px 0px 40px 0px;
  }

  .activities-section.style-two{
    padding-bottom: 25px;
  }

  .testimonial-style-two{
    padding: 65px 0px;
  }

  .news-section.style-two,
  .about-section.style-two,
  .faq-page-section,
  .class-details,
  .blog-details{
    padding: 65px 0px 70px 0px;
  }

  .contact-section .outer-container .contact-column .content-box{
    padding: 65px 15px 70px 15px;
  }

  .contact-section .outer-container .contact-column .content-box{
    max-width: 100%;
  }

  .main-footer .footer-bottom .left-content{
    margin-top: 0px;
  }

  .class-details .inner-box .info-box li{
    width: 50%;
    margin: 0px;
  }

  .class-details .inner-box .info-box{
    padding-left: 80px;
  }

  .class-details .inner-box .info-box li .thumb-box{
    left: -65px;
  }

  .class-details .inner-box .info-box li:first-child{
    padding-left: 0px;
  }

  .class-details .inner-box .info-box li{
    margin: 5px 0px;
  }

  .gallery-page-section{
    padding: 62px 0px 40px 0px;
  }

  .our-teachers.teachers-page-section .block-column:last-child .teachers-block-one{
    margin-bottom: 0px;
  }

  .event-block-one .inner-box{
    padding: 20px 15px 28px 0px;
  }

  .event-page-section,
  .shop-details{
    padding: 70px 0px 40px 0px;
  }

  .event-details,
  .shop-section,
  .cart-section,
  .checkout-section{
    padding: 70px 0px;
  }

  .contact-info-section{
    padding-bottom: 40px;
  }

  .classes-page-section,
  .classes-section,
  .our-teachers{
    padding-bottom: 40px;
  }

  .offer-section{
    padding: 64px 0px 40px 0px;
  }
	
}

@media only screen and (max-width: 599px){
	
 .main-slider .owl-nav{
  display: none;
 }

 .main-slider .slide,
 .main-slider.style-two .slide{
  padding: 95px 0px 100px 0px;
 }

 .testimonial-video .video-column .video-inner{
  padding: 150px 0px;
 }

 .main-slider.style-three .slide{
  padding: 100px 0px 200px 0px;
 }

 .testimonial-style-two .owl-dots{
  display: none;
 }

 .page-title{
  padding: 93px 0px 100px 0px;
 }

 .blog-details .blog-details-content .comments-area .comment.replay-comment{
  margin-left: 0px;
 }

 .faq-content{
  height: auto;
 }

 .faq-page-section .faq-content{
  height: auto;
 }

 .countdown-box{
  padding-left: 15px;
  padding-right: 15px;
 }

 .sec-title h1{
  font-size: 35px;
  line-height: 40px;
 }

 .page-title .content-box h1{
  font-size: 40px;
  line-height: 45px;
 }

 .error-section .content-box h1{
  font-size: 160px;
 }

}


@media only screen and (max-width: 499px){

  .main-header .header-top .header-info li:before{
    display: none;
  }

  .event-block-one .inner-box .image-box{
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 30px;
    margin-bottom: 20px;
  }

  .event-block-one .inner-box .content-box{
    padding-left: 15px;
  }

  .event-block-one .inner-box{
    padding: 0px 0px 30px 0px;
  }

  .class-details .inner-box .info-box li{
    width: 100%;
  }

  .gallery-page-section .filter-tabs li{
    margin: 5px 12px;
  }

  .countdown-timer .counter-column{
    margin-bottom: 10px;
  }

  .countdown-box{
    padding-top: 40px;
  }

  .shop-section .item-sorting .result-column,
  .shop-section .item-sorting .select-box{
    float: none;
    display: block;
  }

  .shop-section .item-sorting .result-column{
    top: 0px;
    margin-bottom: 10px;
  }

  .shop-section .item-sorting .select-box .ui-state-default{
    width: 100% !important;
  }

  .cart-section .table-outer .othre-content .theme-btn{
    width: 100%;
    margin-bottom: 10px;
  }

  .cart-section .table-outer .othre-content .update-btn{
    float: none;
    display: block;
    width: 100%;
  }

  .blog-details .blog-details-content .comments-area .comment .replay-btn{
    position: relative;
    top: 0px;
    margin-top: 10px;
  }

  .main-header .header-top .header-info li{
    margin: 0px 15px;
  }

  .cta-section .content-box h1{
    font-size: 45px;
    line-height: 50px;
  }

  .testimonial-block-two .inner-box{
    padding-left: 15px;
    padding-right: 15px;
  }

  .news-block-two .inner-box .lower-content{
    padding-left: 30px;
    padding-right: 15px;
  }

  .news-block-two .inner-box .lower-content .info-box li{
    margin-right: 20px;
  }

  .news-block-two .inner-box .lower-content .info-box li:before{
    right: -12px;
  }

  .event-details .event-details-sidebar .inner-box{
    padding-left: 20px;
    padding-right: 15px;
  }

  .blog-details .sidebar .sidebar-widget{
    padding-left: 20px;
    padding-right: 20px;
  }

}

@media only screen and (max-width: 399px){

	.main-slider h1{
    font-size: 45px;
    line-height: 50px;
  }

  .accordion-box .block .acc-btn h4{
    padding-right: 30px;
  }

  .testimonial-block .inner-box{
    padding-left: 15px;
    padding-right: 15px;
  }

  .testimonial-faq .owl-carousel .owl-item{
    margin-right: 0px !important;
  }

  .testimonial-content .client-thumb-outer .owl-item.active .thumb-item{
    width: 90px;
    top: 0px;
  }

  .testimonial-content .owl-item.active .thumb-item .thumb-box{
    width: 90px;
    height: 90px;
  }

  .pagination li{
    margin: 0px 3px;
  }

  .checkout-section .order-info .text span,
  .checkout-section .order-info .text h4{
    float: none;
    display: block;
  }

  .checkout-section .order-info .order-product .single-item {
    padding-top: 10px;
  }


}




/* =============== Mobile menu ===================== */

@media only screen and (max-width: 991px) {
  .header-top .links-nav li{
    margin-right: 15px;
  } 
  .main-menu .navbar-header{
    position: relative;
    float:none;
    display:block;
    text-align:left;
    width:100%;
    top: 0px;
    padding-bottom: 15px;
  }
  .main-header .main-menu {
    width: 100%;
  }  
  .main-menu .navbar-header .navbar-toggle{
    display:inline-block;
    z-index:7;
    float:none;
    padding: 10px;
    cursor:  pointer;
    border-radius:0px;
    background:  #ff7162;
  }  
  .main-menu .navbar-header .navbar-toggle .icon-bar{
    background: #ffffff;
    height: 2px;
    width: 29px;
    display:  block;
    margin: 5px;
  }
  .main-menu .collapse {
    overflow:auto;
    float:none;
    width:100%;
    padding:0px 0px 0px;
    border:none;
    margin:0px;
    max-height: 320px;
    -ms-border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
   }
   .main-menu .navbar-collapse > .navigation{
    float:none !important;
    margin:0px !important;
    width:100% !important;
    /* background: #333333; */
    border:1px solid #ffffff;
  }  
  .main-menu .navbar-collapse > .navigation > li{
    margin:0px !important;
    float:none !important;
    width:100%;
    border-bottom: 1px solid #ffffff !important;
  }  
  .main-menu .navigation > li > a,
  .main-menu .navigation > li > ul:before{
    border:none;  
  }  
  .main-menu .navbar-collapse > .navigation > li > a{
    padding:10px 10px !important;
    border:none !important;
  }  
  .main-menu .navigation li.dropdown > a:after,
  .main-menu .navigation > li.dropdown > a:before,
  .main-menu .navigation > li > ul > li > a::before,
  .main-menu .navigation > li > ul > li > ul > li > a::before{
    color:#ffffff !important;
    right:15px;
    font-size:16px;
    display:none !important;
  }  
  .main-menu .navbar-collapse > .navigation > li > ul,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
    position:relative;
    border:none;
    float:none;
    visibility:visible;
    opacity:1;
    display:none;
    margin:0px;
    padding:0px;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100%;
    /* background: #333333; */
    -webkit-border-radius:0px;
    -ms-border-radius:0px;
    -o-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
    transition:none !important;
    -webkit-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    -moz-transition:none !important;
    box-shadow:none !important;
  }    
  .main-menu .navbar-collapse > .navigation > li > ul,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
    border-top:1px solid rgba(255,255,255) !important;
  }
  .main-menu .navbar-collapse > .navigation > li:last-child{
    border-bottom: none;
  } 
  .main-menu .navbar-collapse > .navigation > li > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{
    padding:12px 15px !important;
    line-height:22px;
    color: #fff;
    /* background: #333333; */
    text-align:left;
    min-height:0px;
  }  
  .main-menu .navbar-collapse > .navigation > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a,
  .main-menu .navbar-collapse > .navigation > li.current > a,
  .main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
    color: #ffffff !important;
  }  
  .main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn{
    display:block;
  }  
  .main-menu .navbar-collapse > .navigation li.dropdown:after,
  .main-menu .navigation > li > ul:before{
    display:none !important;  
  }

}


/** deep dropdown levels on mobile **/
@media only screen and (max-width: 991px){

  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > ul{
    position:relative;
    border:none;
    float:none;
    visibility:visible;
    opacity:1;
    display:none;
    margin:0px;
    padding:0px;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100%;
    /* background: #333333; */
    border-radius:0px;
    transition:none !important;
    box-shadow:none !important;
    border-top:1px solid rgba(255,255,255) !important;
  }

  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > ul > li > a{
    padding:12px 15px !important;
    line-height:22px;
    color: #fff;
    /* background: #333333; */
    text-align:left;
    min-height:0px;
  }

  .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > ul > li:hover > a{
    color: #ffffff !important;
    /* background: #333333; */
  }

  .main-menu .navigation > li > ul > li > ul > li.dropdown > a:after{
    display:none !important;
  }

}


/** Attraksion - tablet responsiv düzəlişləri **/

@media only screen and (max-width: 1199px){

  /* hero yazıları overlay header-in altından başlasın */
  .main-slider .slide .container{
    padding-top: 120px;
  }

}

@media only screen and (max-width: 991px){

  .main-slider .slide .container{
    padding-top: 100px;
  }

  /* tabletdə bölmə boşluqları bir az da yığcam */
  .sec-pad{
    padding: 70px 0px 75px 0px;
  }

  .event-section{
    padding: 70px 0px 60px 0px;
  }

  .testimonial-faq{
    padding: 70px 0px 70px 0px;
  }

  .news-section{
    padding: 70px 0px 100px 0px;
  }

  .partners-section{
    padding: 70px 0px;
  }

  /* rəylər sütunundan sonra faq-a məsafə */
  .testimonial-faq .faq-content{
    margin-top: 50px;
  }

}

@media only screen and (max-width: 767px){

  .classes-section .inner-block .lower-content h3,
  .classes-section .inner-block .lower-content .text{
    min-height: 0;
    -webkit-line-clamp: unset;
  }

}


/** Attraksion - mobil responsiv düzəlişləri **/

@media only screen and (max-width: 991px){

  .main-slider .content-box h1{
    font-size: 48px;
    line-height: 58px;
  }

}

@media only screen and (max-width: 767px){

  /* şəffaf header-də loqo mobil ölçüdə */
  .main-header.header-transparent .logo-box .logo img{
    height: 72px;
  }
  .main-header.header-transparent .logo-box .logo{
    padding: 6px 16px;
  }

  /* hero slayd */
  .main-slider .slide{
    min-height: 520px;
  }
  .main-slider .slide .container{
    padding-top: 50px;
  }
  .main-slider .content-box h1{
    font-size: 34px;
    line-height: 42px;
  }
  .main-slider .content-box .text{
    font-size: 15px;
    line-height: 24px;
  }
  .main-slider .btn-box .theme-btn{
    margin-top: 12px;
  }

  /* bölmə boşluqları mobildə */
  .sec-pad{
    padding: 60px 0px 65px 0px;
  }
  .event-section{
    padding: 60px 0px 50px 0px;
  }
  .testimonial-faq{
    padding: 60px 0px 60px 0px;
  }
  .news-section{
    padding: 60px 0px 90px 0px;
  }
  .partners-section{
    padding: 60px 0px;
  }
  .cta-section{
    padding: 55px 0px 60px 0px;
  }

  /* başlıqlar */
  .sec-title h1{
    font-size: 32px;
    line-height: 40px;
  }

  /* layihələr qalereyası */
  .gallery-section{
    padding-left: 15px;
    padding-right: 15px;
  }
  .gallery-section .gallery-block .image-box .image img{
    height: 260px;
  }

  /* partnyorlar */
  .partners-section .partner-logo{
    height: 100px;
    padding: 16px 18px;
  }
  .partners-section .owl-nav{
    margin-top: 30px;
  }

  .news-section .sec-btn-box{
    margin-top: 70px;
  }

}

@media only screen and (max-width: 575px){

  .main-slider .content-box h1{
    font-size: 28px;
    line-height: 36px;
  }
  .main-slider .content-box h3{
    font-size: 18px;
  }
  .main-slider .slide .container{
    padding-top: 40px;
  }

  /* kart şəkilləri kiçik ekranda bir az alçaq */
  .classes-section .inner-block .image-box img{
    height: 220px;
  }
  .news-section .news-block-one .inner-box .image-box img{
    height: 210px;
  }
  .gallery-section .gallery-block .image-box .image img{
    height: 230px;
  }

}


/** mobil/tabletdə şəffaf header adi ağ header-ə çevrilir
    (overlay dizayn dar ekranda hero yazılarının üstünə düşürdü) **/

@media only screen and (max-width: 991px){

  .main-header.header-transparent{
    position: relative;
    background: #ffffff;
  }

  .main-header.header-transparent .header-top{
    background: #253b70;
  }

  .main-header.header-transparent .header-bottom{
    background: #ffffff;
  }

  /* ağ fonda ağ pill lazım deyil */
  .main-header.header-transparent .logo-box .logo{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 0px;
  }

  /* header artıq hero üzərində deyil - əlavə yuxarı boşluq lazımsızdır */
  .main-slider .slide .container{
    padding-top: 20px;
  }

  /* hero tam ekran əvəzinə məzmuna uyğun hündürlükdə */
  .main-slider .slide{
    height: auto;
    min-height: 480px;
    padding: 70px 0px 80px 0px;
  }

}


/** mobildə axtarış overlay-i **/

/* animasiya zamanı hərflərarası məsafənin kənara daşmasını kəs */
.wraper_flyout_search{
  overflow: hidden;
}

.wraper_flyout_search > .table,
.wraper_flyout_search > .table > .table-cell{
  overflow: hidden;
}

@media only screen and (max-width: 991px){

  /* table layout mobildə blok axına keçir - daşmanın kökü kəsilir */
  .wraper_flyout_search > .table{
    display: block !important;
    width: 100% !important;
  }

  .wraper_flyout_search > .table > .table-cell{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: 100% !important;
    height: 100vh;
    height: 100dvh;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .wraper_flyout_search > .table > .table-cell .flyout_search{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-title h4{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 6px;
    margin-bottom: 10px;
  }

  .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-bar .form-row{
    position: relative;
    width: 100%;
  }

  /* input kiçik və düymə üçün sağda yer saxlanılır */
  .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-bar .form-row input[type=search]{
    width: 100% !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 0px 40px 0px 0px !important;
    border-bottom-width: 2px !important;
  }

  /* axtarış ikonu inputun sağ kənarında, görünən zonada */
  .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-bar .form-row button[type=submit]{
    top: 50% !important;
    right: 0px !important;
    transform: translateY(-50%);
    width: 36px !important;
  }

  .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-bar .form-row button[type=submit] i{
    font-size: 17px;
  }

  .wraper_flyout_search > .table > .table-cell > .flyout-search-close{
    top: 22px;
    right: 22px;
  }

}


/** ============================================================
    MOBILE HEADER — toggle | logo | search + full-width overlay menu
    ============================================================ **/

@media only screen and (max-width: 991px){

  /* sticky nav collapse should never interfere on mobile */
  .sticky-header .navbar-collapse{
    display: none !important;
  }

  .main-header .header-bottom{
    position: relative;
    overflow: visible;
    z-index: 1001;
  }

  /* header row: hamburger — logo — search */
  .main-header .header-bottom > .container > .clearfix{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    padding: 12px 0;
    min-height: 68px;
  }

  .main-header .header-bottom .nav-outer{
    display: contents;
  }

  .main-header .header-bottom .menu-area{
    order: 1;
    flex: 0 0 auto;
    margin: 0;
    position: static;
  }

  .main-header .header-bottom .logo-box,
  .main-header .header-bottom .logo-box.pull-left{
    order: 2;
    flex: 1 1 auto;
    float: none !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
  }

  .main-header .header-bottom .logo-box .logo,
  .main-header .header-bottom .logo-box .logo a{
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 0;
    display: inline-block;
  }

  .main-header .header-bottom .logo-box .logo img{
    display: block;
    margin: 0 auto;
    height: 68px;
    width: auto;
    max-width: 100%;
  }

  .main-header .header-bottom .outer-box,
  .main-header .header-bottom .outer-box.pull-right{
    order: 3;
    flex: 0 0 auto;
    float: none !important;
    position: static;
    top: auto;
    right: auto;
    margin: 0 !important;
  }

  .main-header .header-bottom .outer-box .outer-content{
    margin: 0 !important;
    padding: 0;
  }

  .main-header .header-bottom .outer-box .outer-content li{
    margin: 0;
    display: block;
  }

  /* hamburger */
  .main-header .header-bottom .main-menu{
    width: auto;
    position: static;
  }

  .main-header .header-bottom .main-menu .navbar-header{
    position: static;
    float: none;
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
  }

  .main-header .header-bottom .navbar-header .navbar-toggle{
    margin: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #ff7162;
    box-shadow: none;
  }

  .main-header .header-bottom .navbar-header .navbar-toggle .icon-bar{
    width: 22px;
    height: 2px;
    margin: 3px 0;
    display: block;
    background: #ffffff;
  }

  /* search — proportional to header row */
  .main-header .header-bottom .outer-content li.header-flyout-searchbar i{
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    margin: 0;
    border-radius: 50%;
  }

  /* full-width dropdown below header (not below hamburger only) */
  .main-header .header-bottom .navbar-collapse{
    display: none !important;
    position: absolute;
    left: 50%;
    right: auto;
    top: 100%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    border: none;
    border-radius: 0;
    max-height: none;
    overflow: visible;
    z-index: 1002;
    box-shadow: 0 12px 28px rgba(37, 59, 112, 0.18);
  }

  .main-header .header-bottom .navbar-collapse.show,
  .main-header .header-bottom .navbar-collapse.in,
  .main-header .header-bottom .navbar-collapse.collapsing{
    display: block !important;
  }

  .main-header .header-bottom .navbar-collapse.collapsing{
    max-height: calc(100dvh - 120px);
    overflow: hidden;
  }

  .main-header .header-bottom .navbar-collapse.show,
  .main-header .header-bottom .navbar-collapse.in{
    max-height: calc(100dvh - 120px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-header .header-bottom .navbar-collapse > .navigation{
    width: 100% !important;
    margin: 0 !important;
    /* background: #333333; */
    border: none;
    border-top: 3px solid #ff7162;
  }

  .main-header .header-bottom .navbar-collapse > .navigation > li{
    width: 100%;
    margin: 0 !important;
    float: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .main-header .header-bottom .navbar-collapse > .navigation > li:last-child{
    border-bottom: none !important;
  }

  .main-header .header-bottom .navbar-collapse > .navigation > li > a{
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 20px !important;
    line-height: 1.3 !important;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none !important;
    color: #ffffff !important;
    /* background: #333333; */
  }

  .main-header .header-bottom .navbar-collapse > .navigation > li > ul > li > ul > li > a{
    color:#2b3c6b !important;
    min-height: 48px;
    padding: 14px 40px 14px 28px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-header .header-bottom .navbar-collapse > .navigation > li > ul > li > a{
    min-height: 48px;
    padding: 14px 40px 14px 28px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-header .header-bottom .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a{
    background: #ff7162 !important;
    color: #ffffff !important;
  }

  .main-header .header-bottom .navbar-collapse li.dropdown .dropdown-btn{
    top: 24px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    line-height: 36px;
    right: 12px;
  }

  .main-header.header-transparent .header-bottom .navbar-collapse > .navigation > li > a{
    color: #ffffff !important;
  }

}


/** header-top spacing + compact language selector on mobile **/

@media only screen and (max-width: 767px){

  .main-header .header-top{
    padding: 10px 0;
  }

  .main-header .header-top .inner-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .main-header .header-top .social-links{
    float: none;
    display: block;
    text-align: center;
    margin: 0;
  }

  .main-header .header-top .social-list li{
    margin-right: 14px;
  }

  .main-header .header-top .header-info{
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    text-align: center;
    margin: 0;
  }

  .main-header .header-top .header-info li{
    margin: 0 !important;
    padding-left: 18px;
  }

  .main-header .header-top .header-info li:before{
    display: none;
  }

  .main-header .header-top .header-info li.lang-switcher{
    padding-left: 0;
    margin-top: 0 !important;
  }

}


@media only screen and (max-width: 399px){

  .main-header .header-top .header-info{
    flex-direction: column;
    gap: 6px;
  }

  .main-header .header-bottom > .container > .clearfix{
    gap: 8px;
    padding: 10px 0;
    min-height: 60px;
  }

  .main-header .header-bottom .logo-box .logo img{
    height: 58px;
  }

  .main-header .header-bottom .navbar-header .navbar-toggle,
  .main-header .header-bottom .outer-content li.header-flyout-searchbar i{
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

}


/** mobile menu backdrop + scroll lock (toggled via JS) **/

body.mobile-menu-open{
  overflow: hidden;
  touch-action: none;
}

body.mobile-menu-open::before{
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(37, 59, 112, 0.55);
  z-index: 998;
  pointer-events: auto;
}


/** mobil menyu toggle (custom) + daşma qorunması + hero düymələri **/

@media only screen and (max-width: 991px){

  /* hamburger ilə açılan panel */
  .main-header .header-bottom .navbar-collapse.mobile-open{
    display: block !important;
  }

  /* üfüqi daşmaya qarşı qoruyucu */
  body{
    overflow-x: hidden;
  }

}

@media only screen and (max-width: 767px){

  /* hero düymələri alt-alta, eyni endə, düz hizalı */
  .main-slider .btn-box .theme-btn{
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 0 14px 0 !important;
    text-align: center;
  }

  .main-slider .btn-box .theme-btn:last-child{
    margin-bottom: 0 !important;
  }

}


/** mobil sidebar menyu (soldan sürüşərək açılır) **/

@media only screen and (max-width: 991px){

  /* daşmaya qarşı əlavə qoruyucu */
  html, body{
    overflow-x: hidden;
  }

  /* panel: soldan gizlənmiş sabit sidebar */
  .main-header .header-bottom .navbar-collapse{
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    background: #ffffff;
    z-index: 100010; /* dil dropdown-undan (100000) yuxarıda */
    transform: translateX(-105%);
    transition: transform 350ms ease;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 64px 0px 30px 0px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .main-header .header-bottom .navbar-collapse.mobile-open{
    transform: translateX(0);
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
  }

  /* arxa fon */
  .mobile-menu-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(21, 32, 61, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease;
    z-index: 99998;
  }

  body.mobile-menu-open .mobile-menu-backdrop{
    opacity: 1;
    visibility: visible;
  }

  body.mobile-menu-open{
    overflow: hidden !important;
  }

  /* bağlama düyməsi */
  .mobile-menu-close{
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    background: #ff7162;
    color: #ffffff;
    font-size: 22px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
  }

  /* menyu ağ sidebar üslubunda - şablonun tünd qutu stilləri ləğv edilir */
  .main-header .header-bottom .navbar-collapse > .navigation{
    background: #ffffff !important;
    border: none !important;
  }

  .main-header .header-bottom .navbar-collapse > .navigation > li{
    border-bottom: 1px solid #f1f2f6 !important;
  }

  .main-header .header-bottom .navbar-collapse .navigation li a{
    background: transparent !important;
    color: #2b3c6b !important;
    padding: 13px 20px !important;
    font-size: 15px;
  }

  .main-header .header-bottom .navbar-collapse .navigation li a:hover,
  .main-header .header-bottom .navbar-collapse .navigation > li.current > a{
    color: #ff7162 !important;
  }

  /* alt-menyular açıq boz fonda, pilləli girinti ilə */
  .main-header .header-bottom .navbar-collapse .navigation ul{
    background: #f7f8fb !important;
    border: none !important;
  }

  .main-header .header-bottom .navbar-collapse .navigation ul li a{
    padding-left: 32px !important;
  }

  .main-header .header-bottom .navbar-collapse .navigation ul ul li a{
    padding-left: 46px !important;
  }

  .main-header .header-bottom .navbar-collapse .navigation ul ul ul li a{
    padding-left: 60px !important;
  }

  /* dropdown açma düyməsi ağ fonda görünən olsun */
  .main-header .header-bottom .navbar-collapse li.dropdown .dropdown-btn{
    color: #2b3c6b !important;
    /* border: 1px solid #e6e8ef !important; */
    /* background: #ffffff; */
  }

}


/** sidebar stacking düzəlişi: menyu açıq olanda header pərdənin üstünə qalxır **/

@media only screen and (max-width: 991px){

  body.mobile-menu-open .main-header{
    z-index: 100001 !important;
  }

  .main-header .header-bottom .navbar-collapse{
    background: #ffffff !important;
  }

  /* şəffaf header-in ağ link rəngi sidebar daxilində qüvvədən düşür */
  .main-header.header-transparent .header-bottom .main-menu .navigation > li > a,
  .main-header .header-bottom .navbar-collapse .navigation > li > a{
    color: #2b3c6b !important;
  }

  .main-header.header-transparent .header-bottom .main-menu .navigation > li.current > a,
  .main-header .header-bottom .navbar-collapse .navigation > li.current > a{
    color: #ff7162 !important;
    background: transparent !important;
  }

   .main-header .header-bottom .navbar-collapse .navigation > li:hover > a{
    color: white !important;
    background: #ff7162 !important;
   }
}


/** sidebar açılışında rəng flash-ının qarşısı + dropdown ox fırlanması **/

@media only screen and (max-width: 991px){

  /* header-in "transition: all" qaydası z-index dəyişikliyini də
     animasiya edirdi - bir anlıq rəng dəyişməsinin səbəbi bu idi */
  .main-header{
    transition: none !important;
  }

  /* dropdown oxu: açıq olanda yuxarı baxır */
  .main-menu .navbar-collapse li.dropdown .dropdown-btn .fa{
    display: inline-block;
    transition: transform 300ms ease;
  }

  .main-menu .navbar-collapse li.dropdown .dropdown-btn.open .fa{
    transform: rotate(180deg);
  }

}


/** mobildə "Biz Kimik" şəkilləri: ikinci şəkil birincinin üzərində,
    aşağı-sol küncdə (desktop dizaynına uyğun) **/

@media only screen and (max-width: 991px){

  .about-section .image-box{
    position: relative;
    margin-bottom: 95px;
  }

  .about-section .image-box .image-1{
    margin-bottom: 0;
  }

  .about-section .image-box .image-2{
    position: absolute !important;
    left: -5px;
    top: auto !important;
    bottom: -65px;
    width: 220px;
    height: 220px;
    z-index: 2;
  }

}

@media only screen and (max-width: 575px){

  .about-section .image-box .image-2{
    width: 180px;
    height: 180px;
    bottom: -55px;
  }

}


/** xidmət kartları mobildə: sabit hündürlüklü şəkil konteyneri, cover **/

@media only screen and (max-width: 499px){

  .event-block-one .inner-box .image-box{
    height: 220px !important;
    overflow: hidden;
  }

  .event-block-one .inner-box .image-box img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

}


/** xidmət kartları mobildə: sabit hündürlüklü şəkil konteyneri, cover **/

@media only screen and (max-width: 499px){

  .event-block-one .inner-box .image-box{
    height: 220px !important;
    overflow: hidden;
  }

  .event-block-one .inner-box .image-box img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

}