/* ================= SCROLLING BOTTOM TO TOP BUTTON ================= */
@media(max-width:768px){

    #myBtn{
        width:65px;
        height:65px;
    }
}
/* =================END HERE SCROLL BOTTOM TOP BUTTON  ================= */

/* ================= RESPONSIVE NAVBAR SRTART HERE ================= */

/* ========================================= NAVBAR LOGO  MOBILE ========================================= */

@media(max-width:576px){

    .logo-slogan{

        font-size:8px;

        letter-spacing:1px;

        bottom:-10px;
    }
}

/* desktop dropdown */

@media(min-width:992px){

    .navigation li:hover > ul{

        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }
}

/* ================= 992px TO 1180px FIX ================= */

@media only screen and (min-width:992px) and (max-width:1180px){

    /* NAVBAR HEIGHT */

    .nav-container{

        height:54px;
    }

    /* LOGO SMALLER */

    .logo-area{

        width:190px;
    }

    .logo-area img{

        height:33px;
        width:auto;
    }

    /* FLAG SMALLER */

      .flag-center .flag{
        width:60px;
        height:38px;
    }

    .flag-center .welcome{
        width:80px;
        height:30px;
    }

    /* MENU HEIGHT */

    .navigation{

        height:56px;
    }

    /* NAV TEXT + BUTTON SMALLER */

    .navigation > li > a{

        height:54px;

        padding:0 12px;

        font-size:13px;

        font-weight:600;
    }

    /* UNDERLINE POSITION */

    .navigation > li > a::after{

        bottom:8px;
    }

    /* DROPDOWN SIZE */

    .navigation li ul{

        min-width:210px;
    }

    .navigation li ul li a{

        padding:12px 15px;

        font-size:13px;
    }

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

@media(max-width:991px){

    .nav-container{

        height:50px;
    }

    .logo-area{

        width:auto;
    }

    .logo-area img{

        height:30px;
    }

    .flag-center .flag{
        width:50px;
        height:32px;
    }

    .flag-center .welcome{
        width:70px;
        height:27px;
    }
    .mobile-toggle{

        display:flex;
        align-items:center;
    }

    .navigation{

        display:none;

        position:absolute;

        top:50px;
        left:0;

        width:100%;

        flex-direction:column;

        background:#192d66;

        height:auto;
    }

    .navigation.show{

        display:flex;
    }

    .navigation > li{

        width:100%;
    }

    .navigation > li > a{

        height:auto;

        padding:15px 18px;

        justify-content:flex-start;
    }

    .navigation li ul{

        position:static !important;

        display:none;

        width:100%;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        background:#243f87;
    }

    .navigation li.open > ul{

        display:block;
    }
}

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

@media(max-width:576px){

    .nav-container{

        height:40px !important;
        min-height:40px !important;

        padding:0 6px !important;
    }

    .logo-area img{

        height:25px !important;
    }

  .flag-center .flag{
        width:40px;
        height:25px;
    }

    .flag-center .welcome{
        width:60px;
        height:23px;
    }

    .navigation{

        top:40px !important;
    }

    .navigation > li > a{

        height:40px !important;

        padding:0 10px !important;

        font-size:12px !important;
    }

    .mobile-toggle{

        font-size:22px !important;

        height:40px !important;

        line-height:40px !important;

        padding:0 4px !important;
    }

    .navigation li ul li a{

        padding:10px 14px !important;

        font-size:12px !important;
    }
}
/* ===============================
   Z FOLD FOLDED MODE
   320px — 420px
=============================== */

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

    .nav-container{

        height:42px !important;
        min-height:42px !important;

        padding:0 6px !important;
    }

    .logo-area img{

        height:24px !important;
        width:auto !important;
    }

    .flag-center .flag{
        width:30px;
        height:19px;
    }

    .flag-center .welcome{
        width:50px;
        height:19px;
    }


    .navigation{

        top:42px !important;
    }

    .navigation > li > a{

        height:42px !important;

        line-height:42px !important;

        padding:0 9px !important;

        font-size:11px !important;
    }

    .mobile-toggle{

        font-size:21px !important;

        height:42px !important;

        line-height:42px !important;

        padding:0 4px !important;
    }

    .navigation li ul li a{

        padding:10px 14px !important;

        font-size:12px !important;
    }

    /* PREVENT OVERFLOW */

    .navigation,
    .nav-container,
    .navbar{

        overflow:hidden !important;
    }
}

/* =========================================================
   SLIDER START RESPONSIVE
========================================================= */
@media(max-width:1100px){

    .am-slide{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:40px;

    }

    .am-content,
    .am-image{

        width:100%;

    }

    .am-title{

        font-size:52px;

    }

}

@media(max-width:768px){

    .am-title{

        font-size:38px;

    }

    .am-subtitle{

        font-size:18px;

    }

  }

