/* Add custom styles here */


/* Force vertical scrollbar */
body {
    overflow-y: scroll !important;
}

/* Sticky Header Styles */
/* This section contains styles for the sticky header functionality. */

.sticky-header {
    position: fixed;
    top: -100px;
    width: 100%;
    z-index: 999;
    transition: top 0.3s;
    display: grid; /* Use grid layout */
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
}

.sticky-header.sticky {
    top: 0;
}

/* Scrolling Header Styles */
/* This section contains styles for the scrolling header functionality. */

.scrolling-header {
    position: fixed;
    top: -100px;
    width: 100%;
    z-index: 999;
    transition: top 0.3s;
	box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
}

.scrolling-header.show-header {
    top: 0; /* Visible state */
}

.scrolling-header.hide-header {
    top: -100px; /* Hidden state */
}

/* Remove bottom margin from last paragraph of Elementor text editor widgets to eliminate gap underneath text */
.elementor-widget-text-editor p:last-child {
    margin-bottom: 0px;
}

/* Image Zoom Effect */
/* This section contains styles for the Image Zoom Effect. */
.img-zoom {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.img-zoom img {
  transition: transform 0.5s ease-in-out !important; /* Adjust the duration here */
  transform-origin: center center; /* Adjust the base points here */
}

.img-zoom:hover img {
  transform: scale(2); /* Zoom level (2x) */
}

/* Container Element Show/Hide Effect */
/* This section contains styles for the Container Element Show/Hide Effect. */
.container-fade {
    opacity: 0;
    transition: all 0.75s !important;
}
.container-fade:hover {
    opacity: 1;
}

/* Container Background Zoom-In Effect on Hover */
/* This section contains styles for the Container Background Zoom-In Effect on Hover. */
.container-background-zoom {
    overflow: hidden !important;
    background-size: 100% !important; /* Initial size */
    transition: all 0.5s ease !important; /* Smooth transition */
}
.container-background-zoom:hover {
    background-size: 200% !important; /* Zoomed size */
    background-position: left !important; /* Adjust position as needed */
}

/* Loading Screen Effect */
/* This section contains styles for the Loading Screen Effect. */
.loading-screen {
  display: flex; /* Show initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease;
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none; /* Allow interactions after hidden */
}

.loading-logo-container {
  animation: logoZoom 1.5s ease-in-out infinite;
}

.loading-logo {
  width: 100px; /* Adjust the width as needed */
  height: auto; /* Maintains the aspect ratio */
}

@keyframes logoZoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.hidden-until-loaded {
  display: none;
}

.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Interactive Image Zoom Effect on Hover */
/* This section contains styles for the Interactive Image Zoom Effect. */
/* Usage:
 * - Add the class 'zoom-hover-image' to the images you want to apply this effect to.
 * - Wrap the image in a container and add the class 'zoom-image-container' to it. */

.zoom-image-container {
  position: relative;
  overflow: hidden;
}

.zoom-hover-image {
  transition: all 0.5s ease-in-out;
  transform-origin: center center;
  display: block;
  width: 100%;
  height: auto;
}

.zoom-image-container:hover .zoom-hover-image {
  transition: transform 0.3s ease-in-out;
  transform: scale(2);
}

/* Image Zoom 120% Effect */
/* This section contains styles for the Image Zoom 120% Effect. */
.img-zoom-120 {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.img-zoom-120 img {
  transition: transform 0.5s ease-in-out !important; /* Adjust the duration here */
  transform-origin: center center; /* Adjust the base points here */
}

.img-zoom-120:hover img {
  transform: scale(1.2); /* Zoom level (2x) */
}

/* CSS for single post's featured image background */
/* Blog Post Image Container Background Effect */
/* This section contains styles for the Blog Post Container Background Effect. */
.post-image-background {
    position: relative;
    overflow: hidden;
}

.post-image-background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; /* Ensure the background image does not tile */
    background-attachment: scroll; /* Options: scroll, fixed, local */
    z-index: -1;
    opacity: 1; /* Adjust the opacity if you want a faded effect */
}

/* Optional: Add styling for the container content to be above the background image */
.post-image-background > * {
    position: relative;
    z-index: 1;
}

/* CSS for most recent blog post's featured image background */
/* Most Recent Blog Post Image Container Background Effect */
/* This section contains styles for the Most Recent Blog Post Container Background Effect. */
.recent-post-image-background {
    position: relative;
    overflow: hidden;
}

.recent-post-image-background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: -1;
    opacity: 1; /* Adjust the opacity if you want a faded effect */
}

