:root {
    --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --heading-font: "Roboto", sans-serif;
    --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
    /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
    --background-color: #ffffff;

    /* Default Color - This is the default color used for the majority of the text content. */
    --default-color: #364d59;

    /* Heading Color - This color is used for titles, headings and secondary elements. */
    --heading-color: #52565e;

    /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
    --accent-color: #feb900;

    /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
    --contrast-color: #212529;
}

/* Nav Menu Colors */
:root {
    /* Nav Color - This is the default color of the main navmenu links. */
    --nav-color: #212529;

    /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
    --nav-hover-color: #212529;

    /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
    --nav-dropdown-background-color: #ffffff;

    /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-color: #212529;

    /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
    --nav-dropdown-hover-color: #feb900;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    --background-color: #ffffff;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: #ffffff;
    transition: all 0.5s;
    z-index: 997;
}

.header .logo img {
    max-height: 32px;
    margin-right: 8px;
}

.header .logo h1 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
    color: var(--heading-color);
}

.header .logo span {
    font-size: 24px;
    padding-left: 1px;
    font-family: var(--heading-font);
    color: var(--color-primary);
}

.scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
    --background-color: #ffffff;
    --heading-color: #3c3c3c;
    --nav-color: #3c3c3c;
    --nav-hover-color: #3c3c3c;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu>ul>li {
        white-space: nowrap;
        padding: 15px 14px;
    }

    .navmenu>ul>li:last-child {
        padding-right: 0;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        font-size: 14px;
        padding: 0 2px;
        font-family: var(--nav-font);
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
        text-transform: uppercase;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu>ul>li>a:before {
        content: "";
        position: absolute;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--accent-color);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
    }

    .navmenu a:hover:before,
    .navmenu li:hover>a:before,
    .navmenu .active:before {
        visibility: visible;
        width: 100%;
    }

    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-color);
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        font-weight: 400;
        color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover>ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-dropdown-background-color);
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(in srgb,
                var(--accent-color),
                transparent 90%);
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--nav-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--nav-color);
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown>.dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu>ul {
        display: block;
    }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
    --background-color: #000000;
    --heading-color: white;
    --default-color: white;
    color: var(--default-color);
    background-color: var(--background-color);
    background: url("/blogimages/b-4.jpg") top center no-repeat;
    background-size: cover;
    font-size: 14px;
    padding-bottom: 50px;
    position: relative;
}

.footer .container {
    position: relative;
}

.footer:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 20%);
    position: absolute;
    inset: 0;
}

.footer .footer-top {
    padding-top: 50px;
}

.footer .footer-about .logo {
    line-height: 1;
    margin-bottom: 25px;
}

.footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px;
}

.footer .footer-about .logo span {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

.footer .footer-about p {
    font-size: 14px;
    font-family: var(--heading-font);
}

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-right: 10px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.footer h4 {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-bottom: 12px;
}

.footer .footer-links {
    margin-bottom: 30px;
}

.footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-links ul i {
    padding-right: 2px;
    font-size: 12px;
    line-height: 0;
}

.footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.footer .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-links ul a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    display: inline-block;
    line-height: 1;
}

.footer .footer-links ul a:hover {
    color: var(--accent-color);
}

.footer .footer-contact p {
    margin-bottom: 5px;
}

.footer .copyright {
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
    margin-bottom: 0;
}

.footer .credits {
    margin-top: 8px;
    font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #ffffff;
    border-color: var(--accent-color) transparent var(--accent-color) transparent;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.whatsapp-position {
    position: fixed;
    right: 15px;
    bottom: 25px;
    z-index: 99999;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    width: 48px;
    height: 48px;
    transition: background-color 0.3s ease;
}

.fixed-icon {
    visibility: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffc107;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    width: 48px;
    height: 48px;
    transition: background-color 0.3s ease;
}

.fixed-icon:hover {
    color: white;
}

.whatsapp:hover {
    background-color: #128c7e;
}

.wicon {
    width: 24px;
    height: 24px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 78px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 78px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    --background-color: #000000;
    --heading-color: var(--contrast-color);
    --default-color: var(--contrast-color);
    color: var(--default-color);
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 0 60px 0;
    text-align: center;
    position: relative;
}

.page-title:before {
    content: "";
    background-color: color-mix(in srgb,
            var(--background-color),
            transparent 40%);
    position: absolute;
    inset: 0;
}

.page-title h1 {
    font-size: 56px;
    font-weight: 500;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--default-color);
    background-color: var(--background-color);
    scroll-margin-top: 92px;
    overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    position: relative;
}

