/* ===== Google Font Import - Poppins ===== */

*,
*::after,
*::before { box-sizing: border-box; margin: 0; padding: 0}
.work-link .menu-svg img {transform: scale(2);}
.contact-link .menu-svg img {transform: scale(1.4, 1);}
.about-link .menu-svg img {transform: scale(1.6, 1.3);}
.client-link .menu-svg img {transform: scale(1.8 , 1.5);}
.service-link .menu-svg img {transform: scale(1.5);}
html, body { max-width: 100%; overflow-x: hidden; font-family: 'The Hand';}
a, button { color: inherit; line-height: inherit; text-decoration: none; cursor: pointer; outline: none;}
.h-img {height: calc(100vh - 168px);}
.font-bold, .font-semibold{ font-family: 'The Hand Bold';}
.font-extrabold, .font-black{ font-family: 'The Hand Black';}
.header { position: relative; z-index: 1000; width: 100%; transition: background-color 0.3s ease;}
.sticky-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease;}
/* mobilescreen menu */
.m-menu-slide { transition: transform 0.3s ease;}
.m-menu-open { transform: translateX(0%); transition: all ease-in-out 600ms;}
.m-menu-closed { transform: translateX(100%); transition: all ease-in-out 600ms;}
.closetoggle { position: relative; color: #ffffff00; border-radius: 50%;}
.close_icon,
.close_icon::before,
.close_icon::after { position: absolute; width: 36px; height: 3px; border-radius: 4px; background-color: #ffffff; left: 0; }
.close_icon { top: 0px; bottom: 0px; left: 0; margin: auto; right: 0px;}
.close_icon::before { content: ""; bottom: 8px;}
.close_icon::after { content: ""; top: 8px;}
.toggled img { display: none;}
.toggled .close_icon { height: 3px; width: 42px; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; transform: rotate(-45deg); background-color: #f7f7f7;}
.toggled .close_icon::after { width: 42px; height: 3px; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; transform: rotate(-270deg); background-color: #f7f7f7;}
.toggled .close_icon::before { transform: scale(0);}
.close_icon, .close_icon::after { transition: all 0.4s linear;}
.submenu, .m-submenu { display: none;}
.submenu.active, .m-submenu.active { display: flex;}
.arrow-btn { background: none; border: none; cursor: pointer; display: inline-block; transition: transform 0.3s ease-in-out; transform-origin: center;}
.arrow-btn.rotate { transform: rotate(180deg);}
.h-100dvh{height: 100dvh;}
.cursour-pointer { cursor: pointer;}
.image-hover { opacity: 0; transition: opacity 0.3s ease-in-out;}
.image-hover:hover { opacity: 1;}
ul.list-disc { list-style-type: none;  padding-left: 0;}
ul.list-disc li { position: relative;}
ul.list-disc li::before { content: "";  position: absolute; left: 0;  top: 50%; transform: translateY(-50%);  width: 15px !important;  height: 15px !important; background-image: url(../images/service/desktop/li_dot.svg);  background-size: contain;  background-repeat: no-repeat;}
ul.list-disc.services li::before {  background-image: url(../images/service/desktop/li_dot_ser.svg);}

footer { background-image: url(../images/footer/background_main.svg); width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;}
@media only screen and (max-width: 1024px) {
    .close_icon, .close_icon::before, .close_icon::after { background-color: #000000; }
    ul.list-disc li::before { width: 8px!important;; /* Dot size */ height: 8px!important;}
    footer { background-image: url(../images/footer/background_main_tablet.svg); width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;}}
.activemenu { border: 1px solid #fff; border-radius: 30% !important; padding: 0px 10px !important;}
@media (max-width: 640px) { .toggled .close_icon, .toggled .close_icon::after { height: 2px; width: 32px;}
ul.list-disc li::before { width: 6px!important; /* Dot size */ height: 6px!important; /* Dot size */}}
.work-gradient { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 1) 90%); transition: opacity 0.3s ease-in-out;}
.img-main:hover .work-gradient { opacity: 1;}
.sticky-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease;}
.sticky-header .nav-text-wrapper{ padding: 0.5rem;}
.mobile-hidden{
        display: none;
    }
.smallmobile-hidden{
        display: none;
    }
@media only screen and (max-width: 640px) and (min-width: 500px) {
    .mobile-hidden{
        display: block;
    }
}
@media (max-width: 499px) {
    .smallmobile-hidden{
        display: block;
    }
}