@font-face {
	font-family: "Montserrat";
	src: url('Montserrat-Regular.otf');
}

@font-face {
	font-family: "QuattrocentoSans";
	src: url('QuattrocentoSans.ttf');
}

@font-face {
	font-family: "LeagueSpartan";
	src: url('LeagueSpartan-Bold.otf');
}

@font-face {
	font-family: "Roboto";
	src: url('RobotoCondensed-Light.ttf');
}

@font-face {
	font-family: "Lato";
	src: url('Lato-Regular.ttf');
}

@font-face {
	font-family: "Cantarell";
	src: url('Cantarell-Regular.ttf');
}

.leaguespartan {
	font-family: "LeagueSpartan", sans-serif
}

.montserrat {
	font-family: "Montserrat", sans-serif
}

.quattrocento {
	font-family: "QuattrocentoSans", sans-serif
}

.roboto {
	font-family: "Roboto", san-serif
}

.lato {
	font-family: "Lato", san-serif
}

.cantarell {
	font-family: "Cantarell", san-serif
}

body {
	
	font-family: 'Inter', sans-serif;
	}
	.brand-primary { background-color: #001F3F; }
	.brand-accent { color: #39CCCC; }
	.brand-complementary { color: #FF4136; }
	.text-brand-primary { color: #001F3F; }
	.text-brand-accent { color: #39CCCC; }
	.text-brand-complementary { color: #FF4136; }
	.hover\:text-brand-accent:hover { color: #39CCCC; }
	.hover\:text-brand-complementary:hover { color: #FF4136; }
	.topbar {
		height: 60px;
	}
	.image-container img {
            max-width: 100%;
            height: auto;
            aspect-ratio: 4 / 5; /* Maintain the aspect ratio of 4:5 */
        }
	.wipe-animation {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
        }
        .wipe-animation span {
            display: inline-block;
            transform: translateX(-100%);
            animation: wipe-in 0.5s forwards;
        }
        @keyframes wipe-in {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        @keyframes wipe-out {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }
	.gradient-hover:hover {
            background-image: linear-gradient(135deg, #001F3F 0%, #39CCCC 100%);
        }
        .gradient-hover:hover span {
            background-color: #e91e63;
        }
        .gradient-hover:hover h4,
		.gradient-hover:hover p,
		.gradient-hover:hover ul li,
		.gradient-hover:hover li { /* More specific */
			color: white;
		}
	.image-box {
            position: relative;
            overflow: hidden;
            background-color: #f9f9f9;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .image-box img {
            transition: opacity 0.3s ease;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-box::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0, 31, 63, 0.4);
            transition: background-color 0.3s ease;
        }
        .image-box-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            transition: color 0.3s ease;
        }
        .image-box:hover::before {
            background-color: rgba(57, 204, 204, 0.4);
        }
        .image-box:hover .image-box-text {
            color: #001F3F;
        }
		
		
	.pub-card {
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: relative;
		background-image: linear-gradient(135deg, #001F3F 0%, #39CCCC 100%);
		width: 400px;
		height: 400px;
		margin: 0 auto;
		margin-top: 90px;
		transition: transform 0.3s ease-in-out; /* Smooth transition for transform effects */
	}

	.pub-card .content {
		width: 400px; /* Corrected from 'widows' to 'width' */
		padding: 30px;
		box-sizing: border-box;
		color: white;
	}
	
	.pub-card .content a {
		display: inline-block;
		margin: 10px 0 0;
		padding: 10px 20px;
		text-decoration: none;
		/*border: 2px solid #001F3F; */
		color: white;
		background-color: #001F3F;
		font-weight: 600;
	}
		
	.pub-card img {
		width: 100%; /* Responsive width */
		height: auto; /* Maintain aspect ratio */
		max-height: 150px; /* Maximum height so it doesn't get too large */
		object-fit: cover; /* Ensures the image covers the area */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.pub-card .sliderText {
		position: relative;
		width: 100%;
		height: 200px; /* Or use min-height if content height varies */
		display: flex;
		justify-content: center;
		align-items: center;
		background: #000;
	}

	.pub-card .sliderText h3 { /* Corrected from .h3 to h3 */
		color: #fff;
		font-size: 3em;
	}

	
	.webinar-card {
		background: white; /* Or any other base color */
		color: #001F3F; /* Base text color */
		transition: background 0.3s, color 0.3s;
		border-radius: 0.5rem;
		overflow: hidden;
	}

	.webinar-card:hover {
		background: linear-gradient(135deg, #001F3F 0%, #39CCCC 100%);
		color: white; /* Text color on hover */
	}

	.webinar-card img {
		height: 200px;
		width: auto;
		/*display: block;*/
		object-fit: cover;
		object-position: center; /* Align the image nicely */
	}

	.webinar-card h3 {
		margin: 1rem 0; /* Adjust as needed */
	}
	
	#publication {
		padding-top: 90px;
	}
	

	/* Responsive grid adjustments */
	@media (max-width: 768px) {
		.cards label {
			min-width: 200px; /* Smaller min-width on smaller screens */
		}
		
		.card .infos .name {
			font-size: 24px; /* Smaller font size on smaller screens */
		}
		
		.grid {
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		}
	}

	@media (max-width: 480px) {
		#home {
			padding-top: 90px; /* Increase if the navbar height is larger on small screens */
		}
		
		.cards label {
			min-width: 100%; /* Full width on very small screens */
		}
		
		.grid {
			grid-template-columns: 1fr;
		}
}


	/* Base styles for larger screens */
	.footer-link {
	  font-size: 1.25rem; /* Larger font size for footer links on large screens */
	}

	.footer-icon {
	  font-size: 2.5rem; /* Larger icon size for footer icons on large screens */
	}

	/* Responsive styles for smaller screens */
	@media (max-width: 1024px) {
	  #home {
        padding-top: 200px; /* Adjust based on navBar height on medium screens */
	  }	
	  
	  .pub-card {
		  width: 90%; /* Take up most of the screen on medium devices */
        margin-top: 90px; /* Space from the top */
	  }
	  
	  .footer-link {
		font-size: 1rem; /* Slightly smaller font size for medium screens */
	  }

	  .footer-icon {
		font-size: 2rem; /* Slightly smaller icon size for medium screens */
	  }
	}

	@media (max-width: 768px) {
	  #home {
        padding-top: 90px; /* Adjust based on navBar height on small screens */
      }
	  
	  .pub-card {
        width: 95%; /* Take up even more screen on small devices */
      }
	  
	  .footer-link {
		font-size: 0.875rem; /* Even smaller font size for small screens */
	  }

	  .footer-icon {
		font-size: 1.5rem; /* Even smaller icon size for small screens */
	  }
	}

	@media (max-width: 480px) {
	  #home {
        padding-top: 90px; /* Adjust based on navBar height on small screens */
      }
	  
	  .card .infos .name {
		font-size: 20px; /* Even smaller font size on very small screens */
	  }
	  
	  .footer-link {
		font-size: 0.75rem; /* Small font size for very small screens */
	  }

	  .footer-icon {
		font-size: 1.25rem; /* Small icon size for very small screens */
	  }
	}
	
	.container {

		width: 100%;
		height: 100%;
		/*max-width: 600px;*/
		/*max-height: 600px;*/
		display: flex;
		transform-style: preserve-3d;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/*padding-top: 450px;*/
	}

	/* Container for all slides */
	.cards {
	  display: flex;
	  transition: transform 0.5s ease;
	}

	/* Individual slide */
	.card {
	  min-width: 100%; /* Each slide takes up the full width of the carousel */
	  box-sizing: border-box;
	  padding: 20px;
	  display: flex;
	  flex-direction: column;
	  align-items: center; /* Centers items horizontally */
	  justify-content: center; /* Centers items vertically */
	}

	.card .image img {
	  max-width: 100%;
	  display: block;
	  margin-bottom: 20px; /* Space between image and text */
	}

	.card .infos {
	  text-align: center; /* Centers the text */
	}

	.card .btn-contact {
	  margin-top: 10px; /* Space between text and button */
	}

	/* Title for the published work section */



	#s1:checked~.cards #slide4,
	#s2:checked~.cards #slide5,
	#s3:checked~.cards #slide1,
	#s4:checked~.cards #slide2,
	#s5:checked~.cards #slide3 {
		box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
		transform: translate3d(-70%, 0, -220px);
		--current-color1: #ECEAED;
		--current-color2: #404457;
	}

	#s1:checked~.cards #slide5,
	#s2:checked~.cards #slide1,
	#s3:checked~.cards #slide2,
	#s4:checked~.cards #slide3,
	#s5:checked~.cards #slide4 {
		box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
		transform: translate3d(-35%, 0, -120px);
		--current-color1: #ECEAED;
		--current-color2: #404457;
	}

	#s1:checked~.cards #slide1,
	#s2:checked~.cards #slide2,
	#s3:checked~.cards #slide3,
	#s4:checked~.cards #slide4,
	#s5:checked~.cards #slide5 {
		box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%);
		transform: translate3d(0, 0, 0);
		--current-color1: #001F3F;
		--current-color2: #ECEAED;
	}

	#s1:checked~.cards #slide2,
	#s2:checked~.cards #slide3,
	#s3:checked~.cards #slide4,
	#s4:checked~.cards #slide5,
	#s5:checked~.cards #slide1 {
		box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
		transform: translate3d(35%, 0, -120px);
		--current-color1: #ECEAED;
		--current-color2: #404457;
	}

	#s1:checked~.cards #slide3,
	#s2:checked~.cards #slide4,
	#s3:checked~.cards #slide5,
	#s4:checked~.cards #slide1,
	#s5:checked~.cards #slide2 {
		box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
		transform: translate3d(70%, 0, -220px);
		--current-color1: #ECEAED;
		--current-color2: #404457;
	}

#navbar {
	height: 60px;
}

#home {
    padding-top: 90px; /* Adjust this value to match your navbar's height */
}
		
#services {
    background-image: url('../images/FCTayco_Banner2.png');
    background-size: cover;
    background-position: center;
    position: relative;
	z-index: 0;
}

#services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(256, 256, 256, 0.5); /* Adjust color and opacity as needed */
    z-index: 1;
}

#services .max-w-7xl {
    position: relative;
    z-index: 2;
}

#services > .content { /* Assuming .content is the class for your content wrapper */
    position: relative;
    z-index: 2;