:root {
    --lightcolor: #e2f6ff;
    --secondary: #ff5000;
    --main: #002277;
    --commonred: #FF6868;
    --cool: all 0.4s cubic-bezier(0.5, 1, 0.5, 0.01);
    --smooth: 0.4s ease-in-out;
    --darkcolor: #222;
    --white: #fff;
    --commonred: #FF6868;
    --importantcolor: #bb00bb;
    --commonshadow: 0 7px 20px -10px #cbcbcb;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;900&display=swap');


body {
    background: var(--lightcolor)
}

@font-face {
    font-family: rytfont;
    src: url(./rytfont.ttf)
}


h1 {
    font-family: rytfont;
}

h2 {
    color: var(--secondary);
    font-family: rytfont;
    font-weight: 700;
    position: relative
}

.swiper-button-next {
    background: #ffffff38;
    backdrop-filter: blur(6px);
    height: 40px;
    width: 40px;
    color: var(--main);
    border-radius: 50%;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: #fff;
}

.swiper-button-prev {
    background: #ffffffab;
    backdrop-filter: blur(6px);
    height: 40px;
    width: 40px;
    color: var(--main);
    border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px !important;
}

h3,
h4,
h5,
h6 {
    font-family: 'rytfont';
}

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

a {
    text-decoration: none
}

.header {
    position: relative;
}

.deskHeader {
    display: flex;
    position: relative;
    transition: 1s;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px;
    background: var(--white);
    border-bottom: 1px solid #eee;
    box-shadow: 0 5px 10px -5px #ddd;
    z-index: 11;
}

.deskHeader .logo img {
    width: 100%;
    max-width: 120px
}

section.hero {
    padding: 20px
}

section.commonSection {
    background: var(--white);
    position: relative;
    margin: 20px;
    padding: 20px 10px;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 5px 10px -5px #ddd
}

.statsCard {
    position: relative;
    background: #efedff;
    border-radius: 20px;
    box-shadow: 0 7px 10px -5px #bbb;
    padding: 20px
}

.statsCard svg {
    position: absolute;
    font-size: 40px;
    top: 10px;
    right: 10px;
    border: 1px dashed #ccc;
    border-radius: 10px;
    transition: .4s ease-in-out
}

section.adminPanel {
    margin: 20px;
    padding: 20px
}

.statsTable {
    padding: 20px;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid #eee
}

.spcbtwn {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.spcbtwn h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
    font-size: 20px
}

a.viewAll {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 5px;
    gap: 10px;
    border-radius: 5px;
    border: 1px dashed var(--secondary);
    color: var(--secondary);
    position: relative;
    transition: .2s ease-in-out
}

a.viewAll:hover {
    background: var(--secondary);
    color: var(--white);
    border: 1px solid
}

a.actionBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    gap: 10px;
    border-radius: 10px;
    outline: 1px dashed var(--secondary);
    color: var(--secondary);
    position: relative;
    transition: .4s ease-in-out
}

a.actionBtn svg {
    border-radius: 5px;
    font-size: 30px;
    padding: 5px;
    background: 0 0;
    color: var(--secondary);
    transition: .4s ease-in-out
}

a.actionBtn :hover {
    background: var(--secondary)
}

a.actionBtn:hover {
    background: #f7f8ff;
    outline: 1px solid var(--secondary);
    outline-offset: 3px
}

a.actionBtn:hover svg {
    background: var(--secondary);
    color: var(--white)
}

.gap-10 {
    gap: 10px
}

.plainSection {
    background: #0000;
    margin: 20px;
}

