.feature-card:hover { 
		transform: translateY(-5px); 
		transition: all 0.3s ease; 
	}
	.gradient-text { 
		background: linear-gradient(to right, #4f46e5, #9333ea); 
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent; 
	}

    @keyframes float {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(2deg); }
        100% { transform: translateY(0px) rotate(0deg); }
    }

    @keyframes slideUp {
        0% { opacity: 0; transform: translateY(50px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    /* Custom Animation Classes */
    #schoolontap-home .animate-float { animation: float 6s ease-in-out infinite; }
    #schoolontap-home .animate-float-slow { animation: float 8s ease-in-out infinite; }
    #schoolontap-home .animate-float-delayed { animation: float 7s ease-in-out infinite 1s; }
    
    #schoolontap-home .animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    #schoolontap-home .animate-slide-up-delayed { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
    #schoolontap-home .animate-slide-up-more { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; opacity: 0; }
    #schoolontap-home .animate-fade-in { animation: fadeIn 1s ease-out forwards; }
	
	
    #schoolontap-feature .orbit-container {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: orbit-spin var(--speed) linear infinite;
        animation-delay: var(--delay);
        pointer-events: none;
    }

    #schoolontap-feature .orbit-card {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white; /* Default text color */
        border: 2px solid rgba(255,255,255,0.1);
        transform: translate(var(--radius)) rotate(0deg);
        animation: orbit-counter var(--speed) linear infinite;
        animation-delay: var(--delay);
        pointer-events: auto;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #schoolontap-feature .orbit-card i {
        font-size: 1.5rem;
        margin-bottom: 6px;
        transition: color 0.4s ease;
    }
    #schoolontap-feature .orbit-card span {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        padding: 0 5px;
        transition: color 0.4s ease;
    }
    #schoolontap-feature .orbit-card:hover {
        background-color: white !important;
        transform: translate(var(--radius)) scale(1.25);
        z-index: 100;
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
    }
    
    #schoolontap-feature .orbit-card:hover i, 
    #schoolontap-feature .orbit-card:hover span {
        color: #0f172a !important; /* Dark Slate (Tailwind slate-900) */
    }

    /* Keyframes */
    @keyframes orbit-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes orbit-counter {
        from { transform: translate(var(--radius)) rotate(0deg); }
        to { transform: translate(var(--radius)) rotate(-360deg); }
    }

    /* Responsive scaling for tablet/mobile */
    @media (max-width: 1024px) {
        #schoolontap-feature .orbit-container { scale: 0.75; }
    }
    @media (max-width: 768px) {
        #schoolontap-feature .orbit-container { scale: 0.5; }
       /* #schoolontap-feature .orbit-card span { display: none; }  Hide text on mobile for clarity 
        #schoolontap-feature .orbit-card { width: 70px; height: 70px; }*/
        #schoolontap-feature .h-\[900px\] {
            height: unset !important;
        }
        #schoolontap-feature .mb-28 {
            margin-bottom: 2rem !important;
        }
    }
     @keyframes lineFlow {
        0% { left: -10%; }
        100% { left: 110%; }
    }
    #schoolontap-feature .animate-line-flow {
        position: absolute;
        animation: lineFlow 4s linear infinite;
    }
    
	
	@keyframes soft-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(79, 70, 229, 0); }
        50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(79, 70, 229, 0.1); }
    }
    
    #schoolontap-advantage .group:hover .flex-shrink-0 {
        animation: none; /* Stop pulsing on hover so the rotation is smooth */
    }

    #schoolontap-advantage .flex-shrink-0, #schoolontap-advantage .flex-shrink-0 :hover , #schoolontap-advantage .flex-shrink-0:scroll {
        animation: soft-pulse 3s infinite ease-in-out;
    }
	
	#schoolontap-advantage .panel-split-container {
            position: relative;
            width: 700px;
            aspect-ratio: 5 / 4;
            display: flex;
            gap: 20px; 
        }

	#schoolontap-advantage .panel-slice {
		position: relative;
		flex: 1; 
		height: 100%;
		border-radius: 40px; 
		overflow: hidden; 
	   /* box-shadow: 0 10px 30px rgba(0,0,0,0.3);  Subtle depth */
		opacity: 0; /* Hidden initially */
	   
		background-size: 700px 100%; 
		background-repeat: no-repeat;
		background-position: var(--bg-pos-x) center;
		background-image: var(--bg-image);
		
		animation-duration: 1.2s;
		animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
		animation-fill-mode: forwards;
	}

	#schoolontap-advantage #panel-1, #schoolontap-advantage .panel-split-container:hover #panel-1 {
		--bg-pos-x: 0px;
		animation-name: slideInBottomToTop;
		animation-delay: 0.1s;
	}

	#schoolontap-advantage #panel-2, #schoolontap-advantage .panel-split-container:hover #panel-2 {
		--bg-pos-x: -240px;
		animation-name: slideInTopToBottom;
		animation-delay: 0.3s; 
	}

	#schoolontap-advantage #panel-3, #schoolontap-advantage .panel-split-container:hover #panel-3 {
		--bg-pos-x: -480px; /* Shift to show right third */
		animation-name: slideInBottomToTop;
		animation-delay: 0.5s; /* Longer delay */
	}

	#schoolontap-advantage #panel-2 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% center; 
	}

	#schoolontap-advantage #panel-1{
		--bg-image: url('https://schoolontap.com/assets/img/slide4.png');
	}
	#schoolontap-advantage #panel-3 {
		--bg-image: url('https://schoolontap.com/assets/img/slide6.png');
	}

	@keyframes slideInBottomToTop {
		0% {
			opacity: 0;
			transform: translateY(100px); /* Start low */
			clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); /* Start with 0 height from bottom */
		}
		100% {
			opacity: 1;
			transform: translateY(0); /* End in place */
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Fully visible height */
		}
	}

	/* Panels that enter Top-to-Bottom (Center) */
	@keyframes slideInTopToBottom {
		0% {
			opacity: 0;
			transform: translateY(-100px); /* Start high */
			clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); /* Start with 0 height from top */
		}
		100% {
			opacity: 1;
			transform: translateY(0); /* End in place */
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Fully visible height */
		}
	}  
	
	
	#schoolontap-advantage .panel-split-container.responsive-panels {
        width: 100% !important; /* Overrides the previous fixed 700px */
        max-width: 700px;
        margin: 0 auto;
        aspect-ratio: 5 / 4;
        display: flex;
        gap: 10px; /* Reduced gap for mobile */
    }
    
  
    /* Background positioning adjustment for mobile */
    #schoolontap-advantage #panel-1 { background-position: 0% center; }
    #schoolontap-advantage #panel-2 img { object-fit: cover; width: 100%; height: 100%; }
    #schoolontap-advantage #panel-3 { background-position: 100% center; }
    
    @media (min-width: 768px) {
        #schoolontap-advantage .panel-split-container.responsive-panels {
            gap: 20px;
        }
    }
    @media (max-width: 767px) {
        #schoolontap-advantage h3 {
            font-size: 1.875rem; /* text-3xl */
            line-height: 2.25rem;
        }
        #schoolontap-advantage .panel-slice{
            background-size: 350px 100% !important;
        }
    }
	
	
	
	#schoolontap-structure .branding-ig{
		width: 100%;
		height: 336px;
		background: url('https://schoolontap.com/assets/img/bradingimage1.png') no-repeat center center;
		background-size: cover;
	}
	#schoolontap-structure .branding-wa{
		width: 100%;
		height: 395px;
		background: url('https://schoolontap.com/assets/img/bradingimage2.png') no-repeat center center;
		background-size: cover;
	}
	
	@keyframes lineFlow {
        0% { left: -100px; opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { left: 100%; opacity: 0; }
    }
    @media (max-width: 768px) {
        #schoolontap-structure .branding-ig{
            height:380px !important;
        }
    }
    
    #schoolontap-ecosystem .animate-line-flow {
        animation: lineFlow 4s linear infinite;
    }

    /* Soft scale entrance for cards */
    #schoolontap-ecosystem .group {
        opacity: 0;
        transform: scale(0.95);
        animation: fadeInUp 0.8s ease-out forwards;
    }

    #schoolontap-ecosystem .group:nth-child(2) { animation-delay: 0.2s; }
    #schoolontap-ecosystem .group:nth-child(3) { animation-delay: 0.4s; }
    #schoolontap-ecosystem .group:nth-child(5) { animation-delay: 0.6s; }

    @keyframes fadeInUp {
        to { opacity: 1; transform: scale(1); }
    }
	
	
	#schoolontap-pricing input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #6366f1;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        transition: all 0.2s ease;
    }
    #schoolontap-pricing input[type='range']::-webkit-slider-thumb:hover {
        transform: scale(1.2);
    }
	
	
	#schoolontap-onboarding-process .w-36 {
        transition: transform 0.3s ease;
    }
    #schoolontap-onboarding-process .group:hover .w-36 {
        transform: translateY(-10px);
    }
    
    @media (max-width: 768px) {
        #schoolontap-onboarding-process .md\:block {
            display: none;
        }
        #schoolontap-onboarding-process .flex-col {
            margin-bottom: 2rem;
        }
        #schoolontap-onboarding-process .items-start {
                align-items: center !important;
        }
    }
    
    #schoolontap-reviews .review-snap-container {
        display: flex;
        width: max-content;
        transition: transform 3500ms linear;
        /*animation: scroll-loop 20s linear infinite;*/
        padding: 2rem 0;
    }
    #schoolontap-reviews .review-snap-container:hover {
        animation-play-state: paused;
    }
    @keyframes scroll-loop {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    
    #schoolontap-reviews .snap-center {
        flex: 0 0 auto;
        width: 100vw; 
        max-width: 600px;
    }
    #schoolontap-reviews .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #schoolontap-reviews .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    /* Elegant Underline Transition */
    section {
        scroll-margin-top: 100px; 
    }
    html {
        scroll-behavior: smooth;
    }
    .nav-link {
        @apply text-sm font-semibold text-slate-600 hover:text-indigo-600 transition-colors relative;
    }
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300;
    }
    .nav-link:hover::after {
        @apply w-full;
    }

    .mobile-nav-link {
        @apply text-lg font-bold text-slate-800 py-2 border-b border-slate-50 last:border-0;
    }

    /* Scroll State - Navbar shrinks and gets clearer */
    nav.scrolled {
        @apply py-2;
    }
    nav.scrolled .max-w-7xl {
        @apply max-w-6xl; /* Optional: shrink width slightly on scroll */
    }
    /* Mobile Menu Toggle State */
    #mobile-menu.active {
        @apply translate-y-0 opacity-100 pointer-events-auto;
    }
    
    #mobile-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 92%;
        margin: 0 auto;
        z-index: 999;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        right: 0;
    }

    /* When the 'active' class is added via JS */
    #mobile-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Backdrop blur for the mobile menu specifically */
    .mobile-menu-inner {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        border-radius: 25px;
    }
	
	
	 @media (max-width: 767px) {
        footer , footer a, footer .flex{
            text-align: center;
            justify-content: center;
        }
        #schoolontap-feature .relative.group .bg-white\/100, #schoolontap-feature .relative.group .bg-white\/100 .transition-transform{
            text-align: center;
            margin: 10px auto;
        }
        #schoolontap-chooseus .flex, #schoolontap-chooseus .flex .flex-shrink-0{
            text-align: center;
            margin: 10px auto;
        }
        #schoolontap-ecosystem .relative.group, #schoolontap-ecosystem .relative.group .transition-transform{
            text-align: center;
            margin: 10px auto;
        }
        #schoolontap-story{
             text-align: center;
        }
    }