html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 250px;
    height: 300px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    display: inline-block;
    border-radius:10px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 10px;
    border: 1px solid grey;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: white;
    color: black;
    padding-top:40px;
}

/* Style the back side */
.flip-card-back {
    background-color: white;
    color: black;
    transform: rotateY(180deg);
    padding-top: 10px
}

.flip-card-back p{
    text-align: left;
    padding-left: 20px;
    font-size:12px
}
/**
* Template Name: MyResume
* Template URL: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/
* Updated: Jun 29 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "Roboto", 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: "Raleway", sans-serif;
    --nav-font: "Poppins", 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: #272829; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #45505b; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #23b8a9; /* 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: #ffffff; /* 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: #45505b; /* The default color of the main navmenu links */
    --nav-hover-color: #23b8a9; /* 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: #0563bb; /* 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;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

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

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

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    color: var(--default-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 15px;
    transition: all ease-in-out 0.3s;
    overflow-y: auto;
    z-index: 997;
    min-width: 200px;
}

@media (max-width: 1199px) {
    .header {
        background-color: var(--background-color);
        border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        width: 300px;
        left: -100%;
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .header ~ main {
        margin-left: 160px;
    }

        .header ~ main .hero {
            margin-left: -160px;
            width: 100vw;
        }
}

.header.header-show {
    left: 0;
}

.header .header-toggle {
    color: var(--contrast-color);
    background-color: var(--accent-color);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
    transition: background-color 0.3s;
}

    .header .header-toggle:hover {
        color: var(--contrast-color);
        background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
    }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navmenu {
    padding: 0;
    z-index: 9997;
}

    .navmenu ul {
        list-style: none;
        padding: 0 0 20px 0;
        margin: 0;
        width: 140px;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        font-family: var(--nav-font);
        display: flex;
        align-items: center;
        padding: 10px 18px;
        margin-bottom: 8px;
        font-size: 15px;
        border-radius: 50px;
        background: color-mix(in srgb, var(--default-color), transparent 92%);
        height: 56px;
        width: 100%;
        overflow: hidden;
        transition: 0.3s;
    }

        .navmenu a i,
        .navmenu a:focus i {
            font-size: 20px;
        }

        .navmenu a span,
        .navmenu a:focus span {
            padding: 0 5px 0 7px;
        }

@media (min-width: 992px) {

    .navmenu a,
    .navmenu a:focus {
        max-width: 56px;
    }

        .navmenu a span,
        .navmenu a:focus span {
            display: none;
        }
}

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

.navmenu a:hover,
.navmenu li:hover > a {
    max-width: 100%;
    color: var(--contrast-color);
}

    .navmenu a:hover span,
    .navmenu li:hover > a span {
        display: block;
    }

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
    color: var(--default-color);
    background-color: var(--background-color);
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    position: relative;
}

    .footer h3 {
        font-size: 36px;
        font-weight: 700;
        position: relative;
        padding: 0;
        margin: 0 0 15px 0;
    }

    .footer p {
        font-size: 15;
        font-style: italic;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .footer .social-links {
        margin: 0 0 30px 0;
    }

        .footer .social-links a {
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-color);
            color: var(--contrast-color);
            line-height: 1;
            margin: 0 4px;
            border-radius: 50%;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;
        }

            .footer .social-links a:hover {
                background: color-mix(in srgb, var(--accent-color), transparent 20%);
                text-decoration: none;
            }

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

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

