:root {
    --background-color: #FFCE03;
    --section-bg: #f7b612;
    --section-card-bg: #f5c758bf; /* Another background color Dark effect when hover*/
    --lightbg:#fbfaf8;
    --progress-bar: #f5b512;
    --scrollbar: #fecd05;   
    --primary-color: #069dd5; /* Global variable for the color */
    --linear-primary-color: linear-gradient(var(--primary-color) 20%, #0a9cd9 50%, #0cb8e0 75%) !important;
    --primary-color-transparent: rgba(6, 157, 213, 0.2); /* 20% opacity */ 

}


a {
    color: #025ade
}

.paracontent {
    color: #3e3d3d;
    font-size: 16px;
    text-align: justify;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 0
}

.sectionone .paracontent {
    font-weight: 600;
    line-height: 27px
}

.bannersection {
    background-color: var(--background-color);
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0
}

.btn_black,
.shape_btn {
    background-color: #0b0b0b
}

.btn-home,
.btn-home .btn_grey_plus,
.btn_black {
    position: relative;
    transition: .5s ease-in-out
}

.btn-home {
    margin-left: -12px
}

.btn_black,
.btn_white {
    color: #fff;
    border-radius: 10px;
    margin-left: -13px
}

.btn-home .btn_grey_plus::before {
    right: 13px;
    width: 15px;
    background: #fff;
    bottom: -2px;
    height: 1px;
    position: absolute;
    content: ""
}

.btn-home .btn_grey_plus {
    background-color: #383934;
    padding: 7px 18px 7px 10px;
    color: #ffd601;
    border-radius: 25px 25px 25px 30px;
    min-width: 100px;
    top: 1px;
    font-size: 12px
}

.btn-home .btn_grey_plus::after {
    position: absolute;
    content: "";
    left: 23.5px;
    width: 1px;
    height: 28px;
    background: #1d1e1d;
    transform: rotate(163deg);
    top: 0
}

.btn_black {
    padding: 8px 20px;
    min-width: 100px
}

.btn_black::before {
    right: 20px;
    width: 30px;
    background: #1d1e1d;
    top: -3px
}

.btn_black::after {
    right: 5px;
    width: 30px;
    background: #1d1e1d;
    bottom: -3px
}

.btn_black::after,
.btn_black::before {
    height: 1px;
    position: absolute;
    content: ""
}

.btn-home:hover .btn_grey_plus {
    background: #0b0b0b
}

.btn-home:hover .shape_btn {
    width: 50px;
    left: 9px
}

.btn-home:hover .btn_black {
    padding-left: 0
}

.btn-home:hover .btn_black::after {
    right: 15px
}

.btn-home:hover .btn_black::before {
    right: 0
}

.btn-home i.fa.fa-plus-circle {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    background-color:var(--background-color);
    border-radius: 50%;
    background-image: url(../images/home/plus.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px
}

.shape_btn {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 57% 100%);
    width: 37px;
    height: 37px;
    display: inline-block;
    position: absolute;
    left: 22px;
    top: -1px;
    transition: .5s ease-in-out
}

.client_img {
    max-width: 34px
}

.btn_white {
    padding-left: 18px;
    display: block;
    position: relative
}

.card_shape {
    margin: 14px 0;
    position: relative
}

.card_shape::after,
.card_shape::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 100%;
    background-color: #ffce05;
    left: 0;
    top: 0;
    z-index: 9;
    filter: blur(3px)
}

.card_shape::after {
    left: auto;
    right: -5px
}

.bannerrow {
    display: flex;
    align-items: center;
    margin: 0 -12px
}

.bannerrow>div {
    width: 50%;
    padding: 0 12px
}

.img_sec {
    text-align: center
}

.bannersection.homebanner {
    height: 100vh;
    padding-top: 30px;
    position: relative
}

.banner_head {
    color: #fefeff;
    font-size: 42px;
    font-weight: 700;
    line-height: 58px;
    /* text-transform: capitalize */
}

.bg_head {
    color: #000300;
    font-size: 25px;
    font-weight: 900;
    /* background-image: url(../images/home/head_bg.webp); */
    background-repeat: no-repeat;
    background-size: 30% 100%;
    padding: 15px 30px;
    margin-bottom: 0;
    max-width: fit-content;
    position: relative
}

section {
    padding: 50px 0
}

.paracontent a:is(:hover, :focus),
p a:is(:hover, :focus) {
    text-decoration: underline
}

.btn_sec_demo {
    height: 55px;
    display: grid;
    place-content: center start;
    margin-top: 14px
}

@media only screen and (min-width:1900px) {
    .adbanner .img_full {
        max-width: 785px
    }
}

@media only screen and (min-width:1800px) {
    .img_full {
        max-width: 710px
    }
    .bannerrow .banner_head {
        font-size: 64px;
        line-height: 86px
    }
    .card_shape::before {
        left: -1px
    }
    .card_shape::after {
        right: -7px
    }
}

@media only screen and (min-width:1400px) {
    .img_full {
        width: 100%
    }
}

@media only screen and (min-width:991px) {
    .custom_container {
        width: 100%;
        max-width: 90%
    }
    .img_sec {
        text-align: end
    }
}

@media only screen and (max-width:991px) {
    .bannerrow {
        display: block
    }
    .bannerrow>div {
        width: 100%
    }
    .bannerrow>div:last-child {
        margin-top: 30px
    }
    .sectionone.bannersection {
        height: auto;
        padding-top: 100px
    }
    .award-winning {
        padding-top: 80px
    }
}

@media only screen and (max-width:576px) {
    .sectionone.bannersection {
        padding-bottom: 50px
    }
    section {
        padding: 40px 0
    }
}