@import url('https://fonts.cdnfonts.com/css/gilroy');

:root {
    --primaryColor: #E00008;
    --orangeColor: #F28B28;
    --whiteColor: #fff;
    --smPadding: 2rem 1.5rem;
    --lgPadding: 4rem 0
}

@font-face {
    font-family: 'gilroyRegular';
    src: url(../fonts/Gilroy-Regular.eot);
    src: url(../fonts/Gilroy-Regular.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-Regular.otf) format('otf'),
        url(../fonts/Gilroy-Regular.svg#Gilroy-Regular) format('svg'),
        url(../fonts/Gilroy-Regular.woff) format('woff'),
        url(../fonts/Gilroy-Regular.ttf) format('truetype'),
        url(../fonts/Gilroy-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'gilroyMedium';
    src: url(../fonts/Gilroy-Medium.eot);
    src: url(../fonts/Gilroy-Medium.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-Medium.otf) format('otf'),
        url(../fonts/Gilroy-Medium.svg#Gilroy-Medium) format('svg'),
        url(../fonts/Gilroy-Medium.ttf) format('truetype'),
        url(../fonts/Gilroy-Medium.woff) format('woff'),
        url(../fonts/Gilroy-Medium.woff2) format('woff2');
}

@font-face {
    font-family: 'gilroySemiBold';
    src: url(../fonts/Gilroy-SemiBold.ttf) format('truetype');
}


@font-face {
    font-family: 'gilroyHeavy';
    src: url(../fonts/Gilroy-Heavy.eot);
    src: url(../fonts/Gilroy-Heavy.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-Heavy.otf) format('otf'),
        url(../fonts/Gilroy-Heavy.svg#Gilroy-Heavy) format('svg'),
        url(../fonts/Gilroy-Heavy.ttf) format('truetype'),
        url(../fonts/Gilroy-Heavy.woff) format('woff'),
        url(../fonts/Gilroy-Heavy.woff2) format('woff2');
}


@font-face {
    font-family: 'gilroyExtraBold';
    src: url(../fonts/Gilroy-ExtraBold.eot);
    src: url(../fonts/Gilroy-ExtraBold.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-ExtraBold.otf) format('otf'),
        url(../fonts/Gilroy-ExtraBold.svg#Gilroy-ExtraBold) format('svg'),
        url(../fonts/Gilroy-ExtraBold.ttf) format('truetype'),
        url(../fonts/Gilroy-ExtraBold.woff) format('woff'),
        url(../fonts/Gilroy-ExtraBold.woff2) format('woff2');
}

@font-face {
    font-family: 'gilroyBold';
    src: url(../fonts/Gilroy-Bold.eot);
    src: url(../fonts/Gilroy-Bold.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-Bold.otf) format('otf'),
        url(../fonts/Gilroy-Bold.svg#Gilroy-Bold) format('svg'),
        url(../fonts/Gilroy-Bold.ttf) format('truetype'),
        url(../fonts/Gilroy-Bold.woff) format('woff'),
        url(../fonts/Gilroy-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Gilroy-Black';
    src: url(../fonts/Gilroy-Black.eot);
    src: url(../fonts/Gilroy-Black.eot?#iefix) format('embedded-opentype'),
        url(../fonts/Gilroy-Black.otf) format('otf'),
        url(../fonts/Gilroy-Black.svg#Gilroy-Black) format('svg'),
        url(../fonts/Gilroy-Black.ttf) format('truetype'),
        url(../fonts/Gilroy-Black.woff) format('woff'),
        url(../fonts/Gilroy-Black.woff2) format('woff2');
}

/* 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(--primaryColor);
}

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


/* start font class */


.font-regular {
    font-family: gilroyRegular;
}

.font-medium {
    font-family: gilroyMedium;
}

.font-semiBold {
    font-family: gilroySemiBold;
}

.font-bold {
    font-family: gilroyBold;
}

.font-heavy {
    font-family: gilroyHeavy;
}

.font-extraBold {
    font-family: gilroyExtraBold;
}

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

/* keyframe */

@keyframes opacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes gradient {
    0% {
        background-position: 0%
    }

    100% {
        background-position: 100%
    }
}

/* start btn css */


.btn-primary {
    background: var(--primaryColor);
    border: 0;
    padding: 10px 17px;
    border-radius: 7px;
}
/* end btn css */

/* start common css section */



.breadcrumb {
    margin-bottom: 0;
}

.cursor-pointer {
    cursor: pointer;
}

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

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

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

.heading p {
    color: var(--primaryColor);
    font-family: gilroyMedium;
}


.heading h2 {
    font-family: gilroyHeavy;
    font-weight: 500;
}

.owl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 21px;
    margin-top: 1rem;
}

.owl-nav .owl-prev img,
.owl-nav .owl-next img {
    width: 30px;
}

p {
    font-family: gilroyMedium;
    line-height: 1.6;
    margin-bottom: 0;
}

h2 {
    font-family: gilroyHeavy;
}

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

input::placeholder,
textarea::placeholder {
    color: #a9a9a9 !important;
    opacity: 1 !important;
    /* Firefox */
}

input::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #a9a9a9 !important;
}

.form-control:focus {
    background-color: transparent;
    box-shadow: none;
    color: var(--whiteColor);
}

.form-control {
    background-color: transparent;
    color: var(--whiteColor);
}

#main-banner {
    background: url('../img/banner-bg.png') no-repeat;
    background-size: cover;
}

.navbar-brand {
    width: 90px;
}

.download-icon a {
    width: 100px;
}

.navbar-nav {
    background: #f5f5f5;
    border-radius: 6px;
    border-top: 4px solid var(--primaryColor);
    padding: 7px 5px;
}


#features {
    background-color: #F8F8F8;
}

#features .item {
    /* background: linear-gradient(180deg, rgba(0,145,61,1) 44%, rgba(255,255,255,1) 44%); */
    box-shadow: 0 0 10px lightgray;
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 10px;
    width: 80%;
    margin: 1rem auto 0;
}

#features .item img {
    width: 120px;
}

#features .item h4 {
    font-size: 18px;
}

footer {
    background-color: #F8F8F8;
}

.footer-box {
    width: 90px;
}