/*
Theme Name: Brightly Child
Theme URI: https://yourwebsite.com/
Description: A child theme for Brightly.
Author: Your Name
Author URI: https://yourwebsite.com/
Template: brightly 
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brightly-child
*/
.position-relative.wp-block-kubio-column__inner.style-OsHB0-g_xyS-inner.style-local-58-inner.d-flex.h-flex-basis.h-px-lg-0.v-inner-lg-0.h-px-md-3.v-inner-md-3.h-px-2.v-inner-2 {
	padding: 20px 20px 50px 20px !important;
}
#footer .wp-block-kubio-copyright p {
	display: none;
}

/* Define the keyframes for the fade-in-up animation */
@keyframes fadeInUp {
  from {
    opacity: 0; /* Start completely transparent */
    transform: translateY(100vh); /* Start from the bottom of the viewport */
  }
  to {
    opacity: 1; /* End fully opaque */
    transform: translateY(0); /* End at its original position */
  }
}

/* Define the keyframes for a simple fade-in animation (if not already present) */
@keyframes fadeIn {
  from {
    opacity: 0; /* Start completely transparent */
  }
  to {
    opacity: 1; /* End fully opaque */
  }
}

/* Apply the fade-in animation to your caption container */
.style-LNNyoeFL0W2-outer {
  /* Animation: name duration timing-function fill-mode */
  animation: fadeIn 1.5s ease-in forwards;
}

/* Set the initial state for the element.
  It starts invisible and ready to be animated.
*/
.style-uYTIjPKpi-outer, .style-OsHB0-g_xyS-container, .style-yWe8_GFxen0-inner, .style-Dc1KwHk2Kyg-align, .style-OTVpR1B6qiX-inner, .style-M3_4u_iHZtT-align, .style-rSMr91bQWW-inner {
	opacity: 0;
}

/* This class will be added by JavaScript to trigger the animation
  when the element scrolls into view.
*/
.style-uYTIjPKpi-outer.is-visible, .style-OsHB0-g_xyS-container.is-visible, .style-yWe8_GFxen0-inner.is-visible, .style-Dc1KwHk2Kyg-align.is-visible, .style-OTVpR1B6qiX-inner.is-visible, .style-M3_4u_iHZtT-align.is-visible, .style-rSMr91bQWW-inner.is-visible {
  animation: fadeInUp 1.2s ease-out forwards;
}
/* Apply the animation to the specified element */
.style-x9jNbTLmnNB-inner, .style-eAD-v17Mx_S-inner {
  animation: fadeInUp 1.2s ease-out forwards; /* Apply animation: name, duration, timing function, fill mode */
}

        /* Basic styling for the carousel container */
        .carousel-container {
            max-width: 800px; /* Adjust width as needed */
            margin: 2rem auto;
            position: relative;
            overflow: hidden; /* This is crucial for the sliding effect */
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* This div holds all the images and moves */
        .carousel-slide {
            display: flex;
            width: 100%;
            transition: transform 0.5s ease-in-out; /* Animation for the slide */
        }

        /* Styling for each image */
        .carousel-slide img {
            width: 100%;
            flex-shrink: 0; /* Prevents images from shrinking */
            object-fit: cover;
            display: block;
        }

        /* Container for the navigation dots - MOVED TO TOP RIGHT */
        .carousel-dots {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10; /* Ensure dots are on top of the image */
        }

        /* Styling for each dot - MADE SMALLER */
        .dot {
            cursor: pointer;
            height: 10px;
            width: 10px;
            margin: 0 4px;
            background-color: rgba(255, 255, 255, 0.7); /* Lighter for better visibility on images */
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        /* The active dot has a different color */
.dot.active {
	background-color: #eb3814;
}

/*
Theme Name: responsive
*/
@media only screen and (max-width: 1600px) {

	
}


/* Note: Design for a width of 1024px */
@media only screen and (min-width: 1024px) and (max-width: 1215px) {

}
/* =Responsiveness: Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

 
}



/* =Responsiveness: Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	body {
		text-align: center;
	}
	.wp-block-kubio-column__align {
		text-align: center;
	}
	#kubio .wp-block.wp-block-kubio-heading__text.style-GdXYTZAOH-text {
		text-align: center;
	}
	.wp-block.wp-block-kubio-heading.position-relative.wp-block-kubio-heading__text.style-HSfrUusuw-text.style-local-61-text {
		font-size: 18px;
	}
	#kubio .style-mJRLfsKly2-outer a.style-mJRLfsKly2-link {
		padding-left: 10px;
		padding-right: 10px;
	}
	#kubio .style-RY8SQoDGxE-outer a.style-RY8SQoDGxE-link {
		padding-left: 10px;
		padding-right: 10px;
	}
	
}

/* =Responsiveness: Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}