@keyframes slide-in-fwd-top {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(-800px);
        transform: translateZ(-1400px) translateY(-800px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}

.gap20 {
    gap: 20px
}

.w300 {
    width: 300px
}

.uspCard {
    padding: 10px;
    border-radius: 20px;
}

.uspCard h4 {
    color: var(--white)
}

.uspCard img {
    padding: 5px;
    background: var(--white);
    border-radius: 10px;
    width: 60px
}

.blue {
    background: #724fff
}

.lightred {
    background: #ff4a4a
}

.lightgreen {
    background: #14c047
}

.orange {
    background: var(--secondary)
}

.serviceHomeCard {
    padding: 10px
}

.serviceHomeCard span {
    color: var(--darkcolor);
    font-size: 16px;
    display: block;
    margin-top: 5px;
    transition: .4s ease-in-out;
    text-decoration: underline;
    text-underline-offset: -3px;
    text-decoration-color: #0000;
    font-weight: 400
}

.serviceHomeCard img {
    border: 1px solid #0000;
    border-radius: 10px;
    transition: .4s ease-in-out
}

.serviceHomeCard:hover img {
    border: 1px solid #eee;
    box-shadow: 0 0 20px -8px #ccc
}

.serviceHomeCard:hover span {
    text-underline-offset: 5px;
    text-decoration-color: var(--secondary);
    letter-spacing: .5px
}

.serviceHomeSlider {
    padding: 20px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 10px
}


button.knowBtn {
    background: var(--main);
    color: #fff;
    border: none;
    outline: 0;
    font-size: 50px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: calc(0px - 10px);
    bottom: calc(0px - 10px);
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

a.categoryLink {
    color: var(--lightcolor);
    padding: 5px 15px;
    background: var(--secondary);
    border-radius: 9999px;
    font-size: 14px;
}

.productHeading {
    font-size: 36px
}

.priceBox {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px 0
}

.priceBox h6 {
    font-weight: 600;
    font-size: 18px;
    margin: 0
}

h6.marketprice {
    text-decoration-line: line-through;
    color: var(--commonred);
    text-decoration-thickness: 2px;
}

h6.priceNow {
    font-size: 30px !important;
    font-family: rytfont;
}

a.mainBtn,
button.mainBtn {
    background: var(--main);
    color: var(--white);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 15px;
    transition: var(--smooth);
    height: 40px;
    width: max-content;
}

a.secondaryBtn,
button.secondaryBtn {
    background: var(--secondary);
    color: var(--white);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 15px;
    transition: var(--smooth);
    height: 40px
}

a.secondaryBtn:hover,
button.secondaryBtn:hover {
    box-shadow: 0 10px 20px -10px var(--secondary);
    transition: var(--smooth);
    transform: scale(1.05)
}

a.mainBtn:hover,
button.mainBtn:hover {
    box-shadow: 0 10px 20px -10px var(--main);
    transition: var(--smooth);
    transform: scale(1.05)
}

button.importantSave {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--importantcolor);
    color: var(--white);
    font-size: 30px;
    width: 40px;
    height: 40px;
    outline: 2px solid #0000;
    outline-offset: -3px;
    transition: var(--cool);
    position: relative;

    border: none
}

button.importantSave svg.showNormal {
    display: block
}

button.importantSave svg.showHover {
    display: none
}

button.importantSave:hover {
    color: var(--importantcolor);
    background: var(--white);
    outline-offset: 2px;
    box-shadow: 0 5px 20px -10px var(--importantcolor);
    outline: 2px solid var(--importantcolor)
}

button.importantSave:hover svg.showNormal {
    display: none
}

button.importantSave:hover svg.showHover {
    display: block
}

.buyBread {
    position: fixed;
    z-index: 11;
    width: calc(100% - 40px);
    left: 20px;
    bottom: -300px;
    padding: 20px 40px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 -5px 20px -10px #bdbdbd;
    transition: var(--smooth);
}

.buyBread.show {
    bottom: 20px;
}

a.whiteBtn,
button.whiteBtn {
    position: relative;
    font-weight: 600;
    border-radius: 10px;
    height: 40px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: screen;
    padding: 0 10px;
    background: 0 0;
}

a.whiteBtn::before,
button.whiteBtn::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--white);
    border-radius: .3em;
    content: '';
    mix-blend-mode: color-burn;
}

@keyframes serviceSpecs {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(-50px * 12))
    }
}

.serviceSpecs {
    background: #0000;
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 500px
}

.serviceSpecs .specSlider {
    animation: serviceSpecs 10s linear infinite;
    display: flex;
    width: 100%
}

.serviceSpecs .specSlider:hover {
    animation-play-state: paused
}

.categoryCard {
    padding: 20px;
    border-radius: 10px;
    background: #547ccc;
    position: relative
}

.categoryCard h1 {
    color: var(--white);
    margin: 0
}

.categoryCard p {
    width: 500px;
    color: var(--white);
    text-align: justify
}

.serviceSpecs .specItem {
    width: 50px;
    overflow: hidden;
    height: 50px;
    margin: 10px
}