/* Optional: Add styling for the container content to be above the background image */
/*.recent-post-image-background > * {
    position: relative;
    z-index: 1;
}*/


/*
 * CSS for styling the .recent-post-link class.
 * Controls font type, height, color, hover color, etc.
 */
.recent-post-link a {
    font-family: Arial, sans-serif; /* Example font family */
    font-size: 16px; /* Example font size */
    line-height: 1.5; /* Example line height */
    color: #000000; /* Default text color */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.recent-post-link a:hover {
    color: #FE001A; /* Hover color */
    /*text-decoration: underline; /* Underline on hover */
}

/**
 * Styles for elements that should appear clickable and behave as links.
 * This class is used to indicate that an element is interactive by changing
 * the cursor to a pointer when hovered over.
 * 
 * Usage:
 * Add the class 'recent-post-hyperlink' to any HTML element (e.g., container, 
 * image, button) that should redirect to the most recent blog post when clicked.
 * This CSS class works in conjunction with JavaScript that handles the 
 * redirection functionality for elements with the same class.
 */
.recent-post-hyperlink {
    cursor: pointer;
}



/* Define keyframes for slide-in left animation */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left.in-view {
  animation: slideInFromLeft 1.5s ease-in-out forwards;
}

/* Define keyframes for slide-in right animation */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right.in-view {
  animation: slideInFromRight 1.5s ease-in-out forwards;
}

/* Define keyframes for fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply the fade-in animation to the element */
.fade-in.in-view {
  animation: fadeIn 1.5s ease-in-out forwards;
  opacity: 0; /* Ensure opacity starts at 0 */
}

/* Apply animation to an element on scroll */
.animate-on-scroll {
  opacity: 0; /* Ensure elements are hidden initially */
}

/* Ensure visibility of elements with 'animate-on-scroll' in the Elementor editor */
body.elementor-editor-active .animate-on-scroll {
  opacity: 1 !important; /* Ensure visibility in the editor */
  /*transform: none !important; /* Remove any transformations applied by animations */
}

/* Ensure visibility of elements with 'hidden-until-loaded' in the Elementor editor */
body.elementor-editor-active .hidden-until-loaded {
  display: block !important; /* Ensure the element is displayed */
  opacity: 1 !important; /* Ensure opacity is set to 1 */
  visibility: visible !important; /* Ensure the element is visible */
  position: static !important; /* Ensure the element is positioned correctly */
}


/* 
 * This CSS class displays text vertically.
 * Apply the class 'vertical-text' to any text element to display its text vertically.
 */
.vertical-text {
	display: inline-block;
    width: auto; /* Adjust the width as needed */
    height: auto; /* Adjust the height as needed */
    word-break: break-all;
    white-space: nowrap;
	writing-mode: vertical-rl; 
    transform: rotate(180deg); /*Note: Transform does not work with class 'animate-on-scroll'. Instead place text in a container and rotate container 180deg */
}



/*
 * This CSS class displays text vertically while keeping each letter horizontal.
 * Apply the class 'descending-text' to any element to display its text vertically.
 */
.descending-text {
    display: inline-block;
    width: auto; /* Adjust the width as needed */
    word-break: break-all;
    white-space: nowrap;
    writing-mode: vertical-rl; /* This ensures the text is displayed vertically */
	text-orientation: upright; /* Keeps the letters upright */
}


/* 
 * This CSS targets a specific button on the Contact Us page (identified by page ID 58).
 * It uses the unique Elementor-generated classes to ensure the button's border color 
 * changes to the hover color (#FE001A) even when the button is not being hovered over.
 */
body.page-id-58 .elementor-1116 .elementor-element.elementor-element-fa575ee .elementor-button {
    border-color: #FE001A;
}

/* Frosted glass effect */
.frosted {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* For Safari support */
}


/* Add other custom styles below this line */