/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Author: 	  NAVY
Author URI:   nabarajdhungel.com.np
*/

/* =======================================
   BEM & Utility Naming Convention Used  
   - BEM for structured components  
   - Utility classes for global styles  
======================================== */

/* ========================================== 
   Responsive Global Styles
   ======================================= */

html,
body {
  overflow-x: hidden;
}

:root {
  --mb-padding: clamp(1.25rem, 0.523rem + 3.636vw, 1.5rem) /* 24px - 18px for mobile screens.*/
}

/* For small screens (max-width: 430px) */
@media (max-width: 430px) {
  .env-u-wrapper-phone {
    padding-inline: var(--mb-padding) !important;
  }
}


/* For medium screens (1024px to 1200px) */
@media (min-width: 1024px) and (max-width: 1200px) {
  .env-u-wrapper-1024-1200px {
    padding-inline: 50px !important;
  }
}

@media (width<1024px) {
  .env-u--br-none-phones br {
    display: none;
  }
}

/* ======================================= 
   Responsive Global Styles
   ========================================== */

/* White Btn */

.env-btn--white .elementor-button{
    border-color: white !important;
    background: transparent !important;
    color: white !important;
}

.env-btn--white .elementor-button:hover{
    background: white !important;
    color: #252626 !important;
}

/* Black Btn */

.env-btn--black .elementor-button{
    border-color: #252626 !important;
    background: #252626 !important;
    color: var(--e-global-color-primary) !important;
}

.env-btn--black .elementor-button:hover{
    background: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
    color: #252626 !important;
}



/* ========================================== 
   Carousel Btns Highlight
   ======================================= */



:is(.custom-next,.custom-prev)
,:is(.custom-next,.custom-prev) :is(svg,path,circle){
    transition: 0.25s;
}

:is(.custom-next:hover,.custom-prev:hover,.custom-next.active) svg{
    fill: #F7CE50;
}

:is(.custom-next:hover,.custom-prev:hover,.custom-next.active) circle{
    stroke: #F7CE50;
}

:is(.custom-next:hover,.custom-prev:hover,.custom-next.active) path{
    stroke: #252626;
}

/* ======================================= 
   Carousel Btns Highlight
   ========================================== */