/*
 Theme Name:   OceanWP Child
 Theme URI:    https://example.com/oceanwp-child
 Description:  A child theme of OceanWP.
 Author:       Logic Replace LLC Team
 Author URI:   https://example.com
 Template:     oceanwp
 Version:      1.0.0
 Text Domain:  oceanwp-child
*/
:root {
	
	--lg-line-height: 1.2em;
	
	--default-pad: 30px 30px 10px 30px;

}



.site-default-padding{
	padding: var(--default-pad);
}

a{
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	color: #000 ;
}
.elementor-widget-heading h2.elementor-heading-title{
	font-size:50px;
}
.elementor-widget-heading h3.elementor-heading-title{
	font-size:40px;
}



.header-bg{
	background-image: url(/wp-content/uploads/2024/11/textured-bg-1.png);
    background-repeat: repeat;
    background-size: contain;
}
body{
	background-image: url(/wp-content/uploads/2024/11/textured-bg-6.jpg);
    background-repeat: repeat;
    background-size: contain;
}

.secondary-dropdown, #left-panel #ages-ul.mobile .elementor-icon-list-items, #ages-ul .elementor-icon-list-items li:nth-last-child(-n+3) {
	display:none !important;
}

/******************** Elementor ages css ***********************************/
#ages-ul .elementor-widget-container{
	overflow:visible;
}
#ages-ul .elementor-icon-list-item:first-child {
	margin-left:0;
}
/* Styling for the unordered list inside the parent container */
#ages-ul .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#ages-ul .elementor-icon-list-item {
	list-style: none;
}

/* Style for the anchor tags wrapping the <span> */
#ages-ul .elementor-icon-list-item a {
	display: block;
	font-size:15px;
	line-height:35px;
	border-radius: 12px;
	font-weight: 400;
	padding: 0 24px;
	color: #000;
	position: relative;
	text-align: center;
	background:#fff;
	transition: background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

/* Hover effect for background color */
#ages-ul .elementor-icon-list-item a:hover {
	filter: brightness(110%);
	transform: translateY(-5px); /* This will make the button rise when hovered */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds shadow to simulate elevation */
}

/* Active effect for when the link is clicked */
#ages-ul .elementor-icon-list-item a:active {
	transform: translateY(2px); /* Adds a slight press effect when clicked */
}

/* Color variations for each "age" element */
#ages-ul .elementor-icon-list-item a[href="/age-3-4/"] {
	border: 3px solid #007bff;
}

#ages-ul .elementor-icon-list-item a[href="/age-3-4/"]:hover{
	background: #007bff;
	
}

#ages-ul .elementor-icon-list-item a[href="/age-5/"]{
	border: 3px solid #7024a6;
}

#ages-ul .elementor-icon-list-item a[href="/age-5/"]:hover {
	background: #7024a6;
}

#ages-ul .elementor-icon-list-item a[href="/age-6/"] {
	border: 3px solid #2ecc71;
}

#ages-ul .elementor-icon-list-item a[href="/age-6/"]:hover {
	background: #2ecc71;
}

#ages-ul .elementor-icon-list-item a[href="/age-7/"] {
	border: 3px solid #e74c3c;
}

#ages-ul .elementor-icon-list-item a[href="/age-7/"]:hover {
	background: #e74c3c;
}

#ages-ul .elementor-icon-list-item a[href="/age-8/"]  {
	border: 3px solid #f39c12;
}

#ages-ul .elementor-icon-list-item a[href="/age-8/"]:hover {
	background: #f39c12;
}

#ages-ul .elementor-icon-list-item a[href="/age-9/"] {
	border: 3px solid #7F00FF;
}

#ages-ul .elementor-icon-list-item a[href="/age-9/"]:hover {
	background: #7F00FF;
}

#ages-ul .elementor-icon-list-item a[href="/age-10/"] {
	border: 3px solid #f66458;
}

