@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    list-style: none;
    scroll-behavior: smooth;
    font-family: 'playfair display', serif;
}

html {
    font-size: 65.5%;
}

:root {
    --main-color: #d30d0d;
    --text-color: #141622;
}


/*=== top header section strat ===*/

.top-header .out-box {
    width: 100%;
    background:var(--main-color);
}

.top-header .out-box .inside-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #141622;
    padding: 1rem 0;
    clip-path: polygon(8% 0%, 92% 0%, 96% 100%, 5% 100%);
}

.out-box .inside-box .col-1 {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-left: 13rem;
}

.out-box .inside-box .col-1 span {
    font-size: 1.8rem;
    font-weight: 600;
}

.out-box .inside-box .col-1 span i {
    color: var(--main-color);
    padding-right: 0.5rem;
    font-size: 1.3rem;
}

.out-box .inside-box .col-2 {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 13rem;
}

.out-box .inside-box .col-2 a,
.out-box .inside-box .col-2 span,
.out-box .inside-box .col-2 .social i {
    color: #fff;
    font-size: 1.5rem;
    transition: 0.4s;
}

.out-box .inside-box .col-2 .social {
    display: flex;
    gap: 0.9rem;
}

.out-box .inside-box .col-2 a i {
    padding-right: 0.5rem;
}

.out-box .inside-box .col-2 .social i:hover,
.out-box .inside-box .col-2 a:hover {
    color: var(--main-color);
}


/*=== media query ===*/

@media(max-width:1150px) {
    .out-box .inside-box .col-1 {
        margin-left: 8rem;
    }
    .out-box .inside-box .col-2 {
        margin-right: 8rem;
    }
}

@media(max-width:991px) {
    .top-header {
        display: none;
    }
}



/*===  navbar section strat  ===*/

.header {
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 9.5%;
    background: #fff;
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5),
    0 0 10px rgba(190, 190, 190, 0.5);
    z-index: 1000;
    transition: 0.4s ease;
}

.header .logo img {
    width: 100px;
}

.header nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

nav .navbar ul li{
    padding: 2.5rem 0.5rem;
}

nav .navbar .navLink{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
}

nav .navbar .navLink li a {
    color: var(--text-color);
    font-size: 1.7rem;
    font-weight: 600;
    position: relative;
}

nav .others {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

nav .others i{
    font-size: 1.9rem;
    color: var(--text-color);
    cursor: pointer;
}
nav .others a{
    color: #fff;
}

nav .others .addBtn{
    position: relative;
    color:white;
    background: var(--main-color);
    padding: 1.5rem 1.7rem;
    font-size: 1.6rem;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.7s;
}

nav .others .addBtn:hover{
    background: var(--text-color);
    color: #fff;
}

nav .others .addBtn i,
nav .others .addBtn i:hover{
    color: #fff;
    padding-right: 0.5rem;
}

#menuBtn{
    font-size: 3.5rem;
}

nav .navbar ul li:hover,
nav .others i:hover{
    color: var(--main-color);
}

nav .navbar ul li a:hover,
nav .navbar ul li a.active{
    color: var(--main-color);
}

nav .navbar ul li .drop-down{
    position: absolute;
    top: 7rem;
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: justify;
    width: 180px;
    background:#fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5);
    padding: 1rem 0 0;
    display: none;
}

nav .navbar ul li:hover .drop-down {
    display: flex;
}

nav .navbar ul li .drop-down li {
    border-bottom: 1px solid rgba(190, 190, 190, 0.5);
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    padding-left: 1rem;
    z-index: 100;
    overflow: hidden;
}

nav .navbar ul li .drop-down li a {
    font-size: 1.5rem;
    transition: 0.4s ease;
}

nav .navbar ul li .drop-down li:hover a {
    font-size: 1.6rem;
    padding-left: 0.5rem;
}
.drop-down li .drop-down-six,
.drop-down li .drop-down-five,
.drop-down li .drop-down-four,
.drop-down li .drop-down-three,
.drop-down li .drop-down-two{
    width: 180px;
    position: absolute;
    left: 180px;
    margin-top: -3rem;
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: justify;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5);
    padding: 1rem 0 0;
    z-index: 111;
    overflow: hidden;
    display: none;
}
.drop-down li:hover .drop-down-six,
.drop-down li:hover .drop-down-five,
.drop-down li:hover .drop-down-four,
.drop-down li:hover .drop-down-three,
.drop-down li:hover .drop-down-two{
    display: flex;
}

.drop-down li .chev{
    position: absolute;
    left: 150px;
    top: 5px;
    color: var(--text-color);
}

.drop-down li:hover .chev{
    color: var(--main-color);
}


/*=== media Query ===*/

@media(max-width:1370px) {
    nav .navbar ul li {
        padding: 2.5rem 0;
    }
    nav .others {
        gap: 1rem;
    }
    nav .navbar .navLink {
        gap: 0.5rem;
    }
}

@media(max-width:1190px) {
    nav .others .addBtn {
        display: none;
    }
}

@media(max-width:991px) {
    nav .navbar .navLink {
        position: absolute;
        display: block;
        top: 5.3rem;
        width: 100%;
        left: 0px;
        background: #fff;
        box-shadow: 0 0 5px rgba(190, 190, 190, 0.5), 0 0 10px rgba(190, 190, 190, 0.5);
        padding-left: 30px;
        transition: 0.5s ease-in-out;
        display: none;
    
    }
    nav .navbar .navLink.active {
        display: block;
    }
    .header .sticky {
        padding: 0.6rem 9.5%;
        display: none;
    }
    nav .navbar ul li {
        padding: 1rem 0;
    }
    nav .navbar ul li .drop-down {
        position: sticky;
        display: none;
    }
    .drop-down li:hover .drop-down-six,
    .drop-down li:hover .drop-down-five,
    .drop-down li:hover .drop-down-four,
    .drop-down li:hover .drop-down-three,
    .drop-down li:hover .drop-down-two {
        position: sticky;
        margin-top: 0rem;
    }
    nav .others i.cart {
        display: none;
    }
}

@media(max-width:420px) {
    .header .logo img {
        width: 120px;
    }
    nav .navbar .navLink {
        top: 4.6rem;
    }
}

/*=== home section start ===*/

.home .slide {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 15rem;
}

