@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');

/* General styling */
#what-we-offer{
    padding: 50px 0;
    margin-top: 2rem;
}
.sectioncard{
    margin-top: 3rem;
}
.text-center {
    text-align: center;
}
.maintitle{
    font-family: "Merienda", cursive;
}


/* Card styling */
.card-item {
    border: 1px solid #ccc; /* Light border for subtle definition */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for depth */
    overflow: hidden; /* Ensures content doesn't overflow rounded corners */
    max-width: 350px; /* Maximum width for better alignment on larger screens */
    margin: 20px auto; /* Centering and spacing */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */
    height: 32rem;
}

.card-item:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
}

.card-img-top {
    width: 100%; /* Cover the entire width of the card */
    height: auto; /* Maintain aspect ratio */
}

.card-body {
    padding: 20px; /* Adequate padding inside the card body */
}

.card-title {
    font-size: 22px; /* Slightly larger title for better readability */
    margin-bottom: 10px; /* Space under the title for separation */
    font-weight: bold; /* Emphasize the title */
    color: #090256 ; /* Darker title color for contrast */
     font-family: "Merienda", cursive;
     text-align: center;
}

.card-text {
    font-size: 14px; /* Smaller, more readable text size */
    line-height: 1.5; /* Improved readability */
    color: #555; /* Softer text color for easier reading */
}


/* Owl Carousel */
.sectioncard-carousel .owl-nav button.owl-prev,
.sectioncard-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
}

.sectioncard-carousel .owl-nav button.owl-prev:hover,
.sectioncard-carousel .owl-nav button.owl-next:hover {
    background: #f1f1f1;
}

.sectioncard-carousel .owl-nav button.owl-prev {
    left: -50px;
}

.sectioncard-carousel .owl-nav button.owl-next {
    right: -50px;
}

.sectioncard-carousel .owl-nav button span {
    font-size: 1.5rem;
}

.sectioncard-carousel .owl-dots{
  text-align: center;
    margin-top: 20px;
    
}
.sectioncard-carousel .owl-dot{
  margin: auto;
    width: 10px; /* Increase dot size */
    height: 10px;
    background: #000; /* Change dot color */


}
.sectioncard .owl-dots .owl-dot{
	position:relative;
	width:10px;
	height:10px;
	margin:0px 10px;
	margin-top:60px;
	border-radius:50px;
	display:inline-block;
	background-color:#cccccc;
	transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.sectioncard .owl-dots .owl-dot:hover,
.sectioncard.owl-dots .owl-dot.active{
	background-color:#ffe1a0;
    opacity: 1;
}
/* Responsive Design */
@media (max-width: 768px) {
    .project-carousel .owl-nav button.owl-prev,
    .project-carousel .owl-nav button.owl-next {
        left: 10px;
        right: 10px;
    }
}