.section-title h2:before,
.section-title h2:after {
    content: "";
    width: 50px;
    height: 2px;
    background: var(--accent-color);
    display: inline-block;
}

.section-title h2:before {
    margin: 0 15px 10px 0;
}

.section-title h2:after {
    margin: 0 0 10px 15px;
}

.section-title p {
    margin-bottom: 0;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin: 30px 0;
}

@media (min-width: 991px) {
    .about .inner-title {
        max-width: 65%;
        margin: 0 0 80px 0;
    }
}

.about .our-story {
    padding: 40px;
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
    .about .our-story {
        padding-right: 35%;
    }
}

.about .our-story h4 {
    text-transform: uppercase;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.about .our-story h3 {
    font-size: 2.25rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .our-story p:last-child {
    margin-bottom: 0;
}

.about ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.about ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.about ul i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    line-height: 1.2;
    color: var(--accent-color);
}

.about .watch-video i {
    font-size: 2rem;
    transition: 0.3s;
    color: var(--accent-color);
}

.about .watch-video a {
    font-weight: 600;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-left: 8px;
    transition: 0.3s;
}

.about .watch-video:hover a {
    color: var(--accent-color);
}

.about .about-img {
    min-height: 400px;
    position: relative;
}

@media (min-width: 992px) {
    .about .about-img {
        position: absolute;
        top: 0;
        right: 0;
        min-height: 600px;
    }
}

.about .about-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item {
    box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
    padding: 30px;
}

.stats-counter .stats-item i {
    color: var(--accent-color);
    font-size: 42px;
    line-height: 0;
    margin-right: 20px;
}

.stats-counter .stats-item span {
    color: var(--heading-color);
    font-size: 36px;
    display: block;
    font-weight: 600;
}

.stats-counter .stats-item p {
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-size: 16px;
}

/*--------------------------------------------------------------
# Alt Services 2 Section
--------------------------------------------------------------*/
.alt-services-2 .features-image {
    position: relative;
    min-height: 400px;
}

.alt-services-2 .features-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.alt-services-2 h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.alt-services-2 .icon-box {
    margin-top: 30px;
}

.alt-services-2 .icon-box i {
    color: var(--accent-color);
    margin-right: 15px;
    font-size: 24px;
    line-height: 1.2;
}

.alt-services-2 .icon-box h4 {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
}

.alt-services-2 .icon-box p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
    position: relative;
}

.team .member .member-img {
    margin: 0 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

@media (max-width: 1024px) {
    .team .member .member-img {
        margin: 0 60px;
    }
}

.team .member .member-img img {
    position: relative;
    z-index: 1;
}

.team .member .member-img .social {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding-bottom: 20px;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}

.team .member .member-img .social a {
    transition: 0.3s;
    color: var(--contrast-color);
    font-size: 20px;
    margin: 0 8px;
}

.team .member .member-img .social a:hover {
    color: var(--accent-color);
}

.team .member .member-info {
    margin-top: 30px;
}

.team .member .member-info h4 {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 18px;
}

.team .member .member-info span {
    font-style: italic;
    display: block;
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 10px;
}

.team .member .member-info p {
    margin-bottom: 0;
    font-size: 14px;
}

.team .member:hover .member-img .social {
    padding-bottom: 0;
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards h3 {
    font-size: 20px;
    font-weight: 700;
}

.features-cards p {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features-cards ul li {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-top: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.features-cards ul li i {
    font-size: 16px;
    color: var(--accent-color);
    margin-right: 6px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
    padding: 10px 30px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 20px;
}

.service-details .services-list a {
    display: block;
    line-height: 1;
    padding: 8px 0 8px 15px;
    border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
    margin: 20px 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
}

.service-details .services-list a.active {
    color: var(--heading-color);
    font-weight: 700;
    border-color: var(--accent-color);
}

.service-details .services-list a:hover {
    border-color: var(--accent-color);
}

.service-details .services-img {
    margin-bottom: 20px;
}

.service-details h3 {
    font-size: 26px;
    font-weight: 700;
}

.service-details h4 {
    font-size: 20px;
    font-weight: 700;
}

.service-details p {
    font-size: 15px;
}

.service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}