/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


.ct-footer-inside {
    position: absolute;
    top: -100px;
    z-index: 99999;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.custom-image-wrapper {
    position: relative;
}

.custom-image {
    cursor: pointer;
    max-width: 100%;
    height: auto;
}

/* Hide tooltips by default using visibility instead of display */

/* Hide tooltips by default on mobile */
.tooltip-text {
    display: none; /* This ensures tooltips are completely hidden on mobile */
}

/* Show and style tooltips only on desktop (min-width: 768px) */
@media only screen and (min-width: 768px) {
    .tooltip-text {
        display: block; /* Re-enable tooltips on desktop */
        visibility: hidden;
        opacity: 0;
        position: absolute;
        background: #333;
        color: white;
        padding: 15px;
        border-radius: 8px;
        width: 250px;
        z-index: 1000;
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        line-height: 1.4;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    /* Show tooltip when active (only on desktop) */
    .tooltip-text.active {
        visibility: visible;
        opacity: 1;
    }
}



.tooltip-arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Position modifiers */
/* Manual position classes */
.tooltip-text.position-top {
    bottom: calc(100% + 15px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text.position-bottom {
    top: calc(100% + 15px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text.position-left {
    right: calc(100% + 15px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-text.position-right {
    left: calc(100% + 15px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Arrow positions for manual positioning */
.tooltip-text.position-top .tooltip-arrow {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
    border-bottom: none;
    bottom: -10px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text.position-bottom .tooltip-arrow {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333;
    border-top: none;
    top: -10px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text.position-left .tooltip-arrow {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
    border-right: none;
    right: -10px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-text.position-right .tooltip-arrow {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #333;
    border-left: none;
    left: -10px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Show tooltip when active */
.tooltip-text.active {
    visibility: visible;
    opacity: 1;
}



@media only screen and (min-width: 768px) {
    /* Base tooltip styles remain the same */
    .tooltip-text {
        /* ... your existing styles ... */
    }

    /* Individual tooltip positioning */
    .tooltip-1 {
        /* First tooltip - bottom position */
        top: calc(100% + 20px);
        left: 50%;
        transform: translateX(-50%);
    }

    .tooltip-2 {
        /* Second tooltip - right position */
        left: calc(100% + 25px);
        top: 50%;
        transform: translateY(-50%);
    }

    .tooltip-3 {
        /* Third tooltip - left position */
        right: calc(100% + 25px);
        top: 50%;
        transform: translateY(-50%);
    }

    .tooltip-4 {
        /* Fourth tooltip - top position */
        bottom: calc(100% + 20px);
        left: 50%;
        transform: translateX(-50%);
    }

    .tooltip-5 {
        /* Fifth tooltip - top position */
        bottom: calc(100% + 20px);
        left: 50%;
        transform: translateX(-50%);
    }

    /* Fine-tune arrow positions for each tooltip */
    .tooltip-1 .tooltip-arrow {
        top: -10px;
    }

    .tooltip-2 .tooltip-arrow {
        left: -10px;
    }

    .tooltip-3 .tooltip-arrow {
        right: -10px;
    }

    .tooltip-4 .tooltip-arrow,
    .tooltip-5 .tooltip-arrow {
        bottom: -10px;
    }
}


/* Reset and base styles */
/* Reset container styles */
.site-header .inside-navigation {
    position: static !important; /* Allow mega menu to be full width */
}

/* Base styles for menu item */
#menu-item-37 {
    position: static !important;
}

/* Mega menu wrapper styles */
.mega-menu-wrapper {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 99999;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
	background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Show mega menu on hover */
#menu-item-37:hover .mega-menu-wrapper {
    display: block;
}

/* Mega menu content styles */
.mega-menu-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
	margin-top: -30px;
}

/* Grid layout for services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Prevent horizontal scroll */
}

.service-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0; /* Prevent content overflow */
}

.service-item h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    word-wrap: break-word; /* Ensure text wraps */
}

.service-item p {
    margin: 0;
    word-wrap: break-word;
}

.details-link {
    display: inline-block;
    padding: 8px 20px;
    background: #94B4E8;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mega-menu-wrapper {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .mega-menu-content {
        padding: 15px;
    }
}

/* Fix for potential GeneratePress specific issues */
.inside-navigation {
    position: relative;
}

/* Prevent horizontal scroll on body */
body {
    overflow-x: hidden;
}



/* CSS animations */
/* Initial states */
.backInDown, .backInLeft, .backInRight, .backInUp, .fadeIn {
  opacity: 0;
  visibility: hidden;
}

.animate {
  visibility: visible;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

/* Modified fadeIn animation */
.animate.fadeIn {
  animation-name: fadeIn;
  animation-delay: 0.5s; /* Reduced to half second */
  visibility: visible; /* Ensure visibility during delay */
}

/* Keep existing animation classes */
.animate.backInDown {
  animation-name: backInDown;
}

.animate.backInLeft {
  animation-name: backInLeft;
}

.animate.backInRight {
  animation-name: backInRight;
}

.animate.backInUp {
  animation-name: backInUp;
}

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

/* Keep existing keyframes */
@keyframes backInDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes backInLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

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

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

/* Back entrances */

.cf-container {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}
.cf-col-1, .cf-col-2, .cf-col-3, .cf-col-4, .cf-col-5, .cf-col-6, .cf-col-7, .cf-col-8, .cf-col-9, .cf-col-10, .cf-col-11, .cf-col-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 5px;
	padding-left: 5px;
}
@media ( min-width: 576px ) {
	.cf-col-1 {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.cf-push-1 { margin-left: 8.333333%; }
	.cf-col-2 {
		-ms-flex: 0 0 16.66667%;
		flex: 0 0 16.66667%;
		max-width: 16.66667%;
	}
	.cf-push-2 { margin-left: 16.66667%; }
	.cf-col-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.cf-push-3 { margin-left: 25%; }
	.cf-col-4 {
		-ms-flex: 0 0 33.33333%;
		flex: 0 0 33.33333%;
		max-width: 33.33333%;
	}
	.cf-push-4 { margin-left: 33.33333%; }
	.cf-col-5 {
		-ms-flex: 0 0 41.66667%;
		flex: 0 0 41.66667%;
		max-width: 41.66667%;
	}
	.cf-push-5 { margin-left: 41.66667%; }
	.cf-col-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.cf-push-6 { margin-left: 50%; }
	.cf-col-7 {
		-ms-flex: 0 0 58.33333%;
		flex: 0 0 58.33333%;
		max-width: 58.33333%;
	}
	.cf-push-7 { margin-left: 58.33333%; }
	.cf-col-8 {
		-ms-flex: 0 0 66.66667%;
		flex: 0 0 66.66667%;
		max-width: 66.66667%;
	}
	.cf-push-8 { margin-left: 66.66667%; }
	.cf-col-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.cf-push-9 { margin-left: 75%; }
	.cf-col-10 {
		-ms-flex: 0 0 83.33333%;
		flex: 0 0 83.33333%;
		max-width: 83.33333%;
	}
	.cf-push-10 { margin-left: 83.33333%; }
	.cf-col-11 {
		-ms-flex: 0 0 91.66667%;
		flex: 0 0 91.66667%;
		max-width: 91.66667%;
	}
	.cf-push-11 { margin-left: 91.66667%; }
	.cf-col-12 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}