/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

: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: "Montserrat", sans-serif;
    --nav-font: "Montserrat", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #2a7ab0; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #032e4a; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #032e4a; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #000000; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #212529; /* The default color of the main navmenu links */
    --nav-hover-color: #2a7ab0; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #2a7ab0; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f9f9f9;
    --surface-color: #ffffff;
}

.default-background {
    background-color: #2a7ab0 !important;
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    overflow-x: hidden;
}

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);
}

.content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }

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

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(
        var(--accent-color) 50%,
        color-mix(in srgb, var(--accent-color), transparent 75%) 52%
    );
    border-radius: 50%;
    display: block;
    position: relative;
    overflow: hidden;
}

.pulsating-play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
    animation: pulsate-play-btn 2s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    animation: none;
    border-radius: 0;
}

.pulsating-play-btn:hover:after {
    border-left: 15px solid var(--accent-color);
    transform: scale(20);
}

@keyframes pulsate-play-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    color: var(--default-color);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.7) 40%,
        rgba(255, 255, 255, 0.7) 60%,
        rgba(255, 255, 255, 0.7) 100%
    );
    padding: 0;
    transition: all 0.5s;
    z-index: 997;
    margin-bottom: -100px;
}

.header .logo {
    line-height: 1;
}

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

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

.scrolled .header {
    box-shadow: 0px 0 18px
        color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@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 a,
    .navmenu a:focus {
        color: var(--accent-color);
        padding: 0 15px;
        font-size: 16px;
        font-family: var(--nav-font);
        font-weight: 900;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        text-shadow: 0 0 1px rgba(255, 255, 255, 1);
    }

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

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

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-hover-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
            color-mix(in srgb, var(--default-color), transparent 85%);
    }

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

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        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;
    }
}

/* Navmenu - Mobile */
@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;
        list-style: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px
            color-mix(in srgb, var(--default-color), transparent 90%);
    }

    .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(--contrast-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(--contrast-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);
        border: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        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 {
    color: var(--background-color);
    background-color: var(--default-color);
    font-size: 14px;
    position: relative;
}

.footer .footer-top {
    background-color: color-mix(in srgb, var(--default-color), white 5%);
    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(--background-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 h4 {
    color: var(--background-color);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.footer h4::after {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--background-color);
    bottom: 0;
    left: 0;
}

.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(--background-color), transparent 30%);
    display: inline-block;
    line-height: 1;
}

.footer .footer-links ul a:hover {
    color: var(--background-color);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

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

.footer .copyright {
    padding: 30px 0;
}

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

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

.footer .social-links a {
    font-size: 18px;
    display: inline-block;
    background: color-mix(in srgb, var(--background-color), transparent 75%);
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 4px;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    color: var(--default-color);
    background: var(--background-color);
    text-decoration: none;
}

.creatu-class {
    color: rgba(255, 255, 255, 0.5);
}
.creatu-class:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
# 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);
    }
}

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

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

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

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