.serviceSpecs .specItem img {
    padding: 10px;
    background: #fff;
    display: block;
    object-fit: cover
}

img.categoryPerson {
    position: absolute
}

img.categoryPerson {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%
}

ul.relatedSearchList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

ul.relatedSearchList li:not(:last-child) {
    position: relative
}

ul.relatedSearchList li:not(:last-child)::before {
    position: absolute;
    height: 100%;
    content: "|";
    color: var(--darkcolor);
    right: -5px
}

section.downSection {
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    padding: 20px
}

.nicheHeading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px
}

.nicheHeading img {
    width: 40px;
    height: 40px
}

section.niches {
    height: 360px;
    overflow: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #fff5f0;
    margin: 20px;
    padding: 10px;
    border-radius: 20px;
}

.nicheCard {
    padding: 10px;
    background: #fff;
    border-radius: 20px;
    margin: 10px 0;
}

.nicheHeading h5 {
    margin: 0;
}

section.niches::-webkit-scrollbar {
    display: none !important
}

.swiper-pagination-bullet {
    background: var(--secondary);
    opacity: .5;
}

.swiper-pagination-bullet-active {
    background: var(--main);
    opacity: 1;
}

.benefitCard {
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    transition: cool;
    box-shadow: 0 5px 10px -5px #ddd;
    margin: 20px 0;
    position: relative
}

.benefitCard h2 {
    font-family: rytfont
}

.cityCard {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 5px 20px -10px #777
}

.cityCard img {
    object-fit: cover;
    width: 100%
}

span.cityName {
    position: absolute;
    background: #0000;
    border: 1px solid #4545451c;
    z-index: 2;
    width: calc(100% - 10px);
    height: auto;
    font-weight: 900;
    bottom: 10px;
    color: #fff;
    left: calc(0px - -5px);
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
    border-radius: 10px;
    backdrop-filter: blur(5px)
}

.cityCard:hover span.cityName {
    background: var(--secondary);
    color: var(--white)
}

.text-right {
    text-align: right !important
}

.swiper {
    width: 100%;
    height: 100%
}

.serviceCard {
    padding: 10px;
    background: #0000;
}

.serviceCard img {
    border-radius: 10px;
    transition: var(--smooth);
}

.serviceCard:hover img {
    transform: translateY(-5px);
    box-shadow: var(--commonshadow);
}


.serviceCard h5 {
    word-wrap: break-word;
    word-break: break-word;
    text-align: center;
    margin-top: 1rem;
    text-decoration: underline;
    text-decoration-color: #0000;
    text-underline-offset: -5px;
    transition: var(--smooth);
    color: #222;

}

.serviceCard h5:hover {
    text-decoration: underline;
    text-underline-offset: 7px;
    color: var(--secondary);

}

img {
    user-zoom: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: none;
    pointer-events: none;
}

.deskHeader.stickyheader {
    width: 100%;
    transition: 2s;
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;

}

.userOptions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.userHeaderBox {
    position: relative;
}

.userBar {
    position: absolute;
}

.searchBox form {
    position: relative;
}

.searchBox form input {
    background: var(--lightcolor);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: none;
    outline: none;
    padding-left: 15px;
    height: 50px;
    transition: var(--smooth);
    width: 300px;
    box-shadow: none;
}

.searchBox form input:focus {
    border-radius: 999px;
    box-shadow: 0 10px 20px -10px #dadada;
}



.searchBox form input:focus+button.searchBtn {
    background-color: var(--main);
    color: #fff;
    border-radius: 50%;
}

button.searchBtn {
    position: absolute;
    background: #fff;
    color: var(--main);
    outline: none;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    height: 36px;
    width: 36px;
    right: 7px;
    top: 7px;
    transition: var(--smooth);
}

.inputGroup {
    position: relative;
}

.inputit {
    background: none;
    color: var(--darkcolor);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    outline: none;
    border: 1px solid #eee;
    min-height: 50px;
}

.user-label {
    position: absolute;
    left: 15px;
    color: #777;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 18px;
}

.inputit:focus,
.inputit:valid {
    outline: none;
}

.inputit:focus~label,
.inputit:valid~label {
    transform: translateY(-50%) scale(0.8);
    padding: 0 .2em;
    background: #fff;
    color: var(--main);
}

