/* General Styles */
.custom-bg-light {
    background-color: #f8f9fa;
}

.custom-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Spacing between cards */
}

.custom-col {
    flex: 1 1 300px; /* Ensures each card is flexible, with a minimum width of 300px */
    display: flex;
    justify-content: center;
}

.custom-card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}

.custom-card:hover {
    transform: translateY(-10px); /* Hover effect */
}

.custom-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.custom-h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.custom-h6 {
    font-size: 1rem;
    color: #6c757d;
}

.custom-paragraph {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.custom-btn {
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.custom-btn-default {
    background-color: #007bff;
}

.custom-btn-positive {
    background-color: #28a745;
}

.custom-fw-bold {
    font-weight: bold;
}

.custom-small {
    font-size: 0.875rem;
}

.custom-text-reset {
    color: inherit;
    text-decoration: none;
}

.custom-white {
    color: white;
}

.custom-bg-orange {
    background-color: #fd7e14;
}

.custom-bg-green {
    background-color: #28a745;
}

.custom-bg-primary {
    background-color: #007bff;
}

.custom-bg-red {
    background-color: #dc3545;
}

.custom-bg-lime {
    background-color: #c8e600;
}

.custom-bg-yellow {
    background-color: #ffc107;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .custom-row {
        gap: 1rem;
    }

    .custom-col {
        flex: 1 1 100%; /* Stack the cards on mobile */
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .custom-row {
        gap: 1.5rem; /* Slightly smaller gap for medium screens */
    }
}

@media (min-width: 992px) {
    .custom-row {
        gap: 2rem; /* Larger gap for bigger screens */
    }
}




/* -------------- */
/* Button Row Adjustments */
.custom-row.custom-gx-2.custom-gx-sm-3.custom-justify-content-center {
    gap: 2rem; /* Ensuring a consistent gap between buttons */
}

/* First Card and Button Row Gap */
.custom-row.custom-g-4.custom-row-cols-1.custom-row-cols-md-2.custom-row-cols-lg-3.custom-text-center.custom-mt-4.custom-homeIcons {
    margin-top: 3rem; /* Adds more space between button row and the first card row */
}

/* General Layout Adjustments */
.custom-card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 2rem; /* Adding margin bottom to separate cards */
}

/* Ensuring Cards Don't Overlap or Crowded */
.custom-col {
    flex: 1 1 300px; /* Ensures each card has some minimum width */
    display: flex;
    justify-content: center;
    padding: 0 1rem; /* Padding inside each column to prevent card crowding */
}

.custom-col-auto {
    margin-bottom: 1rem; /* Gives proper space between buttons in different screen sizes */
}

/* Card Padding and Spacing for Better Visibility */
.custom-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Button Padding for better look */
.custom-btn {
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
}

/* Media Query Adjustments for Extra Mobile Responsiveness */
@media (max-width: 768px) {
    .custom-row.custom-gx-2.custom-gx-sm-3.custom-justify-content-center {
        gap: 1rem; /* Less gap on smaller devices */
    }

    .custom-row.custom-g-4.custom-row-cols-1.custom-row-cols-md-2.custom-row-cols-lg-3.custom-text-center.custom-mt-4.custom-homeIcons {
        margin-top: 2rem; /* Reduce margin on small screens */
    }
}
/* ------------------- */


/* ============== */

/* Card Container */
.custom-card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    height: 100%;
    position: relative; /* Allow absolute positioning inside */
    padding-top: 3rem; /* Space for the icon */
    transition: transform 0.3s ease-in-out;
    margin-bottom: 2rem;
}

/* Icon Style Adjustments */
.custom-card i {
    font-size: 3rem; /* Increase icon size */
    padding: 1rem;
    background-color: #007bff; /* Default background color (blue, can be customized per card) */
    color: white;
    border-radius: 50%; /* Round icon background */
    position: absolute; /* Position it relative to the card */
    top: -1.5rem; /* Position it just above the card */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Ensure it is perfectly centered */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

/* Specific Icon Background Colors for Cards */
.custom-bg-orange i {
    background-color: #fd7e14; /* Orange */
}

.custom-bg-green i {
    background-color: #28a745; /* Green */
}

.custom-bg-primary i {
    background-color: #007bff; /* Blue */
}

.custom-bg-red i {
    background-color: #dc3545; /* Red */
}

.custom-bg-lime i {
    background-color: #c8e600; /* Lime */
}

.custom-bg-yellow i {
    background-color: #ffc107; /* Yellow */
}

/* Hover Effects for Icons */
.custom-card i:hover {
    transform: translateX(-50%) scale(1.1); /* Slightly enlarge the icon and keep it centered */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow on hover */
}

/* Adjustments for Cards when Hovered */
.custom-card:hover i {
    transform: translateX(-50%) scale(1.1); /* Slight enlarge on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to icon */
}

/* Card Content Style */
/* Card Container */
.custom-card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    height: 100%;
    position: relative; /* Allow absolute positioning inside */
    padding-top: 4rem; /* Space for the icon */
    transition: transform 0.3s ease-in-out;
    margin-bottom: 2rem;
}

