/*
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  
======================================== */


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

html,body{overflow-x:hidden;}
:root{--mb-padding:clamp(1.429rem, -1.065rem + 10.909vw, 2.286rem) } /* 32px - 20px for mobile screens.*/
@media (min-width:1024px) and (max-width:1200px) {.agile-u__wrapper--desktop{padding-inline:50px !important;}}
@media (max-width:430px)                         {.agile-u__wrapper--phone{padding-inline:var(--mb-padding) !important;} }
@media (max-width:430px)                         {.agile-u__wrapper{padding-inline:var(--mb-padding) !important;} }
@media (min-width:1024px) and (max-width:1200px) {.agile-u__wrapper{padding-inline:50px !important;}}
@media (width<1024px){.agile-u--phones-br-none br{display:none;}}

.agile-u--gradient-primary{
	background: linear-gradient(180deg, #326699 0%, #32C2EA 100%);
}

.agile-u--text-gradient-primary{
	background: var(--Gradient-1, linear-gradient(180deg, #326699 0%, #32C2EA 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.agile-u--font-350,
.agile-u--font-350 *{
	font-weight:350 !important;
}

.agile-u--font-400,
.agile-u--font-400 *{
	font-weight:400 !important;
}

.agile-u--font-500,
.agile-u--font-500 *{
	font-weight:500 !important;
}

.agile-u--font-600,
.agile-u--font-600 *{
	font-weight:600 !important;
}

.agile-u--text-stroke-0-5,
.agile-u--text-stroke-0-5 *{
	-webkit-text-stroke:0.5px;
}

.agile-u-nav__btn-none .elementor-swiper-button{
	display:none !important;
}

.elementor-widget-text-editor p{
	margin:0px;
}

.--e-global-color-primary{
	color:var(--e-global-color-primary);
}
/* ======================================= 
    Global Styles
   ========================================== */



/* ======================================= 
   Button Styles
   ==================================== */
.agile-btn--gradient .elementor-button:hover,
.hover--black-bg .elementor-button:hover,
.agile-btn--white.agile-btn--transparent.hover--black-bg .elementor-button:hover
{
	background:var(--e-global-color-secondary) !important;
	color:white !important;
	border-color:var(--e-global-color-secondary) !important;
}

/* Btn White Transparent */
.agile-btn--white.agile-btn--transparent .elementor-button{
    background: transparent !important;
    color: white;
    border:1px solid white !important;
	padding-block:11px !important;
}

.agile-btn--white.agile-btn--transparent .elementor-button:hover{
    background: white !important;
    color: var(--e-global-color-primary) !important;
    border:1px solid white !important;
	padding-block:11px !important;
}
/* Btn White Transparent */

/* Btn Blue Gradient Transparent */
.agile-btn--blue.agile-btn--transparent{
	padding-bottom:2px;
}
.agile-btn--blue.agile-btn--transparent .elementor-button{
    position:relative;
    z-index:2;
	background: transparent;
    color: var(--e-global-color-primary) !important;
}

.agile-btn--blue.agile-btn--transparent .elementor-button::before{
    background: linear-gradient(81.47deg, #326699 22.57%, #32C2EA 175.6%);
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:-2;
    border-radius:8px;
}
@media (width<350px){
	.agile-btn--blue.agile-btn--transparent .elementor-button::before{
		height:calc(100% + 4px) !important;
	}
}
.agile-btn--blue.agile-btn--transparent .elementor-button::after{
    background:#f0f0f0;
    padding:20px;
    content:"";
    position:absolute;
    left:2px;
    top:2px;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    z-index:-1;
    border-radius:6px;
}
.agile-btn--blue.agile-btn--transparent .elementor-button:hover::before{
	background:#32669933;
}
.agile-btn--blue.agile-btn--transparent .elementor-button:hover::after{
	background:#32669900;
}

.agile-btn--blue.agile-btn--transparent.agile-btn--bg-white .elementor-button::after{
    background: white ;
}

.agile-btn--blue.agile-btn--transparent.agile-btn--bg-white .elementor-button:hover::before{
    background:#32669933 !important;
}

.agile-btn--blue.agile-btn--transparent.agile-btn--bg-white .elementor-button:hover::after{
    background:#32669900 ;
}

/* Btn Blue Gradient Transparent */


 /* Make button responsive upto 320px screen for all global buttons*/
@media (width<390px){
/* 	Condition to apply for only .agile-btn--clamp buttons.
 
 	.agile-btn--blue.agile-btn--transparent.agile-btn--clamp .elementor-button,
	.agile-btn--white.agile-btn--transparent.agile-btn--clamp .elementor-button,
	.agile-btn--clamp  .elementor-button
*/
	.elementor-button{
		white-space: nowrap;
		padding-inline: clamp(0.875rem, -3.125rem + 20vw, 1.875rem) !important;
		padding-block: clamp(0.625rem, 0.125rem + 2.5vw, 0.75rem) !important;
		font-size: clamp(0.875rem, -0.125rem + 5vw, 1.125rem) !important;
	}
}

.agile-custom-prev,
.agile-custom-next{
cursor:pointer;
}
.agile-custom-next svg:hover,
.agile-custom-prev svg:hover {
    fill: var(--e-global-color-primary);
}

.agile-custom-prev svg:hover path,
.agile-custom-next svg:hover path{
    fill: white !important;
}

/* ======================================= 
   Button Styles
   ========================================== */


/* ========================================== 
   Other Styles
   ======================================= */

/* Global Tabs */
@media (width<1024px){
 
.e-n-tabs-heading{
  flex-wrap: nowrap !important;
  justify-content:flex-start !important;
  overflow-x: scroll !important;
	padding-right:120px !important;
}
  .e-n-tabs-heading >*{
    flex-shrink: 0 !important;
  }
}

@media (width>1024px){
	.e-n-tabs-arrows{
		display:none !important;
	}
}


/* =======================================
   Other Styles
   ========================================== */