:root {
    --black:#0E0E0E;
    --medium_light_black:#262226;
    --gray:#737374;
    --medium_light_gray:#DAD9D9;
    --light_gray:#F2F2F3;
}
/* *,
* *,
*::before,
*::after {
  box-sizing: border-box;
  overflow: hidden;
} */
html {
    scroll-behavior: smooth; /* Smooth scrolling */
    overflow-y: scroll !important;
    overflow-x: hidden;
}
body {
    background-color: var(--light_gray);
    overflow: hidden;
    /* overflow: scroll !important; */
}
p .semiBold {
    font-family: 'semiExtendedBold';
}
/* navbar design start */
nav {
    padding: 20px 5px !important;
    background-color: var(--light_gray);
}
.navbar-brand {
    margin-right: 0px !important;
}
.navbar-toggler,.navbar-toggler:hover,.navbar-toggler:focus {
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    border-radius:0px !important;
}
nav ul li {
    font-family: 'extendedMedium';
    font-size: 12px;
    margin-right: 15px;
}

#sys_nanbar.black_mode {
    background-color: var(--medium_light_black) !important;
}
#sys_nanbar.black_mode button i {
    color: var(--light_gray) !important;
    /* background-color: var(--light_gray); */
}
#sys_nanbar.black_mode ul li a {
    color: var(--light_gray) !important;
}
body.black_mode {
    background-color: var(--medium_light_black) !important;
}
/* navbar design end */

/* home design start */
#home_section {
    padding-top: 100px;
    margin-bottom: 80px;
}
.home_container_left {
    margin-left: 5px;
}
.home_hr{
    border-top: 5px solid var(--black) !important;
}
.home_title_medium {
    color: var(--medium_light_black);
    font-family: 'extendedMedium';
    font-size: 1.8vw;
    margin: 0px;
}
.home_title_large {
    color: var(--medium_light_black);
    font-family: 'extendedBold';
    font-size: 4.5vw;
    margin: 0px;
}

@media (max-width: 701px) { 
    .home_title_medium {
        color: var(--medium_light_black);
        font-family: 'extendedMedium';
        font-size: 4.0vw;
        margin: 0px;
    }
    .home_title_large {
        color: var(--medium_light_black);
        font-family: 'extendedBold';
        font-size: 8.5vw;
        margin: 0px;
    }
}
/* home design end */

/* about start */
.about_container_left {
    /* margin-top: auto;
    margin-bottom: auto; */
    padding-left: 30px;
}
.about_container_left .p1,.about_container_left .p2,.about_container_left .p3 {
    font-family: 'extraLight';
    color: var(--medium_light_black);
}

/* about end */

/* work_archive start */
#work_archive_section {
    position: relative;
}
#work_archive_section p {
    font-family: 'extraLight';
    color: var(--medium_light_black);
    font-size: 13px;
}
#work_archive_section .arrow_link {
    border: none;
    outline: none;
    font-size: 30px;
    color: var(--medium_light_black);
}
/* work_archive end */

/* our services start */
.our_services_main_title {
    color: var(--gray);
    font-family: 'medium';
    font-size: 25px;
    letter-spacing:0.4px;
    font-weight: 100;
}
.service_container_border {
    /* border-bottom: 2px solid var(--black) !important; */
    padding-left: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.service_container_border .border_bottom {
    border-bottom: 2px solid var(--black) !important;
    margin-top: 5px;
    margin-bottom: 3px;
}
.service_container_border .our_services_title {
    color: var(--black);
    font-size: 23px;
    font-family: 'semiCondensedMedium';
    letter-spacing:0.4px;
    font-weight: 300;
}

.service_container_border .our_services_title a {
    text-decoration: none;
    color: var(--black);
    font-size: 23px;
    font-family: 'semiCondensedMedium';
    letter-spacing:0.4px;
    font-weight: 300;
}
.service_container_border .our_services_description {
    color: var(--medium_light_black);
    font-size: 15px;
    font-family: 'mediumItalic';
    letter-spacing:0.4px;
}
#statiovery_container {
    padding-top: 100px;
}
.our_service_main_title2 {
    color: var(--gray);
    font-family: 'semiCondensedMedium';
    font-size: 23px;
    letter-spacing:0.2px;
    font-weight: 500;
}
.service_container2 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.service_container2 .our_services_title2 {
    color: var(--black);
    font-size: 23px;
    font-family: 'semiCondensedMedium';
    font-weight: 300;
}
.service_container2 .our_services_list {
    color: var(--medium_light_black);
    font-size: 14px;
    font-family: 'mediumItalic';
}
/* our services end */
#contact_section {
    background-color: var(--medium_light_black);
    margin: -12px;
    padding-top: 30vh;
}
#contact_section h1 {
    color: var(--light_gray);
    font-family: 'semiCondensedMedium';
    padding: 0px;
}
#contact_section button {
    background-color: var(--light_gray);
    color: var(--medium_light_black);
    font-family: 'semiCondensedMedium';
    font-size: 22px;
    border: none;
    outline: none;
    width: 300px;
    height: 40px;
}
#contact_section p {
    color: var(--light_gray);
    font-family: 'extendedMedium';
    font-size: 11px;
}
#contact_section p a {
    color: var(--light_gray);
    font-family: 'extendedMedium';
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}
/* contact start */

/* contact end */

/* custom bootstrap classes start*/
/* Large screens and up */
@media (min-width: 992px) { 
    .w-lg-71 {
        width: 71%;
    }
    .w-lg-75 {
        width: 75%;
    }
    .w-lg-100 {
        width: 100%;
    }
}
/* Meduim screens*/
@media (min-width: 768px) {
    .w-md-71 {
        width: 71%;
    } 
    .w-md-75 {
        width: 75%;
    }
    .w-md-100 {
        width: 100%;
    }
}
/* small screen and below */
@media (min-width: 576px) {
    .w-sm-71 {
        width: 71%;
    } 
    .w-sm-75 {
        width: 75%;
    }
    .w-sm-100 {
        width: 100%;
    }
}
/* custom bootstrap classes end */

/* colors classes start*/
.color-black {
    color: var(--black) !important;
}
.color-medium_light_black {
    color: var(--medium_light_black) !important;
}
.color-gray {
    color: var(--gray) !important;
}
.color-medium_light_gray {
    color: var(--medium_light_gray) !important;
}
.color-light_gray {
    color: var(--light_gray) !important;
}
/* colors classes end*/

/* backgrounds colors classes start*/
.bg-black {
    background-color: var(--black) !important;
}
.bg-medium_light_black {
    background-color: var(--medium_light_black) !important;
}
.bg-gray {
    background-color: var(--gray) !important;
}
.bg-medium_light_gray {
    background-color: var(--medium_light_gray) !important;
}
.bg-light_gray {
    background-color: var(--light_gray) !important;
}
/* backgrounds colors classes end*/

.pt-10 {
    padding-top: 6rem !important;
}

.hover_transition {
    transition: all 0.6s !important;
}
.hover_transition:hover {
    transform: scale(1.1) !important;
}

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none; /* Initially hidden */

    color: var(--light_gray);
    background-color: var(--black);
    border: none;
    outline: none;
}

.floating-btn:hover {
    background-color: var(--light_gray);
    color: var(--black);
    border: none;
    outline: none;
}
.floating-btn:hover i {
    color: var(--black);
}
.floating-btn i {
    color: var(--light_gray);
}