/* Fixed Icon Size and Positioning */
.custom-card i {
    font-size: 2.5rem; /* Set fixed icon size for consistency */
    width: 4rem; /* Set a fixed width for the icon */
    height: 4rem; /* Set a fixed height for the icon */
    line-height: 4rem; /* Vertically center the icon inside its circle */
    padding: 0; /* Remove extra padding */
    background-color: #007bff; /* Default background color (blue, can be customized per card) */
    color: white;
    border-radius: 50%; /* Circular icon background */
    position: absolute; /* Position it relative to the card */
    top: -2rem; /* Adjust position to stick just above the card */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Ensure it is perfectly centered */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

/* Specific Icon Background Colors for Cards */
.custom-bg-orange i {
    background-color: #fd7e14; /* Orange */
}

.custom-bg-green i {
    background-color: #28a745; /* Green */
}

.custom-bg-primary i {
    background-color: #007bff; /* Blue */
}

.custom-bg-red i {
    background-color: #dc3545; /* Red */
}

.custom-bg-lime i {
    background-color: #c8e600; /* Lime */
}

.custom-bg-yellow i {
    background-color: #ffc107; /* Yellow */
}

/* Hover Effects for Icons */
.custom-card i:hover {
    transform: translateX(-50%) scale(1.1); /* Slightly enlarge the icon and keep it centered */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow on hover */
}

/* Adjustments for Cards when Hovered */
.custom-card:hover i {
    transform: translateX(-50%) scale(1.1); /* Slight enlarge on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to icon */
}

/* Card Content Style */
.custom-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}



/* ================== */


/* pppppppppppppppp */
        img.wp-smiley,
        img.emoji {
            display: inline !important;
            border: none !important;
            box-shadow: none !important;
            height: 1em !important;
            width: 1em !important;
            margin: 0 .07em !important;
            vertical-align: -0.1em !important;
            background: none !important;
            padding: 0 !important;
        }

        .assingment {
            margin-left: 27px;
            margin-bottom: 14px;
            margin-right: 20px;
            border: 1px solid white;
            box-shadow: 5px 5px 17px #dcdcdc;
            text-align: center;
        }

        .blackiconcolor {
            color: white;
            font-size: 100px;
            padding-top: 23px;
            padding-left: 32px;
        }

        .icon-custom {
            font-size: 82px;
        }

        .justify-content {
            text-align: justify;
        }

        .flip-card {
            height: 200px;
            perspective: 1000px;
            border-radius: 20px;
            width: 251px;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .flip-card-front {
            color: black;
        }

        .flip-card-back {
            color: white;
            transform: rotateY(180deg);
            border-radius: 20px;
        }

        .recentcomments a {
            display: inline !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .banner-right {
            background: url(images/DASH1.png);
        }

        .content a {
            margin-top: auto;
            margin-bottom: auto;
            text-align: center;
        }

        .imgs {
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: 98px;
        }

        @media screen and (min-width: 800px) {
            .carousel-inner {
                padding-left: 100px;
                padding-right: 100px;
            }

        }

        .carousel-item {
            background-color: #ffff;
            /* box-shadow: 3px 3px 15px #dcdcdc; */
            padding: 10px;
            /* min-height: 400px; */
        }

        .service-div i {
            color: #ffff;
        }

        @media only screen and (max-width: 767px) {
            .banner-right {
                width: 100%;
            }
        }

        .service-div {
            text-align: center;
            padding: 10px;
            border-radius: 20px;
            box-shadow: 3px 3px 17px rgb(128 178 194);
            height: 100%;
        }

        .flip-card-front {
            border-radius: 20px;
            box-shadow: 3px 3px 17px pink;
        }

        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .display-tab .col-md-3 {
                display: inline-flex;
            }
        }




        /* Custom container for the image */
.custom-image-container {
    position: relative;
    width: 100%;           /* Ensure it takes up the full width of its parent */
    min-height: 200px;     /* Set a minimum height for the image container */
    max-height: 400px;     /* Set a maximum height for the image container */
    overflow: hidden;      /* Ensure the image is contained within the bounds of the container */
}

/* Custom class for the image */
.custom-image {
    width: 100%;           /* Make the image fill the full width of the container */
    height: 100%;          /* Make the image fill the full height of the container */
    object-fit: cover;     /* Ensure the image covers the container, maintaining the aspect ratio */
}

/* Optional: Media query to adjust for smaller screens */
@media (max-width: 768px) {
    .custom-image-container {
        min-height: 350px;  /* Adjust min-height for smaller screens */
        max-height: 450px;  /* Adjust max-height for smaller screens */
    }
}


/* Ensures the images fit well in the card header */
.custom-icon-img {
    width: 60px;       /* Fixed width */
    height: 60px;      /* Fixed height */
    margin-bottom: 15px;  /* Margin to space it out from the text */
    object-fit: cover;   /* Ensures the image is not distorted */
    border-radius: 50%;  /* Optional: makes the image circular */
}


/* Container for the image, positioned absolutely in the center of the top border */
.custom-icon-container {
    position: absolute;
    top: -30px;  /* Adjust the distance from the top border */
    left: 50%;
    transform: translateX(-50%);  /* Centers the image horizontally */
    width: 80px;  /* Fixed width for the image */
    height: 80px; /* Fixed height for the image */
}

/* Ensure the image inside the container stays within the container size */
.custom-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Preserve the aspect ratio */
    border-radius: 50%;  /* Optional: make the image circular */
}