/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 12 2026 | 10:56:29 */
li.main-menu-item.menu-last-btn a {
    background: #1F3C88;
    font-family: 'Poppins';
    font-size: 21px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	border-radius: 16px 0px !important;
}

li.main-menu-item.menu-last-btn a:hover {
	background: #6175ab !important;
}

.footer_content_col.footer_content_col_3 i.fa-solid {
    margin-right: 10px;
    color: #1f3c87 !important;
}

.footer_content_grid h3.footer_heading.footer_heading_h3 {
    font-size: 30px;
    margin-bottom: 24px;
    color: #1f3c88 !important;
}

.footer_custom_bg li {
    color: #000 !important;
}

.footer_custom_bg h4 {
	color: #1f3c88 !important;
}



/************Animation Css*******************/

/* --- Base Animation Settings --- */
[class*="anim-"] {
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}

/* State: When element is visible */
[class*="anim-"].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Animation Types --- */

/* 1. Fade Up (Best for Text & Cards) */
.anim-up {
  transform: translateY(40px);
}

/* 2. Fade In (Best for Hero Images/Backgrounds) */
.anim-fade {
  /* No transform needed, just opacity handles it */
}

/* 3. Slide form Left (Good for split layouts) */
.anim-left {
  transform: translateX(-50px);
}

/* 4. Slide from Right */
.anim-right {
  transform: translateX(50px);
}

/* --- Advanced: Staggered Children (For Services/Products Grids) --- */
/* If you apply 'anim-stagger' to a PARENT container, this animates its children */
.anim-stagger .is-visible > * {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpStagger 0.8s forwards ease-out;
}

