@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

:root {
    --frank-ruhl-fonts: 'Frank Ruhl Libre', serif;
    --karma-fonts: 'Karma', serif;
    --body-font-size: 1.5rem;
    --body-line-height: 2.6rem;
    --headings-weight: 700;
    --transition: all 0.3s ease 0s;
    --container-fluid-offset: 12rem
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body,
html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: var(--karma-fonts);
    font-size: var(--body-font-size, 1.5rem);
    font-weight: var(--body-font-weight);
    font-style: normal;
    line-height: var(--body-line-height, 26px);
    position: relative;
    visibility: visible;
    overflow-x: hidden;
    color: var(--foreground-color);
    background-color: var(--background-color)
}

@media only screen and (max-width:767px) {
    body {
        font-size: 1.4rem;
        line-height: 2.4rem
    }
}

[data-aos=fade-up] {
    transform: translate3d(0, 40px, 0);
    -webkit-transform: translate3d(0, 40px, 0);
    -moz-transform: translate3d(0, 40px, 0);
    -ms-transform: translate3d(0, 40px, 0);
    -o-transform: translate3d(0, 40px, 0)
}

.tooltip {
    font-size: 1.3rem
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--headings-weight);
    margin: 0;
    font-family: var(--frank-ruhl-fonts)
}

.h1,
h1 {
    font-size: 2.2rem;
    line-height: 3.2rem
}

@media only screen and (min-width:480px) {

    .h1,
    h1 {
        font-size: 2.3rem;
        line-height: 3.3rem
    }
}

@media only screen and (min-width:576px) {

    .h1,
    h1 {
        font-size: 2.4rem;
        line-height: 3.4rem
    }
}

@media only screen and (min-width:768px) {

    .h1,
    h1 {
        font-size: 3rem;
        line-height: 4rem
    }
}

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

    .h1,
    h1 {
        font-size: 4rem;
        line-height: 5rem
    }
}

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

    .h1,
    h1 {
        font-size: 4.5rem;
        line-height: 6rem
    }
}

@media only screen and (min-width:1366px) {

    .h1,
    h1 {
        font-size: 5.5rem;
        line-height: 7rem
    }
}

@media only screen and (min-width:1600px) {

    .h1,
    h1 {
        font-size: 6rem;
        line-height: 7.5rem
    }
}

.h2,
h2 {
    font-size: 2rem;
    line-height: 2.6rem;
    font-weight: 600
}

@media only screen and (min-width:576px) {

    .h2,
    h2 {
        font-size: 2.2rem;
        line-height: 2.8rem
    }
}

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

    .h2,
    h2 {
        font-size: 2.5rem;
        line-height: 3rem
    }
}

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

    .h2,
    h2 {
        font-size: 2.8rem;
        line-height: 3.5rem
    }
}

@media only screen and (min-width:1366px) {

    .h2,
    h2 {
        font-size: 3rem;
        line-height: 3.5rem
    }
}

.h3,
h3 {
    font-size: 1.5rem;
    line-height: 2.4rem
}

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

    .h3,
    h3 {
        font-size: 1.6rem;
        line-height: 2.8rem
    }
}

.h4,
h4 {
    font-size: 1.6rem;
    line-height: 2.6rem
}

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

    .h4,
    h4 {
        font-size: 1.7rem;
        line-height: 2.8rem
    }
}

.h5,
h5 {
    font-weight: 400
}

.h6,
h6 {
    font-weight: 400
}

.p,
p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary-color)
}

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

    .p,
    p {
        margin-bottom: 1.5rem
    }
}

p:last-child {
    margin-bottom: 0
}

a,
button {
    display: inline-block;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    text-decoration: none;
    color: inherit
}

