/* =========================================================
   Base
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: #14252b;
}


/* =========================================================
   Logo
========================================================= */

.logo-mark {
    position: relative;
    width: 40px;
    height: 43px;
    flex-shrink: 0;
}

.logo-mark::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: #168f95;
    transform: rotate(30deg) skewY(-5deg);
}

.logo-mark::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 9px;
    width: 22px;
    height: 29px;
    background: #168f95;
    clip-path: polygon(
        0 20%,
        100% 0,
        100% 68%,
        0 100%
    );
}

.logo-mark span:first-child {
    position: absolute;
    z-index: 2;
    left: 8px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: white;
    clip-path: polygon(
        0 0,
        50% 25%,
        100% 0,
        50% 100%
    );
}

.logo-mark span:last-child {
    position: absolute;
    z-index: 3;
    left: 19px;
    top: 13px;
    width: 2px;
    height: 25px;
    background: white;
}

.logo-mark.small {
    transform: scale(.82);
    transform-origin: left center;
}


/* =========================================================
   Desktop Navigation
========================================================= */

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #14252b;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.nav-link i {
    font-size: 10px;
    transition: transform .2s ease;
}

.nav-link:hover {
    color: #168f95;
}

.nav-link:hover i {
    transform: translateY(1px);
}

.nav-link.active {
    color: #168f95;
}


/* =========================================================
   Search
========================================================= */

.search-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: #f0f4f4;
    color: #14252b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.search-btn i {
    font-size: 18px;
}

.search-btn:hover {
    background: #168f95;
    color: white;
    transform: translateY(-1px);
}


/* =========================================================
   Let's Talk Button
========================================================= */

.talk-btn {
    min-width: 166px;
    height: 54px;
    padding: 5px 6px 5px 27px;
    border-radius: 30px;
    background: #168f95;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition:
        background .2s ease,
        transform .2s ease;
}

.talk-btn:hover {
    background: #117b80;
    transform: translateY(-1px);
}

.talk-arrow {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #142f35;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.talk-btn:hover .talk-arrow {
    transform: rotate(45deg);
}

.talk-arrow i {
    font-size: 15px;
}


/* =========================================================
   Mobile Hamburger
========================================================= */

.mobile-menu-btn {
    width: 48px;
    height: 48px;
    border: 1px solid #e3e9e9;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-btn span {
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #14252b;
    transition:
        transform .25s ease,
        opacity .25s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   Sidebar
========================================================= */

.sidebar-close {
    width: 42px;
    height: 42px;
    border: 1px solid #e5ebeb;
    border-radius: 50%;
    background: white;
    color: #14252b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease;
}

.sidebar-close:hover {
    background: #168f95;
    color: white;
}

.mobile-nav-link {
    min-height: 52px;
    padding: 0 3px;
    border-bottom: 1px solid #edf1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #14252b;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color .2s ease;
}

.mobile-nav-link i {
    font-size: 10px;
    color: #778587;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: #168f95;
}

.sidebar-search {
    width: 100%;
    height: 50px;
    padding: 0 17px;
    border: 1px solid #e3e9e9;
    border-radius: 7px;
    background: #f7f9f9;
    color: #14252b;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    cursor: pointer;
}

.sidebar-search i {
    color: #168f95;
}

.sidebar-talk {
    margin-top: 13px;
    height: 52px;
    padding: 0 6px 0 20px;
    border-radius: 28px;
    background: #168f95;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.sidebar-talk > span:last-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #142f35;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   Header Shadow After Scroll
========================================================= */

#mainHeader.scrolled {
    box-shadow: 0 5px 25px rgba(20, 37, 43, .07);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1023px) {
    #mainHeader .h-\[94px\] {
        height: 78px;
    }

    .logo-mark {
        transform: scale(.86);
        transform-origin: left center;
        margin-right: -5px;
    }
}