@media (max-width:430px){

    .am-slider{
        height:100vh; /* IMPORTANT for mobile */
        overflow:hidden;
    }

    .am-slide{
        flex-direction:column;
        justify-content:center;
        align-items:center;
        padding:0 20px;
         padding-bottom:60px;
        transform:translateX(80px);
    }

     .am-title{
        font-size:28px;
        margin-bottom:40px;
        line-height:1.1;
    }

    .am-subtitle{
        font-size:16px;
        margin-top:40px;
        margin-bottom:20px;
        line-height:1.2;
        letter-spacing:2px;
    }

   .am-text{
    line-height:1.4;
    margin-bottom:20px;
}

    .am-indicators{
        bottom:25px; /* FIX: was 90px */
        gap:10px;
    }
}
/* =========================================================
   END HERE SLIDER RESPONSIVE
========================================================= */

/* =========================================================================
  START HERE REGULAR PRODUCTS/AFTER SLIDER  RESPONSIVE MOBILE START HERE
========================================================================= */

@media(max-width:768px){
    .regular-advanced-products{
        padding:90px 0;
    }

    .regular-product-image img{
        height:220px;
    }
}
/* =========================================================================
   END HERE REGULAR PRODUCTS/AFTER SLIDER  RESPONSIVE MOBILE START HERE
========================================================================= */

/* ======================================================
   PORT FOLIO RESPONSIVE BODY START HERE
====================================================== */
@media(max-width:768px){

    .port-products{

        padding:90px 0;
    }

    .port-card{

        padding:28px;
    }

}

/* ======================================================
   END HERE PORT FOLIO RESPONSIVE BODY 
====================================================== */

/* ======================================================
  ADVANCED  PRODUCTS RESPONSIVE MOBILE START HERE
====================================================== */

@media (max-width:768px){

    .products-advanced-section{

        padding:100px 0;
    }

    .products-image img{

        height:260px;
    }

    .products-header{

        margin-bottom:65px;
    }
}

/* ======================================================
 END HERE ADVANCED PRODUCTS RESPONSIVE MOBILE 
====================================================== */


/* ======================================================
  3  PRODUCTS VIDEO RESPONSIVE START HERE 
====================================================== */
@media(max-width:768px){

    .product-video-section{
        padding:90px 0;
    }

}


/* ======================================================
  END HERE  3  PRODUCTS VIDEO RESPONSIVE CSS START HERE 
====================================================== */

/* ======================================================
  OVERLY VIDEO  START HERE 
====================================================== */
/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

    .vd-title{
        font-size:62px;
    }

    .vd-counter-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .vd-title{
        font-size:42px;
    }

    .vd-description{
        font-size:16px;
    }

    .vd-counter-grid{
        grid-template-columns:1fr;
    }

    .vd-tag{
        width:100%;
    }

    .vd-section{
        padding:100px 0;
    }

}


/* ======================================================
  END HERE OVERLY VIDEO 
====================================================== */


/* ======================================================
  FOOTER RESPONSIVE START HERE 
====================================================== */
/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

    .ft-footer-container{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:992px){

    .ft-feature-grid{
        grid-template-columns:1fr;
    }

    .ft-main-footer{
        padding-top:820px;
    }

}

@media(max-width:768px){

    .ft-footer-container{
        grid-template-columns:1fr;
    }

    .ft-main-footer{
        padding-top:860px;
    }

    .ft-feature-title h2{
        font-size:36px;
    }

    .ft-social-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}


/* ======================================================
  END HERE FOOTER RESPONSIVE AND INDEX PAGE 
====================================================== */

/* ======================================================
   BASE PRODUCTS PAGE START HERE 
====================================================== */
/* =====================================================
   TABLET RESPONSIVE
===================================================== */

@media (max-width:1024px){

    .product-base-page-grid{

        grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

        gap:30px;

        margin-left:15px;
        margin-right:15px;
    }

    .product-base-page-card{
        padding:30px 25px 110px;
    }

    .product-base-page-imgBox{

        width:160px;
        height:160px;
        min-width:160px;
    }

    .product-base-page-cat h2{
        font-size:28px;
    }

    .product-base-page-info h3{
        font-size:20px;
    }
}


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

@media (max-width:768px){

    .product-base-page-top{

        padding-top:80px;
        margin-bottom:40px;
    }

    .product-base-page-title{
        font-size:2.3rem;
    }

    .product-base-page-desc{

        padding:0 20px;
        font-size:15px;
    }

    .product-base-page-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-left:12px;
        margin-right:12px;
    }

    .product-base-page-card{

        padding:25px 20px 100px;

        border-radius:25px;
    }

    .product-base-page-product{

        flex-direction:column;

        text-align:center;

        gap:15px;
    }

    .product-base-page-imgBox{

        width:100%;
        height:260px;

        min-width:100%;
    }

    .product-base-page-arrow{

        width:45px;
        height:45px;
    }

    .product-base-page-cat h2{
        font-size:24px;
    }

    .product-base-page-info h3{
        font-size:20px;
    }

    .product-base-page-info p{
        font-size:14px;
    }
}


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

