:root {
    --primary: #ec994b;
    --white: #ffffff;
    --bg: #f5f5f5;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Kufi Arabic", sans-serif;
}

@media (min-width: 1440px) {
    html {
        zoom: 1;
    }
}

@media (min-width: 2560px) {
    #desktop-blocker {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 100000;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 2rem;
        color: #222;
        font-family: "Noto Kufi Arabic", sans-serif;
    }
    html {
        zoom: 1.7;
    }
}

@media (min-width: 3860px) {
    html {
        zoom: 2.5;
    }
}

::-webkit-scrollbar {
    width: 1.3rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #797979;
    transition: all 0.5s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: #222224;
}

::-webkit-scrollbar-track {
    background: rgb(95, 94, 94);
}

.text-center {
    text-align: center;
}

.section-heading {
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 2rem;
    color: rgb(255, 98, 0);
    padding: 2rem;
}

.section-headingG {
    font-family: "Noto Kufi Arabic", sans-serif;
    text-align: center;
    font-size: 2em;
    color: rgb(255, 98, 0);
    margin: 1rem;
}

#tranding .tranding-slider {
    height: 29rem;
    background-image: url(../assets/images/meetings-bg.jpg);
    border-radius: 1.5rem;
    position: relative;
}

.tranding-slide .tranding-slide-img img {
    margin-top: 4rem;
    width: 35rem;
    height: 24rem;
    border-radius: 1.5rem;
    object-fit: cover;
}


/* SMOLE SIZE */

@media (max-width:500px) {
    #tranding .tranding-slider {
        height: 26rem;
        background-image: url(../assets/images/meetings-bg.jpg);
    }
}

.tranding-slide {
    width: 17rem;
    height: 23rem;
    position: relative;
}

@media (max-width:500px) {
    .tranding-slide {
        width: 17rem !important;
        height: 21rem !important;
        margin-top: 1rem;
    }
    .tranding-slide .tranding-slide-img img {
        margin-top: 1rem;
        width: 17rem !important;
        height: 21rem !important;
    }
}

.tranding-slide .tranding-slide-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.tranding-slide-content .tranding-slide-content-bottom {
    background-color: #0909097e;
    position: absolute;
    bottom: 1rem;
    color: var(--white);
    width: 100%;
    text-align: center;
}

.food-name {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.food-rating {
    padding-bottom: 1rem;
    padding-left: 6.1rem;
    display: flex;
    gap: 1rem;
}

.rating ion-icon {
    color: var(--primary);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    display: none;
}

@media (max-width:990px) {
    .tranding-slider-control .swiper-button-next {
        left: 70% !important;
        transform: translateX(-70%) !important;
    }
    .tranding-slider-control .slider-arrow {
        background: var(--white);
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        left: 42%;
        transform: translateX(-42%);
        filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
    }
}

@media (max-width:450px) {
    .tranding-slider-control .swiper-button-next {
        left: 80% !important;
        transform: translateX(-80%) !important;
    }
}

@media (max-width:990px) {
    .tranding-slider-control .swiper-button-prev {
        left: 30% !important;
        transform: translateX(-30%) !important;
    }
}

@media (max-width:450px) {
    .tranding-slider-control .swiper-button-prev {
        left: 20% !important;
        transform: translateX(-20%) !important;
    }
}

.tranding-slider-control .slider-arrow ion-icon {
    font-size: 2rem;
    color: #222224;
}

.tranding-slider-control .slider-arrow::after {
    content: '';
}

.tranding-slider-control .swiper-pagination {
    position: relative;
    width: 15rem;
    bottom: 0rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
    filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary);
}


/*=============== VARIABLES CSS ===============*/

:root {
    --yellow-color: 52;
    --green-color: 116;
    --pink-color: 300;
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);
    --biggest-font-size: 2rem;
    --big-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;
}


/*========== Responsive typography ==========*/

@media screen and (min-width: 1150px) {
     :root {
        --biggest-font-size: 3rem;
        --big-font-size: 2.5rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
    }
}


/*=============== BASE ===============*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

.car__imgg {
    border-radius: 0.6rem;
    display: block;
    max-width: 100%;
    height: 100%;
    width: 100%;
    align-items: center;
}


/*=============== REUSABLE CSS CLASSES ===============*/

.contain {
    max-width: 1120px;
}


/*=============== CARD ===============*/

.car {
    animation: Anim 1s ease-in 2s 1 normal;
    animation-timeline: view();
    position: relative;
    margin: 1rem;
    border-radius: 2rem;
}