.knowCard {
    position: absolute;
    z-index: 5;
    width: 320px;
    right: 25px;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: var(--commonshadow);
    transform: scale(0);
    transform-origin: right bottom;
    transition: var(--smooth);
    bottom: 25px;
}

.knowCard.active {
    transform: scale(1);
    transform-origin: bottom;
}

h2.plainHeading {
    font-weight: 900;
    font-family: 'rytfont';
    position: relative;
}

.commonBox {
    box-shadow: var(--commonshadow);
    border-radius: 20px;
    padding: 20px;
    background: #fff;
}


.resultBox {
    padding: 10px;
    border-radius: 20px;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 11;
    border: 1px solid #eee;
    box-shadow: 0 10px 20px -10px #ddd;
    transition: var(--smooth);
    top: 80%;
    opacity: 0;
    height: 0;
    pointer-events: none;
    transform: translateX(-50%);
    left: 50%;
}

.resultBox.active {
    height: auto;
    top: calc(100% + 10px);
    opacity: 1 !important;
    pointer-events: all;
    width: calc(100% + 100px);

}

.resultBox ul li a {
    padding: 10px;
    display: flex;
    border: 2px dashed #eee;
    border-radius: 10px;
    color: var(--darkcolor);
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resultBox ul li a:hover {
    color: #fff;
    background: var(--main);
    border: 2px solid var(--main);
}

.searchBox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#searchOverlay {
    height: 100vh;
    background: #0000;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    display: none;
}

#searchOverlay.active {
    display: block;
}

a.importantBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    width: 40px;
    height: 40px;
    outline: 2px solid #0000;
    outline-offset: -3px;
    transition: var(--cool);
    position: relative;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: none;
    color: var(--importantcolor);
    background: var(--white);
    outline-offset: 2px;
    outline: 2px solid var(--importantcolor);
}

a.importantBtn svg.showNormal {
    display: block;
}

a.importantBtn svg.showHover {
    display: none;
}

a.importantBtn:hover svg.showNormal {
    display: none;
}


a.importantBtn:hover svg.showHover {
    display: block;
}

a.importantBtn:hover {
    background: var(--importantcolor);
    color: var(--white);
    box-shadow: 0 5px 20px -10px var(--importantcolor);

}

.userBar {
    position: absolute;
    right: 40px;
    top: 50%;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    z-index: 11;
    border: 1px solid #eee;
    box-shadow: 0 10px 20px -10px #ddd;
    transition: var(--smooth);
    width: 200px;
    opacity: 0;
    pointer-events: none;
}

.userBar.active {
    transform-origin: top right;
    top: calc(100% + 10px);
    width: 300px;
    opacity: 1;
    pointer-events: all;
}

button.userBtn {
    display: flex;
    font-weight: 600;
    justify-content: center;
    gap: 10px;
    align-items: center;
    background: var(--lightcolor);
    color: var(--main);
    padding: 10px;
    outline-offset: 2px;
    transition: var(--smooth);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    height: 50px;
    border: 2px solid #0000;
}

button.userBtn:active,
button.userBtn:hover {
    border: 2px solid var(--main);
}

button.userBtn i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    height: 30px;
    border-radius: 5px;
    width: 30px;
    color: var(--main);
    background: #0000;
    transition: var(--smooth);
}

button.userBtn:focus i {
    color: var(--lightcolor);
    border-radius: 5px;
    background: var(--main);
}

.userLinks ul li {
    margin-bottom: 0.75rem;
}

.userLinks ul li a,
.userLinks ul li button {
    color: var(--darkcolor);
    background: #0000;
    align-items: center;
    border: none;
    justify-content: start;
    gap: 10px;
    display: flex;
    width: 100%;
    font-size: 16px;
    padding: 10px;
}

.userLinks ul li a i,
.userLinks ul li button i {
    font-size: 25px;
    color: var(--secondary);
}

footer {
    margin: 20px;
    margin-bottom: 120px;
    background: var(--main);
    padding: 20px;
    border-radius: 20px;
}

.footerLinks ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 5px;
}

.footerLinks ul a {
    color: #eee;
    font-size: 15px;
    position: relative;
}

.footerLinks ul a::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 1px;
    background: #777;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.accordion-button:not(.collapsed) {
    background-color: #fff;
    font-size: 20px;
    color: var(--secondary);


}

.accordion-button {
    transition: var(--smooth);
    border-radius: 10px !important;
    color: var(--darkcolor);

}