#ages-ul .elementor-icon-list-item a[href="/age-10/"]:hover {
	background: #f66458;
}

#ages-ul .elementor-icon-list-item a[href="/age-11/"] {
	border: 3px solid #00b2ee;
}

#ages-ul .elementor-icon-list-item a[href="/age-11/"]:hover {
	background: #00b2ee;
}

#ages-ul .elementor-icon-list-item a[href="/age-3-11/"] {
	border: 3px solid #e74c3c;
}

#ages-ul .elementor-icon-list-item a[href="/age-3-11/"]:hover {
	background: #e74c3c;
}
#ages-ul .elementor-icon-list-item a:hover span, #ages-ul .elementor-icon-list-item a.active span, #yoast-breadcrumbs a, #yoast-breadcrumbs span,
.single-post ul.meta li, .single-post ul.meta li a, .um-register .um-postmessage{
	color: #fff;
}
#yoast-breadcrumbs a:hover, #yoast-breadcrumbs .breadcrumb_last, .category-posts .post-date{
	color: #ffe500;
}
/*override*/
.meta a:hover, .category a:hover{
	color: #ffe500 !important;
}


.category-posts h5 a:hover, .elementor-icon-list-text:hover{
	color: #ffe500 !important;
	text-decoration:underline;
}

/* Additional style for <span> to ensure it displays properly */
#ages-ul .elementor-icon-list-text {
	display: inline-block;
}



/****************************************************/
/****************************************************/
#subject-ul{
	width:100%;
}
#subject-ul a {
    text-decoration: none;
}

/* Style the list container */
#subject-ul .elementor-icon-list-items {
    list-style: none;
    padding: 0;
	text-align:center;
}

/* Style each list item to hold the button effect */
#subject-ul .elementor-icon-list-item {
    
    margin-bottom: 12px;
    position: relative; /* Ensure the list item position is maintained */
}

/* Create the button-like effect for the <a> tags inside list items */
#subject-ul .elementor-icon-list-item a {
	width: 100%;
    display: inline-block;
    position: relative;
    padding: 13px 35px;
    background: transparent;
    color: #fff;
    border-radius: 12px;
    font-weight: 400;
    transition: filter 250ms, box-shadow 250ms, background-color 250ms, transform 150ms ease; /* Transitions without transform */
    overflow: hidden; /* Ensure any overflow doesn't affect the layout */
}

/* Gradient background colors (based on class or order) */
#subject-ul .elementor-icon-list-item:nth-child(1) a {
    background: #007bff; 
}
#subject-ul .elementor-icon-list-item:nth-child(1) a.active,  #ages-ul .elementor-icon-list-item a[href="/age-3-4/"].active {
    background-image: linear-gradient(#007bff, #007bff), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(2) a {
    background: #7024a6; 
}
#subject-ul .elementor-icon-list-item:nth-child(2) a.active, #ages-ul .elementor-icon-list-item a[href="/age-5/"].active {
    background-image: linear-gradient(#7024a6, #7024a6), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(3) a {
    background: #2ecc71; 
}
#subject-ul .elementor-icon-list-item:nth-child(3) a.active, #ages-ul .elementor-icon-list-item a[href="/age-6/"].active {
    background-image: linear-gradient(#2ecc71, #2ecc71), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(4) a {
    background: #e74c3c; 
}
#subject-ul .elementor-icon-list-item:nth-child(4) a.active, #ages-ul .elementor-icon-list-item a[href="/age-7/"].active, #ages-ul .elementor-icon-list-item a[href="/age-3-11/"].active {
    background-image: linear-gradient(#e74c3c, #e74c3c), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(5) a {
    background: #f39c12; 
}
#subject-ul .elementor-icon-list-item:nth-child(5) a.active, #ages-ul .elementor-icon-list-item a[href="/age-8/"].active {
    background-image: linear-gradient(#f39c12, #f39c12), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}


#subject-ul .elementor-icon-list-item:nth-child(6) a {
    background: #7F00FF; 
}
#subject-ul .elementor-icon-list-item:nth-child(6) a.active, #ages-ul .elementor-icon-list-item a[href="/age-9/"].active {
    background-image: linear-gradient(#7F00FF, #7F00FF), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(7) a {
    background: #f66458; 
}
#subject-ul .elementor-icon-list-item:nth-child(7) a.active, #ages-ul .elementor-icon-list-item a[href="/age-10/"].active {
    background-image: linear-gradient(#f66458, #f66458), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}


/* Unique colors for the newly added items */
#subject-ul .elementor-icon-list-item:nth-child(8) a {
    background:#00b2ee ; 
}
#subject-ul .elementor-icon-list-item:nth-child(8) a.active, #ages-ul .elementor-icon-list-item a[href="/age-11/"].active {
    background-image: linear-gradient(#00b2ee, #00b2ee), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}

#subject-ul .elementor-icon-list-item:nth-child(9) a {
    background:#1abc9c; 
}
#subject-ul .elementor-icon-list-item:nth-child(9) a.active {
    background-image: linear-gradient(#00b2ee, #00b2ee), /* Inner button background */ linear-gradient(135deg, #ff4d87, #ffb84d, #50e3a3, #9b59b6); /* Stronger gradient border */
}


