.gradient-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 50px;
    background: linear-gradient(-45deg, #f0645f, #9c1510, #845ef7, #339af0);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }


.fade-in-section{
  opacity:0;
  transform:translateY(30px);
  animation:fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* text rotater for header */
.rotator { display:inline-block; vertical-align:middle; }
#rotator-text { display:inline-block; transition: opacity 0.45s ease; }


  /* tilt card css */

.tilt-section {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

  }



  .tilt-container {
    display: flex;
    gap: 30px;
    perspective: 1200px; /* Enables 3D effect */
    flex-wrap: wrap;
    justify-content: center;
  }

  .tilt-card {


    display: flex;
    align-items: center;
    justify-content: center;



    transform-style: preserve-3d;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }

  .tilt-card:nth-child(2) {
    background: linear-gradient(135deg, #ff6b6b, #f06595);
  }

  .tilt-card:nth-child(3) {
    background: linear-gradient(135deg, #40c057, #82c91e);
  }

.slideshow {
      position: relative;
      width: 600px;
      height: 400px;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
    }

    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: fade 20s infinite;
    }

    .slideshow img:nth-child(1) { animation-delay: 0s; }
    .slideshow img:nth-child(2) { animation-delay: 5s; }
    .slideshow img:nth-child(3) { animation-delay: 10s; }
    .slideshow img:nth-child(4) { animation-delay: 15s; }

    @keyframes fade {
      0%   { opacity: 0; }
      10%  { opacity: 1; }
      25%  { opacity: 1; }
      35%  { opacity: 0; }
      100% { opacity: 0; }
    }

/*-----split text---------------*/


    .split-wrap {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:#faeedd;
		border:#f1d7b3 solid 1px;
      overflow: hidden;
	 border-top-left-radius: 60px;	
	    border-top-right-radius: 60px;	
		
    }
    .split {
      position: relative;
      width: 80%;
      max-width: 1000px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
    }
    .split > div {
      flex: 1;
      min-width: 0;
      will-change: transform;
	  color:#222;	
	 
    }

 .split .text  h1  {
      
	  color:#222;	
	     font-size: 35px;
	 
    }

    /* Text side */
  
    .split .text span {
      opacity: 0;
      display: inline-block;
      transform: translateY(20px);
    }

  /* Button style */
    .cta-btn {
      display: inline-block;
      
      padding: 0.8rem 1.8rem;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: #9c1510;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(58, 134, 255, 0.4);
      transition: all 0.3s ease;
      opacity: 0; /* hidden initially */
      transform: translateY(20px);
    }
    .cta-btn:hover {
      background: #222;
      box-shadow: 0 8px 25px rgba(58, 134, 255, 0.6);
      transform: translateY(-3px);
    }

    /* Image side */
    .split .image {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .split .image img {
      max-width: 100%;
   
    }

/*-----blur scroll effect----------------*/
.section2 {
 
      opacity: 0;
      transform: translateY(120px) scale(0.95); /* Bigger offset + slight shrink */
      animation: fadeUp linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%; /* Trigger earlier, animate longer */
    }

/* Stronger fade + slide animation */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(120px) scale(0.9);
        filter: blur(7px); /* add blur for extra punch */
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

/*----left fix section and right vertical moving--------*/

  .gallery-section {

  padding: 40px 0;
  overflow: hidden;
}

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
	height:300px;
}

.slide-track {
  display: flex;
  width: calc(250px * 10); /* 5 images × 2 sets = 10 */
  animation: scroll 30s linear infinite;
  padding: 12px;
}

.slide {
  width: auto;
  height: auto;
  margin: 0 15px;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
box-shadow: 4px 1px 12px rgba(0,0,0,0.3);
  transition: transform 0.4s ease;
}

.slide img:hover {
  transform: scale(1.08);
  
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 5)); } /* move width of ONE set */
}

/*-----------------about us css-------------------*/

 .parallax-section{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:60px 20px;
    min-height:70vh;           /* change if you want taller/shorter section */
    position:relative;
    box-sizing:border-box;
  }

  .parallax-image{
    width: clamp(180px, 28%, 420px);
    aspect-ratio: 3 / 4;
    overflow:hidden;
    border-radius:12px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35);
  }

  .parallax-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    will-change:transform;
    /* small easing so it doesn't feel jumpy */
    transition: transform 0.12s linear;
    transform: translateY(0);
    backface-visibility: hidden;
  }
