/* Table of Contents:
1. Import Statements
2. Keyframes and Property Animations    
3. Custom Properties
4. Global Styles
5. Typography Styles
6. Heading and Subheadings
7. Form and Inputs
8. Maps Elements
9. Header and Navbar
10. Section and Container
11. Background and Setting Color
12. Swiper Setting
13. Button and Links
14. Overlay
15. Utility Classes
16. Social and Contact Setting
17. Breadcrumb
18. Spesific Media Queries
19. Card Setting
20. Progress and Rating 
21. Accordion
*/

/* ---------------------------- */
/* Import Statements            */
/* ---------------------------- */
@import url('../css/vendor/fonts.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/rtmicons.css');

/* ---------------------------- */
/* Keyframes and Property Animations            */
/* ---------------------------- */
@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(--value)
    }
}

@keyframes background_animation {
    from {
        background-size: 100%;
    }

    to {
        background-size: 110%;
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

/* ---------------------------- */
/*  Custom Properties            */
/* ---------------------------- */
:root {
    --primary: #FFFFFF;
    --text-color: #002140;
    --text-color-2: #494F54;
    --background-color: #F1F6FA;
    --accent-color: #0F447A;
    --accent-color-2: rgba(0, 117, 223, 0.2);
    --accent-color-3: #0075DF;
    --accent-color-4: #EAF5FF;
    --font-1: "Be Vietnam Pro", sans-serif;
    --font-2: "Cabin", sans-serif;

}


/* ---------------------------- */
/* Global Styles                */
/* ---------------------------- */
body {
    font-family: var(--font-1);
    color: var(--text-color);
    background-color: var(--primary);
}


/* ---------------------------- */
/* Typography                   */
/* ---------------------------- */
h1 {
    font-size: 66px;
}

h2 {
    font-size: 56px;
}

h3 {
    font-size: 44px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

button,
a {
    font-size: 16px;
    font-family: var(--font-2);
}

p {
    font-size: 16px;
    font-family: var(--font-2);
}

ul {
    list-style: none;
}

.list-circle {
    list-style: disc var(--accent-color);
}

li {
    font-size: 16px;
}

img {
    object-fit: cover;
}

/* ---------------------------- */
/* Headings and Subheadings      */
/* ---------------------------- */
.banner-heading {
    font-size: 5.5rem;
}

.sub-heading {
    color: var(--accent-color);
}

.text-color {
    color: var(--text-color);
}

.text-color-2 {
    color: #002140;
}

/* ---------------------------- */
/* Forms and Inputs             */
/* ---------------------------- */
.form-control {
    padding: 15px 24px;
}

.form textarea {
    background-color: transparent;
    border: solid 1px var(--accent-color);
    border-radius: 30px;
    color: var(--text-color);
    outline: none;
    font-family: var(--font-2);
}

.form input,
.form select {
    background-color: transparent;
    border: solid 1px var(--accent-color);
    border-radius: 50px;
    color: var(--accent-color);
    outline: none;
    font-family: var(--font-2);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    box-shadow: none;
    border: solid 1px var(--accent-color-2);
    background-color: transparent;
    color: var(--accent-color);
}

.form input:autofill,
.form input:autofill:focus {
    color: var(--accent-color);
    transition: background-color 5000s ease-in-out;
    -webkit-text-fill-color: var(--accent-color);
    font-family: var(--font-2);
}

.form input::placeholder,
.form textarea::placeholder {
    color: var(--accent-color);
    font-family: var(--font-2);
}

.form .form-select {
    color: var(--accent-color);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-check-xl" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/></svg>');
}

.form input.form-check-input {
    background-color: transparent;
    border: 1px solid gray;
}

.form input.form-check-input:checked {
    border: 1px solid blue;
    color: blue;
}

.form .submit_form {
    padding-inline: 2rem;
    padding-block: 0.7rem;
    text-decoration: none;
    transition: all 0.5s;
    background-color: var(--accent-color);
    color: white;
    border-radius: 5px;
    border: solid 1px var(--accent-color);
}

.submit_form:hover {
    background-color: transparent;
}

.submit_form-subscribe {
    padding-inline: 2rem;
    padding-block: 0.7rem;
    text-decoration: none;
    transition: all 0.5s;
    color: white;
    background-color: transparent;
    border-radius: 5px;
}

.submit_form-subscribe:hover {
    background-color: transparent;
    color: white;
    filter: none;
}

/* ---------------------------- */
/* Map Elements       */
/* ---------------------------- */
.maps {
    width: 100%;
    height: 480px;
    transition: filter 0.5s;
    display: block;
}


/* ---------------------------- */
/* Header and Navbar       */
/* ---------------------------- */
#header {
    transition: all 0.5s ease;
}

.logo-container {
    max-width: 180px;
}

.logo-partner {
    filter: brightness(200%) contrast(0%) saturate(0%) blur(0px) hue-rotate(0deg);
    transition-duration: 0.5s;
}

.logo-partner:hover {
    filter: none;
}

.navbar-nav .nav-link:focus {
    color: var(--accent-color);
    text-align: center;
}

.navbar-nav .nav-link.show {
    color: var(--accent-color);
}

.nav-link {
    border-bottom: 2px solid transparent;
    font-size: 1.1rem;
    font-family: var(--font-2);
    padding-block: 1.2rem;
    color: var(--accent-color);
    text-align: center;
}

.nav-link:hover {
    color: var(--accent-color-3);
    text-align: center;
}

.nav-link.active {
    color: var(--accent-color-3) !important;
    text-align: center;
}

.navbar-toggler {
    border: none;
    color: var(--accent-color-2);
}

.navbar-toggler:focus {
    box-shadow: none;
    background-color: transparent;
    color: var(--accent-color-2);
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    background-color: transparent;
    color: var(--accent-color);
    border: none;
    position: relative;
}

.nav-tabs .nav-link:hover {
    border: none;
    color: white;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border: none;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

.dropdown-menu {
    border-radius: 0;
    border: none;
    padding: 0;
    width: 200px;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    padding-block: 0.75rem;
    color: var(--accent-color);
    font-family: var(--font-1);
    font-size: 0.95rem;
    font-weight: 400;
    padding-inline: 0.75rem;
    text-align: center;
}

.dropdown-item.active {
    color: var(--accent-color-3);
    background-color: transparent;
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: white;
}

/* .dropdown-item:focus {
    color: var(--accent-color);
} */

/* ---------------------------- */
/* Section and Container       */
/* ---------------------------- */
.section {
    padding: 3em 2em 2em 2em;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.r-container {
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}
.r-container1{
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

/* ---------------------------- */
/* Background and Setting Color      */
/* ---------------------------- */
.bg-accent-primary {
    background-color: var(--primary);
}

.bg-accent-color {
    background-color: var(--accent-color);
}

.bg-accent-color-2 {
    background-color: var(--accent-color-2);
}

.bg-accent-color-3 {
    background-color: var(--accent-color-3);
}

.bg-accent-color-4 {
    background-color: var(--accent-color-4);
}

.bg-accent {
    background-color: var(--background-color);

}

.bg-text-color {
    background-color: var(--text-color);
}

.bg-text-color-2 {
    background-color: var(--text-color-2);
}

.bg-accent-color-hover:hover {
    background-color: var(--accent-color);
    color: white;
}

.bg-dark-transparent {
    background-color: #232323b7;
}

.accent-color {
    color: var(--accent-color);
}

.accent-color-2 {
    color: var(--accent-color-2);
}

.accent-color-3 {
    color: var(--accent-color-3);
}

.accent {
    color: var(--background-color);
}

.border-accent-2 {
    border-color: var(--accent-color-2) !important;
}

.border-testimonial {
    border-right: 5px solid var(--accent-color-2);
}

.border-bottom-hover:hover {
    border-bottom: 2px solid var(--accent-color);
}

.border-accent-color {
    border-color: var(--text-color);
}

.custom-border {
    border-width: 5px;
    border-style: solid;
    border-color: white;
    border-radius: 20px;
}

.outline {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--accent-color);
}

.text-gray {
    color: grey !important;
}

.text-accent {
    font-size: 18px;
    background: -webkit-linear-gradient(99.79deg, #2F4A9D 0%, #A502A8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------- */
/* Swiper Setting              */
/* ---------------------------- */
.swiperImage {
    overflow: visible;
}

.swiperTestimonials {
    overflow: visible;
}

.swiper-pagination {
    margin-block: 1rem;
    position: relative;
}

.swiper-slide {
    padding: 0.5rem;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: black;
}

/* ---------------------------- */
/* Buttons & Links              */
/* ---------------------------- */
button {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    text-decoration: none;
    transition: all 0.5s;
}

button:hover {
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: #002140;
}

a:hover{
   color:#0075DF ; 
}
.w-max-content {
    width: max-content;
}

.read-more {
    color: var(--accent-color);
    transition: all 0.5s;
}

.read-more:hover {
    color: var(--accent-color-3);
}

.btn {
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-2);

}

.btn-accent {
    background-color: var(--accent-color);
    color: white;
    transition: all 0.5s;
    border: 1px solid transparent;
}

.btn-accent:hover {
    background-color: var(--accent-color-2);
    border-color: white;
    color:#000;
    
}



.btn-accent-outline {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-accent-outline:hover {
    background-color: var(--accent-color);
    color: white;
}

.btn-white-accent {
    background-color: white;
    color: var(--accent-color);
    border: 3px solid transparent;
}


.btn-white-accent:hover {
    background-color: transparent;
    border-color: white;
    color: white;
}

.btn-white-outline {
    background-color: transparent;
    border-color: white;
    color: white;
    border-width: 3px;
}

.btn-white-outline-hover:hover {
    background-color: transparent;
    border-color: white;
    color: white;
}

.btn-white-outline:hover {
    background-color: white;
    color: var(--accent-color);
}

.card .link {
    color: var(--accent-color);
    transition: color 0.5s;
}

.card .link:hover {
    color: var(--primary);
}

.link.accent-color {
    color: var(--accent-color);
    transition: color 0.5s;
}

.link.accent-color:hover {
    color: var(--dark-bg);
}

.link {
    color: var(--accent-color);
}

.link:hover {
    color: var(--accent-color-3);
}

.link-white {
    color: white;
}

.link-white:hover {
    color: var(--accent-color);
}

/* ---------------------------- */
/* Overlay                      */
/* ---------------------------- */
.blog-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(179.87deg, rgba(21, 12, 28, 0) 0.12%, rgba(65, 66, 96, 0.86) 107.53%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.image-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(0deg, rgba(234, 245, 255, 0.95), rgba(234, 245, 255, 0.95));

}

.overlay {
    color: var(--accent-color-2);
    opacity: 0.3;
}

.bg-overlay {
    background: linear-gradient(0deg, rgba(0, 33, 64, 0.67), rgba(0, 33, 64, 0.67));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.bg-overlay-2 {
    background: linear-gradient(0deg, rgba(0, 33, 64, 0.5), rgba(0, 33, 64, 0.5));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.testimonial-overlay {
    background: linear-gradient(0deg, rgba(255, 239, 225, 0.96), rgba(255, 239, 225, 0.96));
    position: absolute;
    width: 75%;
    height: 100%;
    top: 0;
    right: 0;
}

.bg-accent-opacity {
    background: linear-gradient(0deg, rgba(43, 43, 43, 0.86), rgba(43, 43, 43, 0.86));
}

.linear-gradient {
    padding: 14px 42px;
    background-color: var(--accent-color-2);
    border-radius: 50px;
    width: max-content;
}

.cta-overlay {
    background: linear-gradient(90deg, #0B0C0E 0%, rgba(97, 59, 255, 0.3) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.video-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(4, 56, 63, 0.144) 0%, rgba(4, 56, 63, 0.72) 100%);
    opacity: 0.5;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* ---------------------------- */
/* Utility Classes              */
/* ---------------------------- */
.hover-transform:hover {
    transform: translateY(-10px);
}

.font-1 {
    font-family: var(--font-1);
}

.font-2 {
    font-family: var(--font-2);
}

.ls-2 {
    letter-spacing: 2px;
}

.fs-7 {
    font-size: 0.8rem !important;
}

.fs-very-large {
    font-size: 4.125rem;
}

.fw-black {
    font-weight: 900 !important;
}

.team-detail {
    background-color: var(--background-color);
    color: var(--accent-color);
    transition: all 0.5s;
}

.team-detail:hover {
    background-color: var(--accent-color);
    color: var(--primary);
}

.divider {
    display: flex;
    align-items: center;
}

.divider::after {
    display: block;
    content: "";
    border-bottom: 0;
    flex-grow: 1;
    border-top: 3px solid #8692af;
    max-width: 30px;
    min-width: 30px;
}


.divider-element {
    letter-spacing: 2px;
    flex-shrink: 0;
    flex-grow: 1;
    margin: 0;
    margin-left: 1rem;
    font-weight: 400;
}

.image-infinite-bg {
    height: 90vh;
}

.animation-bg {
    animation: background_animation 10s forwards;
}

.bg-attach-fixed {
    background-attachment: fixed;
}

.bg-attach-cover {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.social-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.character-img {
    position: relative;
    z-index: 2;
}

.w-70 {
    width: 70%;
}

.stock-img {
    position: relative;
    z-index: 20;
}

.customer-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 3rem;
    height: 3rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color-3);
    color: var(--text-color-2);
    border: 2px solid var(--accent-color-3);
    margin-left: -6px;
    overflow: hidden;
}

.testimonial-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 5rem;
    height: 5rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    margin-left: -6px;
    overflow: hidden;
}

.bg-box {
    bottom: 0;
    right: 0;
    height: 60%;
    width: 50%;
    border: solid 3px var(--accent-color-2);
}

.icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
}

.icon-box-2 {
    display: flex;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    border-radius: 50%;
    height: 4rem;
    padding: 1px;
    transition: all 0.5s;
}

.author-box {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 15rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -6px;
    overflow: hidden;
}

.post-button {
    background-color: transparent;
    color: var(--accent-color) !important;
    border: none !important;
}

.post-button:hover {
    background-color: transparent !important;
    color: var(--accent-color) !important;
    transform: scale(1.15);
}

.position-xl-absolute {
    position: absolute;
}

.w-60 {
    width: 60% !important;
}

.shadow-double {
    box-shadow: 40px -40px 0px -4px var(--accent-color), -54px 44px 0px -3px var(--text-color-2);
}

.shadow-single-left {
    box-shadow: -54px 44px 0px -3px var(--accent-color);
}

.shadow-single-right {
    box-shadow: 40px -40px 0px -4px var(--accent-color);
}

.shadow-accent-2 {
    -webkit-box-shadow: -90px -23px 0px 0px var(--accent-color);
    -moz-box-shadow: -90px -23px 0px 0px var(--accent-color);
    box-shadow: -90px -23px 0px 0px var(--accent-color);
}

.text-404 {
    font-size: 12rem;
    font-weight: 700;
}

.rounded-end {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.floating-image {
    position: absolute;
}


.floating-banner {
    position: absolute;
    width: 50%;
    padding-right: 5rem;
}

.floating-top {
    position: absolute;
    top: -1.5rem;
    left: -0.5rem;

}

.floating-top-1 {
    position: absolute;
    top: -1.5rem;
    left: -0.5rem;
}

.floating-bottom {
    position: absolute;
    top: -6rem;
    left: -5.5em;
}

.floating-bottom-1 {
    position: absolute;
    bottom: 5rem;
    right: 0;
    margin-right: -5rem;
}

.d-inline-block {
    display: inline-block;
}

.position-responsive {
    position: absolute;
}

.list .icon-box {
    width: 4.3rem;
    height: 4.3rem;
}

.list-flush-horizontal {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 1rem;
}

.list-flush-horizontal .list-item:first-child,
.list-flush-horizontal .list-item {
    border-right: 1px solid white;
}

.list-flush-horizontal .list-item:last-child {
    border-left: 1px solid white;
    border-right: none;
}

.list-flush-horizontal .list-item:nth-last-child(2) {
    border: none;
}

.list-group-item {
    background-color: transparent;
    border-radius: 10px;
}

.list-group .list-group-item .link {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: all 0.5s;
}

.list-group .list-group-item .link:hover {
    border-color: var(--accent-color) !important;
    color: white !important;
    background-color: var(--accent-color);
}

.list-group .list-group-item.active {
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.list-group .list-group-item.list-group-item-action:hover {
    background-color: var(--accent-color-2);
    color: white;
}

.list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 0.5rem;
}

.list .link {
    font-weight: 400;
    text-wrap: nowrap;
}

.list li {
    padding: 0;
    font-size: 16px;
    font-family: var(--font-2);
}

.list li .link {
    transition: all 0.5s;
    color: var(--text-color-2);
}

.list li i {
    transition: all 0.5s;
    color: var(--accent-color);
}

.list.text-black i {
    color: #131313;
}

.list li .link:hover,
.list li .link:hover i {
    color:  var(--accent-color-3);
}

.list li .link{
    color: #002140;
}
/* ---------------------------- */
/* Social and Contact Setting    */
/* ---------------------------- */
.customer-container {
    display: flex;
    flex-direction: row-reverse;
}

.customer-item:nth-child(1) {
    z-index: 6;
}

.customer-item:nth-child(2) {
    z-index: 5;
}

.customer-item:nth-child(3) {
    z-index: 4;
}

.customer-item:nth-child(4) {
    z-index: 3;
}

.subscribe-container {
    box-sizing: border-box;
    margin-bottom: -8em;
}

.contact-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 40px;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}


.social-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 2rem;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    border: 1px solid var(--primary);
    background-color: transparent;
}

.social-item-2 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 2rem;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background-color: transparent;
}

.social-item-3 {
    border-radius: 0;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 2rem;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
}

.social-container.accent .social-item {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.social-container.accent .social-item:hover {
    background-color: var(--accent-color);
    color: white;

}

.social-container.share .social-item {
    background-color: var(--accent-color);
    color: white;
}

.social-container.share .social-item:hover {
    background-color: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}


.social-container.team .social-item {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 16px;
}


.social-item:hover {
    background-color: var(--primary);
    color: var(--accent-color);
    border: solid 1px var(--primary);
}

.social-item-2:hover {
    background-color: var(--accent-color);
    color: var(--primary);
    border: solid 1px var(--primary);
}

.social-item-3:hover {
    background-color: transparent;
    color: var(--accent-color-2);
    border: solid 1px var(--accent-color-2);
}

.social-container .share-button {
    background-color: var(--accent-color-1);
    aspect-ratio: 1/1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.share-button:hover {
    background-color: var(--accent-color-2);
}

/* ---------------------------- */
/* Breadcrumb    */
/* ---------------------------- */
.breadcrumb {
    align-items: center;
    font-family: var(--font-2);
}

.breadcrumb .breadcrumb-item>a {
    color: var(--primary);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--primary);
    font-family: var(--font-2);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--primary);
}

/* ---------------------------- */
/* Specific Media Queries       */
/* ---------------------------- */
.video-e119 {
    width: 60%;
    margin-bottom: -3rem;
    margin-left: -3rem;
}

.ifr-video {
    aspect-ratio: 16/9;
    width: 100%;
}

.video-container {
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
    position: relative;
    border: 5px solid white;
    border-radius: 10px;
}

.video-iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-btn {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 4rem;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 2rem;
    color: white;
    border: none;
    opacity: 0.7;
}

.video-btn:hover {
    opacity: 1;
    color: white;
}

.request-loader {
    position: relative;
    height: 50px;
    border-radius: 50% !important;
    border: solid 1px var(--accent-color);
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: 25px;
    aspect-ratio: 1/1;
}

.request-loader.accent {
    position: relative;
    height: 60px;
    border-radius: 50% !important;
    border: solid 1px var(--primary);
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    font-size: 25px;
    aspect-ratio: 1/1;
}

.request-loader:hover {
    border: solid 2px var(--accent-color);
    color: var(--accent-color);
    background-color: transparent;
}

.request-loader.accent:hover {
    border: solid 2px var(--primary);
    color: var(--primary);
    background-color: transparent;
}

.request-loader.accent::after,
.request-loader.accent::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--primary);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}


/* ---------------------------- */
/* card Setting       */
/* ---------------------------- */
.card {
    border: none;
    border-radius: 10px;
    transition: all 0.5s;
    background-color: var(--primary);
}

.card-accent {
    color: var(--accent-color);
    position: relative;
    background-size: cover;
    background-position: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    border-image: linear-gradient(to left, #A502A8, #2F4A9D)1;
}

.card-service {
    color: var(--accent-color);
    position: relative;
    background-size: cover;
    background-position: center;
}

.card-service:hover {
    color: var(--text-color);
    border: none;
}

.background-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.card-service:hover .background-hover {
    opacity: 1;
    background: linear-gradient(118.48deg, rgba(47, 74, 157, 0.4) 0%, rgba(165, 2, 168, 0.4) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
    border-radius: 10px;

}

.card-service.img-hover:hover {
    background-image: var(--url-image);
}

.image-hover {
    opacity: 0;
    position: absolute;
}

.card-service:hover .image-hover {
    opacity: 100%;
}


.card-testimonial {
    border: none;
    border-radius: 20px;
    transition: all 0.5s;
    background-color: var(--accent-color-3);

}

.card .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color);
}

.card .icon-box.accent-color-2 {
    color: var(--accent-color-2);
    font-size: 4rem;
}

.card:hover .icon-box.accent-color-2 {
    color: var(--accent-color-2);
}

.card:hover {
    transform: translateY(-5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card-testimonial:hover {
    transform: translateY(-20px);
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card.card-pricing-hover {
    background-color: transparent;
    font-family: var(--font-2);
    color: var(--text-color);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.card.card-pricing-hover i {
    color: var(--accent-color-2);
}


.card.card-pricing-hover:hover {
    background-color: transparent;
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    color: var(--accent-color);
    transform: scale(1.05);
}

.card-pricing-hover-middle {
    transform: scale(1.04);
    flex: 1.00;
    background-color: var(--accent-color);
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    color: white;
}


.card.card-pricing-hover:hover .btn-accent {
    background-color: var(--accent-color-2);
    border-color: var(--accent-color-2);
    color: white;
}

.card:hover .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color-2);

}

.card.card-outline-hover {
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
    color: var(--accent-color);
}

.card.blog {
    background-color: var(--background-color);
}

.card.blog:hover {
    border: solid 1px var(--accent-color-2);
    border-radius: 10px;
}

.card.card-outline-hover:hover {
    border: 1px solid var(--accent-color);
    color: var(--text-color);

}

.card-overlay .card-body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(4, 56, 63, 0) 0%, rgba(4, 56, 63, 0.72) 100%);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s;
}

.card-overlay:hover .card-body {
    opacity: 0;
    transform: scaleY(1);
}

.card:hover .icon-box.bg-accent-color {
    background-color: white;
    color: var(--accent-color);
}

.card:hover p {
    transition: all 0.5s;
}

.card .link {
    color: var(--accent-color);
}

.card:hover .link {
    color: white;
}

.card.with-border-bottom {
    border-bottom: 5px solid var(--accent-color) !important;
}

.testimonial-container {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    /* box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1); */
}

.testimonial-container:hover {
    box-shadow: 0px 0px 0px 1px var(--accent-color);
    transition: all 0.5s;
}

.services-container {
    background-color: transparent;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
}

/* ---------------------------- */
/* Progress and Rating       */
/* ---------------------------- */
.r-progress {
    --value: 17;
    --progress-color: var(--accent-color);
    --secondary-progress-color: var(--accent-color-3);
    --animation-duration: 2000;
}

.r-progress-bar {
    position: relative;
    height: 12px;
    background-color: var(--secondary-progress-color);
    display: flex;
    border-radius: 10px;
    /* overflow: hidden; */
}

.r-progress-bar .progress-value {
    height: 100%;
    width: calc(var(--progress) * 1%);
    background-color: var(--progress-color);
    position: relative;
    border-radius: 10px;
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    color: black;
}

.r-progress-bar.percentage-label::after {
    counter-reset: percentage var(--progress);
    content: counter(percentage) '%';
    display: block;
    position: absolute;
    left: calc((var(--progress) * 1%));
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    font-size: 18px;
    line-height: 1.2;
    /* font-weight: 700; */
    font-family: var(--font-1);
    bottom: calc(100% + 0.5rem);
}

.rating {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.rating li {
    color: #f1c644;
}

.rating li.inactive {
    color: #d9d9d9;
}

.glass-effect {
    background: #a55950d5;
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

/* ---------------------------- */
/* Accordion                    */
/* ---------------------------- */
.accordion .accordion-item {
    background-color: transparent;
    border: none;
    color: var(--text-color-2);
    outline: none;
    border-radius: 20px;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion .accordion-button {
    background-color: var(--primary);
    border: none;
    color: var(--text-color-2);
    outline: none;
    border-radius: 20px !important;
    font-weight: 500;
    font-family: var(--font-1);
    font-size: 18px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding-block: 1.2rem;
    color: var(--text-color);
}

.accordion .accordion-button.accent {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}


.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23002140" class="bi bi-chevron-down" viewBox="0 0 16 16"><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-.708"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23002140" class="bi bi-chevron-down" viewBox="0 0 16 16"><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-.708"/></svg>');
}

.accordion .accordion-button:not(.collapsed) {
    color: var(--text-color);
    font-weight: 500;
    background-color: var(--primary);
    border: none;
    border: none;
    border-left: solid 5px var(--accent-color);
    color: var(--text-color);
    outline: none;
    border-radius: 20px !important;
}



@media only screen and (max-width:993px) {

    /* ---------------------------- */
    /* Typography                   */
    /* ---------------------------- */
    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 28px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 14px;
    }

    span,
    p,
    button,
    a {
        font-size: 16px;
    }

    /* ---------------------------- */
    /* Button and Links Setting     */
    /* ---------------------------- */
    .btn {
        font-size: 13px;
        width: 100%;
    }

    /* ---------------------------- */
    /* Header and Navigation Setting  */
    /* ---------------------------- */
    .logo-container {
        max-width: 100px;
    }

    .nav-link {
        padding-block: 0.2rem;
        text-align: center;
    }

    #header {
        background: #a55950d5;
        backdrop-filter: blur(11px);
        -webkit-backdrop-filter: blur(11px);
    }

    /* ---------------------------- */
    /* Utility Classes              */
    /* ---------------------------- */
    .w-max-content {
        width: 100%;
    }

    .section {
        padding: 4em 2em 4em 2em;
    }

    .divider {
        width: 330px;
    }

    .fs-very-large {
        font-size: 3.125rem;
    }

    .text-404 {
        font-size: 8rem;
        font-weight: 700;
    }

    .image-absolute-1 {
        left: 45%;
        top: 35%;
    }

    .image-infinite-bg {
        background-size: cover !important;
    }


    .border-custom {
        border-width: 0px 0px 1px 0px;
    }

    .outer-margin {
        margin-right: 0;
    }

    .banner-image {
        margin: 0;
        transform: none;
    }

    .testimonial-img {
        margin: 0;
        margin-bottom: 1rem;
    }

    .dropdown-menu {
        width: 100%;
        box-shadow: none;
    }

    .video-e119 {
        width: 85%;
        margin-left: -1.5rem;
    }

    .dropdown-item {
        padding-block: 0.35rem;
    }

    .floating-image {
        position: inherit;
    }

    .floating-price {
        top: -2rem;
        right: -4.8rem;
    }

    .floating-banner {
        position: inherit;
        padding-right: 0;
        margin-bottom: 2rem;
        width: 100%;
    }

    .floating-top {
        position: absolute;
        top: -0.6rem;
        left: 0;

    }

    .floating-top-1 {
        position: absolute;
        top: -0.6rem;
        left: -0.2rem;
    }

    .floating-bottom {
        position: initial;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .floating-bottom-1 {
        position: initial;
        bottom: 0;
        right: 0;
        left: 0;
        margin-right: 0;
    }

    .border-testimonial {
        border-right: none;
    }

    .service-container {
        background-color: transparent;
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
        height: 100%;
    }

    .appointment-box {
        top: -2rem;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8rem;
    }

    .w-md-70 {
        width: 70%;
    }

    .w-md-60 {
        width: 60%;
    }

    .position-responsive {
        position: relative;
    }



    .form-appointment-container {
        position: relative;
        transform: translateY(0);
    }

    .list-flush-horizontal {
        flex-direction: column;
    }

    .list-flush-horizontal .list-item:first-child,
    .list-flush-horizontal .list-item {
        border-right: none;
        border-bottom: 1px solid white;
    }

    .list-flush-horizontal .list-item:last-child {
        border-left: none;
        border-bottom: none;
        border-top: 1px solid white;
    }

    .position-xl-absolute {
        position: static;
    }

    .banner-heading {
        font-size: 2.5rem;
    }


}


.zoom-icon {
    transition: transform 0.3s ease;
  }
  
  .zoom-icon:hover {
    transform: scale(1.5); /* Zoom-in effect */
  }
  
  .zoom-icon:active {
    transform: scale(1); /* Zoom-out effect when clicked */
  }
  
  /* a:hover{
    color: #C4C4C4;
    text-decoration: underline;
  } */


/* General Section Styles */
.about-us {
    padding: 60px 0;
    background-color: #f4f9fc; /* Light Blue Background */
    color: #003366; /* Dark Blue Text */
  }
  
  .about-us h2 {
    font-size: 2.5rem;
    color: #0056b3; /* Blue color for the heading */
    margin-bottom: 20px;
  }
  
  .about-us p {
    font-size: 1rem;
    color: #002140; /* Dark text color */
    margin-bottom: 30px;
  }
  
  /* Button Styles with Hover Animation */
  .btn {
    padding: 12px 25px;
    font-size: 1rem;
    background-color: #0056b3; /* Blue button */
    color: white;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for all changes */
  }
  
  .btn-primary {
    background-color: #0066cc;
  }
  
  .btn-primary:hover {
    background-color: #004c99; /* Darker Blue on Hover */
    transform: scale(1.1); /* Enlarge the button slightly */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
  }
  
  /* Right Image Animation */
  
.animated-image {
    width: 100%;
    max-width: 570px; /* Limit max width for large screens */
    height: 384px; /* Maintain aspect ratio */
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    opacity: 0;
    animation: scaleFadeIn 1s forwards; /* Apply new animation */
  }
  
  /* New Unique Animation */
  @keyframes scaleFadeIn {
    0% {
      transform: scale(0.8); /* Start slightly smaller */
      opacity: 0; /* Start fully transparent */
    }
    50% {
      transform: scale(1.05); /* Slightly enlarge the image at halfway */
      opacity: 0.5; /* Fade in partially */
    }
    100% {
      transform: scale(1); /* Scale to original size */
      opacity: 1; /* Fully opaque */
    }
  }
  
  
  /* Responsiveness */
  @media (max-width: 768px) {
    .about-us h2 {
      font-size: 2rem;
    }
  
    .about-us p {
      font-size: 1rem;
    }
  
    .about-us .btn {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 576px) {
    .about-us h2 {
      font-size: 1.7rem;
    }
  
    .about-us p {
      font-size: 0.9rem;
    }
  
    .about-us .btn {
      font-size: 0.8rem;
      padding: 8px 16px;
    }
  }
  
  /* .w-max-content a:hover{
    background-color: white;
  } */


  /* General Card Styles */
.card {
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 8px 8px 8px 8px rgba(0, 0, 0, 0.1);
}

.card h5, .card p, .card .icon {
    transition: color 0.3s ease;
}


.card-profitability:hover {
    background-color:#f0f0f0; 
    color: #000;
}

.card-profitability:hover h5,
.card-profitability:hover p,
.card-profitability:hover .icon {
    color: #000;
}


.card-cost-optimization:hover {
    background-color:#f0f0f0; 
    color: #000;
}

.card-cost-optimization:hover h5,
.card-cost-optimization:hover p,
.card-cost-optimization:hover .icon {
    color: #000;
}

/* Cash Flow Card Hover */
.card-cash-flow:hover {
    background-color:#f0f0f0; 
    color: #000;
}

.card-cash-flow:hover h5,
.card-cash-flow:hover p,
.card-cash-flow:hover .icon {
    color: #000;
}

/* Risk Analysis Card Hover */
.card-risk-analysis:hover {
    background-color:#f0f0f0; 
    color: #000;
}

.card-risk-analysis:hover h5,
.card-risk-analysis:hover p,
.card-risk-analysis:hover .icon {
    color: #000;
}

/* Main Container */
.custom-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Styling */
.custom-section {
    margin-bottom: 50px;
}

/* Default Styles for Images */
.custom-left-image img,
.custom-right-image img {
    width: 100%; /* Ensure the image width adjusts responsively */
    max-width: 572px; /* Set the maximum width */
    height: 300px; /* Explicitly set the height for large screens */
    border-radius: 8px; /* Add rounded corners */
    object-fit: cover; /* Ensure the image is cropped properly to fit */
    max-height: 100%; /* Prevent image overflow */
    display: block; /* Prevent unexpected inline element behavior */
    margin: 0 auto; /* Center the image within its container */
}

/* For small screens (mobile) */
@media (max-width: 767px) {
    .custom-left-image img,
    .custom-right-image img {
        width: 90%; /* Reduce the image width on small screens */
        height: auto; /* Allow height to scale automatically */
        max-height: 250px; /* Set a cap on the height */
        margin: 0 auto; /* Ensure it's centered */
    }
}

/* For tablets and medium screens (between 768px and 1113px) */
@media (min-width: 768px) and (max-width: 1113px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch; /
    }

    .custom-left-image,
    .custom-right-image {
        width: 50%; 
        padding: 0 15px; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-left-image img,
    .custom-right-image img {
        width: 100%;
        height: 100%; 
        object-fit: cover; 
    }

    .custom-left-content,
    .custom-right-content {
        width: 50%; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 15px; 
    }

    .custom-left-content p,
    .custom-right-content p {
        margin-bottom: 15px; 
    }
}




/* For large screens (desktops) */
@media (min-width: 1200px) {
    .custom-left-image img,
    .custom-right-image img {
        width: 100%; /* Full-width on large screens */
        max-width: 572px; /* Limit the width to 572px */
        height: 300px; /* Keep the explicit height */
    }
}


/* Heading and Text Styling */
.custom-heading {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

.custom-text {
    font-size: 16px;
    color:  #002140;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Lists Styling */
.custom-left-list ul,
.custom-right-list ul {
    padding-left: 20px;
    list-style-type: disc; /* Bulleted list style */
    text-align: left;
    
}

.custom-left-list li,
.custom-right-list li {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
    color:  #002140;
}

/* Section Layout */
.custom-left-content,
.custom-right-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.custom-left-content {
    padding-right: 20px;
}

.custom-right-content {
    padding-left: 20px;
}

/* Full-Width Section (last section with a centered topic and list) */
.custom-full-section {
    text-align: center;
    margin-bottom: 40px;
}

.custom-full-section .custom-heading {
    font-size: 28px;
    margin-bottom: 20px;
}

.custom-full-section .custom-text {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Two Column List Layout (for left and right columns) */
.custom-left-column,
.custom-right-column {
    display: inline-block;
    width: 45%; /* Make both columns take equal width */
    vertical-align: top;
    margin: 10px;
}

.custom-left-column ul,
.custom-right-column ul {
    padding-left: 20px;
    list-style-type: disc;
}

.custom-left-column li,
.custom-right-column li {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
    /* For screens smaller than 992px (tablets) */
    .custom-left-column,
    .custom-right-column {
        width: 100%; /* Make both columns full width */
        margin: 10px 0;
    }

    .custom-full-section .custom-heading {
        font-size: 24px; /* Adjust the heading font size */
    }

    .custom-full-section .custom-text {
        font-size: 16px; /* Adjust the text font size */
    }

    .custom-left-image img,
    .custom-right-image img {
        height: 250px; /* Adjust image height for medium screens */
    }
}

@media (max-width: 768px) {
    /* For screens smaller than 768px (phones) */
    .custom-left-image img,
    .custom-right-image img {
        height: 200px; /* Adjust height for smaller screens */
        width: auto; /* Maintain aspect ratio */
    }

    .custom-heading {
        font-size: 20px; /* Adjust the heading font size */
    }

    .custom-text {
        font-size: 16px; /* Adjust text font size */
    }

    .custom-left-content,
    .custom-right-content {
        align-items: center; /* Center content on smaller screens */
        text-align: center;
    }

    .custom-left-image,
    .custom-right-image {
        margin-bottom: 20px; /* Add space between image and content */
    }
}

@media (max-width: 576px) {
    /* For screens smaller than 576px (very small devices) */
    .custom-container {
        padding: 20px; /* Reduce padding on small screens */
    }

    .custom-heading {
        font-size: 18px; /* Adjust heading size */
    }

    .custom-text {
        font-size: 16px; /* Adjust text size */
    }

    .custom-left-image img,
    .custom-right-image img {
        height: 150px; /* Further reduce height for very small screens */
        width: auto; /* Maintain aspect ratio */
    }
}

.address{
    color: #0075DF;
}

.alert-success{
    color: #133c62; 
    background-color: #d1e7dd00;
    border-color: #badbcc;
    margin-top: 15px;
    padding: 15px;
    text-align: center;
    
  }

.iti{
    width: 100%;
}
.captcha-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    margin-bottom: 20px;
}

.captcha-display {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    height: 3rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f4f4f4;
    letter-spacing: 4px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 0;
}

.refresh-btn {
    width: 3rem;
    height: 3rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 0;
}

.refresh-btn:hover {
    background-color: #0056b3;
}

.refresh-btn i {
    font-size: 1.5rem;
}

#captcha-input {
    height: 3rem;
    font-size: 1.2rem;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 0;
}

/* Mobile View - Stack One by One */
@media (max-width: 768px) {
    .captcha-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .captcha-display,
    #captcha-input {
        width: 90%;
        max-width: 100%;
        font-size: 1.6rem;
        height: 2.8rem;
    }

    .refresh-btn {
        width: 3rem;
        height: 3rem;
    }
}


.service-link{
    padding-left: 70px;
}


/* Default Padding for Larger Screens */
.service-link {
    padding-left: 70px;
}

/* Adjust Padding for Mobile Screens */
@media (max-width: 768px) {
    .service-link {
        padding-left: 15px; /* Reduced padding for smaller screens */
    }
}
.white{
    color: white;
}

.underline{
    color: #0075DF;
    text-decoration: underline;
}
.underline:hover{
    color: #002140;
}

/* Adjust form container padding for mobile view */
@media (max-width: 768px) {
    .section {
        padding: 10px; /* Adjust padding on mobile devices */
    }

    /* Remove padding p-5 on mobile */
    .r-container {
        padding: 0; /* Remove extra padding for mobile */
    }

    /* Ensure CAPTCHA section elements are centered */
    .row.d-flex.align-items-center {
        justify-content: center; /* Center the content */
        gap: 10px; /* Add space between CAPTCHA components */
    }

    .captcha-display {
        font-size: 1.5rem;
        text-align: center;
        width: 100%; /* Ensure text fits */
    }

    .refresh-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* Full width for refresh button */
        max-width: 50px; /* Limit button width */
        margin: 0 auto; /* Center the button */
        padding: 5px;
    }

    #captcha-input {
        width: 100%; /* Ensure input takes available width */
        max-width: 100%; /* Avoid unnecessary constraints */
    }

    .form-control {
        height: 40px; /* Reduce input height for mobile */
    }
}

/* For very small screens (e.g., under 576px) */
@media (max-width: 576px) {
    .form-control {
        height: 38px; /* Further reduce input height */
    }
    .refresh-btn {
        max-width: 40px; /* Make refresh button smaller */
    }
}

/* Make sure select inputs have same style and align properly */
.form-control {
    height: 50px; /* Standard height for inputs */
    padding: 0 1.5rem; /* Consistent padding */
    text-align: left; /* Center text inside input */
}

/* For the 'Select' dropdowns */
select.form-control {
    text-align-last: left; /* Ensures the placeholder text is centered */
}

/* Make sure that on mobile or small screens, the padding and alignment is consistent */
@media (max-width: 768px) {
    .form-control {
        padding-left: 1.5rem; /* Ensure padding is consistent */
        padding-right: 1.5rem;
    }
}
/* Set a consistent height for the textarea */
textarea.form-control {
    height: 150px; /* Adjust the height as per your design */
    padding: 1rem; /* Padding inside the textarea */
    resize: vertical; /* Allow the user to resize vertically if needed */
}

/* For mobile view or smaller screens */
@media (max-width: 768px) {
    textarea.form-control {
        height: 120px; /* Adjust height for smaller screens */
    }
}

.contact-us{
    background-color:#0075DF;
    color: white;
}
.contact-us:hover{
    background-color: white;
    color: #000;
}
@media (min-width: 1200px) {
    .case {
      height: 600px;
      
    }
}
@media (min-width: 1300px) {
    .case {
      height: 700px;
    }
}
@media(min-width:1200px){
    .whynangia{
        height: 530px;
    }
}
@media(min-width:400px){
    .us{
        width: 200px;
        text-align: center;
    
       
    }
}

/* Style for the Scroll to Top Button */
.scroll-btn {
    position: fixed;
    right: 20px; 
    bottom: 20px; 
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%; 
    font-size: 24px;
    width: 50px;
    height: 50px;
    padding: 10px;
    display: none; 
    text-align: center;
    line-height: 30px; 
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensures the button stays on top of other elements */
}


/* Hover effect for the button */
.scroll-btn:hover {
    background-color: #0056b3;
    color: white;
}

@media(min-width:400px){
    .width{
        width: 300px;
    }
}
@media(min-width:1200px){
    .width{
        width: 335px;
    }
}

@media(min-width:1900px){
    .animated-image{
        height: 363px;
        
    }
}

.fa-solid{
    margin-left: 10px;
}

@media(min-width:400px){
    .btn{
        width: 205px;
        
    }
.app{
    width: 200px;
}


}



.contact-item1 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 30px;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.gap-4 {
    gap: 0 !important;
}
.my-5 {
    margin-top: 0 !important;
}

@media(min-width:400px){
   .font{
       margin-top: 30px;
        
    }
}


@media (min-width: 300px) and (max-width: 700px) {
    .topdiv {
        display: none;
    }
}


    .experience{
        margin-right: 0px !important;
    }

    .icon1{
        margin-bottom: 25px;
   
    }
    .icon2{
        margin-bottom: 60px;
    }
   

    
@media (min-width: 300px) and (max-width: 700px) {
    .icon2 {
       margin-bottom: 90px;
    }
}