body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.gradient-background {
    background: linear-gradient(270deg, #1C4C60 0%, #2D7491 100%);
    color: white;
    padding: 60px 0;
}
.gradient-button {
    background: transparent;
    border: 2px solid white;
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
}
.outline-btn {    background: transparent;
    border: 2px solid white;
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
}
.outline-btn:hover {    background: white;
    border: 2px solid white;
    color: black;
    border-radius: 50px;
    padding: 10px 20px;
}
.content-section {
    position: relative;
}
.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: url('img/sect-bg.png') no-repeat;
    opacity: 0.1;
}
.testimonials-section {
    background-color: #F5F9FF;
}
.testimonial-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 20px;
    background: white;
}
.full-width-background {
    background-color: #F5F9FF;
    padding: 40px 0;
}
.custom-tick {
    color: green;
}
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.hero-section {
    background: linear-gradient(10deg, #1C4C60 0%, #2D7491 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    position: relative;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.case-study {
    margin: 40px 0;
}
.case-study img {
    border-radius: 10px;
}
.case-study .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.case-study .btn {
    background: linear-gradient(270deg, #1C4C60 0%, #2D7491 100%);
    border: none;
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
    align-self: flex-start;
}      
.green-box {
    background: #1C4D61;
    color: white;
    padding: 20px;
    text-align: left;
    border-radius: 14px;
    margin: 20px 0;
    font-size: 1.25rem; /* 26px */
    font-weight: 500;
}
.green-box .name {
    display: block;
    font-size: 1rem; /* 22px */
    font-weight: 700;
    margin-top: 10px;
}
.big-text {
    font-size: 1.5rem;
    font-weight: 600;
}
.case-study h2 {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 54px;
    letter-spacing: -0.02em;
    color: #1C4D61;
}
.cs-index .case-study h2 {font-size:2rem}
.case-study .navbar img {
    border-radius: 0px; 
}

.case-study .hero-section { background: url('img/cs-img.png') no-repeat center center/cover;
    position: relative;
    color: white;
    text-align: center;
    padding: 100px 0;}
    .case-study .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(246.51deg, rgba(0, 0, 0, 0.5) 4.9%, rgba(28, 76, 96, 0.5) 61.37%);
        z-index: 1;
    }

    .case-study h1 {
        font-size: 3.25rem;
    }


    .gradient-button {
        background: linear-gradient(270deg, #1C4C60 0%, #2D7491 100%);
        border: none;
        color: white;
        border-radius: 50px;
        padding: 10px 20px;
    }
    .form-control {
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .form-label {
        color: #1C4D61;
        font-weight: bold;
    }


    .navbar .nav-link {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
    }
    .navbar-dark .nav-link {
        color: white;
    }
    .navbar-light .nav-link {
        color: #1C4D61;
    }
    .navbar .btn-schedule {
        background-color: #68A8BC;
        color: white;
        border-radius: 50px;
        padding: 10px 20px;
    }
    .navbar-dark .btn-schedule {
        background-color: #68A8BC;
        color: white;
    }
    .navbar-light .btn-schedule {
        background-color: #1C4D61;
        color: white;
    }


    .form-label {
        color: #1C4D61;
        font-weight: bold;
    }
    .accordion-button {
        color: #1C4D61;
        font-weight: bold;
    }


    .navbar {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
        z-index: 1030; /* Ensure it overlays other content */
    }
    .navbar .nav-link {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-weight: 600;
    }
    .navbar-dark .nav-link {
        color: white;
    }
    .navbar-light .nav-link {
        color: #1C4D61;
    }
    .navbar .btn-schedule {
        background-color: #68A8BC;
        color: white;
        border-radius: 50px;
        padding: 10px 20px;
    }
    .navbar-dark .btn-schedule {
        background-color: #68A8BC;
        color: white;
    }
    .navbar-light .btn-schedule {
        background-color: #1C4D61;
        color: white;
    }
    .logo-dark {
        display: none;
    }
    .logo-light {
        display: inline;
    }
    .navbar-dark .logo-dark {
        display: inline;
    }
  

    .navbar-scrolled { background: linear-gradient(10deg, #1C4C60 0%, #2D7491 100%);}
    .navbar-scrolled .logo-dark {display: inline-block;}    
    .navbar-scrolled .logo-light {display:none;}

    .testimonial-card  {}

    body.case-study {margin:0;}
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 1);
    }
    @media (min-width: 992px) { /* Bootstrap's md breakpoint */

    li.nav-item {
        margin: 0 0 0 1rem;
    }
}



    .custom-tick-list {
        list-style: none;
        padding-left: 0;
    }
    .custom-tick-list li {
        position: relative;
        padding-left: 30px; /* Adjust padding to fit your image size */
        margin-bottom: 10px;
    }
    .custom-tick-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 20px; /* Adjust width to fit your image size */
        height: 20px; /* Adjust height to fit your image size */
        background: url('img/tick.png') no-repeat center center;
        background-size: contain; /* Adjust if your image should cover or be contained */
    }


    .content-page h2 {
        color:#1C4D61;
        font-size:2.5rem;
    }

    .test-card .col-md-5 img {border-radius:10px 0 0 10px;}


    .diagonal-bottom {
        position: relative;
    }

    .diagonal-bottom::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 20px;
        background: white;
        clip-path: polygon(0 100%, 100% 0, 100% 100%);
    }


    .navbar-white-bg .nav-item a {
        color: #1C4D61;
    }

    .navbar-white-bg .nav-item .btn-schedule {color:white}
    .contact-us .navbar-scrolled .logo-white {display: none;}    .contact-us .navbar-scrolled a {color: white;}


.feature-box p {color: white;}


.feature-box {border-left: 1px solid rgba(255,255,255,0.3);}


.split-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.split-list li {
    width: 100%; /* Full width on mobile by default */
    margin-bottom: 10px; /* Space between items */
}

@media (min-width: 768px) { /* Bootstrap's md breakpoint */
    .split-list li {
        width: 48%; /* 2 columns on medium screens and above */
    }
}

.feature-elab h2 {font-size:2.4rem; font-weight: 800;}

.feature-elab .intro-p {font-size:1.35rem;margin:2rem 0;}

.light-hero-section {background-color: #EFF2F3; padding:8rem 0 0 0;}

.landing-page .navbar-scrolled .logo-white {display:none;}
.landing-page .navbar-scrolled a.nav-link {
    color: white;
}

.landing-page .feature-box img {width:60px;}

.accordion-button:not(.collapsed) {
    color: white;
    background-color: #2D7491;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
    transform: rotate(-180deg);
}

/* Ensure background color for expanded navbar */
.navbar-collapse.show,
.navbar-collapse.collapsing {
    background-color: #ffffff;
    padding: 1rem;
    margin: 1rem 0;
}



.navbar-white-bg .navbar-toggler {border-color:#1C4D61;}
.navbar-white-bg .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2828,77, 97, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 992px) { 
.landing-page .navbar-white-bg.navbar-scrolled .nav-link {color: rgba(0, 0, 0, 0.8)!important;}
.landing-page .navbar-white-bg.navbar-scrolled .nav-link.btn-schedule {
    color: white!important;
}


.navbar-dark .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.8)!important;
}
.contact-us .navbar-scrolled a.nav-link,
.contact-us .navbar-scrolled  .dropdown-item {
    color: rgba(0, 0, 0, 0.8)!important;
}
}