/*-------------team------------------------------*/
/* small helpers to make transforms smooth — does NOT change your classes/IDs */
#team .avatar-xl img {
  will-change: transform;
  backface-visibility: hidden;
}
#team .card {
  will-change: transform, opacity;
}
/*-----------home care tool box-----------*/
/* Floating blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.25;
      z-index: -1;
      animation: float 10s infinite ease-in-out alternate;
    }
    .blob1 { width:400px; height:400px; background:#2563eb; top:-100px; left:-150px; }
    .blob2 { width:300px; height:300px; background:#f43f5e; bottom:-100px; right:-100px; }
    @keyframes float { from { transform: translateY(0px); } to { transform: translateY(40px); } }



    /* Hero Section */
    .hero3 {
      position: relative;
      padding: 140px 20px;
      background: linear-gradient(135deg, #2563eb 0%, #f43f5e 100%);
      color: #fff;
      overflow: hidden;
    }
    .hero3::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: url('../assets/images/home-care-big.jpg') center/cover no-repeat;
      opacity: 0.15;
      z-index: 0;
    }

    #hero-particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }

    .hero3 .container { position: relative; z-index: 1; text-align:center; }
    .hero3 h1, .hero h2, .hero p, .hero .btn { opacity:1; color:#fff; }
    .hero3 h1 { font-size:42px; font-weight:700; margin-bottom:16px; }
    .hero3 h2 { font-size:24px; font-weight:500; margin-bottom:16px; }
    .hero3 p { font-size:18px; margin-bottom:30px; }
    .hero3 .btn { background:#9c1510; color:#fff; padding:14px 28px; border-radius:8px; text-decoration:none;  transition:0.3s; }
    .hero3 .btn:hover { background:#222; }

    /* Section Text & Images */
    .text-block {

      padding: 30px;
    
   
      /*opacity: 1;*/
      transform: translateY(50px);
    }
    .text-block h2 { font-size:40px; margin-bottom:16px; color:#222222; }
    .text-block p { font-size:14px; color:#444; line-height:1.8; margin-bottom:16px; }

    /* Parallax Section 2 */
    .features-grid {
	
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 40px;
    }
    .images-parallax-wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      perspective: 1000px;
    }
    .images-parallax img {
      width: 80%;
      border-radius: 12px;


      transform: translateZ(0);
      transition: transform 0.3s ease;
    }
    .parallax-text {
      transform-style: preserve-3d;
      will-change: transform;
    }

    /* Right Tools Section (Fade + Slide Effect) */
    .right-tools .container {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:40px;
    }
    .right-tools .images { flex:1; min-width:300px; opacity:0; transform:translateY(60px); }
    .right-tools .text-block { flex:1; min-width:300px; opacity:0; transform:translateY(60px); }
    .right-tools .text-block h2 { color:#f43f5e; }
    .right-tools .btn { background:#f43f5e; color:#fff; padding:12px 28px; border-radius:8px; text-decoration:none; font-weight:600; transition:0.3s; }
    .right-tools .btn:hover { background:#be123c; }


.fsec-parallax {
  position: relative;
 
  padding: 100px 20px;
}

.fsec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.fsec-card {

  border-radius: 20px;
  padding: 30px;

  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.fsec-card:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-4deg) scale(1.02);

}

.fsec-card p{ font-size: 14px; line-height: 1.8;}

.fsec-images img {
  width: 80%;
  display: block;
  border-radius: 15px;
}


 /* -------- Responsive -------- */

   @media (max-width: 1199px) {
	   .color-bg .navbar-collapse{ margin-top: -40px;}
	   .gradient-section{height: auto}
	   
	 
  	   .section2 {
  padding-top: 25px;
        opacity: 1;              /* show normally */
  transform: none;         /* no movement */
  animation: none;
    }
	   .explore-box p.text-muted { font-size: 13px}
	   .explore-box h5{ font-size: 15px;}	  
	   .section { padding: 35px 0;}
	   .home-p{font-size: 32px;}
	   .navbar-toggler{ background: #fefefe;}
	   .mdi-set, .mdi:before{ color:#fff;}
    }



    @media (max-width: 992px) {
		   .color-bg .navbar-collapse{ margin-top: 10px;}
		.color-bg .navbar-light .navbar-nav .nav-item .nav-link{ color:#000;}
      .container { grid-template-columns: 1fr; }
      .left { position: relative; top: auto; margin-bottom: 40px; }
      .right .img-box { height: 300px; }
      .tilt-card { width: 240px; height: 320px; }
		.wt-bg {
    background: transparent;
    padding: 5px;
    position: relative;
    top: 0;
    border-radius: 0;
    box-shadow:none;
    transition: all 0.3s ease;}
	.gradient-section h3{ font-size: 43px;}	
	 .section { padding: 25px 0;}
	.home-p{ text-align: center}
	.ab-p{ margin-top: 60px;}
	.bg-light3{padding: 0}
		
		.images-parallax img {
     
transform: translateY(0px) translateZ(0px);
         }
		
		.color-bg .navbar-landing .navbar-nav .nav-item .nav-link.active, .color-bg .navbar-landing .navbar-nav .nav-item .nav-link:focus, .color-bg  .navbar-landing .navbar-nav .nav-item .nav-link:hover{color:#000 !important;}
	    .color-bg .navbar-landing .navbar-nav .nav-item .nav-link{ font-size: 13px; color:#000;}
	   .navbar-landing .navbar-nav .nav-item .nav-link{ font-size: 13px; color:#000;}
	   .navbar-landing .navbar-nav .nav-item .nav-link.active, .navbar-landing .navbar-nav .nav-item .nav-link:focus, .navbar-landing .navbar-nav .nav-item .nav-link:hover{color:#000 !important;}
	    .color-bg .navbar-landing.is-sticky .navbar-nav .nav-item .nav-link{ font-size: 13px; color:#000;}
	   .color-bg .navbar-landing.is-sticky .navbar-nav .nav-item .nav-link.active, .color-bg .navbar-landing.is-sticky .navbar-nav .nav-item .nav-link:focus, .color-bg .navbar-landing.is-sticky .navbar-nav .nav-item .nav-link:hover{color:#000 !important;}
		
		
		#mainNav {
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
		
    }




    @media (max-width: 600px) {
      section { padding: 40px 15px; }
      .right .img-box { height: 220px; margin-bottom: 30px; font-size: 1.2rem; }
      .features { grid-template-columns: 1fr; }
      .gradient-section { animation: none; background-size: cover; padding: 30px 15px; }
      .cursor { display: none; }
      /* Horizontal → vertical stack */
      .horizontal-section { height: auto; overflow: visible; display: block; }
      .horizontal-wrapper { position: relative; height: auto; display: block; }
      .horizontal-scroll { display: block; transform: none !important; }
      .h-item { flex: none; width: 100%; height: 250px; margin-bottom: 20px; font-size: 1.5rem; }
      /* Simplify tilt */
      .tilt-card { transform: none !important; transition: none !important; }
    }