.car__bg,
.car__blu {
    position: absolute;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carc__bg,
.carc__blu {
    position: absolute;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.car__bg {
    object-fit: cover;
    object-position: center;
}

.carc__bg {
    object-fit: cover;
    object-position: center;
}

.car__blu {
    backdrop-filter: blur(24px);
}

.car__contain {
    position: relative;
    display: grid;
    grid-template-columns: 260px;
    justify-content: center;
    gap: 1rem;
}

.car__artic {
        box-shadow: 0px 0px 10px 2px rgb(27, 26, 26);

    border-radius: 0.8rem;
    position: relative;
    overflow: hidden;
    height: 180px;
    left: 0%;
}

.car__imgg {
    align-items: center;
    transition: transform .4s;
}

.car__dat {
        background-color: #1f1e1e96;

    color: white;
    width: 100%;
    text-align: center;
    font-size: 30px;
    position: absolute;
    bottom: 0.4rem;
}

.car__nam {
    color: rgb(255, 255, 255);
    font-size: 25px;
    margin: 0px;
}

.car__profession {
    display: block;
    font-size: var(--small-font-size);
}

.car__cli {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .3s;
}

.car__artic:hover .car__imgg {
    transform: scale(1.1);
}


/*=============== CARD INFO ===============*/

.inf {
    border-radius: 1rem;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background-color: hsla(0, 0%, 8%, 0.521);
    backdrop-filter: blur(12px);
    padding: 2rem 1.5rem 1.5rem;
    color: white;
    clip-path: circle(8px at 88% 9%);
    transition: clip-path .5s ease-in-out;
    text-align: right;
}

.inf__nam {
    color: white;
    font-size:15px;
    margin-bottom: 1rem;
}

.rating {
    font-size: 20px;
}

.inf__description {
    font-size: var(--small-font-size);
}

.inf__butt {
    margin-top: 5PX;
    display: inline-flex;
    border: 3px solid white;
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    border-radius: 1rem;
    color: white;
    font-size: 10px;
    font-weight: 500;
    transition: box-shadow .4s;
}

.inf__butt:hover {
    box-shadow: 0 0 20px hsl(var(--hue), 90%, 50%);
}

.inf__social {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    column-gap: .5rem;
}

.inf__link:hover {
    transform: translateY(-.25rem);
}


/* Rotate icon */

.car__artic:hover .card__clip {
    transform: rotate(-45deg);
}


/* Clip path animation */

.inf:hover,
.car__cli:hover~.inf {
    clip-path: circle(100%);
}


/*=============== CARD hard ===============*/


/*=============== BREAKPOINTS ===============*/


/* For small devices */

@media screen and (max-width: 350px) {
    .car__contain {
        grid-template-columns: repeat(2, 80px);
    }
    .inf {
        text-align: center;
    }
    .inf__nam {
        color: white;
        font-size: 15px;
        text-align: right;
        margin-bottom: 0.1px;
    }
    .car__contain {
        grid-template-columns: repeat(2, 110px);
    }
    .inf__butt {
        display: inline-flex;
        border: 1px solid white;
        box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
        padding: 0.8rem 1rem;
        color: white;
        font-size: 10px;
        font-weight: 500;
        transition: box-shadow .4s;
    }
    .rating {
        font-size: 0px;
    }
    .car__artic {
        position: relative;
        border-radius: 0.2rem;
        overflow: hidden;
        height: 160px;
        left: 0%;
    }
    .inf {
        justify-content: center;
    }
}

@media screen and (min-width: 350px) {
    .car__contain {
        grid-template-columns: repeat(2, 160px);
    }
    .inf__butt {
        display: inline-flex;
        border: 1px solid white;
        box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
        padding: 0.2rem 0.2rem;
        border-radius: 1rem;
        color: white;
        font-size: 15px;
        font-weight: 500;
        transition: box-shadow .4s;
    }
    .rating {
        font-size: 12px;
        color: #222224;
    }
    .car__artic {
        position: relative;
        border-radius: 0.5rem;
        overflow: hidden;
        height: 230px;
        left: 0%;
    }
    .inf {
        justify-content: center;
    }
}

@media screen and (min-width: 410px) {
    .car__contain {
        grid-template-columns: repeat(2, 190px);
    }
    .car__artic {
        position: relative;
        border-radius: 0.5rem;
        overflow: hidden;
        height: 260px;
        left: 0%;
    }
    .inf {
        justify-content: center;
    }
    .inf__butt {
        display: inline-flex;
        border: 1px solid white;
        box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
        padding: 0.3rem 0.5rem;
        border-radius: 1rem;
        color: white;
        font-size: 20px;
        font-weight: 500;
        transition: box-shadow .4s;
    }
}


/* For medium devices */

@media screen and (min-width: 600px) {
    .car__contain {
        grid-template-columns: repeat(3, 200px);
    }
    .car__artic {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        height: 300px;
        left: 0%;
    }
    .inf {
        justify-content: center;
    }
}


/* For large devices */

@media screen and (min-width: 1000px) {
    .car {
        display: grid;
        place-content: center;
    }
    .car__contain {
        grid-template-columns: repeat(4, 260px);
    }
    .car__artic {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        height: 300px;
        left: 0%;
    }
    .car__imgg {
        border-radius: 1rem;
    }
    .car__dat {
        bottom: 1rem;
    }
    .car__profession {
        font-size: var(--normal-font-size);
    }
    .car__cli {
        top: 1.5rem;
        right: 1.5rem;
    }
    .inf__description,
    .inf__butt {
        font-size: var(--normal-font-size);
    }
    .inf__description {
        margin-bottom: 1.5rem;
    }
    .inf__social {
        left: 2rem;
        bottom: 2.5rem;
        column-gap: .75rem;
    }
}