/*--------------------------------------------------------------
# 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: 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: 15px;
    }

/*--------------------------------------------------------------
# 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: color-mix(in srgb, var(--default-color), transparent 96%);
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 20px 0;
    position: relative;
}

    .page-title h1 {
        font-size: 28px;
        font-weight: 700;
        margin: 0;
    }

    .page-title .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0 0 10px 0;
        margin: 0;
        font-size: 14px;
        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 70%);
            }

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--default-color);
    background-color: #FAFAFA;
    padding: 60px 0;
    overflow: clip;
}

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

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

        .section-title h2:before {
            content: "";
            position: absolute;
            display: block;
            width: 160px;
            height: 1px;
            background: color-mix(in srgb, var(--default-color), transparent 60%);
            left: 0;
            right: 0;
            bottom: 1px;
            margin: auto;
        }

        .section-title h2::after {
            content: "";
            position: absolute;
            display: block;
            width: 60px;
            height: 3px;
            background: var(--accent-color);
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

    .hero:before {
        content: "";
        background: color-mix(in srgb, var(--background-color), transparent 30%);
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .hero .container {
        position: relative;
        z-index: 3;
    }

    .hero h2 {
        margin: 0;
        font-size: 64px;
        font-weight: 700;
    }

    .hero p {
        margin: 5px 0 0 0;
        font-size: 26px;
    }

        .hero p span {
            letter-spacing: 1px;
            border-bottom: 2px solid var(--accent-color);
        }

    .hero .social-links {
        margin-top: 25px;
    }

        .hero .social-links a {
            font-size: 20px;
            display: inline-block;
            color: color-mix(in srgb, var(--default-color), transparent 30%);
            line-height: 1;
            margin-right: 20px;
            transition: 0.3s;
        }

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

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

    .hero p {
        font-size: 20px;
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
    font-weight: 700;
    font-size: 24px;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

    .about .content ul li {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    .about .content ul strong {
        margin-right: 10px;
    }

    .about .content ul i {
        font-size: 16px;
        margin-right: 5px;
        color: var(--accent-color);
        line-height: 0;
    }

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    width: 54px;
    height: 54px;
    font-size: 24px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.stats .stats-item {
    margin-top: 10px;
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 0;
}

    .stats .stats-item span {
        font-size: 36px;
        display: block;
        font-weight: 700;
        color: color-mix(in srgb, var(--default-color), transparent 20%);
    }

    .stats .stats-item p {
        padding: 0;
        margin: 0;
        color: color-mix(in srgb, var(--default-color), transparent 50%);
        font-size: 16px;
    }

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
    height: 60px;
    display: block;
    background: none;
    border-radius: 0;
}

    .skills .progress .skill {
        color: var(--heading-color);
        padding: 0;
        margin: 0 0 6px 0;
        text-transform: uppercase;
        display: block;
        font-weight: 600;
        font-family: var(--heading-font);
    }

        .skills .progress .skill .val {
            float: right;
            font-style: normal;
        }

.skills .progress-bar-wrap {
    background: color-mix(in srgb, var(--default-color), transparent 90%);
    height: 10px;
}

.skills .progress-bar {
    width: 1px;
    height: 10px;
    transition: 0.9s;
    background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
    color: var(--heading-color);
    font-size: 26px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
}

.resume .resume-item {
    padding: 0 0 20px 20px;
    margin-top: -2px;
    border-left: 2px solid var(--accent-color);
    position: relative;
}

    .resume .resume-item h4 {
        line-height: 18px;
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--default-color), transparent 20%);
        margin-bottom: 10px;
    }

    .resume .resume-item h5 {
        font-size: 16px;
        padding: 5px 15px;
        display: inline-block;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .resume .resume-item ul {
        padding-left: 20px;
    }

        .resume .resume-item ul li {
            padding-bottom: 10px;
        }

    .resume .resume-item:last-child {
        padding-bottom: 0;
    }

    .resume .resume-item::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50px;
        left: -9px;
        top: 0;
        background: var(--background-color);
        border: 2px solid var(--accent-color);
    }

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

    .portfolio .portfolio-filters li {
        cursor: pointer;
        display: inline-block;
        padding: 8px 20px 10px 20px;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 5px;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
        font-family: var(--heading-font);
    }

        .portfolio .portfolio-filters li:hover,
        .portfolio .portfolio-filters li.filter-active {
            color: var(--contrast-color);
            background-color: var(--accent-color);
        }

        .portfolio .portfolio-filters li:first-child {
            margin-left: 0;
        }

        .portfolio .portfolio-filters li:last-child {
            margin-right: 0;
        }

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
}

.portfolio .portfolio-item {
    position: relative;
    overflow: hidden;
}

    .portfolio .portfolio-item .portfolio-info {
        opacity: 0;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -100%;
        z-index: 3;
        transition: all ease-in-out 0.5s;
        background: color-mix(in srgb, var(--background-color), transparent 10%);
        padding: 15px;
    }

        .portfolio .portfolio-item .portfolio-info h4 {
            font-size: 18px;
            font-weight: 600;
            padding-right: 50px;
        }

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

        .portfolio .portfolio-item .portfolio-info .preview-link,
        .portfolio .portfolio-item .portfolio-info .details-link {
            position: absolute;
            right: 50px;
            font-size: 24px;
            top: calc(50% - 14px);
            color: color-mix(in srgb, var(--default-color), transparent 30%);
            transition: 0.3s;
            line-height: 0;
        }

            .portfolio .portfolio-item .portfolio-info .preview-link:hover,
            .portfolio .portfolio-item .portfolio-info .details-link:hover {
                color: var(--accent-color);
            }

        .portfolio .portfolio-item .portfolio-info .details-link {
            right: 14px;
            font-size: 28px;
        }

    .portfolio .portfolio-item:hover .portfolio-info {
        opacity: 1;
        bottom: 0;
    }

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
    background-color: var(--surface-color);
    box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
    height: 100%;
    padding: 60px 30px;
    text-align: center;
    transition: 0.3s;
    border-radius: 5px;
}

    .services .service-item .icon {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.3s;
        position: relative;
    }

        .services .service-item .icon i {
            font-size: 36px;
            transition: 0.5s;
            position: relative;
        }

        .services .service-item .icon svg {
            position: absolute;
            top: 0;
            left: 0;
        }

            .services .service-item .icon svg path {
                transition: 0.5s;
                fill: color-mix(in srgb, var(--default-color), transparent 95%);
            }

    .services .service-item h3 {
        font-weight: 700;
        margin: 10px 0 15px 0;
        font-size: 22px;
    }

    .services .service-item p {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
    }

    .services .service-item:hover {
        box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
    }

    .services .service-item.item-cyan i {
        color: #0dcaf0;
    }

    .services .service-item.item-cyan:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-cyan:hover .icon path {
        fill: #0dcaf0;
    }

    .services .service-item.item-orange i {
        color: #fd7e14;
    }

    .services .service-item.item-orange:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-orange:hover .icon path {
        fill: #fd7e14;
    }

    .services .service-item.item-teal i {
        color: #20c997;
    }

    .services .service-item.item-teal:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-teal:hover .icon path {
        fill: #20c997;
    }

    .services .service-item.item-red i {
        color: #df1529;
    }

    .services .service-item.item-red:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-red:hover .icon path {
        fill: #df1529;
    }

    .services .service-item.item-indigo i {
        color: #6610f2;
    }

    .services .service-item.item-indigo:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-indigo:hover .icon path {
        fill: #6610f2;
    }

    .services .service-item.item-pink i {
        color: #f3268c;
    }

    .services .service-item.item-pink:hover .icon i {
        color: #fff;
    }

    .services .service-item.item-pink:hover .icon path {
        fill: #f3268c;
    }

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
    overflow: hidden;
}

.testimonials .testimonial-item .testimonial-content {
    border-left: 3px solid var(--accent-color);
    padding-left: 30px;
}

.testimonials .testimonial-item .testimonial-img {
    border-radius: 50%;
    border: 4px solid var(--background-color);
    margin: 0 auto;
}

.testimonials .testimonial-item h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin: 0 0 10px 0;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--accent-color), transparent 50%);
    font-size: 26px;
    line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
    font-style: italic;
}

.testimonials .swiper-wrapper {
    height: auto;
}

.testimonials .swiper-pagination {
    margin-top: 30px;
    position: relative;
}

    .testimonials .swiper-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: color-mix(in srgb, var(--default-color), transparent 85%);
        opacity: 1;
    }

    .testimonials .swiper-pagination .swiper-pagination-bullet-active {
        background-color: var(--accent-color);
    }

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item + .info-item {
    margin-top: 40px;
}

.contact .info-item i {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
}

.contact .info-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.contact .info-item:hover i {
    background: var(--accent-color);
    color: var(--contrast-color);
}

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

    .contact .php-email-form input[type=text],
    .contact .php-email-form input[type=email],
    .contact .php-email-form textarea {
        font-size: 14px;
        padding: 10px 15px;
        box-shadow: none;
        border-radius: 0;
        color: var(--default-color);
        background-color: color-mix(in srgb, var(--background-color), transparent 50%);
        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 button[type=submit] {
        color: var(--contrast-color);
        background: var(--accent-color);
        border: 0;
        padding: 10px 30px;
        transition: 0.4s;
        border-radius: 50px;
    }

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

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
    width: 100%;
}

.portfolio-details .swiper-wrapper {
    height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
    width: 48px;
    height: 48px;
}

    .portfolio-details .swiper-button-prev:after,
    .portfolio-details .swiper-button-next:after {
        color: rgba(255, 255, 255, 0.8);
        background-color: rgba(0, 0, 0, 0.15);
        font-size: 24px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .portfolio-details .swiper-button-prev:hover:after,
    .portfolio-details .swiper-button-next:hover:after {
        background-color: rgba(0, 0, 0, 0.3);
    }

@media (max-width: 575px) {

    .portfolio-details .swiper-button-prev,
    .portfolio-details .swiper-button-next {
        display: none;
    }
}

.portfolio-details .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

    .portfolio-details .swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: color-mix(in srgb, var(--default-color), transparent 85%);
        opacity: 1;
    }

    .portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
        background-color: var(--accent-color);
    }

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

    .portfolio-details .portfolio-info h3:after {
        content: "";
        position: absolute;
        display: block;
        width: 50px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        bottom: 0;
    }

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

    .portfolio-details .portfolio-info ul li {
        display: flex;
        flex-direction: column;
        padding-bottom: 15px;
    }

    .portfolio-details .portfolio-info ul strong {
        text-transform: uppercase;
        font-weight: 400;
        color: color-mix(in srgb, var(--default-color), transparent 50%);
        font-size: 14px;
    }

.portfolio-details .portfolio-info .btn-visit {
    padding: 8px 40px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 50px;
    transition: 0.3s;
}

    .portfolio-details .portfolio-info .btn-visit:hover {
        background: color-mix(in srgb, var(--accent-color), transparent 20%);
    }

.portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
    padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
    padding: 30px 30px 0 30px;
    position: relative;
    background: color-mix(in srgb, var(--default-color), transparent 97%);
    margin-bottom: 50px;
}

    .portfolio-details .portfolio-description .testimonial-item .testimonial-img {
        width: 90px;
        border-radius: 50px;
        border: 6px solid var(--background-color);
        float: left;
        margin: 0 10px 0 0;
    }

    .portfolio-details .portfolio-description .testimonial-item h3 {
        font-size: 18px;
        font-weight: bold;
        margin: 15px 0 5px 0;
        padding-top: 20px;
    }

    .portfolio-details .portfolio-description .testimonial-item h4 {
        font-size: 14px;
        color: #6c757d;
        margin: 0;
    }

    .portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
    .portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
        color: color-mix(in srgb, var(--accent-color), transparent 50%);
        font-size: 26px;
        line-height: 0;
    }

    .portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
        display: inline-block;
        left: -5px;
        position: relative;
    }

    .portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
        display: inline-block;
        right: -5px;
        position: relative;
        top: 10px;
        transform: scale(-1, -1);
    }

    .portfolio-details .portfolio-description .testimonial-item p {
        font-style: italic;
        margin: 0 0 15px 0 0 0;
        padding: 0;
    }

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service .projectsvg :hover{
    color:aqua
}

.service-details .service-box {
    padding: 20px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

    .service-details .service-box + .service-box {
        margin-top: 30px;
    }

    .service-details .service-box h4 {
        font-size: 20px;
        font-weight: 700;
        border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

.service-details .services-list a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-top: 15px;
    transition: 0.3s;
}

    .service-details .services-list a:first-child {
        margin-top: 0;
    }

    .service-details .services-list a i {
        font-size: 16px;
        margin-right: 8px;
        color: var(--accent-color);
    }

    .service-details .services-list a.active {
        color: var(--contrast-color);
        background-color: var(--accent-color);
    }

        .service-details .services-list a.active i {
            color: var(--contrast-color);
        }

    .service-details .services-list a:hover {
        background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
        color: var(--accent-color);
    }
item-teal
.service-details .download-catalog a {
    color: var(--default-color);
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: 0.3s;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

    .service-details .download-catalog a:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .service-details .download-catalog a:last-child {
        padding-bottom: 0;
    }

    .service-details .download-catalog a i {
        font-size: 24px;
        margin-right: 8px;
        color: var(--accent-color);
    }

    .service-details .download-catalog a:hover {
        color: var(--accent-color);
    }

.service-details .help-box {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    margin-top: 30px;
    padding: 30px 15px;
}

    .service-details .help-box .help-icon {
        font-size: 48px;
    }

    .service-details .help-box h4,
    .service-details .help-box a {
        color: var(--contrast-color);
    }

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

.service-details h3 {
    font-size: 26px;
    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);
    }

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
    /* Add your styles here */
}

.group-cont {
    margin-left:30px;
    margin-right:30px;
    flex-wrap: wrap;
    justify-content: center; /* centers cards */
    gap: 100px;
    display: flex;
    align-items: center;

}

.certi-container {
    width: 250px;
}