/*--------------------------------------------------------------
# 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 {
    color: var(--default-color);
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 0 80px 0;
    text-align: center;
    position: relative;
}

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

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--background-color);
}

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

.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 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--heading-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 100px;
    overflow: clip;
}

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 66px;
    }
}

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

.section-title h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 15px;
}

.section-title p {
    margin-bottom: 0;
    font-family: var(--heading-font);
    font-size: 32px;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    padding: 0;
    overflow: hidden;
}

.hero .carousel {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
}

.hero .carousel-item {
    position: relative;
    width: 100%;
    height: 100vh;
}

.hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.hero .carousel-container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 15px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.hero .carousel-container h2 {
    color: #fff;
    margin-bottom: 30px;
    font-size: 48px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .hero .carousel-container h2 {
        font-size: 36px;
    }
}

.hero p {
    animation: fadeInDown 1s both 0.2s;
    color: var(--background-color);
}

@media (min-width: 1024px) {
    .hero h2,
    .hero p {
        max-width: 60%;
    }
}

.hero .btn-get-started {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 32px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px;
    animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
    width: 10%;
    transition: 0.3s;
    opacity: 0.5;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
    opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
    opacity: 0.9;
}

@media (min-width: 1024px) {
    .hero .carousel-control-prev,
    .hero .carousel-control-next {
        width: 5%;
    }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
    background: none;
    font-size: 32px;
    line-height: 1;
}

.hero .carousel-indicators {
    list-style: none;
}

.hero .carousel-indicators li {
    cursor: pointer;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .section-title h2 {
    color: var(--accent-color);
    font-size: 20px;
}

.services .content .service-item {
    background-color: var(--surface-color);
    padding: 20px 30px;
    border-top: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
    border-left: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
    position: relative;
    height: 100%;
}

.services .content .project-item {
    overflow: hidden;
    transition: color 0.5s ease-in-out;
}

.services .content .project-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
    z-index: 0;
}

.services .content .project-item:hover::before {
    transform: translateY(0%);
}

.services .content .service-item .number {
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: 400;
    color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.services .content .service-item .service-item-icon {
    position: relative;
    margin-bottom: 20px;
    color: var(--default-color);
}

.services .content .service-item .service-item-icon img {
    width: 50px;
}

.services .content .service-item .service-item-icon:before {
    position: absolute;
    content: "";
    transform: rotate(45deg);
    z-index: -1;
    left: -20px;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right: 40px solid var(--accent-color);
    display: none;
}

.services .content .service-item .service-item-icon > span {
    color: var(--default-color);
    font-size: 4rem;
}

.services .content .project-item .service-item-img {
    height: 200px;
    overflow: hidden;
    margin-bottom: 30px;
}

.services .content .project-item .service-item-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.5s ease-in-out;
}

.services .content .project-item:hover .service-item-img img {
    filter: brightness(0.8);
}

.services .content .project-item .service-item-content {
    position: relative;
    z-index: 1;
}

.services .content .service-item .service-item-content .service-heading {
    font-size: 20px;
    font-weight: 400;
}

.services .content .service-item .service-item-content p {
    font-size: 15px;
    color: #000;
}

.services .content .project-item:hover .service-item-content,
.services .content .project-item:hover .service-heading,
.services .content .project-item:hover .service-item-content p {
    color: #fff;
}

@media (min-width: 769px) {
    .services .content [class^="col-"]:nth-child(3n + 3) .service-item {
        border-right: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
    }

    .services .content [class^="col-"]:nth-last-child(-n + 4) .service-item {
        border-bottom: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
    }
}

@media (max-width: 768px) {
    .services .content [class^="col-"]:nth-child(2n + 2) .service-item {
        border-right: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
    }

    .services .content [class^="col-"]:last-child .service-item,
    .services .content [class^="col-"]:nth-last-child(2) .service-item {
        border-bottom: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
    }
}

@media (max-width: 576px) {
    .services .content [class^="col-"] .service-item {
        border: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
        margin-bottom: 10px;
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .section-title {
    margin-bottom: 60px;
}

.about .content {
    background: var(--accent-color);
    color: var(--background-color);
    padding: 7rem 0;
}

.about .content .img-overlap {
    width: 95%;
    margin-top: -200px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
        rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
        rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.about p {
    color: var(--background-color);
}

.about .content-title {
    color: var(--background-color);
    font-weight: 300;
    text-align: left;
}

.about .content-title strong {
    font-weight: 700;
}

.about .content-subtitle {
    font-weight: 300;
    color: var(--contrast-color);
    text-transform: uppercase;
    font-size: 1.3rem;
}

/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/
.services-2 {
    overflow: visible;
    margin-bottom: 200px;
}

.services-2 .section-title {
    text-align: left;
}

.services-2 .section-title h2 {
    color: color-mix(in srgb, var(--contrast-color), transparent 50%);
    text-transform: uppercase;
    font-size: 20px;
}

.services-2 .section-title p {
    color: var(--background-color);
}

.services-2 .services-carousel-wrap {
    position: relative;
    margin-bottom: -200px;
}

.services-2 .swiper-wrapper {
    height: auto;
}

.services-2 .service-item {
    position: relative;
    overflow: hidden;
}

.services-2 .service-item:before {
    content: "";
    background-color: color-mix(
        in srgb,
        var(--background-color),
        transparent 50%
    );
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: 0.3s all ease;
}

.services-2 .service-item img {
    transition: 0.5s all ease;
    transform: scale(1);
}

.services-2 .service-item .service-item-contents {
    z-index: 9;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    transition: 0.3s all ease;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
}

.services-2 .service-item .service-item-contents .service-item-category {
    color: var(--accent-color);
    text-transform: uppercase;
}

.services-2 .service-item .service-item-contents .service-item-title {
    color: var(--contrast-color);
    margin-bottom: 0;
}

.services-2 .service-item:hover:before {
    opacity: 1;
    visibility: visible;
}

.services-2 .service-item:hover .service-item-contents {
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
}

.services-2 .service-item:hover img {
    transform: scale(1.2);
}

.services-2 .navigation-prev,
.services-2 .navigation-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 46px;
    height: 46px;
    background: var(--background-color);
    background-color: none;
    border: none;
    transition: 0.3s all ease;
}

.services-2 .navigation-prev i,
.services-2 .navigation-next i {
    font-size: 2rem;
}

.services-2 .navigation-prev:hover,
.services-2 .navigation-next:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.services-2 .navigation-prev {
    left: 10px;
}

.services-2 .navigation-next {
    right: 10px;
}

.services-2 .swiper {
    padding-bottom: 50px;
}

.services-2 .swiper-pagination {
    bottom: 0px;
}

.services-2 .swiper-pagination .swiper-pagination-bullet {
    border-radius: 0;
    width: 20px;
    height: 4px;
    background-color: color-mix(
        in srgb,
        var(--background-color),
        transparent 80%
    ) !important;
    opacity: 1;
}

.services-2 .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color) !important;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.testimonials .testimonial blockquote p {
    color: var(--heading-color);
    font-weight: 500;
}

.testimonials .testimonial .client-name {
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--heading-color);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts .post-item {
    background: var(--surface-color);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.recent-posts .post-item .post-img img {
    transition: 0.5s;
}

.recent-posts .post-item .post-date {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--accent-color);
    color: var(--background-color);
    text-transform: uppercase;
    font-size: 13px;
    padding: 6px 12px;
    font-weight: 500;
}

.recent-posts .post-item .post-content {
    padding: 30px;
}

.recent-posts .post-item .post-title {
    color: var(--heading-color);
    font-size: 20px;
    font-weight: 700;
    transition: 0.3s;
    margin-bottom: 15px;
}

.recent-posts .post-item .meta i {
    font-size: 16px;
    color: var(--accent-color);
}

.recent-posts .post-item .meta span {
    font-size: 15px;
    color: color-mix(in srgb, var(--heading-color), transparent 50%);
}

.recent-posts .post-item hr {
    color: color-mix(in srgb, var(--heading-color), transparent 80%);
    margin: 20px 0;
}

.recent-posts .post-item .readmore {
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 1;
    transition: 0.3s;
    color: color-mix(in srgb, var(--heading-color), transparent 40%);
}

.recent-posts .post-item .readmore i {
    line-height: 0;
    margin-left: 6px;
    font-size: 16px;
}

.recent-posts .post-item:hover .post-title,
.recent-posts .post-item:hover .readmore {
    color: var(--accent-color);
}

.recent-posts .post-item:hover .post-img img {
    transform: scale(1.1);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action .content {
    padding: 20px 0;
}

.call-to-action .content h3 {
    font-weight: 300;
    text-transform: uppercase;
}

.call-to-action .content .form-subscribe .form-control {
    border: 2px solid var(--accent-color);
    background: var(--surface-color);
    border-radius: 0;
}

.call-to-action .content .form-subscribe input[type="email"] {
    height: 63px !important;
    color: var(--default-color);
}

.call-to-action .content .form-subscribe input[type="email"]:focus {
    box-shadow: none;
}

.call-to-action .content .form-subscribe input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--contrast-color), transparent 50%);
}

.call-to-action .content .loading,
.call-to-action .content .error-message,
.call-to-action .content .sent-message {
    margin-top: 15px;
}

.call-to-action .content .btn {
    color: var(--contrast-color);
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 0;
}

.call-to-action .content .btn:hover,
.call-to-action .content .btn:active,
.call-to-action .content .btn:focus {
    box-shadow: none;
    outline: none;
    background-color: var(--contrast-color);
    border: 1px solid var(--contrrast-color);
}

/*--------------------------------------------------------------
# About 3 Section
--------------------------------------------------------------*/
.about-3 .content-title {
    color: var(--heading-color);
    margin-bottom: 30px;
}