@media (max-width:480px){

    .product-base-page-top{
        padding-top:70px;
    }

    .product-base-page-title{
        font-size:2rem;
    }

    .product-base-page-badge{

        font-size:11px;

        padding:8px 18px;
    }

    .product-base-page-grid{

        margin-left:8px;
        margin-right:8px;
    }

    .product-base-page-card{

        padding:20px 15px 95px;

        border-radius:20px;
    }

    .product-base-page-imgBox{
        height:220px;
    }

    .product-base-page-cat h2{
        font-size:22px;
    }

    .product-base-page-info h3{
        font-size:18px;
    }

    .product-base-page-explore{
        height:80px;
    }

    .product-base-page-explore span{
        font-size:13px;
        letter-spacing:1px;
    }
}


/* ======================================================
  END HERE BASE PRODUCTS PAGE 
====================================================== */

/* ================= START HERE CATAGORIES PAGE RESPONSIVE ================= */


/* ================= RESPONSIVE ================= */

@media(max-width:900px){
    .cata-base-grid{
        grid-template-columns:1fr;
    }
}

/* ======================================================
  END HERE CATAGORIES  PAGE 
====================================================== */


/* ================= 	START DISPLAY  PAGE RESPONSIVE ================= */

/* ================= RESPONSIVE ================= */

@media(max-width:1024px){

    .display-board-body .grid{
        grid-template-columns: 2fr 1fr;
    }

    .display-board-body .image-grid{
        grid-template-columns:1fr;
    }

    .display-board-body .main-img,
    .display-board-body .side-img{
        height:280px;
    }
}

@media(max-width:768px){

    .display-board-body .grid{
        grid-template-columns:1fr;
    }

    .display-board-body .less-btn{
        margin-left:0;
        width:100%;
    }

    .display-board-body .title-row{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* ======================================================
  END HERE DISPLAY  PAGE 
====================================================== */

/* ================= 	START GALLERY BODY RESPONSIVE ================= */


/* ================= ANIMATION ================= */
@keyframes amx_gallery_scroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

/* ================= FOOTER ================= */
.amx_gallery_footer{
    text-align:center;
    padding:30px;
    font-size:12px;
    opacity:0.5;
}

/* ================= RESPONSIVE ================= */
@media(max-width:600px){
    .amx_gallery_card{
        min-width:220px;
    }
}


/* ======================================================
  END HERE GALLERY PAGE 
====================================================== */

/* =================LEGAL PAGES ABOUT, TERMS,PRIVECY AND COOKIES RESPONSIVE ================= */
/* ================= RESPONSIVE ================= */

@media(max-width:900px){

    .amx-story-wrapper{
        flex-direction:column;
    }

    .amx-story-side{
        width:auto;
        margin:20px;
        position:relative;
        top:0;
    }

    .amx-story-content{
        margin-left:0;
        padding:30px 20px;
    }

    .amx-story-hero{
        font-size:38px;
    }

    .amx-story-card-title{
        font-size:22px;
    }

    .amx-story-card-text{
        font-size:16px;
    }
}
/* ======================================================
  END HERE LEGAL PAGES  
====================================================== */

/* ================= LOGIN PAGE RESPONSIVE ================= */

@media (max-width:768px){

    .am-admin-card{
        width:95%;
        padding:35px 25px;
        border-radius:20px;
    }

    .am-admin-logo h1{
        font-size:28px;
        letter-spacing:2px;
    }

    .am-admin-logo span{
        font-size:11px;
        letter-spacing:1px;
    }

    .am-admin-badge{
        margin:20px 0;
    }

    .am-admin-badge span{
        font-size:11px;
        padding:7px 14px;
    }

    .am-admin-input{
        padding:14px 16px;
        font-size:14px;
    }

    .am-admin-options{
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    .am-admin-remember,
    .am-admin-forgot{
        font-size:13px;
    }

    .am-admin-btn{
        padding:14px;
        font-size:14px;
    }

    .am-admin-footer{
        font-size:11px;
    }

    .am-admin-bg-glow{
        width:500px;
        height:500px;
    }
}

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

@media (max-width:480px){

    .am-admin-card{
        width:92%;
        padding:28px 18px;
        border-radius:18px;
    }

    .am-admin-logo h1{
        font-size:24px;
    }

    .am-admin-logo span{
        font-size:10px;
    }

    .am-admin-badge span{
        font-size:10px;
        padding:6px 12px;
    }

    .am-admin-input{
        padding:13px 14px;
        font-size:14px;
    }

    .am-admin-btn{
        padding:13px;
        font-size:13px;
    }

    .am-admin-bg-glow{
        width:350px;
        height:350px;
    }
}
/* ================= login end here================= */

/* ================= START DASHBOARD ================= */
/* ================= MOBILE ================= */

@media(max-width:900px){

.amd-wrapper{
    flex-direction:column;
}

.amd-sidebar{
    width:100%;
}

}