.accordion-button:focus {
    z-index: 3;
    border: none;
    outline: 0px;
    box-shadow: none;
    color: var(--secondary);
    font-weight: 700;

}

.accordion-item {
    background: #0000;
    border: none;
    margin: 10px 0;
    box-shadow: none;
}

.accordion-body {
    margin: 10px 0;
    background: #fff;
    border-radius: 10px;
}

.productSlide img {
    border-radius: 20px;
}

.categoryHero {
    position: relative;
    border-radius: 10px;
    padding: 10px;

    height: 100%;
    min-height: 360px;
    overflow: hidden;
    transition: var(--smooth);
}

.categoryHero.blue {
    background: #724fff;
}

.categoryHero.red {
    background: #ff4a4a;
}

.categoryHero.purple {
    background: #c40ec4;
}

.categoryHero.dgreen {
    background: #0a8a50;
}

.categoryHero.orange {
    background: #ffb354;
}

.categoryHero p {

    font-family: 'Poppins', sans-serif;
    color: #eee;
    font-weight: 700;
}

.categoryHero img {
    position: absolute;
    right: 0;
    bottom: 0;
    transition: var(--smooth);
}

.categoryHero h4 {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
}

span.explore i {
    color: #fff;
    transition: var(--smooth);
    font-weight: 800;
}

span.explore {
    position: absolute;
    transition: var(--smooth);
    left: 0;
    bottom: 40px;
    background: #0000;
    backdrop-filter: blur(10px);
    color: #222;
    z-index: 1;
    border-radius: 0 5px 5px 0;
    padding: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 3px 10px -5px #0000006e;

}

span.explore p {
    width: 0;
    opacity: 0;
    margin: 0;
    font-weight: 600;
    transition: var(--smooth);

}

.categoryHero:hover span.explore {
    color: #222;
    background: #fff;
}

.categoryHero:hover span.explore p {
    width: 100%;
    opacity: 1;
    color: var(--darkcolor);
}

.categoryHero:hover span.explore i {
    color: var(--secondary);
}

.categoryHero a {
    height: 100%;
    width: 100%;
    display: block;
}

a.categoryIconLink {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    margin: 10px;
}

a.categoryIconLink img {
    width: 75px;
    margin: auto;
    margin-bottom: 10px;
}

a.categoryIconLink .line {
    background: var(--secondary);
    margin: auto;
    transition: var(--smooth);
    height: 2px;
    width: 60px;
    opacity: 0;
    margin-top: 4px;
}

a.categoryIconLink span {
    color: var(--darkcolor);
}

a.categoryIconLink:hover .line {
    width: 100px;
    opacity: 1;
}

.subCategoryCard {
    position: relative;
    transition: var(--smooth);
    overflow: hidden;
    border-radius: 10px;
}

.subCategoryCard img {
    width: 100%;
}

.subCategoryCard .subcategoryName {
    position: absolute;
    top: 20px;
    left: 10px;
}

.subCategoryCard .subcategoryName h4 {
    color: #fff;
}

.subCategoryCard .subcategoryName span {
    color: #fff;
}

.buyDetails {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.buyDetails i {
    font-size: 20px;
}

.buyDetails.rupee i {
    color: #14c047;
}

.buyDetails.date i {
    color: #2f59ff;
}

.enquiryCard {
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 15px;
}

.enquiryCard img {
    border-radius: 10px;
}

.enquiryCard h3 {
    font-weight: bolder;
    font-size: 22px;
    color: var(--darkcolor);
}

button.edit {
    color: var(--main);
    background: #fff;
    border: 2px dashed var(--main);
    height: 40px;
    padding: 10px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--smooth);
    gap: 5px;
}

button.edit:hover {
    color: #fff;
    background: var(--main);
    border: 2px solid var(--main);
}

input#detailInput {
    background: #fff;
    border: none;
    outline: 1px solid #eee;
    padding: 7px 15px;
    width: 100%;
    border-radius: 10px;
    height: 40px;
}

input#detailInput:disabled {
    background: #f1f1f1;
}


.inputGroup {
    position: relative;
}

