/* ===========================================================================
||  BANNER MEIN LEFT MAIN CONT KA CSS  (home->h, banner->b, left->l, right->r) ||
=============================================================================== */

  .hb-l-main-img{
       display: none;
}
    
@media (width >= 1250px) {
      .hb-l-main-cont{
     border: none !important;
 }  
	
	.hb-l-content-cont{
	position: absolute;
	top: 10;
	left: 0;
}
     
      .hb-l-main-img{
       display: flex;
    }
}

@media (1025px <= width <= 1249px) {
	 .hb-l-static-headline h2{
		 font-size: 3.6rem !important;
	 }
}



/* ===================================
||  BANNER ANIMATED TEXT CSS      ||
=================================== */
.hb-l-dy-word {
position: absolute;
left: 0;
opacity: 0; /* Hidden initially */
white-space: nowrap;
animation: textCycle 12s linear infinite; /* Total Duration = 4 words * 3.5s each = 8s */
}

/* Delay har word ke liye alag hoga */
.hb-l-dy-word:nth-child(1) { animation-delay: 0s; }
.hb-l-dy-word:nth-child(2) { animation-delay: 3s; }
.hb-l-dy-word:nth-child(3) { animation-delay: 6s; }
.hb-l-dy-word:nth-child(4) { animation-delay: 9s; }


@keyframes textCycle {
0% { transform: translateY(100%); opacity: 0; } /* 0% to 5%: Slide In (Entry) */
1.5% { transform: translateY(0); opacity: 1; }

22.5% { transform: translateY(0); opacity: 1; scale: 1; filter: blur(0); } /* 5% to 20%: Stay Visible (Wait) */

25% { transform: translateY(0); opacity: 0; scale: 2; filter: blur(10px); } /* 20% to 25%: Zoom Out & Fade (Exit) */

100% { opacity: 0; } /* 25% to 100%: Stay Hidden (Wait for others) */
}



/* =========================================
||  BANNER LEFT SIDE CONT ARROW BUTTON    ||
============================================ */
@media (width <= 1249px) {
.hb-l-arow-cont {
	bottom: 20px !important;
	right:20px !important;
}
}
 
/* Hover karne pe circle thoda bada hoga */
.hb-l-arow-cont:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.hb-l-arrow-wrapper {
    position: relative;
}

.hb-arrow-img{
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.arrow-img-1 { /* Primary Arrow: Jo initially center mein hai */
    transform: translate(0, 0);
}

.arrow-img-2 { /* Secondary Arrow: Jo niche left side mein chupa hua hai */
    transform: translate(-150%, 150%);
}

/* --- HOVER EFFECTS --- */

.hb-l-arow-cont:hover .arrow-img-1 { /* Jab button hover ho, to Primary arrow up-right ud jaye */
    transform: translate(150%, -150%);
}

.hb-l-arow-cont:hover .arrow-img-2 { /* Jab button hover ho, to Secondary arrow center mein aa jaye */
    transform: translate(0, 0);
}



/* =========================================
||  BANNER MEIN BOOK CALL WALA BUTTON    ||
============================================ */

.home-banner-btn .hb-img {
	display: none;
}

.home-banner-btn:hover{
	background-color: var(--e-global-color-accent) !important;
}

.home-banner-btn:hover .hb-img{
	display: flex;
	animation: popup 0.6s ease-out forwards;
}

@keyframes popup {
      0% {
        transform: scale(0.3);
        opacity: 0;
      }
      60% {
        transform: scale(1.05);
        opacity: 1;
      }
      100% {
        transform: scale(1);
      }
    }

.home-banner-btn:hover .hb-heading {
    transition: all 0.4s ease-in-out;
	padding-left: 5px;
}

.home-banner-btn:hover h2 {
	color: var(--e-global-color-text) !important;
}



/* =====================================================
||     BANNER MEIN RIGHT SIDE TOP CAROUSAL CSS    ||
===================================================== */
.hb-r-carousal-cont{
        cursor: grabbing;
    }
    
    
.hb-r-carousel-track{
    will-change: transform;
}

.hb-r-slide {
    min-width: 100%;
    user-select: none;
}

.nav-item {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.nav-fill {
    height: 100%;
    width: 100%;
    background:  #fff; 
    transform-origin: left;
    transform: scaleX(0);
}



/* ============================ 
||       CLIENT SECTION 4    ||
=============================== */

.h-provider-sharp{
	
    --mask: 
        linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);

   
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);

   
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}




/* ============================ 
||       CONTACT SECTION    ||
=============================== */

.h-contact-animated-img {
    animation: floatOrbit 2.5s ease-in-out infinite alternate;
}

@keyframes floatOrbit {
    0% {
        transform: rotate(0deg) translate3d(5px, 0px, 0px) rotate(0deg);
    }
    
    50% {
        transform: rotate(180deg) translate3d(5px, 0px, 0px) rotate(-180deg);
    }

    100% {
        transform: rotate(360deg) translate3d(5px, 0px, 0px) rotate(-360deg);
    }
}