@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg-first:  #191050;
    --bg-second: #110aa1;
    --bg-third: #B0F600;
    --bg-fourth: #dbdbdb;   
    --bg-fifth: #B0F600;
    --bg-sixth: #02BF00;
    --bg-seventh: #f8f8f8; 

    --bg-card:  #eef3f4;
    --dark: #161616;
}

/*** Spinner ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* Donut spinner styles */
.donut-spinner {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 0.4rem solid rgba(50, 168, 82, 0.2); /* Light green for background */
    border-top: 0.4rem solid #32a852; /* Algae green */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*** Spinner End ***/



body {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--bg-seventh);
    color: var(--bg-first);
    padding: 0;
    margin: 0;
}

section {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100vh;
}

p, ul, li{
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--dark);
}

h1, h2, h3, h4, h5 {
    /*** font-family: 'Roboto Slab', sans-serif;***/
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--bg-second) !important;
}

/*** Top Navigation ***/

.navbar {
    
    background-color: var(--bg-first)  !important;
}


.navbar-brand,
.navbar-nav .nav-link {
    color: rgb(144, 144, 144) !important;
    font-family: "Work Sans", sans-serif !important;
}
/* General styling for nav links */
.navbar-nav .nav-item .nav-link {
    position: relative !important; /* Needed for positioning the ::after element */
    overflow: hidden !important;
    color: var(--bg-fourth) !important;
    text-decoration: none !important;
    display: inline-block !important; /* Ensure inline-block to apply transform */
    margin-right:10px;
    margin-left: 10px;
}

/* Underline animation for nav links */
.navbar-nav .nav-item .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Full width for the underline */
    height: 3px !important; /* Thickness of the line */
    background-color: var(--bg-third) !important;
    transform: scaleX(0) !important; /* Start with no width */
    transform-origin: bottom left !important; /* Start from the left */
    transition: transform 0.3s ease-in-out !important; /* Smooth transition */
}

/* Hover effect for nav links */
.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after {
    transform: scaleX(1) !important; /* Expand the width on hover */
}

/* Ensure text color remains readable on hover */
.navbar-nav .nav-item .nav-link:hover {
    color: var(--bg-fourth) !important;
}
.navbar-nav .nav-item.dropdown .nav-link:hover:hover {
    color: var(--bg-third) !important;
}


/* Dropdown menu styling */
.navbar-nav .nav-item.dropdown .dropdown-menu {
    background-color: var(--bg-first) !important; /* Set background color of dropdown */
    border: none !important; /* Remove default border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Add shadow for better visibility */
    padding: 0 !important; /* Remove any padding */
}

/* Dropdown items styling */
.navbar-nav .nav-item.dropdown .dropdown-item {
    background-color: var(--bg-second) !important;
    color: var(--bg-seventh) !important; /* Text color for dropdown items */
    padding: 0.5em 1em !important; /* Padding for dropdown items */
    text-decoration: none !important; /* Ensure text decoration is removed */
    position: relative !important; /* Needed for positioning the ::after element */
    overflow: hidden !important;
}

/* Underline animation for dropdown items */
.navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Full width for the underline */
    height: 2px !important; /* Thickness of the line */
    background-color: var(--bg-third) !important;
    transform: scaleX(0) !important; /* Start with no width */
    transform-origin: bottom left !important; /* Start from the left */
    transition: transform 0.3s ease-in-out !important; /* Smooth transition */
}

/* Hover effect for dropdown items */
.navbar-nav .nav-item.dropdown .dropdown-item:hover::after {
    transform: scaleX(1) !important; /* Expand the width on hover */
    
}


.navbar-toggler {
    border: none !important; /* Remove default border */
}

.navbar-toggler-icon {
    color: rgba(255, 255, 255, 0.5) !important; /* Default color */
}

@media (max-width: 700px) {
    .navbar-toggler-icon {
        color: white !important; /* Change icon color to white on smaller screens */
    }
}


/*** Font used in the beginning of every section ***/
.specialfont{
    font-family: "Calistoga", serif;
}

/* Apply flexbox layout to the body */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
/* Main content area take up all available space */
.main-content {
    flex: 1;
}

/*** Intro  ***/