.home .slide.slide-one {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(255, 0, 0)), url(/img/home/bg-hero-4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.home .slide.slide-two {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(235, 235, 37)), url(/img/home/bg-hero-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.home .slide.slide-three {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(43, 171, 235)), url(/img/home/bg-hero-5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.home .slide .col-1 {
    flex: 1 1 20rem;
}

.home .slide .col-2 {
    flex: 1 1 40rem;
    padding-top: 3rem;
}

.home .slide .col-1 h4 {
    font-size: 1.5rem;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-bottom: 3rem;
}

.home .slide .col-1 h1 {
    color: #fff;
    font-size: 3.2rem;
    text-transform: capitalize;
    letter-spacing: 3px;
}

.home .slide .col-1 h1 span {
    color: var(--main-color);
}

.home .slide .col-1 p {
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 2px;
    padding-top: 2rem;
}

.home .slide .col-1 .button {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 4rem;
}

.home .slide .col-1 .button button {
    padding: 1.8rem 2.8rem 1.8rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: 0.5s ease;
}

.home .slide .col-1 .button button i {
    font-size: 2.5rem;
    position: absolute;
    top: 33%;
    right: -1rem;
    transform: translate(-40%);
}

.home .slide .col-1 .button button.about {
    background: var(--main-color);
    color: #fff;
}

.home .slide .col-1 .button button.learn {
    background: #fff;
    color: var(--main-color);
}

.home .slide .col-1 .button button.about:hover,
.home .slide .col-1 .button button.learn:hover {
    background: var(--text-color);
    color: #fff;
}

.home .slide .col-2 img {
    width: 100%;
    height: 40rem;
}

.home .swiper [class^="swiper-button"] {
    color: #fff;
    background: rgba(211, 13, 13, 0.5);
    padding: 2.5rem;
}

.home .swiper [class^="swiper-button"]:hover {
    background: var(--main-color);
}

.home .swiper [class^="swiper-button"]::before {
    font-size: 2rem;
}


/*=== Perfect section start ===*/

.search {
    position: relative;
    padding: 0 16rem;
    background: #fff;
}

.search .find {
    max-width: 1200px;
    width: 75%;
    padding: 2.5rem;
    position: absolute;
    top: -7rem;
    z-index: 111;
    background: #fff;
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5), 0 0 10px rgba(190, 190, 190, 0.5);
    overflow: hidden;
}

.find .find-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 3rem;
}

.find h3 {
    font-size: 2.7rem;
    letter-spacing: 1px;
    padding-bottom: 2rem;
    font-weight: 500;
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
}

.find .find-row h4 {
    font-size: 1.7rem;
    color: var(--text-color);
    padding-bottom: 1.5rem;
}

.find .find-row select {
    border: 1px solid #646161;
    font-size: 1.5rem;
    width: 200px;
    font-weight: 500;
    height: 45px;
    padding: 0 1rem;
    color: #646161;
    font-family: 'Poppins', sans-serif;
}

.find .find-row select option {
    padding: 0.5rem;
    border-bottom: 1px solid #646161;
}

.search .search-btn button {
    background: var(--main-color);
    margin-top: 4rem;
    padding: 1.3rem 2rem;
    border-radius: 0.5rem;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.5s ease;
}

.search .search-btn button i {
    padding-right: 0.5rem;
}

.search .search-btn button:hover {
    background: var(--text-color);
}


/*=== market section start ===*/

section{
    padding: 2.5rem 16rem;
    background: #f7f2f2;
}

.market{
    padding-top: 35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    z-index: 10;
}

.market .col-3{
    flex: 1 1 20rem;
    position: relative;
}

.market .col-3 img.one{
    width: 100%;
    height: 45rem;
}

.market .col-4{
    flex: 1 1 20rem;
}

.market .col-3 .Service{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #141622;
    padding: 1rem;
    border-radius: 20px;
}

.market .col-3 .Service img.two{
    width: 80px;
}

.market .col-3 .Service span{
    color: #fff;
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: 600;
}

.market .col-4 h4{
    color: var(--main-color);
    font-size: 2rem;
    letter-spacing: 1px;
    font-size: 500;
    padding-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

.market .col-4 h4 i{
    padding-right: 0.5rem;
}

.market .col-4 h5{
    font-size: 3rem;
    color: var(--text-color);
    padding-bottom: 2rem;
    text-transform: capitalize;
}

.market .col-4 h5 span{
    color: var(--main-color);
}

.market .col-4 p.text{
font-size: 1.4rem;
color: var(--text-color);
padding-bottom: 1rem;
}

.market .col-4 .p1{
    font-size: 1.4rem;
    padding-bottom: 1rem;
}

.market .col-4 .p1 i{
    padding-right: 0.5rem;
    color: var(--main-color);
    font-size: 1.6rem;
}

.market .col-4 button{
    position: relative;
    margin-top: 2.5rem;
    background: var(--main-color);
    color: #fff;
    padding: 1.5rem 3.5rem;
    font-size: 1.6rem;
    border-radius: 10px;
    cursor: pointer;
}

.market .col-4 button i{
    position: absolute;
    top: 20px;
    font-size: 2rem;
}

.market .col-4 button:hover{
    background: var(--text-color);
}

@media(max-width:1500px) {
   .search .find{
       max-width: 100%;
    }

    .search{
       padding: 0 0;
    }

}

@media(max-width:991px) {
    .find .find-row{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .market{
        padding-top: 40rem;
    }

    section{
        padding: 2.5rem 10rem;
    }

}

@media(max-width:768px) {
    .find .find-row {
        grid-template-columns: 1fr 1fr;
    }

    .market{
        padding-top: 50rem;
    }

}

@media(max-width:600px) {
    section{
        padding: 2.5rem 7rem;
    }
    .find .find-row {
     gap: 0.5rem;
    
    }

    .market .col-4 h3{
        font-size: 2.9rem;
    
    }

}

@media(max-width:450px) {
    .find .find-row {
        grid-template-columns: 1fr;
    }

    .find .find-row select{
        width: 100%;
    
    }

    .market .col-3 img.one{
        height: 35rem;
    
    }

    .market{
        padding-top: 88rem;
   
    }

    .market .col-4 h3{
        font-size: 2.4rem;
    }
 
}


/*=== counter section start ==*/

.counter{
    width: 100%;
    min-height: 50vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    background: url(/img/icons/bg-counter.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

.counter .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.counter .container img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    padding: 0.5rem;
}

.counter .container span.num{
    padding: 1rem 0;
    font-size: 4.6rem;
    font-weight: 600;
    color: #fff;
}

.counter .container span.text{
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
}

.counter .container span.text i{
    padding-right: 0.5rem;
}

@media(max-width:1280px){
    .counter {
        padding: 2rem 10rem;
    }
}

@media(max-width:991px) {
    .counter {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {
    .counter {
       padding: 2rem 7rem;
}
}

/*=== arrivals section start ===*/
.arrivals{
    text-align: center;
    padding-top: 7rem;
}

section h4{
    color: var(--main-color);
    font-size: 2rem;
    text-transform: uppercase;
    padding-bottom: 1.5rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 2px;
}

section h4 i{
    padding-right: 1.5rem;
}

section h1{
    margin-bottom: 6rem;
    padding-bottom: 2.5rem;
    font-size: 4.7rem;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: var(--text-color);
    position: relative;
}

section h1::before{
    content: '';
    position: absolute;
    background: #fff;
    border: 4px solid var(--main-color);
    bottom: 0;
    width: 100px;
    height: 10px;
    border-radius: 10px;
    left: 50%;
    transform: translateX(-50%);
}

section h1::after{
    content: '';
    position: absolute;
    left: 48%;
    transform:translateX(50%);
    bottom: 1.1rem;
    width: 20px;
    height: 10px;
    border-radius: 40px;
    background: #11a311;
}

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

.arrivals .arr-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3.5rem;
}

.arr-row .arr-col{
    padding: 1rem;
    box-shadow: 0 0 5px #646161;
    background: #fff;
    border-radius: 10px;
    text-align: justify;
}

.arr-row .arr-col .image{
    width: 100%;
    height: 20rem;
    overflow: hidden;
    border-radius: 10px;
    transition: 0.5s ease;
}

.arr-row .arr-col .image img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s ease;
}

.arr-row .arr-col .image:hover img{
    transform: scale(1.3);
}

.arr-row .arr-col h5{
    font-size: 1.8rem;
    padding: 1rem 0;
    color: var(--text-color);
}

.arr-row .arr-col .rating{
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 0.5rem;
}

.arr-col .rating .strat i{
    color: var(--main-color);
    font-size: 1.4rem;
}

.arr-col .rating .review span{
    font-size: 1.3rem;
    font-weight: 600;
    color: #646161;
}

.arr-col .features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-bottom: 0.5rem;

}

.arr-col .features span{
    font-size: 1.4rem;
    color: #646161;
}

.arr-col .features span i{
    color: var(--main-color);
    padding-right: 0.3rem;
}

.arr-col .price{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arr-col .price p{
    color: var(--main-color);
    font-size: 1.8rem;
    font-weight: 600;
}

.arr-col .price button{
    background: var(--main-color);
    padding: 0.8rem 2.8rem;
    color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.arr-col .price button:hover{
    background: var(--text-color);
}

.arrivals button.load{
    margin-top: 4rem;
    padding: 1.4rem 3.5rem;
    background: var(--main-color);
    color: #fff;
    cursor: pointer;
    border-radius: 12px;
    font-size: 1.8rem;
    font-weight: 600;
    transition: 0.4s ease;
}

.arrivals button.load i{
    padding-left: 0.5rem;
}

.arrivals button.load:hover{
    background: var(--text-color);
}

@media(max-width:1350px) {
    .arrivals .arr-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {
    .arrivals .arr-row {
        grid-template-columns: 1fr;
    }

    .arr-row .arr-col .image {
        height: auto;
    }

    section h1{
        font-size: 2.8rem;
    }

}

@media(max-width:450px) {
    section h1{
        font-size: 2.4rem;
    }
}


/*=== body type section start ===*/
.type {
text-align: center;
padding-top: 7rem;
padding-bottom: 3rem;
background: #fff;
}

.type .type-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.type-row .type-col{
    width: 100%;
    padding: 2rem;
    background: #f7f2f2;
    border-radius: 12px;
    box-shadow: 0 0 5px #646161;
    transition: 0.4s ease;
}

.type-row .type-col:hover{
    transform: translateY(-10px);
}

.type-row .type-col img{
    width: 100%;
    height: 12rem;
}

.type-row .type-col h5{
    font-size: 1.8rem;
    font-weight: 600;
    color: #646161;
}

.type-row .type-col:hover h5 {
    color: var(--main-color);
}

@media(max-width:1350px) {
    .type .type-row{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media(max-width:768px) {
    .type .type-row{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(max-width:600px) {
    .type .type-row{
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:450px) {
    .type .type-row{
        grid-template-columns: 1fr;
    }


.type-row .type-col img{
    width: 100%;
    height: auto;

}

}

    /*=== play button section start ===*/
    .play {
        width: 100%;
        min-height: 80vh;
        background: url(/img/type/be-type1.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .play .play-btn{
        background: #fff;
        color: var(--main-color);
        font-size: 5rem;
        width: 100px;
        height: 100px;
        line-height: 100px;
        position: relative;
        border-radius: 50%;
    }

    .play .play-btn::before,
    .play .play-btn::after{
        content: '';
        position: absolute;
        border: 6px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        left: -20px;
        bottom: -20px;
        right: -20px;
        top: -20px;
        animation: animate 1.5s linear infinite;
        opacity: 1;
    }
    
    @keyframes animate {
        0%{
            transform: scale(0.5);
        }

        50%{
            opacity: 1;
        }

       100%{
            transform: scale(1.5);
        }
    }

    .play .play-btn::after{
        animation-delay: 0.5s;
    }

    /*=== dealer section start ===*/
    .dealer{
        text-align:center;
        padding-top: 7rem;
        padding-bottom: 3rem;
        background: #fff;
    }
    
    .dealer .deal-row{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2.5rem;
    }

    .deal-row .dealer-col{
        width: 100%;
        background: #fff;
        box-shadow: 0 0 5px #646161;
        padding: 1rem;
        border-radius: 12px;
        position: relative;
        text-align: justify;
        transform: 0.5s ease;
    }

    .deal-row .dealer-col:hover{
        transform: translateY(-10px);
    }

    .deal-row .dealer-col .image{
        background: #f7f2f2;
        border-radius: 12px;
    }

    .deal-row .dealer-col .image img{
         width: 100%;
         height: 14rem;
         border-radius: 12px;
    }

    .deal-row .dealer-col .list{
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: var(--main-color);
        color: #fff;
        padding: 0.7rem 1.4rem;
        font-size: 1.3rem;
        border-radius: 40px;
    }

    .deal-row .dealer-col h5{
        padding: 1rem 0;
        font-size: 1.6rem;
    }

    .deal-row .dealer-col p{
        padding-bottom: 1rem;
        color: #646161;
        font-size: 1.3rem;
    }

    .deal-row .dealer-col p i{
        color: var(--main-color);
        padding-right: 0.5rem;
    }

    @media(max-width:1250px) {
        .dealer .deal-row {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    @media(max-width:991px) {
        .dealer .deal-row {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media(max-width:550px) {
        .dealer .deal-row {
            grid-template-columns: 1fr;
        }
    }

      /*=== Quality section start ===*/

      .quality{
        width: 100%;
        background: var(--text-color);
      }

      .quality .qul-row{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 4rem 0;
      }

      .quality .qul-row .col-1{
        flex: 1 1 10rem;
        display: flex;
        gap: 2rem;
        flex-direction: column;
      }

      .quality .qul-row .col-1.center{
        padding-top: 6rem;
      }

      .quality .qul-row .col-2{
        flex: 1 1 30rem;
      }

      .quality .qul-row .col-2 img{
        width: 100%;
        height: 30rem;
     }

     .qul-row .col-1 .col-one{
        border-radius: 12px;
        background: #fff;
        padding:1.6rem;
     }

     .col-1 .col-one .number{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1rem;
     }

     .col-1 .col-one .number img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
     }

     .col-1 .col-one .number h2{
        font-size: 6rem;
        color: var(--main-color);
     }

     .col-1 .col-one h4{
        font-size: 1.8rem;
        padding-bottom: 1rem;
        color: var(--text-color);
        font-weight: 600;
     }

     .col-1 .col-one p{
        font-size: 1.3rem;
        color: #646161;
     }

     .qul-row .col-2 h5{
        color: var(--main-color);
        font-size: 2rem;
        text-transform: uppercase;
        padding-bottom: 1.5rem;
        font-weight: 600;
        letter-spacing: 2px;
        font-family: poppins , sans-serif;
     }

     .qul-row .col-2 h4 i{
        padding-right: 0.5rem;
     }

     .qul-row .col-2 h5{
        padding-bottom: 4rem;
        font-size: 4.2rem;
        text-transform: capitalize;
        letter-spacing: 1px;
        color: #fff;
     }

     .qul-row .col-2 h5 span{
        color: var(--main-color);
     }

     .qul-row .col-2 p{
        color: #fff;
        font-size: 1.3rem;
        padding-bottom: 3rem;
     }

     @media(max-width:768px) {
        .qul-row .col-2 h3{
            font-size: 2.4rem;
        }
     }

     @media(max-width:768px) {
        .quality .qul-row .col-2 img{
            height: auto;
        }
     }

     @media(max-width:450px) {
        .qul-row .col-2 h3{
            font-size: 2.4rem;
        }
     }

     /*=== brand section start  ===*/

     .brand{
        text-align: center;
        padding-top: 7rem;
     }

     .brand .brand-row{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 2.5rem;
     }

     .brand-row .brand-col{
        position: relative;
        padding: 1rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 0 5px #646161;
        transition: 0.4s;
     }

     .brand-row .brand-col:hover{
        transform: translateY(-10px);
     }

     .brand-row .brand-col img{
        width: 100%;
        height: 14rem;
     }

     .brand-row .brand-col h5{
        font-size: 1.6rem;
        color: var(--text-color);
        font-weight: 600;
     }

     @media(max-width:1300px) {
        .brand .brand-col{
            grid-template-columns: 1fr 1fr 1fr;
        }

        .brand{
            font-size: 2.8rem;
        }
     }

     @media(max-width:450px) {
        .brand .brand-col{
            grid-template-columns: 1fr;
        }

        .brand-row .brand-col img{
            height: auto;
        }

        .brand h1{
            font-size: 2.4rem;
        }
    }

    /*==== clients section start ===*/

    .client{
        text-align: center;
        padding-top: 7rem;
        padding-bottom: 5rem;
    }

    .client .slide.slide{
        background: #fff;
        box-shadow: 0 0 2px #646161;
        padding: 1rem;
        font-size: 1.4rem;
        padding-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: center;
        }
    
    .client .slide img{
        width: 100px;
        height: 300px;
        border-radius: 50%;
        background: var(--main-color);
        padding: 1rem;
        
    }
    
    .client .slide.slide-1 {
        background: url(/img/client/01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 120px;
        height: 270px;
        padding: 2rem;
    }
    .client .slide.slide-2 {
        background: url(/img/client/02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 120px;
        height: 270px;
        padding: 2rem;
    }

    .client .slide.slide-3{
        background: url(/img/client/03.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 120px;
        height: 270px;
        padding: 2rem;
    }
    .client .slide.slide-4{
        background: url(/img/client/04.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 120px;
        height: 270px;
        padding: 2rem;
    }
    .client .slide.slide-5{
        background: url(/img/client/05.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 120px;
        height: 270px;
        padding: 2rem;
        
    }
   
   .client .slide h5{
        font-size: 1.8rem;
        color:#fff;
        padding: 0.5rem;
    }

    .client .slide span{
        color: var(--main-color);
        font-size: 1.6rem;
        font-weight: 600;
    }

    .client .slide p{
        color:#11a311;
        padding: 1.4rem;
    }

    .client .slide i{
        color: var(--main-color);
        font-size: 1.4rem;
    }


    /*==== download section start ====*/
    section h1.AlHuda{
        font-size: 3.8rem;
        margin-top: 0;
        padding-bottom: 1rem;
    }

    section h1.AlHuda::before{
        border: none;
        background: transparent;
    }
    section h1.AlHuda::after{
        background: transparent;
    }

    .download{
        background: #fff;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .download .app-row{
        background: #f7f2f2;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 10px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
    }

    .download .app-row .app-col{
        flex: 1 1 20rem;
    }

    .app-row .app-col p.text{
        font-size: 1.4rem;
        color: var(--text-color);
        padding-bottom: 2rem;
    }

    .app-row .app-col .button{
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .app-row .app-col .button a{
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 1rem 3rem;
        border-radius: 30px;
    }

    .app-row .app-col .button a img{
        width: 40px;
        height: 40px;
        color: #fff;
    }

    .app-row .app-col .button a span{
        color: #fff;
        font-size: 1.3rem;
    }

    .app-row .app-col .button a p{
        color: #fff;
        font-size: 1.8rem;
    }

    .app-row .app-col .button a.google{
        background: var(--main-color);
        color: #fff;
        transition: 0.4s;
    }

    .app-row .app-col .button a.apple{
        background: #646161;
        color: #fff;
        transition: 0.4s;
    }
    
    .app-row .app-col .button a:hover.google{
        background: #646161;
        color: #fff;
    }

    .app-row .app-col .button a:hover.apple{
        background:var(--main-color);
        color: #fff;
    }

    .app-row .app-col img.down{
        width: 50rem;
        height: 35rem;
        position: absolute;
        top: 2rem;

    }

    @media(max-width:1200px){
        .download .app-row{
            flex-direction: column;
        }

    .app-row .app-col img.down{
            height: auto;
            position: inherit;
            margin-top: 2rem;
            
        }
    }

    @media(max-width:768px) {
    .app-row .app-col img.down{
            width: 100%;
            height: auto;
        }

    .app-row .app-col .button{
        flex-direction: column;
       }
    }

    @media(max-width:450px) {
      section h1.AlHuda {
        font-size: 2.4rem;
      }
    }

    /*=== footer section start ==*/

    .footer{
        background: var(--text-color);
        position: relative;
    }

    .footer .footer-row{
        padding: 2rem 16rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .footer-row .footer-col img{
        width: 200px;
        height: 50px;
        margin-bottom: 1rem;

    }

    .footer-row .footer-col p{
        color: #fff;
        font-size: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .footer-row .footer-col span{
        display: block;
        color: #fff;
        font-size: 1.6rem;
        padding-bottom: 1rem;
    }

    .footer-row .footer-col span i{
        background: var(--main-color);
        padding: 0.5rem;
        border-radius: 10px;
        margin-right: 5px;
        font-size: 18px;
     }

     .footer-row .footer-col h5{
        color: #fff;
        font-size: 1.9rem;
        margin: 1rem 0;
        padding: 0.5rem;
        letter-spacing: 1px;
        position: relative;

     }

     .footer-row .footer-col h5::before{
        content: '';
        position: absolute;
        width: 100px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
        bottom: 0;
     }

     .footer-row .footer-col h5::after{
        content: '';
        position: absolute;
        width: 20px;
        height: 3px;
        border-radius: 3px;
        background:var(--main-color);
        bottom: 0;
        left: 40px;
     }

     .footer-row .footer-col h5::before{
        content: '';
        position: absolute;
        width: 100px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
        bottom: 0;
     }
     .footer-row .footer-col h5::before{
        content: '';
        position: absolute;
        width: 100px;
        height: 3px;
        border-radius: 3px;
        background: #fff;
        bottom: 0;
     }

     .footer-row .footer-col a{
        display: block;
        color: #fff;
        font-size: 1.6rem;
        padding-top: 1rem;
        transition: 0.4s ease;
     }

     .footer-row .footer-col a:hover{
        padding-left: 5px;
        color: var(--main-color);
     }

     .footer-row .footer-col input{
        width: 250px;
        height: 40px;
        font-size: 1.4rem;
        padding-left: 10px;
        color: #141622;
        margin-bottom: 1.5rem;
     }

     .footer-row .footer-col button{
        background: var(--main-color);
        padding: 1rem 2rem;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
        transition: 0.4s ease;
     }

     .footer-row .footer-col button:hover{
        background: var(--text-color);
        border: 2px solid #fff;
     }

     .footer .footer-bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 16rem;
        background: #3a3737;
        position: relative;
        text-align: center;

     }

     .footer .footer-bottom p{
        color: #fff;
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 1px;

     }

     .footer .footer-bottom p span{
         color: var(--main-color);
     }

     .footer .footer-bottom .social{
        position: absolute;
        background: var(--main-color);
        padding: 1.3rem 30rem;
        right: 0;
        bottom: 0;
        clip-path: polygon(8% 0, 100% 0%, 100% 100%, 5% 100%);
     }

     .footer .footer-bottom .social i{
        color: var(--main-color);
        background: #fff;
        font-size: 1.6rem;
        margin-left: 20px;
        padding: 1rem;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.4s ease;
     }

     .footer .footer-bottom .social i:hover{
        transform: scale(1.1);
     }

     @media(max-width:1390px){
        .footer .footer-bottom .social{
            padding: 1.3rem 17rem;
        }
     }

     
     @media(max-width:1150px) {
        .footer .footer-bottom .social{
            position: inherit;
            background: none;
            padding: 1.3rem;
        }
        .footer .footer-bottom {
            flex-direction: column;
        }
        .footer .footer-row{
            grid-template-columns: 1fr 1fr 1fr;
        }
     }

     @media(max-width:991px) {
        .footer .footer-row{
            padding: 2rem 10rem;
        }

        .footer .footer-bottom{
            padding: 2rem 10rem;
        }
     }

     @media(max-width:768px) {
          .footer .footer-row{
            grid-template-columns: 1fr 1fr;
          }
     }

     @media(max-width:600px) {
        .footer .footer-row{
            grid-template-columns: 1fr;
          }

          .footer .footer-row{
            padding: 2rem 7rem;
        }

          .footer .footer-bottom{
            padding: 2rem 7rem;
        }
     }



     /*=== Inventory grid section strat ===*/
     .inventory{
        width: 100%;
        min-height: 50vh;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5)), url(/img/type/be-type1.jpg);
        background-position: center;
        background-size: cover;background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
     }

     .inventory h2{
        font-size: 3.5rem;
        color: #fff;
     }

     .inventory .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: #fff;
        padding-top: 2rem;
     }

     .inventory .link a{
        color: #fff;
        font-size: 1.5rem;
     }

     .inventory .link a:hover{
        color: var(--main-color);
     } 

     .inventory .link span,
     .inventory .link p{
        font-size: 1.5rem;
        color: #fff;
     }

     /*=== Show Arrivals section strat ===*/

     .arrivals .arr-row.row{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
     }

     .arrivals.show{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
     }

     .arrivals.show .col-1{
        flex: 1 1 2rem;
        width: 200px;
        text-align: justify;
     }

     .arrivals.show .col-1 h5{
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 2rem;
        letter-spacing: 1px;
        position: relative;
        padding-bottom: 0.5rem;
     }

     .arrivals.show .col-1 h5::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 70px;
        height: 3px;
        border-radius: 3px;
        background: var(--main-color);
     }

     .arrivals.show .col-1 .searchBox{
        width: 100%;
        height: 40px;
        position: relative;
        margin-bottom: 1rem;
     }

     .arrivals.show .col-1 .searchBox .searchbar{
        border: 1px solid var(--text-color);
        width: 100%;
        height: 100%;
        padding: 10px;
        border-radius: 5px;
        font-size: 1.6rem;
    }

    .arrivals.show .col-1 .searchBox i{
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.8rem;
        color: var(--main-color);
    }

    .arrivals.show .col-1 .checkBox{
        color: var(--text-color);
        font-size: 1.6rem;
    }

    .arrivals.show .col-1 .checkBox input{
        margin-right: 0.5rem;
        accent-color: var(--main-color);
        margin-bottom: 1.5rem;
    }

    .arrivals.show .col-1 .show-col{
        background: #ffff;
        padding: 2rem 1.5rem;
        text-align: justify;
        box-shadow:0 0 2px #646161;
        margin-bottom: 1rem;
    }


    .arrivals.show .col-2{
        flex: 1 1 60rem;
        
    }

     .arrivals.show .col-2 .image{
        height: 16rem;
    }

    .arrivals.show .col-2 .head{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 1rem;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 0 2px #646161;
        margin-bottom: 2rem;
    }


    .arrivals.show .col-2 .head span{
        color: var(--text-color);
        font-size: 1.5rem;
        font-family: 'poppins', sans-serif;
    }

    .arrivals.show .col-2 .head i{
        font-size: 2rem;
        margin-right: 0.3rem;
        color: var(--text-color);
    }

    .arrivals.show .col-2 .head i.grid {
        color: var(--main-color);
        padding: 5px;
        border: 1px solid var(--main-color);
    }

    .arrivals.show .col-2 .head select {
        border: 1px solid var(--main-color);
        padding: 1rem 2rem;
        font-size: 1.4rem;
        font-family: 'poppins', sans-serif;
        border-radius: 4px;
    }

    .arrivals.show .col-2 .number {
        margin-top: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;

    }

    .arrivals.show .col-2 .number span{
        background: var(--main-color);
        color: #fff;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 2rem;
        border-radius: 3px;
        font-family: 'poppins', sans-serif;
        cursor: pointer;

    }

    .arrivals.show .col-2 .number span.black{
        background: var(--text-color);
        transition: 0.4s ease;
    }

    .arrivals.show .col-2 .number span.black:hover{
        background: var(--main-color);
    }

    @media(max-width:991px){
        .arrivals .arr-row.row{
            grid-template-columns: 1fr 1fr;
        }

        .arr-row .arr-col .image{
            height: auto;
        }
    }

    @media(max-width:680px) {
        .arrivals .arr-row.row{
            grid-template-columns: 1fr;
        }

        .arrivals.show .col-1{
            flex: 1 1 2rem;
            width: 100%;
        }

    }

    @media(max-width:420px) {
        section {
            padding: 2.5rem 3rem;
        }
        
    }


/*=== inventory list ===*/

.arr-row.row.inventory_list {
    display:block;
}

.arr-row.row.inventory_list .arr-col {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;

}

.arr-row.row.inventory_list .arr-col .image {
    flex: 1 1 15rem;
    width: 100;
    height: 20rem;
}

.arr-row.row.inventory_list .arr-col .list {
    flex: 1 1 30rem;
}

.arr-row.row.inventory_list .arr-col .features{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.arr-row.row.inventory_list .arr-col .list p.list_text{
    font-size: 1.4rem;
    color: #141622;
    padding-bottom: 1rem;
}

@media(max-width:850px) {
    .arrivals .arr-row.row.inventory_list .arr-col {
        flex-wrap: wrap;

    }

    .arrivals .arr-row.row.inventory_list .arr-col .image {
        width: 100%;
        height: auto;
    }
}

@media(max-width:550px) {
    .arr-row.row.inventory_list .arr-col .features{
        grid-template-columns: 1fr 1fr ;
        
    }

}


 /*=== Inventory single ===*/
 .slider{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 10rem;
    background: #f7f2f2;
 }
    
     .slider .slider_one {
        flex: 1 1 50rem;
     }
    
     .slider .slider_one .col-1{
        background: #fff;
        padding: 2rem 1.5rem;
        box-shadow: 0 0 3px #646161;
        margin-bottom: 1rem;
     }

     .slider_one h6{
        background: var(--main-color);
        color: #fff;
        width: 110px;
        font-size: 1.4rem;
        padding: 0.2rem 1rem;
        border-radius: 3px;
        margin-bottom: 1rem;
     }

     .slider_one h5{
        font-size: 2.2rem;
        text-transform: capitalize;
        letter-spacing: 1px;
        font-weight: 600;
        padding-bottom: 1rem;
     }

     .slider_one .date{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;
     }

     .slider_one .date span{
        color: var(--text-color);
        font-size: 1.4rem;
        font-family: 'poppins', sans-serif;
     } 

     .slider_one .date span i{
        color: var(--main-color);
        padding-right: 0.5rem;
        padding-bottom: 3rem;
     }
     .slider .swiper {
        width: 100%;
        height: 100%;
     }

     .slider .swiper .swiper-slide {
        text-align: center;
        display: flex;
        justify-content: left;
        align-items: left;
     }

     .slider .swiper .swiper-slide img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 0 5px #646161;
     }

     .slider .swiper {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
     }

     .slider .swiper .swiper-slide{
        background-size: cover;
        background-position: center;
     }

     .slider .myInvent2{
        height: 60%;
        width: 100%;
     }

     .slider .myInvent1{
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
     }

     .slider .myInvent1 .swiper-slide {
        width: 24%;margin: 0 auto;
        height: 100%;
        opacity: 1;
        border-radius: 10px;
     }

     .slider .slider_one .col-1 .key-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2rem;
     }

     .slider_one .col-1 .key-row .key{
        display: flex;
        align-items: center;
        gap: 1rem;
     }

     .slider_one .col-1 .key-row .key i{
        color: var(--main-color);
        font-size: 2rem;
     }

     .slider_one .col-1 .key-row .key span{
        color: #646161;
        font-size: 1.4rem;
        font-family: 'poppins', sans-serif;
        font-weight: 500;
     }

     .slider_one .col-1 .key-row .key p{
        color: #141622;
        font-size: 1.2rem;
        font-weight: 600;
        font-family: 'poppins', sans-serif;
     }

     .slider_one .col-1 p.dec{
        font-size: 1.4rem;
        padding-bottom: 1rem;
        color: var(--text-color);
         }

         .slider_one .col-1 .features{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
            padding-bottom: 1.5rem;
         }

         .slider_one .col-1 .features p.fe{
            color: var(--text-color);
            font-size: 1.4rem;
         }

         .slider_one .col-1 .features p.fe i{
            color: var(--main-color);
            padding-right: 0.5rem;
         }
    
     .slider_one .col-1 .history p.fe{
        color: var(--text-color);
        font-size: 1.4rem;
     }

     .slider_one .col-1 .history p.fe i{
        color: var(--main-color);
            padding-right: 0.5rem;
    }

    .slider .slider_two {
        flex: 1 1 5rem;
     }

     .slider .slider_two .col-2{
        background: #fff;
        padding: 2rem 1.5rem;
        box-shadow: 0 0 3px #646161;
        margin-bottom: 1rem;
     }

     .slider .slider_two .col-2 h3{
        color: var(--main-color);
        font-size: 1.8rem;
        font-family: 'poppins', sans-serif;
        padding-bottom: 1rem;
     }

     .slider .slider_two .col-2 .location{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        grid-area: 1rem;
        font-size: 1.3rem;
     }

     .slider_two .col-2 .location i {
        color: var(--main-color);
        padding-right: 0.5rem;
     }

     .slider_two .col-2 .customer{
        display: flex;
        gap: 1rem;
        align-items: center;
     }

     .slider_two .col-2 .customer img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
     }

     .slider_two .col-2 .customer h6{
        font-size: 1.6rem;
        color: var(--text-color);
     }

     .slider_two .col-2 .customer span{
        display: block;
        color: var(--main-color);
        font-size: 1.4rem;
        font-weight: 600;
    }
    .slider_two .col-2 .customer i{
        font-size: 1.7rem;
        margin-top: 1rem;
        color: var(--text-color);
        padding-right: 0.5rem;
        cursor: pointer;
       
    }

    .slider_two .col-2 .customer i:hover{
        color: var(--main-color);
    }

    .slider_two .col-2 h6{
        font-size: 1.6rem;
        color: var(--text-color);
        padding-bottom: 0.5rem;
    }

    .slider_two .col-2 input,
    .slider_two .col-2 textarea{
        border: 1px solid #646161;
        width: 100%;
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 5px;
        font-size: 1.4rem;

    }

    .slider_two .col-2 button{
        margin-top: 2rem;
        background: var(--main-color);
        padding: 1rem 2.5rem;
        color: #fff;
        font-size: 1.7rem;
        border-radius: 0.5rem;
        position: relative;
        cursor: pointer;
    }

    .slider_two .col-2 button i{
        position: absolute;
        top: 15px;
    }

    .slider_two .col-2 button:hover{
        background: var(--text-color);
    }

    @media(max-width:768px) {
        .slider .swiper {
            height: auto;
        }

        .slider {
            display: inherit;
        }

        .slider .slider_one .col-1 .key-row {
            grid-template-columns: 1fr 1fr;
        }

        .slider_one .col-1 .features {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media(max-width:450px) {
        .slider .slider_one .col-1 .key-row {
            grid-template-columns: 1fr ;
        }

        .slider_one .col-1 .features {
            grid-template-columns: 1fr ;
        }

    }

     
/*=== Scroll Top Button Adding ===*/
    
    .scrollBtn{
        position: absolute;
        right: 5rem;
        bottom: 1rem;
        z-index: 100;
        font-size: 3rem;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: var(--main-color);
        color: #fff;
        box-shadow: 0 0 5px var(--main-color);
        border: 1px solid #fff;
    }

    .scrollBtn:hover{
        background: var(--text-color);
    }

    @media(max-width:1150px) {
        .scrollBtn{
            right: 5rem;
            bottom: 3rem;

        }
    }

    @media(max-width:450px) {
        .scrollBtn{
            right: 1rem;
            bottom: 3rem;
            
        }
    }


    /*===  Team section start  ===*/

    .team {
        text-align: center;
        padding-top: 7rem;
    }

    .team .team-row{
      display: flex;
        align-items: center;
        justify-content: center;
        gap: 3.5rem;
    }

    .team-row .col-1 {
        flex-basis: 300px;
        box-shadow: 0 0 5px #d8d3d3;
        background: #fff;
        padding-bottom: 1rem;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.5s ease;

    }

    .team-row .col-1 img{
        width: 100%;
        height: 27rem;
        border-radius: 10px;

    }

    .team-row .col-1 h6{
        font-size: var(--text-color);
        padding: 1rem 0;
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .team-row .col-1 span{
        color: var(--main-color);
        font-size: 1.6rem;
        font-weight: 600;
    }

    .team-row .col-1 .follow{
        position: absolute;
        top: 2rem;
        right: -5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .team-row .col-1 .follow i {
        font-size: 2rem;
        background: var(--main-color);
        color: #fff;
        padding: 0.7rem;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.5s ease;
    }

    .team-row .col-1 .follow i:hover{
        background: var(--text-color);
    }

    .team-row .col-1:hover .follow {
        right: 1rem;

    }

    .team-row .col-1 :hover{
        transform: translateY(-10px);
    }

    @media(max-width:991px) {
        .team .team-row {
            flex-wrap: wrap;
        }

        .team-row .col-1 img{
            height: 30rem;
        }
    }


    /*===  User Dashboard section strat  ===*/
    .dashboard .dash-row {
        display: flex;
        gap: 3.5rem;
        padding: 3.5rem 0;
    }

    .dash-row .side_one{
        flex-basis: 330px;
        background: #fff;
        box-shadow: 0 0 5px #d8d3d3;
        padding: 2.6rem;
        text-align: center;
    }

    .dash-row .side_one .profile{
        padding-bottom: 2.5rem;
        margin-bottom: 1.8rem;
        border-bottom: 1px solid #646161;
        position: relative;
    }

    .dash-row .side_one .profile img{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        padding-bottom: 1rem;
    }

    .dash-row .side_one .profile h6{
        font-size: 1.8rem;
        color: var(--text-color);
        letter-spacing: 1px;
    }

    .dash-row .side_one .profile span{
        color: #646161;
        font-size: 1.5rem;
    }

    .dash-row .side_one .profile i{
        position: absolute;
        top: 50%;
        left: 67%;
        transform: translate(-67%, -50%);
        background: var(--main-color);
        color: #fff;
        padding: 1rem;
        font-size: 1.6rem;
        border-radius: 50%;
    }

    .dash-row .side_one .box {
        margin-bottom: 1rem;
        padding: 1rem 1rem;
        text-align: left;
        border-color: transparent;
        border-radius: 8px;
        transition: 0.4s ease;
    }

    .dash-row .side_one .box a{
        font-size: 1.5rem;
        color: var(--text-color);
        letter-spacing: 1px;
    }

    .dash-row .side_one .box a i{
        padding-right: 5px;
        color: var(--main-color);
    }

    .dash-row .side_one .box.activated,
    .dash-row .side_one .box.activated a,
    .dash-row .side_one .box.activated a i{
        background-color: var(--main-color);
        color: #fff;
    }

    .dash-row .side_one .box:hover{
        padding-left: 1.5rem;
    }

    .dash-row .side_two {
        flex: 1 1 45rem;
    }

    .dash-row .side_two .side-row-one {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .dash-row .side_two .side-row-one .col-1{
        flex-basis: 230px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-radius: 10px;
    }

    .dash-row .side_two .side-row-one .col-1 img{
        width: 70px;
        height: 70px;
    }

    .dash-row .side_two .side-row-one .col-1 p {
        font-weight: 500;
        font-size: 1rem;
        font-family: poppins , sans-serif;

    }

    .dash-row .side_two .side-row-one .col-1 p span{
        font-size: 2.4rem;
        font-weight: 600;
        font-family: poppins , sans-serif;

    }

    .dash-row .side_two .side-row-one .col-1:nth-child(1) {
        background: #e8e6f7;
        box-shadow: 0 0 5px #e8e6f7;
    }

    .dash-row .side_two .side-row-one .col-1:nth-child(1) p{
        color: #6259ca;
    }

    .dash-row .side_two .side-row-one .col-1:nth-child(2) {
        background: #dbf7f7;
        box-shadow: 0 0 5px #dbf7f7;
    }

    .dash-row .side_two .side-row-one .col-1:nth-child(2) p{
        color: #29bf6c;
    }

    .dash-row .side_two .side-row-one .col-1:nth-child(3) {
        background: #fddddf;
        box-shadow: 0 0 5px #fddddf;
    }

    .dash-row .side_two .side-row-one .col-1:nth-child(3) p{
        color: #ef1d26;
    }

    .dash-row .side_two .side-row-two {
        background: #fff;
        padding: 1.5rem;
        box-shadow: 0 0 5px #d8d3d3;
        border-radius: 10px;
    }

    .dash-row .side_two .side-row-two h5{
        font-size: 1.7rem;
        color: var(--text-color);
        padding-bottom: 1.2rem;
        border-bottom: 1px solid #646161;
    }

    .dash-row .side_two .side-row-two .tb-row{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1.5rem 0;

    }

    .dash-row .side_two .side-row-two .tb-row .tb-col {
        display: flex;
        gap: 2rem;padding: 1rem 0;
        border-bottom: 1px solid #646161;
        width: 100%;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col .info{
        display: flex;
        gap: 1rem;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col .info img{
        width: 130px;
        height: 80px;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col h6:nth-child(1){
        flex-basis: 345px;

    }

    .dash-row .side_two .side-row-two .tb-row .tb-col:nth-child(1){
        flex-basis: 350;

    }

    .dash-row .side_two .side-row-two .tb-row .tb-col h6,
    .dash-row .side_two .side-row-two .tb-row .tb-col .info{
        flex-basis: 50px;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col h6 {
        font-size: 1.4rem;
        color: var(--text-color);
        font-family: 'poppins', sans-serif;
        font-weight: 500;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col .info p{
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--text-color);

    }

    .dash-row .side_two .side-row-two .tb-row .tb-col .info p span,
    .dash-row .side_two .side-row-two .tb-row .tb-col span,
    .dash-row .side_two .side-row-two .tb-row .tb-col a{
        font-weight: 500;
        color: #646161;
        font-size: 1.2rem;
        font-family: 'poppins', sans-serif;
    }

    .dash-row .side_two .side-row-two .tb-row .tb-col a{
        padding-left: 1rem;
        color: #29bf6c;
    }

    @media(max-width:991px) {
        .dash-row .side_one{
            flex-basis: 100%;
            
        }

        .dashboard .dash-row {
            flex-wrap: wrap;
        }

        .dash-row .side_two .side-row-two .tb-row .tb-col {
            overflow-x: scroll;
        }
    }

    @media(max-width:768px) {
        .dash-row .side_two .side-row-two {
            width: 500px;
        }
    }

    @media(max-width:650px) {

        .dash-row .side_two .side-row-two {
            width: 400px;
        }

    }

    @media(max-width:500px) {

        .dash-row .side_two .side-row-two {
            width: 350px;
        }

    }

    /*=== My Profile section strat ===*/
    .dash-row .side_two .row-one{
        display: flex;
        gap: 2rem;
    }

    .dash-row .side_two .row-one .side-col_one{
        flex-basis: 550px;
        background: #fff;
        padding: 2.5rem;
        box-shadow: 0 0 5px #d8d3d3;
    }

    .dash-row .side_two .row-one .side-col_one h5{
        font-size: 1.8rem;
        font-family: 'poppin' , sans-serif;
        color: var(--text-color);
        padding-bottom: 1rem;
        margin-bottom: 1.6rem;
        border-bottom: 1px solid #646161;
    }

    .dash-row .side_two .row-one .side-col_one .box{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .dash-row .side_two .row-one .side-col_one .box .inputBox,
    .dash-row .side_two .row-one .side-col_one .inputBox{
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

    }

    .dash-row .side_two .row-one .side-col_one .box .inputBox label,
    .dash-row .side_two .row-one .side-col_one .inputBox label {
     font-size: 1.4rem;
     color: var(--text-color);
     padding-bottom: 1.5rem;
     font-weight: 600;
    }

    .dash-row .side_two .row-one .side-col_one .box .inputBox input,
    .dash-row .side_two .row-one .side-col_one .inputBox input{
     border: 1px solid #d8d3d3;
     padding: 1.2rem;
     width: 100%;
     font-size: 1.6rem;
    }

    .dash-row .side_two .row-one .side-col_one .inputBox input {
        margin-bottom: 2rem;
    }

    .dash-row .side_two .row-one .side-col_one a{
        background: var(--main-color);
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        color: #fff;
        font-size:1.5rem;
        font-weight: 600;
        border-radius: 5px;
        letter-spacing: 1px;
    }

    .dash-row .side_two .row-one .side-col_one a:hover{
        background: var(--text-color);
    }

    .dash-row .side_two .row-one .side-col_two{
        flex-basis: 250px;
        background: #fff;
        padding: 2.5rem;
        box-shadow: 0 0 5px #d8d3d3;
    }

    .dash-row .side_two .row-one .side-col_two h5{
        font-size: 1.8rem;
        font-family: 'poppin' , sans-serif;
        color: var(--text-color);
        padding-bottom: 1rem;
        margin-bottom: 1.6rem;
        border-bottom: 1px solid #646161;
    }

    .dash-row .side_two .row-one .side-col_two .box .inputBox{
      padding-bottom: 3rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;  
    }

    .dash-row .side_two .row-one .side-col_two .box .inputBox label{
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .dash-row .side_two .row-one .side-col_two .box .inputBox input{
        border: 1px solid #d8d3d3;
        padding: 1.2rem;
        width: 100%;
        font-size: 1.6rem;
    }

    .dash-row .side_two .row-one .side-col_two a{
        background: var(--main-color);
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 600;
        border-radius: 5px;
        letter-spacing: 1px;
    }

    .dash-row .side_two .row-one .side-col_two a:hover{
        background: var(--text-color);
    }

    .dash-row .side_two .row-two {
        background: #fff;
        margin-top: 2.6rem;
        padding: 2.5rem;
        box-shadow: 0 0 5px #d8d3d3;
    }

    .dash-row .side_two .row-two h5{
        font-size: 1.8rem;
        font-family: 'poppin' , sans-serif;
        color: var(--text-color);
        padding-bottom: 1rem;
        margin-bottom: 1.6rem;
        border-bottom: 1px solid #646161;

    }

    .dash-row .side_two .row-two .box{
        padding-bottom: 2rem;
    }

    .dash-row .side_two .row-two .box .inputBox{
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
    }

    .dash-row .side_two .row-two .box .inputBox label{
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-color);
    }

    .dash-row .side_two .row-two .box .inputBox input{
        border: 1px solid #d8d3d3;
        padding: 1.2rem;
        width: 100%;
        font-size: 1.6rem;
    }

    .dash-row .side_two .row-two a{
        background: var(--main-color);
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 600;
        border-radius: 5px;
        letter-spacing: 1px;
    }

    .dash-row .side_two .row-two a:hover{
        background: var(--text-color);
    }

    @media(max-width:1365px) {
        .dash-row .side_two .row-one {
            flex-wrap: wrap;
        }
        .dash-row .side_two .row-one .side-col_one {
            flex-basis: 100%;
        }

        .dash-row .side_two .row-one .side-col_two {
            flex-basis: 100%;
        }

    }

    @media(max-width:650px) {
        .dash-row .side_two .row-one .side-col_one .box{
            grid-template-columns: 1fr;
        } 
    } 

    /*=== My Listing section strat  ===*/
    .dash-row .side_two .side-row-two .table .icon{
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .dash-row .side_two .side-row-two .table .icon i{
        font-size: 1.7rem;
    }

    .dash-row .side_two .side-row-two .table .icon i:nth-child(1),
    .dash-row .side_two .side-row-two .table .icon i:nth-child(2){
        border: 1px solid #646161;
        height: 20px;
        color: #646161;
    }

    .dash-row .side_two .side-row-two .table .icon i:nth-child(3){
        border: 1px solid var(--main-color);
        height: 20px;
        color: var(--main-color);
    }

    /*====  Add Listing section strat ====*/
    .dash-row .side_two {
        background: #fff;
        padding: 1.5rem;
    }

    .dash-row .side_two h5{
        font-size: 1.8rem;
        color: var(--text-color);
        font-family: 'poppins',sans-serif;
        padding-bottom: 1rem;
        border-bottom: 1px solid #646161;
    }

    .dash-row .side_two .list-header h6{
        font-size: 1.4rem;
        padding: 1rem 0;
        color: var(--text-color);
    }

    .dash-row .side_two .list-header label{
        display: flex;
        padding: 1rem 0;
        color: var(--text-color);
        font-size: 1.3rem;
        font-weight: 500;
        font-family: 'poppins',sans-serif;
    }

    .dash-row .side_two .list-header input{
        width: 100%;
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;
    }

    .dash-row .side_two .list-row .box{
        display: flex;
        align-items: center;
        row-gap: 2rem;
        justify-content: space-between;
        margin-top: 1.5rem;
    }

    .dash-row .side_two .list-row .box .inputBox {
        flex-basis: 350px;
        display: flex;
        align-items: left;
        flex-direction: column;
        gap: 1rem;
        text-align: left;
    }

    .dash-row .side_two .list-row .box .inputBox label{
        padding: 1rem 0;
        font-size: 1.3rem;
        font-weight: 500;
        font-family: 'poppins',sans-serif;

    }

    .dash-row .side_two .list-row .box .inputBox select,
    .dash-row .side_two .list-row .box .inputBox input {
        width: 100%;
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;
    }

    .dash-row .side_two .tags label{
        margin-top: 2rem;
        display: block;
        padding: 1rem 0;
        color: var(--text-color);
        font-weight: 500;
        font-size: 1.3rem;
        font-family: 'poppins',sans-serif;
    }

    .dash-row .side_two .tags input{
        width: 100%;
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .dash-row .side_two h6 {
        font-size: 1.5rem;
        padding: 1rem 0;
        color: var(--text-color);
    }

    .dash-row .side_two .location {
        display: flex;
        align-items: center;
        gap: 2rem;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .dash-row .side_two .location .box{
        flex-basis: 400px;
    }

    .dash-row .side_two .location .box .inputBox label {
        display: block;
        padding-bottom: 1rem;
        padding: 1rem 0;
        color: var(--text-color);
        font-size: 1.4rem;
        font-weight: 500;
        font-family: 'poppins',sans-serif;
    }

    .dash-row .side_two .location .box .inputBox input{
        width: 100%;
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;

    }

    .dash-row .side_two .inputBox label {
        display: block;
        padding-bottom: 1rem;
        padding: 1rem 0;
        color: var(--text-color);
        font-size: 1.3rem;
        font-weight: 500;
        font-family: 'poppins',sans-serif;
    }

    .dash-row .side_two .inputBox textarea{
        width: 100%; 
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;

    }

    .dash-row .side_two .feature{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    .dash-row .side_two .feature .checkBox {
        flex: 1 1 20rem;
        margin-bottom: 1rem;
        font-size: 1.4rem;
        color: #646161;
    }

    .dash-row .side_two .feature .checkBox input{
        accent-color: var(--main-color);
    }

    .dash-row .side_two .info .box {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .dash-row .side_two .info .box .inputBox {
        flex-basis: 300px;
    }
    .dash-row .side_two .info .box .inputBox label {
         padding-bottom: 1rem;
         display: block;
         padding: 1rem 0;
         color: var(--text-color);
         font-size: 1.3rem;
         font-weight: 500;
         font-family: 'poppins',sans-serif;
    }

    .dash-row .side_two .info .box .inputBox input {
        width: 100%; 
        border: 1px solid #d8d3d3;
        padding: 1rem;
        font-size: 1.3rem;
    }

    .dash-row .side_two .condition {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.2rem;
        font-family: 'poppins',sans-serif; 
    }

    .dash-row .side_two .button {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }

    .dash-row .side_two .button a{
        background: var(--main-color);
        color: #fff;
        padding: 1rem 2.5rem;
        font-size: 1.6rem;
        border-radius: 5px;
    }

    .dash-row .side_two .button a:hover{
        background: var(--text-color);
    }

    @media(max-width:768px) {
        .dash-row .side_two .list-row .box {
            flex-wrap: wrap;
        }

        .dash-row .side_two .list-row .box .inputBox {
            flex-basis: 100%;
        }

        .dash-row .side_two .list-row .box .inputBox input,
        .dash-row .side_two .list-row .box .inputBox select {
           width: 100%;
        }

        .dash-row .side_two .location {
            flex-wrap: wrap;
        }
    
        .dash-row .side_two .location .box{
            flex-basis: 100%;
        }

        .dash-row .side_two .info .box {
           flex-wrap: wrap;
        }
    
        .dash-row .side_two .info .box .inputBox {
            flex-basis: 100%;
        }
    }


    /*=== Shop Section Strat ===*/
    .shop .arr-row .arr-col{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .shop .arr-row .arr-col .image{
        height: 22rem;
    }

    .shop .arr-row .arr-col .list .price p{
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }

    .shop .arr-row .arr-col .list .price p span{
        text-decoration: line-through;
        color: #3a3737;
        font-size: 16px;
    }

    
    /*===  Shop Cart Section Strat ===*/
    .shop_cart{
        padding: 4rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .shop_cart table tr{
        display: flex;
        justify-content: left;
        align-items: center;
        text-align: center;
        gap: 120px;
        border-bottom: 1px solid #fddddf;
    }

    .shop_cart table tr:nth-child(1){
        border-bottom: none;

    }

    .shop_cart table tr.topic{
        display: flex;
        justify-content: left;
        background: var(--main-color);
        padding: 8px 11px;
        text-align: center;
    }

    .shop_cart table tr.text{
        padding: 16px 0;
    }

    .shop_cart table tr th{
        font-size: 17px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 500;
        letter-spacing: 1px;
        text-align: center;
    }

    .shop_cart table tr td{
        padding: 6px 10px;
        color: #646161;
        font-size: 17px;
    }

    .shop_cart table tr td img{
        width: 50px;
        height: 50px;
    }

    .shop_cart table tr.text .subTot{
        position: relative;
    }

    .shop_cart table tr.text .subTot p{
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
         cursor: pointer;
    }

    .shop_cart table tr.text .subTot i{
        position: absolute;
        right: -100px;
        top: 50%;
        transform: translateY(-50%);
    }

    .shop_cart table tr td input{
        width: 50px;
        font-size: 17px;
        color: var(--main-color);
    }
    
    @media(max-width:991px){
        .shop_cart table tr{
            gap: 60px;
        }
    }

    @media(max-width:768px){
        .shop_cart table tr{
            gap: 15px;
        }
    }

    @media(max-width:550px){
        .shop_cart table tr th{
            font-size: 14px;
        }

        .shop_cart table tr.text .subTot p{
            left: -40px;
        }

        .shop_cart table tr.text .subTot i{
            right: -20px;
        }
    }

    @media(max-width:450px) {
        .shop_cart table tr {
           gap: 5px;
        }

        .shop_cart table tr th{
            font-size: 12px;
        }

        .shop_cart table tr td{
            font-size: 12px;
        }

        .shop_cart table tr td input{
            font-size: 12px;
        }
    }


    /*=====  Shop Checkout Section Strat  ====*/
    .checkout{
        padding: 6.5rem 12.5%;
    }

    .checkout .billing{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .billing .left{
        background: #f3efef;
        display: flex;
        flex-direction: column;
        width: 700px;
        padding: 20px 30px;
        border-radius: 8px;
    }
    
    .billing .right{
        background: #f3efef;
        display: flex;
        flex-direction: column;
        width: 400px;
        padding: 20px 30px;
        border-radius: 8px;

    }

    .billing .left h2,
    .billing .right h2{
        font-size: 28px;
        color: #646161;
        padding-bottom: 20px;
    }

    .billing .left .row{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .billing .left .row .inputBx{
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .billing .left .row .inputBx label,
    .billing .left .inputBx label{
        font-size: 18px;
        color: #646161;
    }

    .billing .left .row .inputBx input,
    .billing .left .inputBx input{
        width: 100%;
        padding: 14px 7px;
        font-size: 16px;
        color: #646161;
        border-radius: 5px;
        border: 1px solid #d8d3d3;
        letter-spacing: 0.5px;
    }

    .billing .left .row .inputBx input:focus,
    .billing .left .inputBx input:focus{
        border: 1px solid var(--main-color);
    }

    .billing .left .inputBx {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .billing .right .summary_info{
         text-align: center;
         padding-bottom: 20px;
    }

    .billing .right .summary_info .sum-col{
        display: flex;
        justify-content: space-between;
        margin-bottom: 17px;
        text-align: center;
        align-items: center;
    }

    .billing .right .summary_info .sum-col p{
        color: var(--text-color);
        font-weight: 600;
        font-size: 16px;
    }

    .billing .right .summary_info .sum-col span{
        color: #646161;
        font-size: 17px;
        font-family: 'poppins', sans-serif;
    }

    .billing .right .summary_info .sum-col span.total{
        color: var(--main-color);
    }

    .billing .right .summary_info .sum-col.amount{
        border-top: 1px solid #d8d3d3;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .billing .right .summary_info a{
        background: var(--main-color);
        color: #fff;
        padding: 15px 30px 15px 20px;
        font-size: 18px;
        border-radius: 7px;
        transition: 0.5s;
    }

    .billing .right .summary_info a:hover{
        background: var(--text-color);
    }

    .billing .right .summary_info a i{
        position: absolute;
        font-size: 20px;
        top: 20px;
    }


    /*===   Payment info and shipping section start  ===*/
    .payment,
    .shipping{
      background: #f3efef;
      display: flex;
      flex-direction: column;
      width: 700px;
      padding: 20px 30px;
      border-radius: 8px;
      margin: 40px 0;
    }

    .payment h2,
    .shipping h2{
        font-size: 28px;
        color: #646161;
        padding-bottom: 20px;
    }

    .payment .row,
    .shipping .row{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .payment .row .inputBx,
    .shipping .row .inputBx{
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .payment .row .inputBx label,
    .shipping .row .inputBx label{
     font-size: 18px;
     color: #646161;
    }

    .payment .row .inputBx input,
    .shipping .row .inputBx input{
      width: 100%;
      padding: 14px 7px;
      font-size: 16px;
      color: #646161;
      border-radius: 5px;
      border: 1px solid #d8d3d3;
      letter-spacing: 0.5px;
    }

    .shipping .inputBx{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .payment .row .inputBx input:focus,
    .shipping .inputBx textarea:focus,
    .shipping .row .inputBx input:focus{
        border: 1px solid var(--main-color);
    }

    .shipping .inputBx label{
        font-size: 18px;
        color: #646161;
    }

    .shipping .inputBx textarea{
        width: 100%;
        padding: 14px 7px;
        font-size: 16px;
        color: #646161;
        border-radius: 5px;
        border: 1px solid #d8d3d3;
        letter-spacing: 0.5px;
    }

    @media(max-width:1160px) {
        .billing .right,
        .billing .left,
        .payment,
        .shipping{
            width: 100%;
        }

        .checkout .billing {
            flex-wrap: wrap;
        }
    }

    @media(max-width:768px) {
        .billing .row,
        .payment .row,
        .shipping .row{
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
        }
    }

    /*===  Shop Single Section Strat  ===*/
    .shop_single{
        padding: 6.5rem 8.5%;
        display: flex;
        justify-content: space-between;
    }

    .shop_single .left{
        width: 500px;
    }

    .shop_single .left img.main{
        width: 550px;
        height: 40rem;
        box-shadow: 0 0 5px #dbf7f7;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .shop_single .left .row{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        text-align: center;
        align-items: center;
    }

    .shop_single .left .row img{
        width: 130px;
        height: 120px;
        box-shadow: 0 0 5px #dbf7f7;
    }

    .shop_single .right{
        width: 680px;
        background: #f3efef;
        padding: 15px 20px;
    }

    .shop_single .right h2{
        font-size: 26px;
        color: #646161;
        padding-bottom: 10px;
    }

    .shop_single .right .rate{
        display: flex;
        align-items: center;
    }

    .shop_single .right .rate i{
        font-size: 18px;
        color: var(--main-color);
        padding: 5px 0 10px;
    }

    .shop_single .right p{
        padding-left: 20px;
        font-size: 14px;
        font-family: 'poppins', sans-serif;
        color: #646161;
    }

    .shop_single .right p.price{
        font-size: 20px;
        font-family: 'poppins', sans-serif;
        color: var(--main-color);
        padding-bottom: 5px;

    }

    .shop_single .right p.price span{
        font-family: 'poppins', sans-serif;
        text-decoration: line-through;
        color: #646161;
    }

    .shop_single .right p.text{
        font-size: 14px;
        color: #646161;
        padding-bottom: 20px;
    }

    .shop_single .right .details .col{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    .shop_single .right .details .col p{
        font-size: 16px;
        color: #646161;
    }

    .shop_single .right .details .col span{
        font-size: 15px;
        color: #646161;
        font-family: 'poppins', sans-serif;
        font-weight: 400;
    }

    .shop_single .right .details .col span input{
        width: 50px;
        padding: 5px;
        background: transparent;
        font-size: 15px;
        font-family: 'poppins', sans-serif;
        font-weight: 400;
        color: #646161;
    }

    .shop_single .right .details .col.social{
        border-top: 1px solid #d8d3d3;
        padding-top: 20px;
    }

    .shop_single .right .details .col.social i{
        font-size: 20px;
        color: var(--main-color);
        background: transparent;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
        transition: 0.5s;
    }

    .shop_single .right .details .col.social i:hover{
        background: var(--text-color);
        color: #fff;
    }

    .shop_single .right .add-cart{
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
    }

    .shop_single .right .add-cart a{
        background: var(--main-color);
        color: #fff;
        padding: 12px 20px;
        font-size: 17px;
        border-radius: 7px;
        transition: 0.5s;
    }

    .shop_single .right .add-cart a:hover{
        background: var(--text-color);
    }

    .shop_single .right .add-cart .other i{
       border: 2px solid var(--main-color);
       background: transparent;
       padding: 12px 15px;
       font-size: 18px;
       color: var(--main-color);
       border-radius: 7px;
       margin-right: 5px;
       cursor: pointer;
       transition: 0.5s;
    }

    .shop_single .right .add-cart .other i:hover{
        background: var(--main-color);
        color: #fff;
    }

     .descript{
        padding: 6.5rem 8.5%;
    }

    .descript .row-one{
        position: relative;
        display: flex;
        align-items: center;
        gap: 30px;
        border-bottom: 2px solid #d8d3d3;
        padding-bottom: 20px;
    }

    .descript .row-one button{
        background: transparent;
        font-size: 18px;
        color: #646161;
    }

    .descript .row-one button::before{
        content: '';
        width: 100px;
        height: 3px;
        border-radius: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: var(--main-color);
    }

    .descript p{
        padding: 20px 0;
        font-size: 17px;
        color: #646161
    }

    /*==== Related Item section start ===*/
    .related{
        padding: 6.5rem 8.5%;
    }

    .related h2{
        font-size: 26px;
        color: #646161;
    }

    .related .row-item{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin: 40px 0;
    }

    .related .row-item .col-item{
        box-shadow: 0 0 5px #d8d3d3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        cursor: pointer;
    }

    .related .row-item .col-item .image{
        position: relative;
        width: 100%;
        height: 25rem;
        margin-bottom: 10px;
    }

    .related .row-item .col-item .image::before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(211, 13, 13, 0.5);
      border-radius: 10px;
      transition: 0.5s;
      opacity: 0;
    }

    .related .row-item .col-item .image:hover::before{
       opacity: 1;
    }

    .related .row-item .col-item .image img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .related .row-item .col-item .rates i{
      font-size: 18px;
      color: var(--main-color);
    }

    .related .row-item .col-item h4{
        font-size: 18px;
        color: #646161;
        padding: 5px 0 10px;
    }

    .related .row-item .col-item p{
        font-size: 15px;
        font-family: 'poppins', sans-serif;
        color: var(--main-color);
        padding-bottom: 20px;
    }

    .related .row-item .col-item p span{
        font-family: 'poppins', sans-serif;
        color: #646161;
        text-decoration: line-through;
    }

    .related .row-item .col-item .image .carts{
        position: absolute;
        top: 20%;
        left: -30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        transition: 0.5s;
        opacity: 0;
    }

    .related .row-item .col-item .image:hover .carts{
        opacity: 1;
        left: 30px;
    }

    .related .row-item .col-item .image .carts i{
        font-size: 20px;
        background: #fff;
        color: var(--main-color);
        padding: 9px;
        border-radius: 5px;
        cursor: pointer;
        transition: -.5s;
    }

    .related .row-item .col-item .image .carts i:hover{
        background: var(--main-color);
        color: #fff;
    }

    @media(max-width:1160px) {
        .shop_single{
            flex-wrap: wrap;
        }

        .shop_single .left {
            width: 100%;
        }

        .shop_single .left img .main{
           width: 100%;
           height: 40rem;
        }

        .shop_single .left .row img{
            width: 100%;
            height: 150px;
        }

        .shop_single .right{
            width: 100%;
        }
    } 

    @media(max-width:768px) {
        .related .row-item{
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media(max-width:450px) {
        .descript .row-one{
            gap: 10px;
        }
        .related .row-item{
            grid-template-columns: repeat(1, 1fr);
        }
    }


    /*===  Signup Form  section start ====*/
    .signup{
        padding: 4rem 3.5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .signup .title h3{
     font-size: 34px;
     color: #3a3737;
     font-weight: 550;
     padding-bottom: 30px;
     text-align: center;
     position: relative;
    }

    .signup .title h3::before{
        content: '';
        position: absolute;
        width: 200px;
        height: 4px;
        background: var(--main-color);
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
        animation: animate 8s linear infinite;
    }

    @keyframes animate {
        0%{
            width: 0px;
        }
    }

    .signup form{
        width: 70%;
        margin: 40px auto;
    }

    .signup form .inputs{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .signup form .inputs .inputBx{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .signup form .inputs .inputBx input{
        width: 100%;
        padding: 12px 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
        font-size: 16px;
        border-radius: 3px;
    }

    .signup form .inputs .inputBx input:focus{
        border: 1px solid var(--main-color);
        box-shadow: none;
    }

    .signup form .inputs .inputBx label{
        font-size: 17px;
        color: #3a3737;
    }

    .signup form .checkBx{
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 30px;
        font-size: 16px;
        color: #3a3737;
    }

    .signup form .submit{
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .signup form .submit button{
        margin: 60px 0 10px;
        width: 250px;
        height: 50px;
        background: var(--text-color);
        color: #ffff;
        font-size: 20px;
        text-transform: uppercase;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.5s;
    }

    .signup form .submit button:hover{
        background: var(--main-color);
    }

    .social_log{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
    }

    .social_log p{
        padding-bottom: 20px;
        font-size: 16px;
        color: #646161;
    }

    .social_log .social{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    .social_log .social i{
        font-size: 26px;
        color: #ffff;
        background: var(--main-color);
        padding: 7px;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.5s;
    }

    .social_log .social i:hover{
        background: var(--text-color);
    }

    @media(max-width:768px) {
        .signup form .inputs{
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media(max-width:450px) {
        .signup .title h3{
            font-size: 24px;
           
        }
    } 

    /*=== Login Form  section start ===*/
    .login{
    padding: 4rem 3.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    .login .title h3{
     font-size: 34px;
     color: #3a3737;
     font-weight: 550;
     padding-bottom: 30px;
     text-align: center;
     position: relative;
    }

    .login .title h3::before{
    content: '';
    position: absolute;
    width: 200px;
    height: 4px;
    background: var(--main-color);
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    animation: animate 6s linear infinite;
    }

    .login form{
        width: 700px;
        box-shadow: 0 0 5px #d8d3d3;
        margin-top: 40px;
        padding: 30px 12px;
        border-radius: 10px; 
    }
.login form .inputs{
 display: grid; 
 grid-template-columns: repeat(2,  1fr); 
 align-items: left; 
 gap: 20px;
}

.login form .inputs .inputBx{
display: flex; 
flex-direction: column; 
gap: 25px; 
}
.login form .inputs .inputBx input{
 width: 100%; 
 padding: 12px 5px;
 box-shadow: 0 0 5px rgba(9,0,0,0.5);
 font-size: 16px;
 border-radius: 3px;
}

.login form .inputs .inputBx input:focus{
    box-shadow: none;
    border: 1px solid var(--main-color);
}

.login form .inputs .inputBx label{
    font-size: 17px;
    color: #3a3737;
}

.login form .forgot{
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #3a3737;
    margin: 30px 0;
}

.login form .forgot a{
    font-size: 16px;
    color: #3a3737;
}

.login form .forgot a:hover{
    color: #6259ca;
    text-decoration: underline;
}

.login form .submit{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.login form .submit button{
    margin: 0 0 10px;
    width: 250px;
    height: 50px;
    background: var(--text-color);
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
}

.login form .submit button:hover{
    background: var(--main-color);
}

@media(max-width:768px) {
    .login form .inputs{
        grid-template-columns: repeat(1, 1fr);
    }

    .login form{
        width: 100%;
    }
}

@media(max-width:450px) {
    .login .title h3{
        font-size: 24px;
       
    }
} 

/*===  Forgot  section start  ===*/
.forgot{
    padding: 4rem 3.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    .forgot h2{
     font-size: 34px;
     color: #3a3737;
     font-weight: 550;
     padding-bottom: 10px;
     text-align: center;
     position: relative;
    }

    .forgot p{
        font-size: 14px;
        color: #3a3737;
        text-align: center;
        letter-spacing: 0.8px;
        padding-bottom: 40px;
    }

    .forgot .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding-bottom: 30px;
    }

    .forgot .btn a{
        box-shadow: 0 0 4px #3a3737;
        padding: 8px 23px;
        font-size: 18px;
        border-radius: 5px;
        transition: 0.5s;
    }

    .forgot .btn a:hover{
        background: #141622;
        color: #fff;
    }

    .forgot .inputBx{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: left;
        margin-bottom: 40px;
    }

    .forgot .inputBx label{
        font-size: 18px;
        color: #3a3737;
        padding-bottom: 30px;
    }

    .forgot .inputBx input{
        position: relative;
        box-shadow: 0 0 5px #3a3737;
        width: 300px;
        height: 40px;
        padding: 5px;
        font-size: 16px;
        border-radius: 5px;
    }

    .forgot .inputBx input:focus{
        border: 1px solid var(--main-color);
        box-shadow: none;
    }

    .forgot .inputBx i{
        position: absolute;
        right: 5px;
        bottom: 10px;
        font-size: 18px;
        color: #3a3737;

    }

    .forgot button{
        background: #141622;
        color: #fff;
        padding: 10px 14px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.5s;
    }

    .forgot button:hover{
        background: var(--main-color);
        color: #fff;
    }

    @media(max-width:450px) {
        .forgot h2{
            font-size: 16px;
        }
    }

    /*====   Blog section start   ===*/

.blog{
  display: flex;
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  padding: 7.5rem 8.5%; 
}

.blog .blog-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; 
}

.blog-row .blog-col{
    box-shadow: 0 0 10px #d8d3d3;
    padding: 16px 20px 30px;
    border-radius: 10px;
    text-align: left;
    background: #fff;
    overflow: hidden;
}

.blog-row .blog-col .image{
    width: 106%; 
    height: 22rem; 
    overflow: hidden;
    border-radius: 10px; 
  }
  
  .blog-row .blog-col .image img {
    width: 100%; 
    height: 100%; 
    border-radius: 10px; 
    object-fit: cover; 
    transition: 0.5s;
  }

  .blog-row .blog-col:hover .image img{
    transform: scale(1.1);
  }
  
  .blog-row .blog-col .date{
    display: flex;
    justify-content: left;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #d8d3d3;
   }
  
   .blog-row .blog-col .date p{
      color: var(--text-color);
      font-size: 14px;
      font-family: 'poppins', sans-serif;
   }
  
   .blog-row .blog-col .date p i{
      color: var(--main-color);
      font-size: 15px;
   }
  
   .blog-row .blog-col h5{
      padding: 20px 0 30px;
      font-size: 20px;
      letter-spacing: 1px;
      color: #646161;
      font-family: 'poppins', sans-serif;
      font-weight: 550;
   }

   .blog-row .blog-col a{
     background: var(--main-color);
    color: #ffff;
     padding: 12px 30px 12px 20px;
     font-size: 16px;
     border-radius: 8px;
    position: relative; 
    transition: 0.5s;
   }

   .blog-row .blog-col a i{
    position: absolute;
    top: 16px;
    font-size: 20px;
   }

   .blog-row .blog-col a:hover{
    background: var(--text-color);
   }

   @media(max-width:1160px) {
    .blog .blog-row{
        grid-template-columns: repeat(2, 1fr);
    }
   } 
   
   
   @media(max-width:768px) {
    .blog .blog-row{
        grid-template-columns: repeat(1, 1fr);
    }

    .blog-row .blog-col .image{
        height: auto;
    }

   }  

   
   /*====   Blog Single section start  ====*/
   .blog_single{
    padding: 7.5rem 10.5%;
    display: flex;
    justify-content: space-between;
    gap: 30px;
   }

   .blog_single .left{
    flex: 50rem;
 }

 .blog_single .left img{
    width: 100%;
    border-radius: 10px;
 }

 .blog_single .left .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
 }

 .blog_single .left .row .col{
    display: flex;
    gap: 20px;
    align-items: center;
 }

 .blog_single .left .row p{
    font-family: 'poppins', sans-serif;
    font-size: 16px;
    color: var(--text-color);
 }

 .blog_single .left .row p i{
    color: var(--main-color);
 }
 
 .blog_single .left h4{
    font-size: 22px;
    color: #646161;
    font-family: 'poppins', sans-serif;
    font-weight: 500;
    padding-bottom: 10px;
 }

 .blog_single .left p{
    font-size: 16px;
    color: #646161;
    padding-bottom: 10px;
 }

 .blog_single .left .image{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
 }

 .blog_single .left .image img{
    width: 100%;
    border-radius: 10px;
 }

 .blog_single .left .tags{
    border-top: 1px solid #d8d3d3;
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 30px;
 }

 .blog_single .left .tags h6{
    color: #646161;
    font-size: 20px;
 }

 .blog_single .left .tags span{
    font-size: 17px;
    background: #dbf7f7;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
 }

 .blog_single .left .tags span:hover{
    background: var(--main-color);
    color: #fff;
 }

 .blog_single .left .author{
    width: 100%;
    box-shadow: 0 0 10px #d8d3d3;
    display: flex;
    gap: 15px;
    margin: 20px 0;
    padding: 20px;
    background: #fff;
 }

 .blog_single .left .author img{
    width: 230px;
    height: 17rem;
 }

 .blog_single .left .author .info h5{
  font-size: 18px;
  color: #646161;
}

.blog_single .left .author .info h4{
    color: var(--main-color);
    font-size: 20px;
}

.blog_single .left .author .info p{
    color: #646161;
}

.blog_single .left .author .info .social{
    padding-top: 20px;
    display: flex;
    gap: 10px;
}

.blog_single .left .author .info .social i{
    font-size: 18px;
    padding: 6px;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    color: var(--main-color);
    cursor: pointer;
    transition: 0.5s;
}

.blog_single .left .author .info .social i:hover{
    background: var(--text-color);
    border: 1px solid var(--text-color);
    color: #fff;
}

.blog_single .left .comment{
    margin-top: 80px;
}

.blog_single .left .comment h2{
    color: #646161;
}

.blog_single .left .comment .row{
    display: flex;
    gap: 20px;
    box-shadow: 0 0 10px #d8d3d3;
    margin-top: 10px;
    margin-bottom: 20px;
}

.blog_single .left .comment .row img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.blog_single .left .comment .row h6{
    color: var(--text-color);
    font-size: 18px;
    padding-bottom: 7px;

}

.blog_single .left .comment .row span{
    color: var(--main-color);
    font-size: 16px;
    font-weight: 600;
}

.blog_single .left .comment .row p{
    padding: 14px 0;
    color: #646161;
    font-size: 14px;
}

.blog_single .left .leave{
    background: #f3efef;
    padding: 40px 20px;
    margin-top: 70px;
    border-radius: 10px;
}

.blog_single .left .leave h2{
    font-size: 22px;
    color: #646161;
    padding-bottom: 20px;
}

.blog_single .left .leave .leave-input{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.blog_single .left .leave .leave-input input,
.blog_single .left .leave textarea{
   width: 100%;
   padding: 12px 5px;
   font-size: 16px;
   border: 1px solid #dbf7f7;
   border-radius: 5px;
}

.blog_single .left .leave .leave-input input:focus,
.blog_single .left .leave textarea:focus{
  border: 1px solid var(--main-color);
}

.blog_single .left .leave a{
    background: var(--main-color);
    color: #fff;
    font-size: 17px;
    padding: 12px 20px;
    border-radius: 5px;
    transition: 0.5s;
}

.blog_single .left .leave a:hover{
    background: var(--text-color);
}

 .blog_single .left .leave textarea{
    margin-bottom: 25px;
 }

 .blog_single .right{
    flex: 20rem;
}

.blog_single .right .searchBx{
    display: flex;
    flex-direction: column;
    background: #f7f2f2;
    padding: 30px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog_single .right .searchBx h4{
    font-size: 24px;
    padding-bottom: 16px;
    color: #646161;
}

.blog_single .right .searchBx .search-box input{
 width: 100%;
 padding: 12px 5px;
 border-radius: 5px;
 border: 1px solid #d8d3d3;
 font-size: 17px;
}

.blog_single .right .searchBx .search-box input:focus{
    border: 1px solid var(--main-color);
}

.blog_single .right .searchBx .search-box i{
    position: absolute;
    top: 13px;
    right: 14px;
    font-size: 20px;
    color: #646161;
}

.blog_single .right .category{
    display: flex;
    flex-direction: column;
    background: #f7f2f2;
    padding: 30px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog_single .right .category h4{
    font-size: 24px;
    padding-bottom: 16px;
    color: #646161;
}

.blog_single .right .category .cat-col{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #d8d3d3;
}

.blog_single .right .category .cat-col :nth-child(6) {
    border-bottom: none;
}

.blog_single .right .category .cat-col p{
    position: relative;
    font-size: 16px;
    color: #646161;
    transition: 0.5s;
}

.blog_single .right .category .cat-col:hover p{
    padding-left: 15px;
    color: var(--main-color);
}

.blog_single .right .category .cat-col p i{
    color: var(--main-color);
    font-size: 20px;
    position: relative;
    top: 4px;
}

.blog_single .right .category .cat-col span{
    font-size: 16px;
    color: #646161;
}

.blog_single .right .category .cat-col:hover span{
    color: var(--main-color);
    font-weight: 600;
}

.blog_single .right .post{
    display: flex;
    flex-direction: column;
    background: #f7f2f2;
    padding: 30px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog_single .right .post h4{
    font-size: 24px;
    padding-bottom: 16px;
    color: #646161;
}

.blog_single .right .post .post-col{
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.blog_single .right .post .post-col img{
    border-radius: 7px;
    width: 80px;
    height: 80px;
}

.blog_single .right .post .post-col h5{
    font-size: 17px;
    color: var(--text-color);
    padding-bottom: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.blog_single .right .post .post-col h5:hover{
  color: var(--main-color);
}

.blog_single .right .post .post-col p{
    color: var(--main-color);
    font-size: 16px;
}

.blog_single .right .follow{
    background: #f7f2f2;
    padding: 30ps 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog_single .right .follow h4{
    font-size: 24px;
    padding-bottom: 16px;
    color: #646161;
}

.blog_single .right .follow i{
    font-size: 20px;
    margin-right: 3px;
    padding: 6px;
    border: 2px solid var(--main-color);
    border-radius: 50%;
    color: var(--main-color);
    transition: 0.5s;

}

.blog_single .right .follow i:hover{
    background: var(--main-color);
    color: #fff;
}

.blog_single .right .poppular{
    background: #f7f2f2;
    padding: 30px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog_single .right .poppular h4{
    font-size: 24px;
    padding-bottom: 16px;
    color: #646161;
}

.blog_single .right .poppular .row{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog_single .right .poppular .row span{
    background: #fff;
    color: #646161;
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 5px;
    transition: 0.5s;
}

.blog_single .right .poppular .row span:hover{
    background: var(--main-color);
    color: #fff;
}

@media(max-width:991px) {
    .blog_single{
        flex-wrap: wrap;
    }
}

@media(max-width:650px) {
    .blog_single .left{
        flex: 20rem;
    }

    .blog_single .right{
        flex :20rem;
    } 

    .blog_single .left .image{
        grid-template-columns: repeat(1, 1fr);
    }

    .blog_single .left .row .col{
      gap: 10px;
    }

    .blog_single .left .leave .leave-input{
     grid-template-columns: repeat(1, 1fr);
    }

    .blog_single .left  .author{
        flex-wrap: wrap;
    }

    .blog_single .left  .author img{
        width: 100%;
        height: 17rem;
    }

    .blog_single .left .comment .row{
      display: flex;
      flex-wrap: wrap;
    }
} 


/*====   Services section strat  ===*/
.services{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.services .service-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-row .service-col{
    box-shadow: 0 0 5px #d8d3d3;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    text-align: justify;
    transition: 0.5s;
}

.service-row .service-col:hover{
    transform: translateY(10px);
}

.service-row .service-col .image{
    width: 100%;
    height: 22rem;
    border-radius: 10px;
    position: relative;
}

.service-row .service-col .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    position: relative;
}

.service-row .service-col .image img.icon{
    position: absolute;
    bottom: -30px;
    right: 30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.service-row .service-col h3{
    padding-top: 20px;
    font-size: 18px;
    color: #646161;
    padding-bottom: 10px;
}

.service-row .service-col p{
    font-size: 14px;
    color: #646161;
    padding-bottom: 20px;
}

.service-row .service-col a{
    background: var(--main-color);
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 10px;
}

.service-row .service-col a:hover{
    background: var(--text-color);
}

@media(max-width:1160px) {
    .services .service-row{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {
    .services .service-row{
        grid-template-columns: repeat(1, 1fr);
    }

    .service-row .service-col .image{
        height: auto;
    }
}

/*=== Service Single section start ===*/
.service_single{
    padding: 6.5rem 10.5%;
    display: flex;
    justify-content: space-between; 
    gap: 26px;
    }
    .service_single .left{
     flex: 20rem; 
    }
    .service_single .left .all{
     background: #dbf7f7;
     border-radius: 10px; 
    padding: 30px 20px;
    }

    .service_single .left .all h4{
        color: #646161;
        font-size: 24px;
        padding-bottom: 10px;
    }

    .service_single .left .all p{
        font-size: 16px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #d8d3d3;
        position: relative;
        cursor: pointer;
        transition: 0.5s;
    } 

    .service_single .left .all p:hover{
        color: var(--main-color);
        margin-left: 6px;
    }

    .service_single .left .download{
        background: #dbf7f7;
        border-radius: 10px;
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .service_single .left .download a{
        border: 2px solid var(--main-color);
        padding: 12px 20px;
        border-radius: 10px;
        font-size: 17px;
        letter-spacing: 1px;
        color: var(--text-color);
        font-weight: 700;
        transition: 0.5s;
    }

    .service_single .left .download a:hover{
        background: var(--main-color);
        color: #ffff;
    }

    .service_single .right{
        flex: 40rem;
    }

    .service_single .right img{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .service_single .right h4{
        padding-bottom: 20px 0;
        font-size: 24px;
        color: #646161;
    }

    .service_single .right p{
        color: #646161;
        font-size: 15px;
        padding-bottom: 10px;
    }

    .service_single .right .image{
        padding: 30px 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service_single .right .image img{
        width: 100%;
        border-radius: 12px;
    }

    .service_single .right .lines p{
         color: #646161;
    }

    .service_single .right .lines p i{
        color: var(--main-color);
    }

    @media(max-width:991px) {
        .service_single{
            flex-wrap: wrap;
        }

        .service_single .left{
            flex: 100%;
        }

        .service_single .right{
            flex: 100%;
        }
    }

    @media(max-width:450px) {
        .service_single .right .image{
            grid-template-columns: repeat(1, 1fr);
        }
    }

    /*=== Pricing section start  ー==*/ 
.price{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 0;
}

.price .price-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.price-row .price-col{
    background: #ffff;
    box-shadow: 0 0 5px #d8d3d3;
    padding: 20px;
    width: 280px;
    text-align: justify;
    border-radius: 12px;
}


.price-row .price-col img{
    width: 90px; 
    height: 90px; 
    border-radius: 50%; 
    border: 2px dashed var(--main-color); 
    padding: 10px;
    
}

.price-row .price-col h3{
    color: var(--text-color); 
    padding-top: 15px;
    text-transform: capitalize;
    font-size: 24px; 
    
}

.price-row .price-col span{
    margin-top: -40px; 
    font-size: 16px; 
    font-family: 'Poppins', sans-serif; 
    color: #646161; 
}
    
.price-row .price-col h6 {
    font-size: 34px; 
    font-family: 'Poppins', sans-serif;
    color: var(--main-color);
}

.price-row .price-col p{
    position: relative;
    font-size: 16px;
    color: var(--text-color);
    letter-spacing: 0.5px;
    padding-top: 10px;
}


.price-row .price-col p i{
    color: var(--main-color);
}

.price-row .price-col .button{
    padding: 30px;
}

.price-row .price-col .button a{
    position: relative;
    background: var(--main-color);
    color: #ffff;
    padding: 12px 26px;
    font-size: 17px;
    border-radius: 5px;
    transition: 0.5s;
}

.price-row .price-col .button a i{
    position: absolute;
    top: 16px;
    font-size: 20px;
}

.price-row .price-col .button a:hover{
    background: var(--text-color);
    color: #ffff;
}

@media(max-width:1200px) {
.price .price-row {
    grid-template-columns: repeat(3, 1fr);
}

.price-row .price-col{
    width: 100%;
}

}

@media(max-width:768px) {
    .price .price-row {
        grid-template-columns: repeat(2, 1fr);
    } 

    .price-row .price-col{
        width: 250px;
    }
}

@media(max-width:550px) {
    .price .price-row {
        grid-template-columns: repeat(1, 1fr);
    } 

    .price-row .price-col{
        width: 300px;
    }
}

/*==== Team section start ===*/ 
    .team .team-row{
       display: grid; 
       grid-template-columns: repeat(4, 1fr); 
       gap: 50px; 
       margin-bottom: 30px; 
    }

    .team-row .col-t{
       width: 100%;
       height: auto; 
       box-shadow: 0 0 10px #d8d3d3; 
       border-radius: 10px;
       padding: 12px 10px; 
       cursor: pointer; 
       transition: 0.5s;
    }

    .team-row .col-t .user-img{
        position: relative; 
        width: 100%; 
        border-radius: 10px; 
       }
       
    .team-row .col-t .user-img img  {
       width: 100%; 
       height: 27rem; 
       border-radius: 10px; 
       }
       
    .team-row .col-t .user-img .icon{
        position: absolute; 
       top: 10%; 
       right: 0; 
       display:none; 
       transition: 0.5s;
     }

     .team-row .col-t:hover .user-img .icon{
        right: 10px;
        display: block;
     }

    .team-row .col-t:hover .user-img .icon{
        right: 10px; 
       display: block; 
       }
       
    .team-row .col-t .user-img .icon i{
       position: relative; 
       display: block; 
       margin-bottom: 20px; 
       font-size: 20px; 
       background: var(--main-color); 
       color: #fff; 
       border-radius: 50%;
       padding: 10px; 
       transition: 0.5s; 
       }
       
    .team-row .col-t .user-img .icon i:hover{ 
        background: var(--text-color);
     }

     .team-row .col-t h3{
        padding: 10px; 
        color: var(--text-color); 
        font-size: 22px;
         letter-spacing: 0.5px; 
        }
        
        .team-row .col-t p {
        color: var(--main-color); 
        font-size: 16px; 
        font-weight: 600; 
        }
        
        .team-row .col-t:hover{
        transform: translateY(-10px);
     }


     @media(max-width:1200px) {
        .team .team-row{
            gap: 10px;
        }

        .team-row .col-t .user-img img{
            height: auto;
        }

        .team-row .col-t .user-img .icon i{
            margin-bottom: 10px;
            font-size: 16px;
        }
    }

    @media(max-width:991px) {
        .team .team-row{
       grid-template-columns: repeat(3, 1fr); 
       }
    }
       
       @media(max-width:768px) {
       .team .team-row{
        grid-template-columns: repeat(2, 1fr); 
       }
       .team-row .col-t .user-img .icon i{
        margin-bottom: 10px; 
       font-size: 16px;
       
       }
    }

    @media(max-width:550px) {
        .team .team-row{
         grid-template-columns: repeat(1, 1fr); 
        }
        .team-row .col-t .user-img .icon i{
         margin-bottom: 20px; 
        font-size: 18px;
        
        }
     }

     /*=== Calculator section start ===*/
      .calculator{
        padding: 8.5% 10.5%;
      }

      .calculator .col-row{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        box-shadow: 0 0 10px #d8d3d3;
        border-radius: 15px;
        padding: 6rem 2rem;
      }

      .col-row .cal-col-1{
        flex: 40rem;
        padding: 10px 30px;
      }

      .col-row .cal-col-1 h2{
        font-size: 24px; 
        color: #646161; 
        padding-bottom: 20px; 
        }
        
        .col-row .cal-col-1 .box{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 10px;
        }
        
        .col-row .cal-col-1 .inputBx {
            box-shadow: 0 0 4px #d8d3d3; 
            width: 100%; 
            height: 45px; 
            margin-bottom: 38px;
            
            
        }

        .col-row .cal-col-1 .inputBx input{
            width: 100%;
            height: 100%;
            padding: 10px 15px;
            font-size: 17px;
        }

        .col-row .cal-col-1 .inputBx input:focus{
            border: 1px solid var(--main-color);
            border-radius: 5px;
        }
        
        .col-row .cal-col-1 a{
           position: relative; 
           background: var(--main-color); 
           color: #ffff; 
           padding: 12px 26px; 
           font-size: 18px; 
           border-radius: 5px;
           transition: 0.5s; 
        }

        .col-row .cal-col-1 a:hover{
            background: var(--text-color);
        }

        .col-row .cal-col-1 a i{
            position: absolute;
            top: 16px;
        }
           
        .col-row .cal-col-2{
          flex: 10rem;
      }

      .col-row .cal-col-2 img{
         width: 100%;
         height: 100%;
         border-radius: 15px;
      }

      @media(max-width:991px) {
        .col-row .cal-col-1 .box{
            grid-template-columns: repeat(1,1fr);
            gap: 0px;
        }

        .col-row .cal-col-1 {
            flex: 100%;
        }

        .col-row .cal-col-2 {
            flex: 100%;
        }
    }

      @media(max-width:768px) {
        .calculator .cal-row{
            flex-wrap: wrap;
        }

        .col-row .cal-col-2 img{
            margin-top: 40px;
            padding: 22px;
         }
    }

      @media(max-width:500px) {
        .col-row .cal-col-1 h2{
            font-size: 18px; 
            }
    }

    /*====   Contact section start   ====*/
    .contact .contact-row{
        padding: 4.5rem 12.5%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .contact-row .contact-col{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #fddddf;
        padding: 30px;
        border-radius: 8px;
        transition: 0.5s ease;
    }

    .contact-row .contact-col:hover{
        transform: translateY(-10px);
    }

    .contact-row .contact-col img{
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }

    .contact-row .contact-col h6{
        padding: 6px 0;
        font-size: 20px;
        font-family: 'poppins', sans-serif;
        color: #646161;
    }

    .contact-row .contact-col p{
        font-size: 14px;
        color: #646161;
    }

    .contact .touch-row{
        padding: 4.5rem 12.5%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .touch-row .touch-col img{
        width: 100%;
        height: auto;
        border-radius: 20px 50% 50% 50%;
    }

    .touch-row .touch-col h5{
        font-size: 27px;
        font-family: 'poppins', sans-serif;
        color: #646161;
    }

    .touch-row .touch-col p{
        font-size: 14px;
        font-family: 'poppins', sans-serif;
        color: #646161;
        margin-bottom: 30px;
        padding-top: 10px;
    }

    .touch-row .touch-col .box{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
       }

    .touch-row .touch-col .box .inputBx,
    .touch-row .touch-col .inputBx{
        width: 100%;
        height: 45px;
        border: 1px solid #646161;
        margin-bottom: 30px;
        border-radius: 8px;

    }

    .touch-row .touch-col .inputBx input,
    .touch-row .touch-col .inputBx input{
       width: 100%;
       height: 100%;
       padding: 5px;
       font-size: 16px;
       border-radius: 8px;
    }

    .touch-row .touch-col .inputBx input:focus,
    .touch-row .touch-col .inputBx input:focus,
    .touch-row .touch-col textarea:focus{
       border: 1px solid var(--main-color);
    }

    .touch-row .touch-col textarea{
        width: 100%;
        padding: 5px;
        font-size: 16px;
        border: 1px solid #646161;
        border-radius: 8px;
    }

    .touch-row .touch-col button{
        margin-top: 40px;
        padding: 15px 30px;
        background: var(--main-color);
        color: #fff;
        font-size: 17px;
        border-radius: 7px;
        cursor: pointer;
        transition: 0.5s;
    }

    .touch-row .touch-col button:hover{
        background: var(--text-color);
    }

    @media(max-width:1200px) {
        .contact .contact-row{
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media(max-width:991px) {
        .contact .contact-row{
            grid-template-columns: repeat(2, 1fr);
        }

        .contact .contact-row{
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media(max-width:600px) {
        .contact .contact-row{
            grid-template-columns: repeat(1 1fr);
        }

        .contact .touch-row .box{
            grid-template-columns: repeat(1, 1fr);
        }

        .touch-row .touch-col .box{
            gap: 0;
        }
    }


 /* Container for floating buttons */
.floating-buttons {
    position: fixed;
    top: 40%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
  
  }
  
  /* Style each button */
  .floating-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #09307f; /* Facebook blue */
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
  }
  
  /* Instagram button color */
  .floating-buttons a.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  
  /* Twitter button color */
  .floating-buttons a.twitter {
    background-color: black
  }
  
  /* Linkedin button color */
  .floating-buttons a.linkedin {
    background-color: blue
  }
  
  /* whatsapp button color */
  .floating-buttons a.whatsapp {
    background-color: rgb(4, 106, 4);
  }
  
  /* Hover effect */
  .floating-buttons a:hover {
    opacity: 0.8;
    padding-left: 10px;
  }



  /*====  terms and condition ====*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #fff;
    color: #333;
    line-height: 1.6;
  }
  
  /* Header with black & red theme */
  .condition{
    background: linear-gradient(135deg, black, red);
    color: white;
    text-align: center;
    padding: 80px 40px;
  }
  
  .condition h1 {
    font-size: 3.5rem;
    margin: 0;
    color: #000000;

  }
  .condition p {
    font-size: 2.2rem;
    margin-top: 10px;
  }
  
  /* Tabs */
  .tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: black;
  }
  .tabs button {
    background: none;
    border: none;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
    font-size: 18px;
    text-align: center;
  }
  .tabs button:hover,
  .tabs button.active {
    background: red;
  }
  
  /* Content box */
  .tab-content {
    display: none;
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-left: 5px solid red;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
  }
  .tab-content.active {
    display: block;
  }
  
  /* Headings with arrows */
  h3{
    color: black;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size:15px ;
  }
  h3::before{
    content: "➤";
    color: red;
    font-size: 2.35rem;
  }
  
  /* Responsive adjustments */
  @media (max-width: 600px) {
    header h1 {
        font-size: 1.8rem;
    }
    header p {
        font-size: 1rem;
    }
    .tabs {
        flex-direction: column;
        font-size: 18px;
    }
  }
  
  /* Privacy-Policy */
  :root{
    --black:#000000;
    --red:#b30000;
    --white:#ffffff;
    --text:#333333;
    --muted:#666666;
    --card:#ffffff;
    --border:#e6e6e6;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.65;
  }
  
  .section{
    background:var(--card);
    border:1px solid var(--border);
    border-left:5px solid var(--red);
    border-radius:10px;
    padding:20px 20px;
    margin:16px 0 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    font-size: 18px;
  }
  
  h3{
    margin:0 0 12px;
    font-size:2.35rem;
    color:var(--black);
    display:flex;align-items:center;gap:8px
  }
  h3::before{content:"➤"; color:var(--red); font-size: 2.35;}
  h4{margin:18px 0 8px; color:var(--black); font-size:2.05rem}
  
  p{margin:10px 0}
  ul{margin:8px 0 10px 22px; list-style:circle}
  
  a{color:var(--red); text-decoration:none}
  a:hover{text-decoration:underline}
  
  /* Tables */
  .table-wrap{overflow-x:auto}
  table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin:10px 0 0;
  }
  th, td{
    border:1px solid var(--border);
    padding:12px 14px;
    text-align:left; vertical-align:top;
  }
  th{
    background:var(--black);
    color:#fff;
    font-weight:700;
    letter-spacing:.2px;
    font-size: 15px;
  }
  tbody tr:nth-child(even){background:#fafafa}
  td ul{margin:0; padding-left:18px; list-style:circle}
  td ul li{margin:6px 0}
  
  /* Mobile table pattern */
  @media (max-width: 760px){
    table, thead, tbody, th, td, tr{display:block}
    thead{display:none}
    tbody tr{
      border:1px solid var(--border);
      border-radius:8px;
      padding:8px 10px;
      margin:10px 0;
      background:#fff;
    }
    td{
      border:none;
      border-bottom:1px dashed var(--border);
      padding:10px 8px;
    }
    td:last-child{border-bottom:none}
    td[data-label]::before{
      content: attr(data-label);
      display:block;
      font-weight:700;
      color:var(--muted);
      margin-bottom:6px;
    }
  }