a,
button,
img,
input,
textarea {
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

:focus-visible {
    -webkit-box-shadow: 0 0 5px 2px rgba(19, 19, 19, .15);
    box-shadow: 0 0 5px 2px rgba(19, 19, 19, .15)
}

a:focus {
    text-decoration: none;
    outline: 0
}

a {
    color: var(--foreground-color)
}

a:hover {
    text-decoration: none;
    color: var(--secondary-color)
}

button,
input[type=submit] {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

span {
    display: inline-block;
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

label {
    -webkit-transition: var(--transition);
    transition: var(--transition);
    display: block
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 1
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    opacity: 1
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 1
}

ul {
    margin: 0;
    padding: 0
}

ul:last-child {
    margin-bottom: 0
}

li {
    list-style: none;
    line-height: 1
}

hr {
    border-top-width: 2px
}

/* @media only screen and (min-width:576px) {
    .container {
        max-width: 576px
    }
}

@media only screen and (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media only screen and (min-width:992px) {
    .container {
        max-width: 992px
    }
}

@media only screen and (min-width:1200px) {
    .container {
        max-width: 1200px
    }
}

@media only screen and (min-width:1366px) {
    .container {
        max-width: 1290px
    }
} */

/* .container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem)
} */

/* .container-fluid {
    --offset-fluid: 1.5rem;
    padding-right: var(--offset-fluid);
    padding-left: var(--offset-fluid)
} */
/* 
@media only screen and (min-width:992px) {
    .container-fluid {
        --offset-fluid: 3rem
    }
}

@media only screen and (min-width:1366px) {
    .container-fluid {
        --offset-fluid: calc(var(--container-fluid-offset) / 4.5)
    }
}

@media only screen and (min-width:1600px) {
    .container-fluid {
        --offset-fluid: calc(var(--container-fluid-offset) / 2.5)
    }
}

@media only screen and (min-width:1800px) {
    .container-fluid {
        --offset-fluid: var(--container-fluid-offset)
    }
}

.container-fluid.width-100 {
    --offset-fluid: 0
} */

.row {
    margin-right: -1rem;
    margin-left: -1rem
}

@media only screen and (min-width:992px) {
    .row {
        margin-right: -1.5rem;
        margin-left: -1.5rem
    }
}

.row>* {
    padding-right: 1rem;
    padding-left: 1rem
}

@media only screen and (min-width:992px) {
    .row>* {
        padding-right: 1.5rem;
        padding-left: 1.5rem
    }
}

@media only screen and (max-width:1199px) {
    .col-lg-order {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .d-lg-none {
        display: none
    }
}

@media only screen and (max-width:991px) {
    .d-md-none {
        display: none
    }

    .d-md-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .col-md-order {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .d-md-block {
        display: block
    }

    .d-md-2-block {
        display: block !important
    }

    .d-md-u-block {
        display: block !important
    }
}

@media only screen and (max-width:767px) {
    .d-sm-u-none {
        display: none
    }

    .d-sm-block {
        display: block
    }

    .d-sm-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .col-sm-order {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .d-sm-u-block {
        display: block !important
    }
}

@media only screen and (max-width:575px) {
    .d-sm-2-none {
        display: none
    }

    .d-sm-2-block {
        display: block
    }

    .d-sm-2-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .col-sm-2-order {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

@media only screen and (max-width:479px) {
    .d-sm-3-none {
        display: none
    }
}

@media only screen and (max-width:575px) {
    .custom-col {
        width: 50%
    }
}

@media only screen and (max-width:479px) {
    .custom-col {
        width: 100%
    }
}

@media only screen and (max-width:991px) {
    .row-md-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .row_md_reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@media only screen and (max-width:767px) {
    .row_sm_reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

@media only screen and (max-width:575px) {
    .row_sm_u_reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

.swiper:hover .swiper__nav--btn {
    opacity: 1;
    visibility: visible
}


@media only screen and (max-width:892px) {
 .drop-menu:hover .pd-list-nav{
 transform: translateY(0px);
 opacity: 1;
 }
 .pd-list-nav{
 transform: translateY(0px);
 opacity: 1;
 transition: all 400ms;
 }
}

.drop-menu:hover .pd-list-nav{
    transform: translateY(0px);
    opacity: 1;
}
.pd-list-nav{
    transform: translateY(15px);
    opacity: 0;
    transition: all 400ms;
}
.drop-delay1{
    transition-delay: 300ms;
}
.drop-delay2{
    transition-delay: 400ms;
}
.drop-delay3{
    transition-delay: 500ms;
}
.drop-delay4{
    transition-delay: 600ms;
}

.ban-anm{
    overflow: hidden;
}
.ban-anm img{
    width: 100%;
    height: auto;
    transform: scale(1.14);
    transition: all 1200ms ease-in;
}
.swiper-slide-active img{
    transform: scale(1) !important;
}

.swiper__nav--btn {
    width: 3.5rem;
    height: 3.5rem;
    background: inherit;
    border: 1px solid var(--secondary-color);
    background: var(--body-background-color);
    color: var(--secondary-color);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    z-index: 9
}

@media only screen and (max-width:479px) {
    .swiper__nav--btn {
        width: 3rem;
        height: 3rem
    }
}

.swiper__nav--btn.swiper-button-disabled {
    background: inherit;
    color: var(--primary-color)
}

.swiper__nav--btn:hover {
    background: var(--secondary-color);
    color: var(--text-white-color)
}

.swiper__nav--btn::after {
    display: none
}

.swiper__nav--btn.swiper-button-prev {
    left: 0
}

.swiper__nav--btn.swiper-button-next {
    right: 0
}

.swiper__nav--btn.swiper-button-next::after {
    display: none
}

.swiper-pagination {
    /* bottom: 0 !important */
}
.swiper-button-next{
    width: 1.5rem !important;
    height: 1.5rem !important;
    border: 1px solid black;
    top: 57% !important;
    border-radius: 50%;
}
.swiper-button-next:after{
    font-size: 12px !important;
    font-weight: 700 !important;
    color: black;
}
.swiper-button-prev{
    width: 1.5rem !important;
    height: 1.5rem !important;
    border: 1px solid black;
    top: 57% !important;
    border-radius: 50%;
}
.swiper-button-prev:after{
    font-size: 12px !important;
    font-weight: 700 !important;
    color: black;
}
.swiper-pagination-bullet {
    width: 13px !important;
    height: 13px !important;
    border: 1px solid var(--primary-color);
    opacity: 1;
    vertical-align: middle;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    background: inherit;
    margin: 0 4px !important;
    position: relative;
}
/* 
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: ;
} */

.no-gutter {
    margin-right: 0;
    margin-left: 0;
}

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

.position__sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.header__transparent {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9
}

.primary__btn {
    font-weight: 500;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 4.2rem;
    height: 3.8rem;
    padding: 0 2rem;
    letter-spacing: .2px;
    border-radius: .5rem;
    background: var(--secondary-color);
    color: var(--text-white-color);
    border: 0
}

.primary__btn:hover {
    background: var(--primary-color);
    color: var(--text-white-color)
}

@media only screen and (min-width:768px) {
    .primary__btn {
        line-height: 4.4rem;
        height: 4rem;
        padding: 0 2.2rem;
        font-size: 1.4rem
    }
}

@media only screen and (min-width:992px) {
    .primary__btn {
        font-size: 1.5rem;
        line-height: 4.8rem;
        height: 4.4rem;
        padding: 0 2.5rem
    }
}

@media only screen and (min-width:1200px) {
    .primary__btn {
        line-height: 5rem;
        height: 4.6rem;
        padding: 0 3.5rem
    }
}

.gradient__text--color {
    background: -webkit-gradient(linear, left top, right top, from(#1066e7), to(#c81cc5));
    background: linear-gradient(to right, #bad547 0, #c81cc5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

select {
    word-wrap: normal;
    font-family: var(--font-lato);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height)
}

.select {
    position: relative
}

.select::before {
    border-bottom: 2px solid #201e1e;
    border-right: 2px solid #201e1e;
    content: '';
    display: block;
    height: 7px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: .7
}

.section__heading--subtitle {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--bg-offwhite-color);
    color: var(--primary-color);
    padding: 2px 2.5rem;
    border-radius: 2rem;
    line-height: 2.4rem;
    margin-bottom: 1.4rem
}

.section__heading--maintitle {
    font-weight: 600;
    color: var(--primary-color)
}

.section__heading--flex {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem
}

.section__heading--desc {
    margin-top: 1.2rem
}

#scroll__top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 99;
    outline: 0;
    background-color: var(--secondary-color);
    color: var(--text-white-color);
    -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
    box-shadow: 0 2px 22px rgba(0, 0, 0, .16);
    cursor: pointer;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    line-height: 1;
    width: 4.3rem;
    height: 4.3rem;
    border-radius: 50%;
    border: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

#scroll__top:hover {
    background: var(--primary-color)
}

@media only screen and (max-width:991px) {
    #scroll__top {
        bottom: 75px
    }
}

#scroll__top.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#scroll__top svg {
    width: 25px;
    line-height: 1
}

.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important
}

.width__295 {
    width: 295px
}

.line-height-1 {
    line-height: 1
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.overflow-hidden {
    overflow: hidden
}

.break {
    word-break: break-word
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.text-ofwhite {
    color: var(--ofwhite-color)
}

.bg__primary {
    background: var(--primary-color)
}

.bg__secondary {
    background: var(--secondary-color)
}

.bg__black {
    background: #1d1c1c
}

.bg__gray {
    background: var(--bg-gray-color)
}

.text__hover {
    color: var(--hover-color)
}

.text__primary {
    color: var(--primary-color)
}

.text__secondary {
    color: var(--secondary-color) !important
}

.position__relative {
    position: relative
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important
}

.border {
    border: 1px solid var(--border-color) !important
}

.border-0 {
    border: none
}

.border-radius-5 {
    border-radius: .5rem
}

.border-radius-10 {
    border-radius: 1rem
}

.border-radius-20 {
    border-radius: 2rem
}

.border-radius-30 {
    border-radius: 3rem
}

.border-radius-50 {
    border-radius: 50%
}

.width-100 {
    width: 100%
}

@media only screen and (max-width:991px) {
    .md-width-100 {
        width: 100%
    }
}

.display-block {
    display: block
}

.tab_content {
    display: block
}

.tab_pane {
    display: none;
    -webkit-transition: var(--transition);
    transition: var(--transition)
}

.tab_pane:not(.show) {
    opacity: 0
}

.tab_pane.show {
    opacity: 1
}

.tab_pane.active {
    display: block
}

.mobile_menu_open,
.offCanvas__minicart_active,
.offcanvas__filter--sidebar_active,
.predictive__search--box_active,
body.overlay__active {
    overflow-y: hidden
}

.mobile_menu_open::before,
.offCanvas__minicart_active::before,
.offcanvas__filter--sidebar_active::before,
.predictive__search--box_active::before,
body.overlay__active::before {
    position: absolute;
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: .5;
    cursor: crosshair
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate-fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

.section--padding {
    padding-top: 4rem;
    padding-bottom: 4rem
}

@media only screen and (min-width:768px) {
    .section--padding {
        padding-top: 4rem;
        padding-bottom: 6rem
    }
}

@media only screen and (min-width:1200px) {
    .section--padding {
        padding-top: 5rem;
        padding-bottom: 5rem
    }
}

.section--nargin {
    margin-top: 5rem;
    margin-bottom: 5rem
}

@media only screen and (min-width:768px) {
    .section--nargin {
        margin-top: 6rem;
        margin-bottom: 6rem
    }
}

.p-0 {
    padding: 0
}

.pt-0 {
    padding-top: 0
}

.pb-0 {
    padding-bottom: 0
}

.pb-15 {
    padding-bottom: 1.5rem
}

.pb-20 {
    padding-bottom: 2rem
}

.m-0 {
    margin: 0
}

.mt-0 {
    margin-top: 0
}

.mt-30 {
    margin-top: 3rem
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-60 {
    margin-bottom: 3.5rem
}

@media only screen and (min-width:768px) {
    .mb-60 {
        margin-bottom: 4rem
    }
}

@media only screen and (min-width:992px) {
    .mb-60 {
        margin-bottom: 6rem
    }
}

.mb-55 {
    margin-bottom: 3.5rem
}

@media only screen and (min-width:992px) {
    .mb-55 {
        margin-bottom: 5.5rem
    }
}

.mb-50 {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:768px) {
    .mb-50 {
        margin-bottom: 3rem
    }
}

@media only screen and (min-width:1200px) {
    .mb-50 {
        margin-bottom: 4rem
    }
}

@media only screen and (min-width:1600px) {
    .mb-50 {
        margin-bottom: 5rem
    }
}

.mb--n50 {
    margin-bottom: -2.5rem
}

@media only screen and (min-width:768px) {
    .mb--n50 {
        margin-bottom: -3rem
    }
}

@media only screen and (min-width:1200px) {
    .mb--n50 {
        margin-bottom: -4rem
    }
}

@media only screen and (min-width:1600px) {
    .mb--n50 {
        margin-bottom: -5rem
    }
}

.mb-40 {
    margin-bottom: 3rem
}

@media only screen and (min-width:992px) {
    .mb-40 {
        margin-bottom: 4rem
    }
}

.mb--n40 {
    margin-bottom: -3rem
}

@media only screen and (min-width:992px) {
    .mb--n40 {
        margin-bottom: -4rem
    }
}

.mb-35 {
    margin-bottom: 2.5rem
}

@media only screen and (min-width:768px) {
    .mb-35 {
        margin-bottom: 3rem
    }
}

@media only screen and (min-width:1200px) {
    .mb-35 {
        margin-bottom: 3.5rem
    }
}

.mb-30 {
    margin-bottom: 2rem
}

@media only screen and (min-width:768px) {
    .mb-30 {
        margin-bottom: 2.5rem
    }
}

@media only screen and (min-width:992px) {
    .mb-30 {
        margin-bottom: 3rem
    }
}

.mb--n30 {
    margin-bottom: -2rem
}

@media only screen and (min-width:992px) {
    .mb--n30 {
        margin-bottom: -2.5rem
    }
}

@media only screen and (min-width:1600px) {
    .mb--n30 {
        margin-bottom: -3rem
    }
}

.mb-28 {
    margin-bottom: 2rem
}

@media only screen and (min-width:992px) {
    .mb-28 {
        margin-bottom: 2.3rem
    }
}

@media only screen and (min-width:1200px) {
    .mb-28 {
        margin-bottom: 2.8rem
    }
}

.mb--n28 {
    margin-bottom: -2rem
}

@media only screen and (min-width:992px) {
    .mb--n28 {
        margin-bottom: -2.3rem
    }
}

@media only screen and (min-width:1200px) {
    .mb--n28 {
        margin-bottom: -2.8rem
    }
}

.mb--n25 {
    margin-bottom: -1.8rem
}

@media only screen and (min-width:992px) {
    .mb--n25 {
        margin-bottom: -2rem
    }
}

@media only screen and (min-width:1200px) {
    .mb--n25 {
        margin-bottom: -2.5rem
    }
}

.mb-25 {
    margin-bottom: 1.8rem
}

@media only screen and (min-width:992px) {
    .mb-25 {
        margin-bottom: 2rem
    }
}

@media only screen and (min-width:1200px) {
    .mb-25 {
        margin-bottom: 2.5rem
    }
}

.mb-20 {
    margin-bottom: 1.5rem
}

@media only screen and (min-width:768px) {
    .mb-20 {
        margin-bottom: 2rem
    }
}

.mb-18 {
    margin-bottom: 1.2rem
}

@media only screen and (min-width:768px) {
    .mb-18 {
        margin-bottom: 1.8rem
    }
}

.mb-15 {
    margin-bottom: 1rem
}

@media only screen and (min-width:768px) {
    .mb-15 {
        margin-bottom: 1.5rem
    }
}

.mb-12 {
    margin-bottom: 1rem
}

@media only screen and (min-width:992px) {
    .mb-12 {
        margin-bottom: 1.2rem
    }
}

.mb-10 {
    margin-bottom: .8rem
}

@media only screen and (min-width:992px) {
    .mb-10 {
        margin-bottom: 1rem
    }
}

.mb-5 {
    margin-bottom: .5rem
}

.mb_5 {
    margin-bottom: .5rem
}

.mb-8 {
    margin-bottom: .8rem
}

.mr-30 {
    margin-right: 3rem
}
a{
    text-decoration: none !important;
}
.rehmat-logo{
    width: 100%;
}
.rehmat-logo img{
    max-height: 105px;
    width: 100%;
        object-fit: contain;
}
.f-a-c{
    display: flex;
    align-items: center;
}
.custom-nav{
    display: flex;
    align-items: center;
    height: fit-content;
}
.menu-self-box{
    width: fit-content;
}

.menu-self{
    display: flex;
    align-items: center;
    height: fit-content;
    padding-left: 0;
}
.menu-self li{
        padding:0 11px;
}
.menu-self a.news-btn{
    margin-top:0;
}
@media (max-width: 1310px){
    .menu-self li{
        padding:0 21px;
    }
}
@media (max-width: 1200px){
    .menu-self li{
        padding:0 12px;
     }
}
@media (max-width: 1100px){
    .menu-self li{
        padding:0 5px;
     }
}
@media (max-width: 1000px){
    .menu-self li{
        padding:0 4px;
     }
}
.drop-menu{
    position: relative;
}
.drop-menu .fa-plus-circle{
    display: none;
}
.drop-menu:hover .sub-menu-list{
    opacity: 1;
    visibility: visible;
}

.sub-menu-list{
    position: absolute;
    top: 2rem;
    /*left: -40vw;*/
    z-index: 5;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    width: 18rem;
    transition: all 500ms;
    opacity: 0;
    visibility: hidden;
    transform: translate(-57%, 9%);
    cursor: pointer;
}
@media only screen and (max-width:520px){
    .sub-menu-list{
        /*left: -40vw;*/
            transform: translate(0%, 0%);
    }
}

/* new contact */

.cont-inpage{
    padding: 4rem 1rem;
}

.cont-left{
    width: 80%;
    margin-top: 10%;
    background: rgba(255, 255, 255, 0.626);
    padding: 1.5rem;
    padding-left: 2.4rem !important;
    border-radius: 6px;
    box-shadow: 0px 0px 4px gray;
}
.cnt-h{
    font-size: 26px;
    font-weight: 600;
    color:  #027dc5;
}
.info-boxs{
    margin-top: 19px;
    margin-bottom: 19px;
}
.info-boxs .p {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 8px;
}
.info-boxs .p span{
    font-size: 21px;
    color: #027dc5;
    font-weight: 600;
}
.info-boxs .p i{
    margin-right: 8px;
    font-size: 18px;
    color: #027dc5;
}
.info-boxs .p .fa-phone{
    margin-right: 8px;
    font-size: 24px;
}
.info-boxs .addr{
    font-size: 18px;
    color: rgb(77, 77, 77);
    font-weight: 600;
}
.info-boxs .links{
    text-decoration: none;
    font-size: 18px;
    color: rgb(82, 82, 82);
    font-weight: 600;
    transition: all 400ms;
}
.info-boxs .links:hover{
    color: black;
}
/* new contact end */

.sub-menu-lis-ul li{
    padding: 5px;
}
.sub-menu-lis-ul li a{
    font-size: 16px;
    color: black;
    font-weight: 500;
    transition: all 400ms;
}
.sub-menu-lis-ul li a:hover{
    color: red;
}
 .girl-png{
        display: none;
    }
@media only screen and (max-width:892px) {
    .drop-menu:hover .pd-list-nav{
        transform: translateY(0px);
        opacity: 1;
    }
    .pd-list-nav{
        transform: translateY(0px);
        opacity: 1;
        transition: all 400ms;
    }
    .cont-left{
        width: 98%;
        margin-top: 2.8rem;
    }
    .girl-png{
        display: block;
         margin-top: 2.8rem;
    }
}

.menu-list i{
    margin-left: 6px;
}
.menu-list{
    font-size: 19px;
    padding: 5px 10px;
    color: black;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 400ms;
}
.menu-list:hover{
    color: red;
}
.Menu-btn{
    font-size: 26px;
    color: black;
    margin-right: 8px;
    cursor: pointer;
}
.mr-45{
    margin-right: 45px;
}
.nav-icons{
    margin-right: 10px;
}
.nav-icons img{
    height: 1.75rem;
    width: 1.75rem;
    transition: all 400ms;
}
.nav-icons img:hover{
    transform: scale(1.095);
}




@media only screen and (max-width:992px) {
    .menu-self-box {
        /* display: none ; */
        position: fixed;
        left: 0;
        z-index:4;
        height: 96vh;
        top: 3.2rem;
        width: 75vw;
        overflow: hidden;
        transform: translateX(-100vw);
        transition: all 500ms ease;
    }
    .menu-self{
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 1rem;
        justify-content: start;
        background: white;
        align-items: flex-start;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .menu-self li{
        justify-content: left;
        width: 100%;
    }
    .drop-menu .fa-caret-down{
        display: none;
    }
    .drop-menu .fa-plus-circle{
        display: flex;
        float: right;
        margin-left: 12px;
        position: absolute;
        top: 0;
        right: 10px;
    }
}


@media only screen and (max-width:992px) {
.swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
}
}
.inner-pd-related{
    background: #ece9e9;
    padding-top: 4rem;
}
.pd-related p,
.pd-related span,
.pd-related a{
    padding: 10px;
    padding-left: 21px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    background: #70cce5;
    color: white;
    transition: all 400ms;
    width: 100%;
}
.pd-related p:hover,
.pd-related span:hover,
.pd-related a:hover{
    color: black;
}
.all-product-sec{
    width: 100%;
    position: relative;
    height: fit-content;
    padding: 4rem 0;
    margin-bottom: 4rem;
    z-index: 2;
    overflow-x: hidden;
    overflow: visible;
}
.all-product-sec::before{
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    top: 0;
    z-index: -1;
    width: 150%;
    height: 100%;
    transform: rotate(4deg);
    background: rgb(2,0,36);
background: linear-gradient(90deg,#bad547,#ef7922);
}
.all-pd-h{
    width: 90%;
    margin-left: 5%;
    margin-bottom: -5%;
    display: inline-block;
}
.all-pd-box{
    width: 80%;
    height: fit-content;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
}
.all-pd-box a{
    position:relative;
}
.price-tag{
    /*position:absolute;*/
    /*top:16px;*/
    /*right: 55px;*/
    /*z-index:2;*/
    width: fit-content;
    height:fit-content;
    padding-top: 10px;
    /*padding: 6px 12px 21px 21px;*/
    /*background-image: url(../images/img/mrpBg.webp);*/
    /*background-size: 100%;*/
    /*background-repeat: no-repeat;*/
    /*text-align: center;*/
    /*display:flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}
.price-tag span{
    font-size:19px;
    font-weight: 600;
    color: black;
    /*transform: rotate(-6deg);*/
}
.align-items-center{
   align-items: center !important;
}
.all-pd-box img{
    width: 100%;
    height: auto;
}
.all-pd-box img{
    transition: all 400ms ease;
}
.all-pd-box img:hover{
    transform: scale(1.045);
}
.pdm1{
    margin-top: -10%;
    background: #ffa200;
}
.pdm2{
    background: #04dfff;
}
.pdm3{
    margin-top: 10%;
    background: white;
}


@media only screen and (max-width:992px) {
    .pdm1{
        margin-top: 2.8rem;
    }
    .pdm2{
        margin-top: 2.8rem;
    }
    .pdm3{
        margin-top: 2.8rem;
    }
    .why-us-box{
        margin-top: 2rem;
    }
    .product-slider{
        rotate: 0deg;
    }
    .swiper-pagination-horizontal2{
        rotate: 0deg;
    }
    .pdm21{
        background: white;
        rotate: 0deg;
    }
    .social-ft{
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        bottom: unset !important;
        right: unset !important;
        margin-top: 2rem !important;
        z-index: 2;
    }
    .cont-bg{
        padding: 2rem !important;
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
    background-position-x: center !important;
    margin-top: -5.5rem !important;
    }
    .newscont{
        height: 230px !important;
        margin-top: -4rem;
    }
    
    .abt-mob{
        margin-top: 2.8rem !important;
        text-align: center;
    }
    .abt-p{
        font-size: 14px;
    }
}

.why-us-box{
    width: 74%;
}
.why-us-box img{
    width: 100%;
}
.why-us-box p{
    text-align: center;
    margin-top: 8px;
}
.zip-img{
    width: 80%;
    margin-left: 10%;
}
.product-slider{
    rotate: 4deg;
    padding-bottom: 4rem !important;
}
.swiper-pagination-horizontal2{
    rotate: -4deg;
}
.brands-content{
    width: 96%;
    padding: 2rem 0rem !important;
    /* overflow-x: hidden !important; */
}
.brands-content .swiper-slide{
padding: 0rem 2rem !important;
}
.pdm21{
    background: white;
    rotate: -4deg;
}

.cont-bg{
    background-image: url(../images/img/png-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: right;
    position: relative;
    padding: 2.4rem ;
    padding-top: 8% ;
    padding-bottom: 12% ;
    z-index: 2;
    height: fit-content;
    width: 100%;
    overflow: visible;
    height: fit-content;
    margin-top: -5rem;
}


/* inner smaall products start */
.pd-dt-sec{
    background: rgb(203, 202, 202);
}
.iner-sm-pd{
    border: 1px solid gray;
    margin-bottom: 6px;
    transition: all 350ms;
}
.brdr1{
    border: 1px solid red !important;
}
.iner-sm-pd img{
    cursor: pointer;
}
.pd-main-img{
    border: 1px solid gray;
    width: 100%;
}
.sect-name{
    padding: 2.8rem 2rem;
    background: white;
}

.span-rd{
    font-size: 25px;
    color: red;
    font-weight: 400;
    margin-bottom: 8px;
}
.sect-name .p{
    font-size: 18px;
    color: gray;
    margin-top: 16px;
}
.req-call{
    background: #d00202;
    color: white;
    padding: 5px 2px;
    text-shadow: 1px 1px black;
    width: 95px !important;
    height: fit-content;
    position: absolute;
    right: 4%;
    top: -14px;
    z-index: 2;
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    transition: all 350ms;
}
.req-call::before{
    content: "";
    position: absolute;
    left: -9px;
    top: 0;
    border-bottom: 14px solid #030303;
    border-left: 10px solid transparent;
}
.req-call:hover{
    font-style: italic;
    color: white;
}
.req-call span{
    font-size: 18px;
    color: white;
    text-shadow: 1px 1px black;
    display: block;
    font-weight: bold;
}
.pd-descr{
    background: white;
    padding:2.2rem !important;
    height: 635px;
    overflow: hidden;
    padding-bottom: 5.5rem !important;
    transition: all 400ms;
}
.zoom-btn{
    width: 40px;
    height: 40px;
    background: rgb(87, 87, 87);
    color: white;
    font-size: 19px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
@media  (max-width:740px){
    .pd-descr{
        height: 730px;
    }
}
.prc-tx{
    font-size: 18px;
    color: gray;
    display: flex;
    align-items: center;
}
.prc-tx-brdr{
    padding-bottom: 9px;
    border-bottom: 1px solid rgb(214, 213, 213);
}
.pd-price{
    font-size: 22px;
    font-weight: 600;
    color: #414141;
    margin: 0px 4px;
}
.pd-visit{
    text-decoration: none;
    border: 1px solid red;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 6px;
    font-size: 13px;
    color: black;
    background: white;
    transition: all 35ms;
}
.pd-visit:hover{
    background: red;
    color: white;
}
.pd-descr table{
    margin-top: 7px;
    width: 100%;
    font-size: 16px;
    color: gray;
    max-width: 100%;
    border-collapse: collapse;
}
.pd-descr table td,
.pd-descr table tr,
.pd-descr table th{
    border: 0;
    border-bottom: 1px solid #e3e3e3;
    text-align: left;
    padding: 8px 8px 9px 12px;
    vertical-align: top;
}
.pd-descr table tr td:first-child, .pd-descr table tr th:first-child {
    border-right: 1px solid #e3e3e3;
    width: 35%;
}
.list-desc{
    margin-top: 2rem;
}
.list-desc li{
    font-size: 19px;
    color:  gray;
    list-style:decimal;
    line-height: 1.32;
}
.read_more {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
    bottom: 35px;
    height: 130px;
    left: 1.6rem;
    padding: 44px 0 0px 0;
    position: absolute;
    text-align: left;
    width: 96%;
    z-index: 3;
    padding-left: 26px;
    font-size: 19px;
    font-weight: 600;
    color: gray;
    cursor: pointer;
}
.read_more:hover{
    color: red;
}
.interested-btn{
    position: absolute;
    left: 2.6rem;
    bottom: 1.8rem;
    padding: 10px 28px;
    color: white;
    font-size: 22px;
    background: #d00202;
    border-radius: 4px;
    z-index: 5;
    transition: all 350ms;
}
.interested-btn:hover{
    font-weight: 600;
    color: white;
    text-decoration: none;
    box-shadow: 2px 2px 4px black;
}
.quote-btn{
    padding: 10px 28px;
    width: fit-content;
    color: black;
    font-size: 22px;
    background: white;
    border-radius: 4px;
    transition: all 350ms;
    margin-top: 2rem;
    border: 2px solid #e8e8e8;
    box-shadow: 2px 2px 1px silver;
    position: relative;
}
.quote-btn:hover{
    text-decoration: none;
    color: black;
    box-shadow: 4px 4px 2px #a09e9e;
}
.quote-btn img{
    position: absolute;
    left: -43px;
    top: -5px;
    width: 60px;
    height: auto;
    z-index: 2;
}
.dot-bg{
    padding: 3.2rem;
    background: url(../images/img/bg-dots.png);
    background-repeat: repeat;
}
.pd-desc-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.641);
    display: none;
}
.pd-desc-modal-in{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobal-bx{
    width: 100%;
    background: white;
    box-shadow: 0px 0px 4px gray;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.cross-modal{
    position: absolute;
    top: 0px;
    right: 15px;
    z-index: 2;
    color: black;
    font-size: 25px;
    cursor: pointer;
}
.IMG-part{
    background-color: rgb(214, 214, 214);
    border-radius:10px ;
    padding: 12px !important;
    padding-left: 22px !important;
}
.IMG-part img{
    width: 100%;
    box-shadow: 0px 0px 4px gray;
    background: white;
    border-radius: 6px;
}
.Cont-Part{
    padding: 1.5rem .75rem !important;
}
.Cont-Part .pd-title{
    font-size: 22px;
    font-weight: 600;
    color: black;
    margin-bottom: 12px;
}
.Cont-Part .pd-title-sm{
    font-size: 18px;
    color: gray;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.Cont-Part .pd-title-sm:last-child{
    color: rgb(88, 87, 87);
    font-weight: 800 !important;
}
.Cont-Part .pd-title-sm span{
    font-size: 18px;
    color: black;
    margin-left: 8px;
}
.qury-frm{
    width: 96%;
    padding: 10px 21px 10px 40px;
    border: 1px solid #00a699;
    border-radius: 4px;
    margin-top: 12px;
}
.cont-fld{
    position: relative;
}
.cont-fld i{
    position: absolute;
    top: 26px;
    left: 12px;
    font-size: 19px;
    color: gray;
}
.frm-decs{
    font-size: 16px;
    line-height: 21px;
    color: rgba(54, 53, 53, 0.994);
    display: inline-block;
    margin-top: 6px;
}
.qot-btn{
    padding: 10px 40px;
    background: #00a699;
    color: white;
    border-radius: 6px;
    margin-top: 16px;
    display: block;
    width: fit-content;
    text-decoration: none;
    transition: all 400ms;
    border: none;
}
.qot-btn:hover{
    color: white;
    background: #046c63;
}
/* inner smaall products end */

/* .cont-bg::before{
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    top: 0;
    z-index: -1;
    width: 150%;
    height: 86%;
    transform: rotate(4deg);
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgb(195 30 67) 40%, rgb(238 119 35) 60%);
} */
.cont-h{
    font-size: 38px;
    color: black;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 2rem;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
.input-styl{
    width: 100%;
    border-radius: 8px;
    padding: 8px 14px;
    border: none;
    outline: none;
    background: white;
    box-shadow: 0px 0px 4px gray;
    font-family: 'Times New Roman', Times, serif;
}
textarea{
    max-height: 130px;
}
.bttn-self{
    padding: 8px 40px;
    border: none;
    box-shadow: 0px 0px 4px gray;
    font-size: 16px;
     background: white;
    color: #047ec5;
    font-family: 'Poppins', sans-serif;
    height: fit-content;
    width: fit-content;
    margin-top: 1.4rem;
    border-radius: 5px;
    transition: all 400ms;
}
.bttn-self:hover{
    color: white;
    background: #047ec5;
}
.cont-img{
    width: 100%;
}
.pdng-lft{
    padding-left: 1rem !important;
}
.ft-self{
    background: black;
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 2;
}
.ft-box{
    width: 100%;
    padding: 3.2rem 1.6rem 0 1.6rem;
}
.ft-logo{
    max-height: 85px;
    padding: 10px;
    background: white;
    border-radius: 6px;
    margin-bottom: 15px;

}
.abt-ft{
    font-size: 16px;
    color: white;
    line-height: 1.22;
    padding-right: 1.8rem;
}
.tx-wht{
    color: white !important;
}
.ft-links{
    padding-left: 0;
    margin-top: 18px;
}
.ft-links li{
    margin-top: 8px;
    color: white;
}
.ft-links li a{
    color: white;
    transition: all 500ms;
}
.ft-links li a:hover{
    color: rgb(162, 160, 160);
}
.copy-ft{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid gray;
    margin-top: 3.2rem;
    position: relative;
    font-family: 'Times New Roman', Times, serif;
}
.copy-ft p{
    font-size: 17px;
}
.ft-ind{
    position: absolute;
    top: 6px;
    right: 8px;
    color: gray;
    font-size: 14px;
}
.social-ft{
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 8rem;
    right: 1rem;
    z-index: 2;
}
.social-ft li{
    margin-right: 11px;
}
.social-ft li a{
    font-size: 21px;
    color: white;
    transition: all 500ms;
}
.social-ft li a:hover{
    color: gray;
}

.scroll-btn {
    width: 2.2rem;
    height: 2.2rem;
    position: fixed;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 2.5rem;
    border-radius: 50%;
    font-size: 14px;
    color: black;
    box-shadow: 0px 0px 4px gray;
    background-color: white;
    transition: all 800ms;
    transform: translateY(-100vh);
    cursor: pointer;
    z-index: 50;
}
.scroll-btn:hover{
background-color: gray;
}

.image-fac{
    margin-top: -6rem;
    margin-bottom: -8%;
    position: relative;
    /*z-index: 2;*/
}
.newscont{
    height: 300px;
    width: 100%;
    /*background: linear-gradient(90deg, rgb(195 30 67) 40%, rgb(238 119 35) 60%);*/
    position: relative;
    z-index: 1;
}
.newscont::before{
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    top: 0;
    z-index: -1;
    width: 150%;
    height: 126%;
    transform: rotate(4deg);
    background: rgb(2,0,36);
background: linear-gradient(90deg,#bad547,#ef7922);
}
.news-ltr{
    position: absolute !important;
    bottom: 2.2rem;
    left: 0;
    z-index: 4 !important;
    z-index: 2;
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: var(--frank-ruhl-fonts);
    /* background: white; */
}
.news-img{
    min-height: 300px;
}
.news-h{
    font-size: 21px;
    color: white;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.news-form {
    width: 100%;
}
.news-form{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.news-form input{
    padding:7px 21px;
    background: transparent;
    border-radius: 50px;
    outline: none;
    width: 100%;
    border: 2px solid white;
}
.news-form input::-webkit-input-placeholder{
    color: white;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}
.news-btn{
    width: fit-content;
    padding: 10px 38px;
    border-radius: 30px;
    font-weight: 600;
    background: white;
    color: black;
    font-size: 13px;
    border: none;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 0px 4px gray;
    margin: auto;
    margin-top: 1rem;
    transition: all 500ms;
}
.news-btn:hover{
    color: white;
    background: #047ec5;
}
.bread-c{
    flex-direction: column;
    padding: 2.8rem 2rem;
    /*background: black;*/
    background: url(../images/img/Png.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
    text-align: center;
}
.bread-c h1{
    font-family: 'Sriracha', cursive;
}
.bread-link{
    display: flex;
    width: 100%;
    height: fit-content;
    text-align: center;
    justify-content: center;
    /* margin-top: 8px; */
}
.bread-link li{
    color: white;
    font-size: 18px;
    font-family: 'Sriracha', cursive;
}
.bread-link li span,
.bread-link li a{
    color: white;
    font-size: 21px;
    margin: 8px;
    transition: all 500ms;
    font-family: 'Sriracha', cursive;
}
.bread-link li a:hover{
    color: #ffa200;
}
.smh-clr{
    color: #ffa200;
}
.abt-p{
    color: rgb(115, 114, 114);
    font-size: 17px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
}

.market-btn{
    text-decoration: none;
    padding: 10px 26px;
    height: fit-content;
    text-align: center;
    font-size: 18px;
    color: black;
    background: #44b8e1;
    /* background: linear-gradient(90deg, rgb(238 119 35) 35%, #44b8e1 100%); */
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all 500ms;
    overflow: hidden;
    margin: .8rem;
    box-shadow: 0px 0px 0px 1px black;
    border: 1px solid white;
  }
  .market-btn:hover{
    color: white;
  }
  .market-btn:hover::before{
    height: 100%;
    right: unset;
    top: 0;
  }
  .market-btn::before{
    content: "";
    position: absolute;
    bottom: 0;
    /* top: 0; */
    left: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    background: black;
    transition: all 300ms;
  }
.market-box-h{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:  center;
    padding: .8rem;
    flex-wrap: wrap;
  }
  .market-box-h .market-btn{
    width: 30%;
    display: inline-block;
  }
  .market-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:  center;
    padding: .8rem;
    flex-wrap: wrap !important;
  }
  .market-box .market-btn{
    width: 17rem;
    display: inline-block;
  }


@media only screen and (max-width:892px) {
    .breadcrumb__content--title {
        margin-bottom: 10px;
        font-size: 2.2rem
    }
    .market-box-h .market-btn{
        width: 100%;
        display: inline-block;
      }
      .market-box .market-btn{
        width: 92%;
        display: inline-block;
      }
      
   
}


.Sidebar-cont{
    width:0;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    background: #00000082;
    display: flex;
    justify-content: end;
    overflow: hidden !important;
    transition: all 600ms ease-out;
}
.side-box{
    width: 360px;
    height: 100%;
    background: white;
    padding: 2rem;
        overflow: auto;
}
.cross-btn{
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #047ec5;
    font-size: 22px;
    color: white;
    cursor: pointer;
}
.side-logo{
    width: 100%;
    height: fit-content;
    margin-top: 2rem;
}
.side-logo img{
    width: 80%;
    height: auto;
}
.abt-side{
    font-size: 16px;
    color: gray;
}
.side-cont{
    padding: 0;
    margin: 0;
}
.side-cont li{
    margin-top: 11px;
}
.side-cont li i{
    margin-right: 8px;
    font-size: 21px;
    color: #047ec5;
}
.side-cont li .fa-envelope{
    font-size: 14px;
}
.side-cont li span{
    line-height: 1.6;
}
.side-cont li span,
.side-cont li a{
    color: gray;
    font-weight: 500;
    transition: all 400ms;
    display: inline;
}
.side-cont li a:hover{
    color: black;
}
.side-scl{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-top: 1rem;
}
.side-scl li a{
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #047ec5;
    color: white;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 500ms;
}
.side-scl li a:hover{
    background-color: white;
    border: 1px solid #047ec5;
    color:#047ec5;
}


.sub-menu-list.active{
    display:block;
}
.foot-about p{
    color: white !important;
}

.floating_btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0)
    }
}

.contact_icon {
    background-color: #42db87;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 30px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translatey(0);
    animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    box-shadow: 0 0 0 0 #42db87;
    -webkit-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    -moz-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    font-weight: 400;
    font-family: sans-serif;
    text-decoration: none !important;
    transition: .3s ease-in-out
}

@media(max-width:790px) {
    .menu-link {
        color: #000;
    }

    .infomation_metter .media p {
        padding-right: 0;
    }

    .navbar {
        align-items: start;
    }

    .best-text {
        padding: 32px 8px;
    }

}