.intro-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bg-fifth);
}


/*** About ***/
.about-img {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.about-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/*** Background ***/
.bg-intro {
    background: url(../img/info-background.png) bottom center no-repeat;
    background-size: cover;
    background-color: var(--bg-seventh) !important;
    color: rgb(26, 26, 26);
}

.bg-info {
    background: url(../img/info-background.png) bottom center no-repeat;
    background-size: cover;
    background-color: var(--bg-seventh) !important;
    color: rgb(26, 26, 26);
}

.bg-graph {
    background-color: var(--bg-first) !important;;
}

.info-padding{
    padding: 30px;
}

@media (max-width: 700px) {
    .info-padding {
        padding: 10px;
    }
}

.bg-standard {
    background-color: var(--bg-seventh) !important;
    color: var(--bg-first) !important;
}
.bg-standard2{
    background-color: var(--bg-third);
    color: var(--bg-first);
}
.bg-white{
    background-color: #ffffff;
}

.bg-trans{
    background-color: rgba(255, 255, 255, 0.7); /* 0.5 is 50% transparency */
}

/* Footer styling */
.footer {
    background-color: #0f0a35;
    color: #7783d1;
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15);
}


/* Animation class for cards */
.card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s forwards;
    color: var(--bg-second) !important;
    background-color: var(--bg-card)!important;
    border-radius: 30px !important;
    padding: 20px;
    border-style: none !important;
}

/* Positioning card to center in smaller screen */
@media (max-width: 768px) {
    .card {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.card-img {
    border-style: none;
    width: 100%; /* Make the image take up the full width of its container */
    max-width: 100px;/* Set a maximum width to ensure it doesn't get too large on big screens */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.card-img-case{
    border-style: none;
    width: 100%; /* Make the image take up the full width of its container */
    max-width: 100px;/* Set a maximum width to ensure it doesn't get too large on big screens */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .card-img {
        width: 80%; /* Smaller width for small screens */
    }
}

@media (max-width: 400px) {
    .card-img {
        width: 100%; /* Full width for very small screens */
    }
}

.sub-title{
    color: var(--bg-second) !important;
    text-align: center;
}
.main-title{
    color: var(--dark) !important;
}
.img-fill {
    position: relative;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the container */
}

@media (max-width: 600px) {
    .img-fill {
        padding: 20px;
    }
}

.specialfont{
    font-family: "Calistoga", serif !important; 
    color: var(--bg-card) !important;
}
.specialfont-main{
    color: var(--bg-card);
    font-size: 1.7em !important;
}

.bg-footer{
    background: url(../img/bg-footer.png) center center no-repeat !important;
    background-size: cover !important;
    background-color: var(--bg-first) !important;
}

a.btn-link {
    text-decoration: none !important;
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--bg-seventh);
    font-weight: 300;
    transition: .3s;
}

a.btn-link:hover {
    color: #FFFFFF;
    font-weight: normal;
}

.btn-contact{
    
    background-color: var(--bg-first);
    color: var(--bg-seventh);
}

.btn-contact:hover{
    background-color: var(--bg-second);
    color: var(--bg-fourth);
}

.bg-featurex{
    background-color: var(--bg-first) !important;
    color: var(--bg-fourth) !important;
}


/*** Feature ***/
.featurex {
    background: url(../img/bg-feature.png) center center no-repeat;
    background-size: cover;
}

/*** Indent paragraph ***/

.myindent{
    text-indent: 30px;
}

/*** Justify text ***/
.text-justify {
    text-align: justify !important;
}


/*** Image for info ***/
.img-info {
    position: relative;
    width: 100%;
    overflow: hidden;
    top: 0;
}

@media (max-width: 600px) {
    .img-info {
        padding: 20px;
    }
}

/******************* Service Section *******************/
.card-mainservice{
    border-style: none !important;
}
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-weight: bold;
    font-size: 1.25rem;
}

.card-text {
    font-size: 0.95rem;
}

.card-service {
    background-color: #e8e9ff !important;
    border-radius: 0.75rem;
    border-style: none !important;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-service:hover {
    background-color: var(--color_highlight) !important;
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/******************* End of Service Section *******************/