@media (max-width: 480px) {

    #mainHeader .h-\[94px\] {
        height: 72px;
    }

    .logo-mark {
        transform: scale(.76);
        margin-right: -8px;
    }

    #mainHeader a > span {
        font-size: 25px;
    }

    .mobile-menu-btn {
        width: 44px;
        height: 44px;
    }

    #mobileSidebar {
        width: 285px;
    }
}



    .service-card {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e5e9e0;
        border-radius: 18px;
        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
    }

    .service-card:hover {
        transform: translateY(-5px);
        border-color: #d5ddcc;
        box-shadow: 0 18px 45px rgba(43, 61, 49, .10);
    }


    /* Image */

    .service-image {
        position: relative;
        width: 100%;
        height: 245px;
        overflow: hidden;
        background: #e8ece5;
    }

    .service-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .55s ease;
    }

    .service-card:hover .service-image img {
        transform: scale(1.045);
    }


    /* Image overlay */

    .service-image-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to top,
                rgba(24, 38, 30, .35),
                transparent 45%
            );
        pointer-events: none;
    }


    /* Number */

    .service-number {
        position: absolute;
        top: 16px;
        right: 16px;

        width: 38px;
        height: 38px;

        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: rgba(255, 255, 255, .90);
        color: #435847;

        font-size: 11px;
        font-weight: 600;
        letter-spacing: .5px;

        backdrop-filter: blur(5px);
    }


    /* Content */

    .service-content {
        padding: 24px 23px 25px;
    }

    .service-content h3 {
        margin: 0;

        color: #293a30;

        font-size: 20px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: -.35px;
    }

    .service-content p {
        margin: 11px 0 0;

        color: #737c76;

        font-size: 14px;
        line-height: 1.7;
    }


    /* Link */

    .service-link {
        display: inline-flex;
        align-items: center;
        gap: 9px;

        margin-top: 18px;

        color: #5f765e;

        font-size: 13px;
        font-weight: 600;

        text-decoration: none;

        transition:
            color .2s ease,
            gap .2s ease;
    }

    .service-link i {
        font-size: 11px;
    }

    .service-link:hover {
        color: #293a30;
        gap: 12px;
    }


    /* Tablet */

    @media (max-width: 767px) {

        .service-image {
            height: 230px;
        }

        .service-content {
            padding: 22px 20px 23px;
        }

        .service-content h3 {
            font-size: 19px;
        }

    }


    /* Small Mobile */

    @media (max-width: 420px) {

        .service-image {
            height: 220px;
        }

        .service-content h3 {
            font-size: 18px;
        }

    }

#callme {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 99990;
}
#callme #callmeMain {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  border-radius: 50% !important;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgb(207,8,8);
  width: 70px;
  height: 70px;
  -webkit-animation: zcwmini2 1.5s 0s ease-out infinite;
  -moz-animation: zcwmini2 1.5s 0s ease-out infinite;
  animation: zcwmini2 1.5s 0s ease-out infinite;
}
#callme #callmeMain:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("https://res.cloudinary.com/dglv3fims/image/upload/v1668592876/cal_swjmmc.png");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-animation: zcwphone2 1.5s linear infinite;
  -moz-animation: zcwphone2 1.5s linear infinite;
  animation: zcwphone2 1.5s linear infinite;
}
@-webkit-keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-moz-keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-webkit-keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-moz-keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes zcwphone2 {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@-webkit-keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-moz-keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-webkit-keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@-moz-keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}
@keyframes zcwmini2 {
  0% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(207,8,8, 0);}
  10% {box-shadow: 0 0 8px 6px , 0 0 12px 10px rgba(0,0,0,0), 0 0 12px 14px ;}
  100% {box-shadow: 0 0 8px 6px rgba(207,8,8, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(207,8,8, 0);}
}

#social_side_links {
  position: fixed;
bottom: 73px;
  left: -21px;
padding:0px;
list-style: none;
z-index: 99;
}

#social_side_links li a {display: block;}

#social_side_links li a img {
  display: block;
  max-width:100%;
padding:7px;
-webkit-transition:  background .2s ease-in-out;
-moz-transition:  background .2s ease-in-out;
-o-transition:  background .2s ease-in-out;
transition:  background .2s ease-in-out;
}

#social_side_links li a:hover img {background: rgba(0, 0, 0, .2);}