/*------------------------------------------------------------------

version 2.0

[Table of contents]
1. Global CSS
        1.1 Animation CSS
        1.2 Preloader CSS
        1.3 Slider Prev/Next CSS
2. Top Menu
3. Home Section
4. Service Section
5. Portfolio Section
6. News Section
7. Support Section
8. HyperWare Section
13. Footer
14. Responsive Part
-------------------------------------------------------------------*/



/* ===================================
    1. Global CSS
====================================== */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Montserrat-Regular.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/Montserrat-Bold.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "BoxRoundedUltraLight";
    src: url('fonts/BOXROUNDED-ULTRALIGHTEXPANDED.TTF') format('truetype');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "BoxRoundedLight";
    src: url('fonts/BOXROUNDED-LIGHTEXPANDED.TTF') format('truetype');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "BoxRounded";
    src: url('fonts/BOXROUNDED-REGULAREXPANDED.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "BoxRoundedMedium";
    src: url('fonts/BOXROUNDED-MEDIUMEXPANDED.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "BoxRoundedBold";
    src: url('fonts/BOXROUNDED-BOLDEXPANDED.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-light-primary);
}

::-webkit-scrollbar-track {
    background: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: #fff;
    background-color: var(--bs-black);
}

body a {
    text-decoration: none;
    color: #23214c;
    transition: color .2s linear;
}

body a:hover,
body a:focus {
    color: var(--bs-primary);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -2px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.no-gutter>[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.vertical-align {
    display: table;
}

.vertical-align>[class^="col-"],
.vertical-align>[class*=" col-"] {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.m-top-5 {
    margin-top: 5px;
}

.m-top-10 {
    margin-top: 10px;
}

.m-top-20 {
    margin-top: 20px;
}

.m-top-40 {
    margin-top: 40px;
}

.m-bottom-5 {
    margin-bottom: 5px;
}

.m-bottom-10 {
    margin-bottom: 10px;
}

.m-bottom-20 {
    margin-bottom: 20px;
}

.m-bottom-40 {
    margin-bottom: 40px;
}

.row .row {
    margin: 0;
}

.box-wrapper {
    width: 100%;
    margin: 0;
    display: block;
    background-color: var(--bs-body-bg);
}

.content-980 {
    width: 100%;
    margin: 0;
    display: block;
    padding: 120px 5%;
    max-width: 100%;
}

.box-wrapper img,
.content-980 img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


/* ===================================
    1.1 Animation CSS
====================================== */

.animate {
    opacity: 0;
    transition: .3s ease-in;
    -ms-transform: translate(0px, 20px);
    -webkit-transform: translate(0px, 20px);
    transform: translate(0px, 20px);
}

.animate.show-it {
    opacity: 1;
    -ms-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

.wait-03s {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.wait-06s {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.wait-09s {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}


/* ===================================
    1.2 Preloader CSS
====================================== */

.doc-loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #fff;
}

.doc-loader img {
    width: 100px;
    height: 130px;
    position: absolute;
    top: 50%;
    margin-top: -65px;
    left: 50%;
    margin-left: -50px;
}

/* ===================================
    2. Top Menu
====================================== */

.menu-wrapper {
    z-index: 9999 !important;
    background-color: #D0CCDA;
    width: 100% !important;
    top: 0;
    position: fixed;
    transition: background-color .3s linear;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#header-main-menu {
    max-width: 1170px;
    margin: 0 auto;
    text-align: right;
    position: relative;
}

img.menu-logo {
    width: 180px;
    position: absolute;
    left: 1.25rem;
    z-index: 10;
    top: 1.25rem;
}

.main-menu.sm-clean {
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main-menu.sm-clean a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 40px;
    color: #615D6E;
    text-transform: uppercase;
    letter-spacing: 0.03cm;
}

.main-menu.sm-clean .sub-menu a {
    font-size: 11px;
    line-height: 20px;
}

.sm-clean .current_page_item a {
    color: #fff !important;
}

.main-menu.sm-clean a:hover {
    color: #fff !important;
}

.sm-clean li.active a {
    color: #fff !important;
}

.mob-menu {
    display: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: color .2s linear;
    color: #fff;
}


/* ===================================
    3. Home Section
====================================== */

#home {
    background-color: var(--bs-body-bg);
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-family: 'BoxRoundedBold';
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--bs-primary);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    font-size: clamp(2rem, 5vw, 5rem);
}

.hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.4;
    color: var(--bs-white);
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards 0.2s;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.hero-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-black);
    background: var(--bs-primary);
    border-radius: 4px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards 0.4s;
}

.hero-cta:hover {
    background: var(--bs-primary);
    color: var(--bs-black);
    transform: translateY(-2px);
    opacity: 0.9;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
    4. Service Section
====================================== */

.menu-wrapper.section-services {
    background-color: var(--bs-body-bg);
}

.menu-wrapper.section-services .main-menu.sm-clean a {
    color: #d0a8b1;
}

h2.big-title {
    font-size: 56px;
    line-height: 60px;
    padding-bottom: 30px;
    font-family: 'BoxRoundedMedium';
    text-align: start !important;
}

.service-holder {
    padding: 0;
}

.service-col {
    text-align: center;
}

.service-img {
    display: inline-block;
}

.service-txt {
    display: inline-block;
    width: 295px;
    margin-left: 33px;
    vertical-align: middle;
    text-align: left;
}

.service-txt h4 {
    font-size: 24px;
    padding-bottom: 10px;
}

.service-txt p {
    font-size: 18px;
    line-height: 25px;
}

.service-img img {
    width: 75px;
    height: 75px;
}

.service-icon {
    color: var(--bs-primary);
    font-size: 4.5rem !important;
}


/* ===================================
    5. Portfolio Section
====================================== */

.faq-holder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 0rem 12rem 4rem 12rem;
}

.faq-column {
    background: var(--bs-body-bg);
    padding: 2rem;
    background-color: var(--bs-black);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-column h3 {
    margin-bottom: 1.5rem;
    font-size: 1.6em;
    color: var(--bs-primary);
}

.faq-item {
    margin-bottom: 1.5rem;
}

.faq-item h4 {
    margin-bottom: 1rem;
    font-size: 1.3em;
    color: var(--bs-primary);
}

.faq-item p {
    /* color: #666; */
    line-height: 1.5;
}

.grid {
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;
    display: block;
}

.grid-item {
    float: left;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid-item img {
    width: 100%;
    height: 100%;
}

.grid-sizer,
.grid-item {
    width: 390px;
}

.grid-item.p_1x1 {
    width: 390px;
}

.grid-item.p_2x2 {
    width: 780px;
}

.grid-item a:hover {
    color: #191919;
}

#lottie-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.content-980 {
    position: relative;
    z-index: 2;
}

/* ===================================
    7. Support Section
====================================== */

.menu-wrapper.section-support {
    background-color: #dcc1c7;
}

.quote {
    background-color: var(--bs-primary);
    padding: 4rem;
}

.quote h2 {
    font-size: 48px;
    line-height: 60px;
    color: var(--bs-black);
    margin: 0;
}

#support .box-wrapper {
    background-color: var(--bs-black);
}

.support-service {
    color: var(--bs-white);
    background-color: var(--bs-body-bg);
    padding: 4rem !important;
    /* margin-bottom: 180px !important; */
    display: grid;
    row-gap: 1.15rem;
}

img.support-img {
    width: 120px;
}

.support-service span {
    color: var(--bs-primary);
}

.support-item-text {
    font-weight: 600;
    margin-top: 0.5rem;
    /* color: var(--bs-primary);  */
}

.support-description {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ===================================
    8. HyperWare Section
====================================== */

.hyperware-link {
    display: block;
    color: white !important;
    text-decoration: none;
    cursor: none;
}

.hyperware-link:hover {
    color: white !important;
    text-decoration: none;
}

.hyperware-logo {
    padding: 0 0 0 10rem;
    height: 10rem !important;
    cursor: none;
}

.custom-cursor {
    position: fixed;
    height: 40px;
    pointer-events: none;
    /* So it won't block clicks */
    background-size: contain;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

.button-cursor {
    color: var(--bs-hyperware-blue);
    font-weight: 700;
    min-width: 150px;
}

.hyperware-title {
    color: var(--bs-white);
    font-size: 48px;
    line-height: 60px;
    margin: 0;
}

.menu-wrapper.section-hyperware {
    background-color: #c596a1;
}

.hyperware-holder {
    padding: 5rem 10rem 5rem 5rem;
    /* padding: 100px; */
    /* color: #686475; */
}

@media (max-width:768px) {
    .hyperware-logo {
        display: none;
    }
}


/* ===================================
    13. Footer
====================================== */

footer {
    font-size: 14px;
    color: var(--bs-primary);
}

footer a {
    color: var(--bs-primary);
}

.footer {
    background: var(--bs-body-bg);
    color: #fff;
    padding: 2.5rem 0;
}

.footer-row {
    text-align: center !important;
}

.footer-title {
    color: var(--bs-primary);
    font-family: 'BoxRoundedBold';
    font-size: 44px;
    line-height: 44px;
    padding-bottom: 1rem;
}

.footer-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 35px;
    letter-spacing: -1px;
}

.social-footer span.fa {
    font-size: 100px;
    padding: 40px;
}

.copyright a {
    color: #fff;
}


/* ===================================
    14. Responsive Part
====================================== */

@media screen and (max-width: 1200px) {

    .content-980 {
        width: 100%;
        padding: 10%;
    }

    .service-txt {
        width: 210px;
    }

    .box-wrapper,
    .grid {
        width: 100%;
    }

    .grid-sizer,
    .grid-item {
        width: 325px;
    }

    .grid-item.p_1x1 {
        width: 325px;
    }

    .grid-item.p_2x2 {
        width: 650px;
    }

    .hyperware-logo {
        padding-left: 20%;
    }

    .hyperware-holder {
        padding: 8%;
    }

    .hyperware-holder h2 {
        font-size: 36px;
        line-height: 48px;
    }

    .faq-holder {
        padding: 0rem 4rem 6rem 4rem;
    }

    .hero-title {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.35rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

}

@media (min-width: 992px) {
    .hero-content {
        padding-bottom: 20rem;
    }
}

@media screen and (max-width: 992px) {

    .box-wrapper,
    .grid {
        width: 100%;
    }

    .grid-sizer,
    .grid-item {
        width: 50%;
    }

    .grid-item.p_1x1 {
        width: 50%;
    }

    .grid-item.p_2x2 {
        width: 50%;
    }

    .service-items-holder {
        padding-top: 50px;
    }

    #news .post {
        padding: 10%;
    }

    #news .post .entry-title {
        font-size: 36px;
        line-height: 45px;
        max-width: none;
    }

    .faq-holder {
        grid-template-columns: repeat(2, 1fr);
        padding: 3rem 4rem;
    }

    .hero-title {
        font-size: 3.5rem;
        margin-bottom: 1.25rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        max-width: 700px;
    }

}

/* @media screen and (max-width: 925px) {*/
@media screen and (max-width: 768px) {
    [class*='col-'] {
        text-align: start !important;
    }

    .footer-row {
        text-align: center !important;
    }

    /* img.menu-logo {
        width: auto;
        height: 90px;
        left: 5%;
    } */

    .mob-menu {
        display: block;
    }

    .mob-menu:hover {
        cursor: pointer;
    }

    .main-menu.sm-clean {
        padding-bottom: 0;
    }

    .main-menu {
        float: none;
        margin: 0 auto;
        text-align: center;
        max-width: 300px;
        width: 100%;
        position: relative;
        z-index: 9999;
        display: none;
    }

    .main-menu ul {
        width: 12em;
    }

    .sm-clean a,
    .sm-clean a:hover,
    .sm-clean a:focus,
    .sm-clean a:active {
        padding-right: 0;
        padding-left: 0;
    }

    .main-menu.sm-clean a {
        line-height: 18px;
    }

    .main-menu.sm-clean .sub-menu a {
        font-size: 16px;
        line-height: 18px;
        text-align: center;
    }

    h2.big-title {
        font-size: 38px;
        line-height: 44px;
    }

    .support-service {
        padding: 7% !important;
    }

    .quote {
        padding: 7%;
    }

    .quote h2 {
        font-size: 36px;
        line-height: 48px;
    }

    .social-footer span.fa {
        font-size: 70px;
        padding: 20px;
    }

    .faq-holder {
        grid-template-columns: 1fr;
        padding: 0rem 2rem 2rem 2rem;
        gap: 1.5rem;
    }

    .faq-column {
        padding: 1.5rem;
    }

    .faq-column h3 {
        font-size: 1.5em;
        margin-bottom: 1.25rem;
    }

    .faq-item {
        margin-bottom: 1.25rem;
    }

    .faq-item h4 {
        font-size: 1.1em;
        margin-bottom: 0.75rem;
    }

    .faq-item p {
        font-size: 0.95em;
        line-height: 1.4;
    }

    .hero-content {
        padding: 0 1.5rem;
    }

    .hero-title {
        font-size: 2.75rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
        max-width: 600px;
    }

    .hero-cta {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 750px) {

    .service-img {
        display: block;
        text-align: center;
    }

    .service-txt {
        width: 100%;
        display: block;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }

    .service-icon {
        font-size: 2rem !important;
    }

    .service-col {
        display: flex;
        column-gap: 0.75rem;
        margin-bottom: 0.5rem;
        align-items: center;
    }

    .service-col p {
        margin: 0;
    }

    #contact ul.counter-widget li {
        padding: 3% 0;
        display: block;
    }

    .footer-text {
        font-size: 15px;
        line-height: 22px;
        max-width: 90%;
    }

    .social-footer span.fa {
        font-size: 40px;
        padding: 30px 10px;
    }

}

@media (max-width: 576px) {
    .hyperware-holder {
        padding: 1.5rem;
        text-align: start;
    }
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--bs-primary);
    color: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    visibility: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    background-color: var(--bs-primary);
    opacity: 0.9;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.1);
    }

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

.back-to-top:not(.visible) {
    animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@media screen and (max-width: 380px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 576px) {
    .hero-content {
        padding: 0 1rem;
    }

    .hero-title {
        font-size: 2.85rem;
        margin-bottom: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 2rem;
    }

    .hero-cta {
        padding: 0.75rem 1.75rem;
        font-size: 0.95rem;
    }
}

.contact-form {
    background: transparent;
    padding: 0rem 2rem;
    box-shadow: none;
    border-radius: 0;
}

.contact-form .form-control {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: var(--bs-white);
    font-size: 0.9rem;
}

.contact-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-white);
}

.contact-form textarea.form-control {
    min-height: 80px;
}

.contact-form .btn-primary {
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-black);
    font-size: 0.9rem;
}

.contact-form .btn-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.9;
}

.contact-form .form-check-label {
    font-size: 0.85rem;
    color: var(--bs-white);
}

.contact-form .form-label {
    font-weight: 500;
    color: var(--bs-white);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.contact-form .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.contact-form .col-md-6 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.btn-hyperware {
    background-color: white;
    border: 2px solid var(--bs-hyperware-blue);
    color: var(--bs-hyperware-blue);
    font-weight: 600;
    transition: all 0.3s ease;
}

#confirmationMessage {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

#confirmationMessage.show {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 576px) {
    #confirmationMessage .message-part {
        display: block;
    }
}