:root {
    --primaryColor: #D27802;
    --secondaryColor: #2A0B03;
    --lightBg: #F3F3F3;
    --blackColor: #000;
    --whiteColor: #fff;
    --smPadding: 3rem .5rem;
    --lgPadding: 4rem 0;
}


/* scroll */
::-webkit-scrollbar {
    width: 5px;
    height: 3px;
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: var(--whiteColor);
}

::-webkit-scrollbar-thumb {
    background: var(--primaryColor);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondaryColor);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* scroll */

/* start font-family */

@font-face {
    font-family: 'urbanist_extrabold';
    src: url('../font/Urbanist-ExtraBold');
    src: url('../font/Urbanist-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../font/Urbanist-ExtraBold.woff2') format('woff2'),
        url('../font/Urbanist-ExtraBold.woff') format('woff'),
        url('../font/Urbanist-ExtraBold.ttf') format('truetype'),
        url('../font/Urbanist-ExtraBold.svg#Urbanist-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'urbanist_medium';
    src: url('../font/Urbanist-Medium.eot');
    src: url('../font/Urbanist-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Urbanist-Medium.woff2') format('woff2'),
        url('../font/Urbanist-Medium.woff') format('woff'),
        url('../font/Urbanist-Medium.ttf') format('truetype'),
        url('../font/Urbanist-Medium.svg#Urbanist-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'urbanist_semibold';
    src: url('../font/Urbanist-SemiBold.eot');
    src: url('../font/Urbanist-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../font/Urbanist-SemiBold.woff2') format('woff2'),
        url('../font/Urbanist-SemiBold.woff') format('woff'),
        url('../font/Urbanist-SemiBold.ttf') format('truetype'),
        url('../font/Urbanist-SemiBold.svg#Urbanist-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'unbounded_bold';
    src: url('../font/Unbounded-ExtraBold.eot');
    src: url('../font/Unbounded-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../font/Unbounded-ExtraBold.woff2') format('woff2'),
        url('../font/Unbounded-ExtraBold.woff') format('woff'),
        url('../font/Unbounded-ExtraBold.ttf') format('truetype'),
        url('../font/Unbounded-ExtraBold.svg#Unbounded-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* end font-family */

@keyframes line {
    0% {
        width: 11%;
    }

    50% {
        width: 30%;
    }

    100% {
        width: 11%;
    }
}

body {
    font-family: 'urbanist_medium';
    font-size: 14px;
}

h1,
h2,
h3 {
    font-family: 'unbounded_bold';
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    line-height: 1.5;
    margin-bottom: 0;
}

header,
section,
footer {
    padding: var(--smPadding);
}

.text-primary {
    color: var(--primaryColor) !important;
}

.light-bg {
    background-color: var(--lightBg);
}

.cursor-pointer {
    cursor: pointer;
}

.w-fit {
    width: fit-content;
}

.object-cover {
    object-fit: cover;
}

.btn-primary {
    background-color: var(--primaryColor) !important;
    border-radius: 50px;
    font-weight: 500;
    padding: .7rem 1.7rem;
    border: 0;
}

h2::before {
    content: '';
    background-color: var(--secondaryColor);
    width: 40%;
    height: 4px;
    border-radius: 7px;
    position: absolute;
    left: 0;
    bottom: -10px;
    animation: line 5s linear infinite;
}

h2.text-center::before {
    margin: auto;
    right: 0;
}

h2.text-center.text-light::before {
    background-color: var(--whiteColor);
}


.offcanvas {
    width: 600px !important;
}

.offcanvas-header,
.offcanvas-body {
    background-color: var(--secondaryColor);
    padding: 2rem 3rem;
}

.offcanvas-body .hr-bottom {
    opacity: 1;
    border-top: 3px solid var(--whiteColor);
    border-radius: 30px;
}


.offcanvas-body .chat-btn {
    position: static;
    height: 220px;
    width: 220px;
    background: var(--primaryColor);
    border-radius: 50%;
    font-weight: 600;
    padding: 50px;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}

.offcanvas-header .btn-close {
    background-color: var(--whiteColor);
    transition: all .4s ease;
    transform: rotate(0);
    opacity: 1;
    border-radius: 40px;
    padding: 20px;
}

.offcanvas-header .btn-close:hover {
    background-color: var(--primaryColor);
    border-color: transparent;
    transform: rotate(90deg);
}

label {
    font-family: 'unbounded_bold';
}

/* start banner section */
.banner {
    background: url('../img/banner-bg.png') no-repeat;
    background-size: cover;
    background-position: center;
}

/* end banner section */

/* start why-us section */

.why-us {
    background: url('../img/why-bg.png') no-repeat;
    background-size: cover;
}

.why-us .card-img-overlay {
    top: inherit;
}

.why-us .card-img {
    border-radius: 15px;
}

/* end why-us section */

/* start service section */
.service .card {
    box-shadow: 0 0 30px lightgray;
    border: 0;
    border-radius: 30px;
}

.service .card h3 {
    font-size: 21px;
}

/* end service section */

/* start application section */
.application .box {
    background-color: var(--whiteColor);
    border: 4px solid var(--primaryColor);
    border-radius: 35px;
    padding: 15px;
    /* width: 350px; */
    height: 250px;
}

.application .box h5 {
    font-family: 'unbounded_bold';
}

/* end application section */

/* start footer section */
footer {
    background: url('../img/footer-bg.png') no-repeat;
    background-size: cover;

}

footer .info-icon {
    background-color: var(--whiteColor);
    width: 30px;
    height: 30px;
    border-radius: 100px;
    text-align: center;
    font-size: 16px;
    padding: 4px;
}

footer .info-detail {
    width: calc(100% - 40px);
}

/* end footer section */

/* start inner section */
.inner-banner {
    background: url('../img/banner-bg.png') no-repeat;
    background-size: cover;
}

/* end inner section */