.input {
    border: solid 1.5px #eee;
    border-radius: 10px;
    width: 100%;
    background: #fff;
    background: none;
    padding: 1rem;
    font-size: 1rem;
    color: var(--darkcolor);
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.user-label {
    position: absolute;
    left: 15px;
    color: var(--main);
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus,
.input:valid {
    outline: none;
    border: 1.5px solid var(--main);
}

.input:focus~label,
.input:valid~label {
    transform: translateY(-50%) scale(0.8);
    background-color: #fff;
    padding: 0 .2em;
    color: var(--main);
}

.registerForm form {
    padding: 20px;
    background: #fff;
    box-shadow: var(--commonshadow);
    border: 1px solid #eee;
    border-radius: 20px;
}

section.register {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

h4.smallHeading {
    font-family: 'rytfont';
    color: var(--main);
}

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

button.showPassword {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 40px;
    background: #0000;
    outline: none;
    border-radius: 50%;
    background: #e2f6ff;
    height: 40px;
    width: 40px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.importantList table {
    overflow: hidden;
    border-radius: 10px;
    width: 100%;
}

.importantList table thead th {
    color: #fff;
    background: var(--main);
    border-left: 1px solid #fff;
    padding: 10px;

}

.importantList table tbody td {
    color: var(--darkcolor);
    padding: 10px;
}

.importantList table tbody tr:nth-child(even) {
    background: #fff3c5;
}

button.delete {
    background: #0000;
    color: var(--commonred);
    font-weight: 600;
    border: 1px dashed var(--commonred);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 15px;
    transition: var(--smooth);
    height: 40px;
    width: 40px;
    font-size: 25px;
}

button.delete:hover {
    color: #fff;
    border: 1px solid var(--commonred);
    background-color: var(--commonred);
}

.serviceGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.already {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin-top: 20px;
    border: 2px solid #eee;
    border-radius: 10px;
}

.already a {
    background: var(--secondary);
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    font-weight: 600;
}

.subCategory {
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    transition: var(--smooth);
}

.subCategory img {
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    width: 100%;
}

.subCategory a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.subCategory h5 {
    margin: 0;
    color: var(--main);
    margin-top: 10px;
}

section.infoBread {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background: #fff;

}

section.infoBread h1 {
    color: var(--main);
}

.toastify.on.error.toastify-right.toastify-top {
    background: #ffeded;
    color: #222;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}

.toastify.on.success.toastify-right.toastify-top {
    background: #dcffe6;
    color: #222;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}

.heroSlide img {
    width: 100%;
    border-radius: 20px;
}

::selection {
    background: var(--main);
    color: #fff;
}

::-webkit-scrollbar {
    width: 7px;
    background: #ccc;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: var(--main);
    border-radius: 999px;
}

span.price {
    background: #0000;
    color: var(--main);
    padding: 5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}

.resultBox ul li a:hover span.price {
    background: #fff;
    color: var(--main);
    padding: 5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}

.whatwedo h5 {
    border-left: 3px solid var(--main);
    padding-left: 5px;

}

.whatwedo ul {
    margin-bottom: 20px;
    padding-left: 10px;
}

.heroSlide {
    height: 100%;
}

.heroSlide a {
    height: 100%;
    width: 100%;
    display: block;
}

footer h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: flex;
    position: relative;
    width: max-content;
}

footer h3::before {
    position: absolute;
    bottom: -4px;
    height: 3px;
    width: 50px;
    background: var(--secondary);
    content: '';
    left: 0;
}

.bottomFooter {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    border-top: 1px solid #002277;
    padding-top: 5px;
}

.bottomFooter p {
    font-size: 13px;
    color: var(--main);
    margin: 0;
}

.bottomFooter p a {
    color: var(--secondary);
}

.bottomFooter ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottomFooter ul a {
    font-size: 13px;
    color: var(--main);
    transition: var(--smooth);
}

.bottomFooter ul a:hover {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.clickbox {
    display: flex;
    align-items: center;
}

.clickFooter {
    background: #e2f6ff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.clickbox ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.clickbox ul a {
    display: flex;
}

.clickbox ul a img {
    width: 40px;
}

.clickbox span {
    color: var(--main);
    font-weight: 600;
    margin-right: 10px;
}

.testimCard {
    padding: 20px;
    padding-bottom: 40px;
    background: #fff;
    border-radius: 20px;
    position: relative;
    transition: .4s;
    margin: 10px 0;
}

.testimCard img {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 60px;
    display: flex;
    opacity: .4;
}

.testimCard:hover {
    transform: translateY(-5px);
    transform-origin: bottom;
    box-shadow: var(--commonshadow);
}

.testimCard:hover img {
    opacity: 1;
}

.testimBio h5 {
    font-weight: 900;
    font-size: 18px;
    margin: 0;
}

.testimBio {
    width: calc(100% - 70px);
}

.testimBio span {
    font-size: 14px;
    color: #777;
}

.countryName {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    padding: 2px 5px;
    bottom: 0;
    font-size: 12px;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: 500;
    opacity: .2;
}

.testimCard:hover .countryName {
    opacity: 1;
}

.testimWords {
    margin: 5px 0;
    border-radius: 7px;
    border: 1px solid #eeeeee7b;
    padding: 5px;
    color: #666;
}

.faqRight video {
    border-radius: 20px;
}

a.typeLink {
    color: var(--main);
    padding: 5px 15px;
    background: var(--lightcolor);
    border-radius: 9999px;
    font-size: 14px;
}

ul.keywordList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}


ul.keywordList li {
    position: relative;
}


ul.keywordList li:first-child::before {
    position: absolute;
    content: '';
    display: none;
}

ul.keywordList li::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 1px;
    background: #777;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.signup {
    padding: 20px 0;
}

.centerHeading {
    text-align: center;
}

.centerHeading h2 {
    color: var(--main);
}

.centerHeading h1 {
    color: var(--main);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 1px;
}

.footerLinks {
    margin-bottom: 20px;
}

.aboutLeft h6 {
    font-weight: 600;
    font-size: 1.1rem;
}

.aboutLeft h1 {
    font-weight: 700;
    font-size: 2rem;
}

.pressCard {
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--commonshadow);
    border: 1px solid #eee;
}

.pressIcon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #3897f0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pressIcon img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    margin: 2px;
}

.pressInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pressInfo h5 {
    margin: 0;
}

.pressIcon::before {
    position: absolute;
    content: '';
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: url(../images/verifired-badge.png), #fff;
    background-size: cover;
    border-radius: 50%;
}

a.viewLink {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 10px;
    background: var(--secondary);
    color: #fff;
    font-size: 20px;
    opacity: 0.5;
}

.pressCard:hover a.viewLink {
    opacity: 1;
}

.pressCard h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}


.pressCard p {
    background: #e2f6ff;
    color: #444;
    border-radius: 10px;
    margin-top: 20px;
    height: 100%;
    padding: 10px;
}

.uspGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

a.whatsappBtn {
    background: #24cc64;
    color: var(--white);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 15px;
    transition: var(--smooth);
    height: 40px;
    width: max-content;
}

a.whatsappBtn:hover {
    box-shadow: 0 10px 20px -10px #24cc64;
    transition: var(--smooth);
    transform: scale(1.05);
}

.buttonBox {
    display: flex;
    gap: 15px;
}

.coolInput {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start;
    gap: 20px;
    position: relative;
}

.coolInput input {
    padding-left: 50px;
    height: 50px;
    outline: 1px solid #0000;
    border: none;
    outline-offset: -2px;
    transition: var(--smooth);
    background: #fff;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 7px;
}

.coolInput i {
    height: 50px;
    pointer-events: none;
    width: 50px;
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    transition: var(--smooth);
    position: absolute;

}

.coolInput input:focus {
    outline-offset: 3px;
    outline: 1px solid var(--main);
}

.coolInput input:focus~i {
    color: var(--main);
    transform: scale(1.05);
}

.coolInput select {
    padding-left: 50px;
    height: 50px;
    outline: 1px solid #0000;
    border: none;
    outline-offset: -2px;
    transition: var(--smooth);
    background: #fff;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 7px;
}

.coolInput select:focus {
    outline-offset: 3px;
    outline: 1px solid var(--main);
}

.coolInput select:focus~i {
    color: var(--main);
    transform: scale(1.05);
}

.resultCard {
    background-color: var(--lightcolor);
    color: var(--darkcolor);
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--commonshadow);
}

.resultButtons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.resultButtons a,
.resultButtons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    color: var(--white);
    background-color: var(--main);
    cursor: pointer;
    transition: var(--smooth);
}

.resultButtons a:hover,
.resultButtons button:hover {
    background-color: var(--secondary);
}

img.blogImg {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 20px -10px #bdbdbd;
    margin-bottom: 10px;
}