body .navbar-dark .nav-link.btn-schedule {
    color: white!important;
}


ul.dropdown-menu.show {
    border: 0;
}

.dropdown-menu .dropdown-item {
    color: rgba(0, 0, 0, 0.8) !important;
}


.index.content-page h1 {font-size:3.5rem}
.index.content-page p.main {    font-size: 1.625rem;
    margin: 1rem 0 2rem;
    opacity: 0.5;}

.power1 span {
        text-transform: uppercase;
        display: block;
        font-size: 1rem;
        font-weight: 800;
        color: black;
    }

    .index.content-page .power1 {    font-size: 3rem;
        color: hsla(197.31, 55.32%, 36.86%, 1);
        font-weight: 300;
        margin-bottom: 2rem;}


     .index    .features-section {
            width: 100%;
            background-color: #f5f5f5; /* Grey background */
            padding: 50px 0;
        }
        
        
        
        .index   .mini-title {
            font-size: 16px;
            color: #888; /* A subtle grey for the mini title */
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .index   .features-section h2 {
            font-size: 3rem;
            margin-top: 10px;
            margin-bottom: 40px;
            color: hsla(197.31, 55.32%, 36.86%, 1);
            font-weight: 300;
        }
        
        .index  .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2 columns grid */
            gap: 20px; /* Space between boxes */
        }
        
        .index  .feature-box {
            background-color: #fff; /* White background */
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .index   .feature-box:hover {
            transform: translateY(-10px); /* Lift the box slightly on hover */
        }
        
        .index  .feature-box h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .index   .feature-box p {
            font-size: 16px;
            color: #666;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns grid on smaller screens */
            }
        }
        
        @media (max-width: 480px) {
            .features-grid {
                grid-template-columns: 1fr; /* 1 column grid on mobile */
            }
        }
        

        .index  .trusted {padding:2rem 0}

        .testbox {}

        .test-wrap {    background-color: hsla(197.31, 55.32%, 36.86%, 1);
            padding: 2rem;
            margin: 2rem 0;
            border-radius: 1rem;}