@keyframes fadeUpStagger {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add delays for up to 6 items */
.anim-stagger.is-visible > *:nth-child(1) { animation-delay: 0.1s; }
.anim-stagger.is-visible > *:nth-child(2) { animation-delay: 0.2s; }
.anim-stagger.is-visible > *:nth-child(3) { animation-delay: 0.3s; }
.anim-stagger.is-visible > *:nth-child(4) { animation-delay: 0.4s; }
.anim-stagger.is-visible > *:nth-child(5) { animation-delay: 0.5s; }
.anim-stagger.is-visible > *:nth-child(6) { animation-delay: 0.6s; }



/* --- Hero Section Animation Logic --- */

/* 1. Initial State: Hide the Heading */
.anim-fade .column_heading {
    opacity: 0;
    transform: translateY(30px); /* Pushes text down slightly */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. Initial State: Hide the Paragraph text */
.anim-fade .column_content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.2s; /* Stagger: This starts 0.2s after the heading */
}

/* 3. Active State: When JS adds 'is-visible' to the wrapper */
.anim-fade.is-visible .column_heading,
.anim-fade.is-visible .column_content {
    opacity: 1;
    transform: translateY(0); /* Returns to original position */
}


/* --- Split Section Animation (Mission Section) --- */

/* 1. The Image (Left Column) */
.anim-split .grid_column_content_1 {
    opacity: 0;
    transform: translateX(-60px); /* Starts 60px to the Left */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. The Text (Right Column) */
.anim-split .grid_column_content_2 {
    opacity: 0;
    transform: translateY(40px); /* Starts 40px Down (Professional Fade Up) */
    /* If you prefer from the right, change to: translateX(60px) */
    
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.2s; /* Waits 0.2s so image moves first */
}

/* 3. The Trigger (When is-visible is added) */
.anim-split.is-visible .grid_column_content_1,
.anim-split.is-visible .grid_column_content_2 {
    opacity: 1;
    transform: none; /* Moves both to original position */
}

/* --- Mobile Fix --- */
/* On mobile, they stack, so sliding from sides looks weird. We reset to simple Fade Up. */
@media (max-width: 768px) {
    .anim-split .grid_column_content_1 {
        transform: translateY(30px); /* Just fade up */
    }
    .anim-split .grid_column_content_2 {
        transform: translateY(30px); /* Just fade up */
        transition-delay: 0s; /* No delay on mobile for snappier feel */
    }
}


/* --- Custom Banner Animation (anim-banner-slide) --- */

/* 1. Container Settings (Crucial for clean edges) */
.anim-banner-slide {
    overflow: hidden; /* Prevents scrollbars when image slides from outside */
    /* Note: We do NOT set opacity: 0 here. Background stays visible. */
}

/* 2. The Text (Left Side): Starts Down & Invisible */
.anim-banner-slide .horizon_hero_content {
    opacity: 0;
    transform: translateY(60px); /* Starts from bottom */
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* 3. The Image (Right Side): Starts Right & Invisible */
.anim-banner-slide .horizon_hero_single_image {
    opacity: 0;
    transform: translateX(80px); /* Starts from right */
    transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* --- Trigger: When JS adds 'is-visible' --- */

/* Text rises to position */
.anim-banner-slide.is-visible .horizon_hero_content {
    opacity: 1;
    transform: translateY(0);
}

/* Image slides to position */
.anim-banner-slide.is-visible .horizon_hero_single_image {
    opacity: 1;
    transform: translateX(0);
}

/* Optional: Mobile Reset (Simpler animation on phones) */
@media (max-width: 768px) {
    .anim-banner-slide .horizon_hero_single_image {
        transform: translateY(30px); /* Just fade up on mobile */
    }
}


/* --- Advanced Smart "Anim-Up" for Grids --- */

/* 1. Reset Wrapper: Stop the whole container from hiding/moving */
.grid_wrapper.anim-up {
    opacity: 1 !important;
    transform: none !important;
}

/* 2. Target the Elements: Set Initial Hidden State (Down & Invisible) */
/* This targets: Main H2, Images, H3s, Paragraphs, and Buttons */
.anim-up .grid_row_content_before h2,
.anim-up .grid_column_content img,
.anim-up .grid_column_content h3,
.anim-up .grid_column_content .column_content,
.anim-up .grid_column_content .column_cta {
    opacity: 0;
    transform: translateY(30px); /* Push down 30px */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* 3. Trigger: When JS adds 'is-visible', bring them back */
.anim-up.is-visible .grid_row_content_before h2,
.anim-up.is-visible .grid_column_content img,
.anim-up.is-visible .grid_column_content h3,
.anim-up.is-visible .grid_column_content .column_content,
.anim-up.is-visible .grid_column_content .column_cta {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. The Sequence (Stagger Delays) --- */
/* This creates the "Image -> Heading -> Text -> Button" flow */

/* Step 0: Main Section Title (Primary Vision Care) - Immediate */
.anim-up.is-visible .grid_row_content_before h2 {
    transition-delay: 0s;
}

/* Step 1: The Images - 0.1s delay */
.anim-up.is-visible .grid_column_content img {
    transition-delay: 0.15s;
}

/* Step 2: The Headings (Comprehensive Eye Exams, etc) - 0.3s delay */
.anim-up.is-visible .grid_column_content h3 {
    transition-delay: 0.3s;
}

/* Step 3: The Paragraph Text - 0.45s delay */
.anim-up.is-visible .grid_column_content .column_content {
    transition-delay: 0.45s;
}

/* Step 4: The Button (if present) - 0.6s delay */
.anim-up.is-visible .grid_column_content .column_cta {
    transition-delay: 0.6s;
}


.book-appointment-form-section button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_no_style {
    color: #fff !important;
    background: #1f3c88 !important;
    padding: 15px 20px;
    font-family: 'Poppins';
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 16px 0px;
}





@media (max-width: 767px) { 

.horizon_mega_menu_layout1.horizon_mega_menu_wrapper .main-menu .main-menu-item {
        padding: 10px 10px;
}
	
.horizon_mega_menu_layout1 .main-menu a {
        padding: 5px 10px;
}
	
	
.horizon_mega_menu_layout1 .submenu-indicator {
        padding: 10px 0px;
}
	
.horizon_mega_menu_layout1 .submenu-indicator-desktop i, .horizon_mega_menu_layout1 .submenu-indicator i {
    font-size: 14px;
}	
	
li.main-menu-item.menu-last-btn {
    background: none;
    padding: 10px 15px !important;
}	
	
li.main-menu-item.menu-last-btn a {
    padding: 10px 15px;
}	
	
li.main-menu-item.menu-search-toggle {
    padding: 15px !important;
}	

ul.sub-menu {
    margin-bottom: 15px !important;
}
	
li.sub-menu-item {
    padding: 0 15px;
}
	

}


@media only screen and (min-width: 768px) and (max-width: 991px) {

.horizon_mega_menu_layout1.horizon_mega_menu_wrapper .main-menu .main-menu-item {
        padding: 10px 10px;
}
	
.horizon_mega_menu_layout1 .main-menu a {
        padding: 5px 10px;
}
	
.horizon_mega_menu_layout1 .submenu-indicator {
    padding: 10px 8px;
    
}
	
.horizon_mega_menu_layout1 .submenu-indicator-desktop i, .horizon_mega_menu_layout1 .submenu-indicator i {
    font-size: 14px;
}	
	
li.main-menu-item.menu-last-btn {
    background: none;
    padding: 10px 15px !important;
}	
	
li.main-menu-item.menu-last-btn a {
    padding: 10px 15px;
}	
	
li.main-menu-item.menu-search-toggle {
    padding: 15px !important;
}	

ul.sub-menu {
    margin-bottom: 15px !important;
}
	
li.sub-menu-item {
    padding: 0 15px;
}
	
	
}