.btn-cta {
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px 25px;
    background-color: var(--accent-color);
    color: var(--background-color);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    color: var(--background-color);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
        rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.list-check {
    margin-bottom: 50px;
}

.list-check li {
    display: block;
    padding-left: 30px;
    position: relative;
    text-align: justify;
}

.list-check li:before {
    content: "\f26e";
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 0.1rem;
    font-size: 20px;
    left: 0;
    color: var(--accent-color);
}

.about-3 .pulsating-play-btn {
    position: absolute;
    left: calc(50% - 47px);
    top: calc(50% - 47px);
}

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

.team .person figure {
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.team .person img {
    transition: 0.3s all ease;
}

.team .person .person-contents {
    text-align: center;
}

.team .person .person-contents h3 {
    color: var(--heading-color);
    font-size: 24px;
}

.team .person .person-contents .position {
    color: var(--accent-color);
}

.team .person:hover img {
    transform: scale(1.05);
}

.team .person .social {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

.team .person .social a {
    display: block;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    background: var(--contrast-color);
    color: var(--background-color);
    position: relative;
}

.team .person .social a > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team .person .social a:hover {
    background: var(--accent-color);
    color: var(--background-color);
}

/*--------------------------------------------------------------
# Blog Posts 2 Section
--------------------------------------------------------------*/
.blog-posts-2 article {
    background-color: var(--surface-color);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    border-radius: 8px;
    overflow: hidden;
}

.blog-posts-2 .post-img img {
    transition: 0.5s;
}

.blog-posts-2 .post-content {
    padding: 30px;
}

.blog-posts-2 .post-title {
    font-size: 20px;
    line-height: 24px;
    color: var(--heading-color);
    font-weight: 600;
    transition: 0.3s;
    margin-bottom: 20px;
}

.blog-posts-2 .meta {
    position: relative;
    margin-top: -20px;
    padding: 0 30px;
}

.blog-posts-2 .meta i {
    font-size: 16px;
    color: var(--accent-color);
}

.blog-posts-2 .meta span {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts-2 .meta .post-date {
    background-color: var(--accent-color);
    color: var(--background-color);
    font-size: 13px;
    padding: 6px 12px;
    text-align: center;
    margin-right: 15px;
    border-radius: 4px;
}

.blog-posts-2 .meta .post-date span {
    display: block;
    color: var(--background-color);
    font-weight: 700;
    font-size: 20px;
}

.blog-posts-2 .readmore {
    display: flex;
    align-items: center;
    font-weight: 400;
    line-height: 1;
    transition: 0.3s;
    color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts-2 .readmore i {
    line-height: 0;
    margin-left: 6px;
    font-size: 16px;
}

.blog-posts-2 article:hover .post-title,
.blog-posts-2 article:hover .readmore {
    color: var(--accent-color);
}

.blog-posts-2 article:hover .post-img img {
    transform: scale(1.1);
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
    padding-top: 0;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.blog-pagination li {
    margin: 0 5px;
    transition: 0.3s;
}

.blog-pagination li a {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
    color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
    padding-bottom: 30px;
}

.blog-details .article {
    background-color: var(--surface-color);
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
    margin: -30px -30px 20px -30px;
    overflow: hidden;
}

.blog-details .title {
    color: var(--heading-color);
    font-size: 28px;
    font-weight: 700;
    padding: 0;
    margin: 30px 0;
}

.blog-details .content {
    margin-top: 20px;
}

.blog-details .content h3 {
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
}

.blog-details .content blockquote {
    overflow: hidden;
    background-color: color-mix(in srgb, var(--default-color), transparent 95%);
    padding: 60px;
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.blog-details .content blockquote p {
    color: var(--default-color);
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}

.blog-details .content blockquote:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--accent-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog-details .meta-top {
    margin-top: 20px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
}

.blog-details .meta-top ul li + li {
    padding-left: 20px;
}

.blog-details .meta-top i {
    font-size: 16px;
    margin-right: 8px;
    line-height: 0;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 14px;
    display: inline-block;
    line-height: 1;
}

.blog-details .meta-bottom {
    padding-top: 10px;
    border-top: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    display: inline;
}

.blog-details .meta-bottom a {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
    color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
    list-style: none;
    display: inline;
    padding: 0 20px 0 0;
    font-size: 14px;
}

.blog-details .meta-bottom .cats li {
    display: inline-block;
}

.blog-details .meta-bottom .tags {
    list-style: none;
    display: inline;
    padding: 0;
    font-size: 14px;
}

.blog-details .meta-bottom .tags li {
    display: inline-block;
}

.blog-details .meta-bottom .tags li + li::before {
    padding-right: 6px;
    color: var(--default-color);
    content: ",";
}

.blog-details .meta-bottom .share {
    font-size: 16px;
}

.blog-details .meta-bottom .share i {
    padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
    padding: 10px 0;
}

.blog-comments .comments-count {
    font-weight: bold;
}

.blog-comments .comment {
    margin-top: 30px;
    position: relative;
}

.blog-comments .comment .comment-img {
    margin-right: 14px;
}

.blog-comments .comment .comment-img img {
    width: 60px;
}

.blog-comments .comment h5 {
    font-size: 16px;
    margin-bottom: 2px;
}

.blog-comments .comment h5 a {
    font-weight: bold;
    color: var(--default-color);
    transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
    color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
    padding-left: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
    font-size: 20px;
}

.blog-comments .comment time {
    display: block;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
    padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
    padding-top: 10px;
}

.comment-form form {
    background-color: var(--surface-color);
    margin-top: 30px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
    font-weight: bold;
    font-size: 22px;
}

.comment-form form p {
    font-size: 14px;
}

.comment-form form input {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    font-size: 14px;
    border-radius: 4px;
    padding: 10px 10px;
}

.comment-form form input:focus {
    color: var(--default-color);
    background-color: var(--surface-color);
    box-shadow: none;
    border-color: var(--accent-color);
}

.comment-form form input::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
    height: 120px;
}

.comment-form form textarea:focus {
    color: var(--default-color);
    box-shadow: none;
    border-color: var(--accent-color);
    background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
    margin-bottom: 25px;
}

.comment-form form .btn-primary {
    border-radius: 4px;
    padding: 10px 20px;
    border: 0;
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
    color: var(--contrast-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
    padding-top: 10px;
}

.contact .info {
    background-color: var(--surface-color);
    padding: 40px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.contact .info h3 {
    font-weight: 600;
    font-size: 24px;
}

.contact .info p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 30px;
    font-size: 15px;
}

.contact .info-item + .info-item {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
    font-size: 24px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
    margin-right: 20px;
}

.contact .info-item h4 {
    padding: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .php-email-form {
    width: 100%;
}

.contact .php-email-form .form-group {
    padding-bottom: 8px;
}

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form textarea {
    color: var(--default-color);
    background-color: var(--surface-color);
    border-radius: 0px;
    box-shadow: none;
    font-size: 14px;
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
}

.contact .php-email-form input[type="text"]::placeholder,
.contact .php-email-form input[type="email"]::placeholder,
.contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"] {
    height: 48px;
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 10px 12px;
    height: 290px;
}

.contact .php-email-form button[type="submit"] {
    background: var(--accent-color);
    color: var(--contrast-color);
    border: 0;
    padding: 13px 50px;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
    background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
    margin: 60px 0 30px 0;
}

.widget-title {
    color: var(--heading-color);
    font-size: 20px;
    font-weight: 600;
    padding: 0 0 10px 0;
    margin: 0 0 20px 0;
    position: relative;
}

.widget-title:before {
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    background: color-mix(in srgb, var(--default-color), transparent 90%);
    left: 0;
    right: 0;
    bottom: 1px;
}

.widget-title:after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent-color);
    left: 0;
    bottom: 1px;
}

.widget-item {
    margin-bottom: 40px;
}

.widget-item:last-child {
    margin-bottom: 0;
}

.recent-posts-widget .post-item {
    display: flex;
    margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
    margin-bottom: 0;
}

.recent-posts-widget .post-item img {
    width: 80px;
    margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
    color: var(--default-color);
    transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
    color: var(--accent-color);
}

.recent-posts-widget .post-item time {
    display: block;
    font-style: italic;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.categories-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-widget ul li {
    padding-bottom: 10px;
}

.categories-widget ul li:last-child {
    padding-bottom: 0;
}

.categories-widget ul a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
}

.categories-widget ul a:hover {
    color: var(--accent-color);
}

.categories-widget ul a span {
    padding-left: 5px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 14px;
}

.blog-author-widget img {
    max-width: 120px;
    margin-right: 20px;
}

.blog-author-widget h4 {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0px;
    padding: 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
    margin: 5px 0;
}

.blog-author-widget .social-links a {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    margin-right: 5px;
    font-size: 18px;
}

.blog-author-widget .social-links a:hover {
    color: var(--accent-color);
}

.blog-author-widget p {
    font-style: italic;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 10px 0 0 0;
}

.search-widget form {
    background: var(--background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    padding: 3px 10px;
    position: relative;
    transition: 0.3s;
}

.search-widget form input[type="text"] {
    border: 0;
    padding: 4px;
    border-radius: 4px;
    width: calc(100% - 40px);
    background-color: var(--background-color);
    color: var(--default-color);
}

.search-widget form input[type="text"]:focus {
    outline: none;
}

.search-widget form button {
    background: var(--accent-color);
    color: var(--contrast-color);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    font-size: 16px;
    padding: 0 15px;
    margin: -1px;
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    line-height: 0;
}

.search-widget form button i {
    line-height: 0;
}

.search-widget form button:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget form:is(:focus-within) {
    border-color: var(--accent-color);
}

.recent-posts-widget-2 .post-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.recent-posts-widget-2 .post-item:last-child {
    margin-bottom: 0;
}

.recent-posts-widget-2 .post-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.recent-posts-widget-2 .post-item h4 a {
    color: var(--default-color);
    transition: 0.3s;
}

.recent-posts-widget-2 .post-item h4 a:hover {
    color: var(--accent-color);
}

.recent-posts-widget-2 .post-item time {
    display: block;
    font-style: italic;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tags-widget ul li {
    display: inline-block;
}

.tags-widget ul a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 14px;
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
    display: inline-block;
    transition: 0.3s;
}

.tags-widget ul a:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
    padding-left: 5px;
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    font-size: 14px;
}

/*  */
.text-justify {
    text-align: justify;
}
.vision-img {
    text-align: center;
}
.vision-img img {
    height: 500px;
    object-fit: cover;
}
.impact-caption {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 10px;
    z-index: 1;
}

/* accordion */
.accordion-item {
    border: none;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.accordion-button {
    padding: 20px 25px;
    font-weight: 600;
    color: var(--accent-color);
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--accent-color);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}

.accordion-button::after {
    background-size: 20px;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath 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'/%3e%3c/svg%3e");
}

.accordion-body {
    padding: 25px;
    background-color: #ffffff;
}

.home-about-img {
    height: 400px;
    overflow: hidden;
}
.home-about-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.home-gallery-img {
    height: 300px;
    overflow: hidden;
}

.home-gallery-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.post-img {
    height: 300px;
    overflow: hidden;
}

.post-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.download-button::after {
    display: none;
}
.download-button i {
    margin-left: auto;
}

.img-gallery-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
    margin-bottom: 30px;
}

.home-career-link h4 span {
    display: inline-block;
    transition: all 0.3s;
}

.home-career-link:hover h4 span {
    transform: translateX(10px);
}

.modal-job-form label {
    color: var(--heading-color);
}

.volunteer-form-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 50px 40px;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

.form-title {
    display: block;
    font-size: 30px;
    color: #333;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.form-subtitle {
    display: block;
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
}

.wrap-input {
    width: 100%;
    position: relative;
    margin-bottom: 35px;
}

.volunteer-form label{
    font-weight: 700;
}
.custom-input {
    font-size: 15px;
    color: #555;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    padding: 0 5px;
    border-radius: 5px;
    border: 2px solid #adadad;
}

.custom-input:focus {
    outline: none;
}

.custom-input:focus-visible {
    outline: none;
}

textarea.custom-input {
    min-height: 80px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.input-focus {
    position: absolute;
    display: block;
    width: 96%;
    height: 100%;
    top: 0;
    left: 15px;
    pointer-events: none;
    font-weight: 600;
}

.input-focus::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 0;
    height: 12px;
    transition: all 0.4s;
}

.input-focus::after {
    font-size: 15px;
    color: #999;
    line-height: 1.2;
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 16px;
    left: 0px;
    padding-left: 5px;
    transition: all 0.4s;
}

.custom-input:focus + .input-focus::after {
    top: -15px;
    font-size: 13px;
    color: var(--accent-color);
}

.custom-input:focus + .input-focus::before {
    width: 100%;
}

.gender-select {
    margin-bottom: 35px;
}

.gender-options {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.radio-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.file-upload-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 35px;
}

.file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 2px dashed #adadad;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.file-label:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.file-input {
    display: none;
}

.custom-form-btn {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 25px;
    overflow: hidden;
    margin: 0 auto;
}

.form-bgbtn {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--accent-color),
        #2196f3,
        var(--accent-color),
        #2196f3
    );
    top: 0;
    left: -100%;
    transition: all 0.4s;
}

.form-submit-btn {
    font-size: 15px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    background: transparent;
}

.custom-form-btn:hover .form-bgbtn {
    left: 0;
}

@media (max-width: 576px) {
    .volunteer-form-container {
        padding: 40px 20px;
    }

    .file-upload-container {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.gallery-item-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 10px;
    text-align: center;
    z-index: 10;
    transition: background 0.3s ease;
}

.gallery-item:hover .gallery-item-caption {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-item-caption p {
    margin: 0;
    font-size: 14px;
}

.story-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.story-card:hover {
    transform: translateY(-5px);
}

.story-image {
    background-size: cover;
    background-position: center;
    height: 200px; /* Fixed height for images */
    position: relative;
}

.story-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.story-description {
    overflow-y: auto;
    max-height: 150px; /* Limit the height of the text area */
    margin-top: 10px;
    color: var(--default-color);
}

.impact-caption-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

.story-content-wrapper {
    padding: 40px 0;
}

.story-image-left,
.story-image-right {
    position: relative;
    overflow: hidden;
}

.story-image-left .position-relative {
    float: left;
    width: 40%;
    margin-right: 30px;
    margin-bottom: 20px;
}

.story-image-right .position-relative {
    float: right;
    width: 40%;
    margin-left: 30px;
    margin-bottom: 20px;
}

.story-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Clear the float after each story */
.story-content-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Maintain existing caption styling */
.impact-caption-2 {
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    bottom: 0;
    z-index: 1;
}

.impact-caption-2:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .story-image-left .position-relative,
    .story-image-right .position-relative {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }
}

/* Membership Page Styles */
.membership-section {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.membership-section .content-title {
    color: var(--accent-color);
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 25px;
}

.membership-content {
    color: var(--default-color);
}

.sub-title {
    color: var(--heading-color);
    font-size: 20px;
    font-weight: 600;
}

.highlight-box {
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-left: 4px solid var(--accent-color);
    padding: 15px 20px;
    border-radius: 4px;
}

.organization-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.organization-list li {
    position: relative;
    padding: 8px 0 8px 25px;
    border-bottom: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
}

.organization-list li:last-child {
    border-bottom: none;
}

.organization-list li::before {
    content: "•";
    color: var(--accent-color);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .membership-section {
        padding: 20px;
    }

    .membership-section .content-title {
        font-size: 24px;
    }

    .sub-title {
        font-size: 18px;
    }
}

.partner-logo {
    height: 100px;
}

.partner-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* No Jobs Available Styling */
.no-jobs-container {
    background: #fff;
    padding: 60px 30px;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    margin: 0 auto;
}

.no-jobs-container .no-jobs-icon {
    font-size: 80px;
    color: var(--accent-color);
    margin-bottom: 20px;
    opacity: 0.8;
}

.no-jobs-container h3 {
    color: var(--heading-color);
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 600;
}

.no-jobs-container p {
    color: var(--default-color);
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.no-jobs-container .alternative-options {
    margin-top: 30px;
}

.no-jobs-container .alternative-options h4 {
    color: var(--heading-color);
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 500;
}

.no-jobs-container .options-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.no-jobs-container .options-buttons a {
    display: inline-block;
}

@media (max-width: 768px) {
    .no-jobs-container {
        padding: 40px 20px;
    }

    .no-jobs-container h3 {
        font-size: 24px;
    }

    .no-jobs-container p {
        font-size: 16px;
    }

    .no-jobs-container .options-buttons {
        flex-direction: column;
        align-items: center;
    }

    .no-jobs-container .options-buttons .btn-cta {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
}