#subject-ul .elementor-icon-list-item:nth-child(10) a {
    background: #9b59b6; 
}

/* Before pseudo-element to create the border-bottom */
#subject-ul .elementor-icon-list-item a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #0000004d; /* Initially set the border color */
    transition: opacity 250ms, background-color 250ms;
}

#subject-ul .elementor-icon-list-item a:active {
    background-color: #0000004d; /* Initially set the border color */
}

/* Hover and Active states */
#subject-ul .elementor-icon-list-item a:hover,
#subject-ul .elementor-icon-list-item a:active {
    filter: brightness(110%);
    transform: translateY(4px); /* Move the button down to simulate being pressed */
}

/* Active state adjustments */
#subject-ul .elementor-icon-list-item a.active {
    filter: brightness(110%); /* Dim the active button's brightness */
    transform: none; /* Prevent the active button from moving */
}

/* Border bottom changes on hover and active */
#subject-ul .elementor-icon-list-item a:hover::before,
#subject-ul .elementor-icon-list-item a:active::before {
    background-color: #686767ad; /* Slightly darker border */
    opacity: 0.4; /* Lighter shadow effect */
}

/* Highlight the active button */
#subject-ul .elementor-icon-list-item a.active::before {
    background-color: transparent; /* Apply the border color */
    opacity: 0.4; 
}

#subject-ul .elementor-icon-list-item a.active, #ages-ul .elementor-icon-list-item a.active {
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
}


.ages-parent-container .e-con-full, #ages-ul .elementor-widget-container{
	margin-left:0;
}


#page-breadcrumb a, #page-breadcrumb .elementor-shortcode span, .ksage h1{
	color:#fff !important;
}
#page-breadcrumb .elementor-shortcode span{
	border-bottom: 2px solid;
}

/******************************/

.secondary-dropdown {
	position: relative;
}

.dropdown-toggle {
	background:#376DB3;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	font-size: 16px;
}

.dropdown-menu {
	display: block;
	position: relative;
	background-color: white;
	list-style: none;
	padding: 0;
	margin: 0;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.dropdown-menu li {
	padding: 10px 20px;
}

.dropdown-menu li a {
	text-decoration: none;
	color: black;
	font-size: 14px;
}

.dropdown-menu li a:hover {
	color: #d87f0b;
}

.secondary-dropdown.open .dropdown-menu {
	max-height: 500px; /* Adjust to fit content */
	padding: 10px 0;
}

/*********************************************/


.video-lessons{    
	object-fit: cover;  
}
.iframe-container, .video-lessons{
	height: 100%; /* Set full height for the container */
	width: 100%;  /* Optional: Set full width */
}
.full-width-blue-bg iframe, iframe {
	/*height:550px;
	width:100%;
	border:none;*/
	width: 100%; /* Adjust the width as needed */
	height: 160vh; /* Full height of the viewport */
}
.border-blue-bg{
	border-radius:10px;
	background:#376DB3;
}


.um-field{
	padding:0 !important;
}
.um-login, .um-password, .um-account-tab, .um-register {
	background: #376db3;
    padding: 20px;
    border-radius: 10px;
}
.um .um-field-label, a.um-link-alt, .um-field-block, .um-form, .um-form a, .um-account-main div.um-account-heading{
	color:#fff !important;
}
a.um-link-alt:hover, .um-form a:hover, .um-account-side li a span.um-account-arrow, .um-dropdown-b a{
	color:#f39c11!important;
}
.um-field-label {
    margin: 8px 0 0 0 !important;
}
.um-profile{
	padding:20px;
}
.um-account-profile-link, #right-sidebar{
	display:none;
}

/*
.bg-light .e-con-inner{
	background-color: #FFFFFF4A;
	border-radius:25px
}*/
.post-template p, .post-template .elementor-widget-container, h1{
	color:#000 !important;
}
.post-template .post-section{
	padding-top:30px;
}
.post-template .post-section p{
	font-weight:500 !important;
}
.post-template .site-main{
	background:#FFFFFF42;
}
.post-section{
	padding:0 0 30px;
}
.page-id-67 .entry-title{
	height: 51px;
}


/*Latest News*/
.category-posts {
	justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between the boxes */
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-posts li, .related-post {
    background-color: #376DB3; /* Box background color */
    color: black; /* Text color */
    border-radius: 8px; /* Optional: Rounded corners */
    padding: 20px 25px;
    width: calc(33.333% - 20px); /* 3 posts per row */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Shadow at the bottom */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.category-posts li:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}


.category-posts h5{
    margin: 0 0 10px;
	line-height: 15px;
	height:52px;
	overflow:hidden;
}

.category-posts h5 a, .related-post-title a{
	font-size: 18px;
}

.category-posts .post-date, .category-posts h5 a, .category-posts .continue-reading, .pagination a,
.pagination span, .pagination .current, .related-post-title a, time.published, .related-posts-title, .border-blue-bg h1, .border-blue-bg h2,
.border-blue-bg h3, .border-blue-bg h4, .border-blue-bg h5, .border-blue-bg h6, .border-blue-bg, .border-blue-bg p, .border-blue-bg ul li, .single-post article p, .category #primary .meta, .category a, .single .entry-title{
    color: white !important; /* Ensure readable text - override */
}

.category-posts .post-date {
    font-size: 14px;
    margin-bottom: 15px;
}

.category-posts .continue-reading {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px; /* Optional: Rounded button corners */
    margin-top: 10px;
}
.dropdown-toggle, .category-posts .continue-reading{
	background-color: #F39C11 !important; /* Button background color */	
}

.category-posts .continue-reading:hover, .footer-donate:hover, .dropdown-toggle:hover {
    background-color: #d87f0b !important; /* Slightly darker button on hover */
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 10px; /* Space between buttons */
    list-style: none;
    padding: 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 12px;
    background-color: #F39C11; /* Button background color */
    text-decoration: none;
    border-radius: 5px; /* Rounded corners */
    font-size: 14px;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s ease;
}

.pagination a:hover {
    background-color: #d87f0b; /* Darker shade on hover */
}

.pagination .current {
    background-color: #376DB3; /* Active button background color */
    pointer-events: none; /* Disable clicking on the active page */
    font-weight: bold;
	color: #333 !important;
}

.single-post #primary {
	width:100%;
	border: none;
}
.single .entry-title{
	color: #000;
}
#related-posts .span_1_of_3{
	margin:0 15px !important;
	border: 1px solid #fff;
}

#related-posts .oceanwp-row{
	display: flex;
    justify-content: space-between;
}
.related-posts-title{
	font-size:20px !important;
}

.ekit-template-content-footer{
	position:relative;
}
.bottom-stars{
	position: absolute;
    bottom: 295px;
	top: -25px;
    background-repeat: repeat-x;
    height: 50px;
}

#main #content-wrap {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

.um-account-side > ul > li:last-child{
	display:none;
}

.category #primary{
	border: none;
	background: #376db3;
	padding: 20px;
	border-radius: 10px;
	width: 100%;
	color:#fff;
}

.category a:hover{
	text-decoration:underline;
	color:#ffe500;
}

.single-post article{
	background: #376DB3;
    padding: 20px;
    border-radius: 10px;
}

@media only screen and (max-width: 1025px) {
	.top-stars{
		top:0 !important;
	}
	
	.elementor-59 .elementor-element.elementor-element-9032836 .elementskit-navbar-nav > li > a{
		color:#FFF876 ;
		border-color:#FFF876 ;
	}
	.top-imgs .elementor-widget-container img{
		width:50% !important;
	}
	header{
		display: flex;
    	justify-content: center !important;
	}
		.top-stars{
		top:0 !important;
    z-index: 0;
	}
	
	.elementor-59 .elementor-element.elementor-element-9032836 .elementskit-navbar-nav > li > a{
		color:#FFF876;
		border-color:#FFF876;
	}
	
	.elementor-59 .elementor-element.elementor-element-9032836 .elementskit-navbar-nav > li > a:hover, .elementor-59 .elementor-element.elementor-element-9032836 .elementskit-navbar-nav > li > a.active{
		border-color:#f39c11;
}
		.top-imgs .elementor-widget-container img{
		width:50% !important;
	}
	
	div.uimob800 .um-account-side ul {
		background: #fff;
	}
	div.uimob800 .um-account-main {
		width: 100%;
		max-width: 90%;
	}
	.um-account{
		padding:0 30px;
	}
	
}

@media only screen and (max-width: 768px) {
	.full-width-blue-bg > .e-con-boxed > .e-con-inner{
		display:flex;
	}
	/*#subject-ul, #ages-ul{
		display:none;
	}*/
	.full-width-blue-bg{
		width:97%;
		margin:0 auto;
		padding: 20px 25px 30px;
	}
	#subject-ul .elementor-icon-list-item, #ages-ul .elementor-icon-list-item{
		float: left;
		margin: 7px !important;
		height: 40px;
	}
	
	#subject-ul .elementor-icon-list-item a{
		padding: 10px;
	}
	#ages-ul .elementor-icon-list-item a{
		padding: 0 5px;
	}
	#subject-ul .elementor-icon-list-item a, #ages-ul .elementor-icon-list-item a{
		
		font-size: 12px;
		font-weight: 600;
	}
	#ages-ul .elementor-icon-list-items{
		gap:0;
	}
	#left-panel #ages-ul.mobile .elementor-icon-list-items{
		display:block!important;
	}
	.secondary-dropdown, #main-panel  #ages-ul.desktop .elementor-icon-list-items{
		display: none !important;
	}
	.ages-parent-container{
		padding-left:0 !important;
	}
	.header-bg{
		padding-bottom:20px;
		background-size:cover;
	}
	header .top-3, .bottom-3{
		width:33% !important;
	}
	button.elementskit-menu-hamburger{
		top:-25px !important;
	}
	
	.category-posts h5{
		height:auto;
	}
	.category-posts li, .related-post {
    	width: 100%;
	}
	#related-posts .span_1_of_3{
		margin:0 0 15px !important;
	}
	#related-posts .oceanwp-row {
		justify-content: center;
		flex-direction: column;
	}
}

@media only screen and (max-width: 577px) {
	.um-account-main{
		background: #fff;
		padding: 20px !important;
		border-radius: 10px;
	}
}