nav.navbar {background-color: transparent;

    background-image: linear-gradient(to bottom, rgba(37, 37, 37, .4), transparent);

    padding-top: 20px;}

    

.navbar.navbar-scroll {background-color:#2D2926;}



.navbar .navbar-brand .logo-white {display:inline-block;}

.navbar .navbar-brand .logo-dark {display:none;}



.navbar.navbar-scroll .nav-item a, 

.navbar .nav-item a,

.navbar.navbar-scroll .nav-item a:hover, 

.navbar .nav-item a:hover {color:#ffffff;}



section {margin:0 auto; padding:70px 0;}

section.dine-around {padding:0;}



h1 {font-size:70px; line-height:1.1;}



.h-50vh {height:50vh;}

.h-50vh img {height:100%; width:100%; object-fit:cover;}



.h-65vh {height:65vh;}

.h-65vh img {height:100%; width:100%; object-fit:cover; object-position:bottom;}



.h-100vh {height:100vh;}

.h-100vh img {height:100%; width:100%; object-fit:cover;}



.mt--65px {margin-top:-65px; position:relative; z-index:5;}



.bg-black {background-color:#2D2926;}



.dine-around-banner {position: relative; display: flex; align-items: center; justify-content: center;}

.dine-around-banner img {position:relative; z-index:1;}

.dine-around-banner:before {position:absolute; z-index:2; width:100%; height:100%; display:block; content:''; background-image: linear-gradient(90deg, black, #2D2926); opacity:.5;}

.dine-around-banner .dine-around-banner-overlay {position:absolute; z-index:3; max-width:80%;}



.dine-around-banner:after {

    position: absolute;

    z-index: 2;

    width: 100%;

    height: 100%;

    display: block;

    content: '';

    background-image: linear-gradient(0deg, #2D2926, transparent, transparent);

}



.intro {max-width:900px; margin:0 auto;}



.text-gold {color:#997F54;}



.explore {position: absolute;

    z-index: 10;

    bottom: 15%;

    transform: rotate(-90deg);}



.slick-slide {position:relative; padding:0 10px; opacity:0.3;}

.slick-slide.slick-active {opacity:1;}

.slick-slide img {border-radius:15px;}



.slick-slide.slick-active div > img {box-shadow:0px 0px 10px black;}



/*

.carouselRestaurants .slick-next {background-image: linear-gradient(270deg, black, transparent);}

.carouselRestaurants .slick-prev {background-image: linear-gradient(90deg, black, transparent);}

*/



.slick-prev, .slick-next {

    width: 70px;

    height: 100%;

    z-index: 10;

    top: 38%;

}



.slick-next {right: 5%!important;}

.slick-prev {left:5%!important;}



.slick-prev:before, .slick-next:before {

    content: ''!important;

    background-image: url(https://www.thefirstcollection.ae/wp-content/themes/tfc-theme/img/icon-arrow-prev.png);

    background-size: cover;

    width: 31px;

    height: 56px;

    display: inline-block;

}

.slick-next:before {transform:rotate(180deg);}



.rest-image-logo {position:relative;}

.rest-image {position:relative; z-index:1; width:100%; aspect-ratio:1/1; object-fit:cover;}

.rest-logo {position:absolute; z-index:3; left:0; top:0; width:100%; height:95%; display:flex; align-items: flex-end; justify-content: center;}

.rest-logo img {width:auto;}

.rest-logo a:after {display:none;}

.rest-image-logo:before {

    content: '';

    background-color: rgba(0, 0, 0, .25);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 2;

    display: block;

    bottom: 0;

    border-radius: 15px;

}



.rest-description {padding: 1rem; max-width:900px; margin:0 auto; font-size:15px;}



ul.steps {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    justify-content:center;

    padding-left:0;

}

ul.steps li {

    list-style: none;

    border: 1px solid #997F54;

    padding: 1rem;

    border-radius:15px;

}

ul.steps li h3 {color:#997F54; font-size:30px;}

ul.steps li strong {color:#997F54;}



.why-dubai {background-image: url('https://www.thefirstcollection.ae/wp-content/uploads/2024/07/Burj-khalifa.jpg');

    background-size: cover;

    background-position: center;

    color: #ffffff;

    height: 70vh;

    display: flex;

    position: relative;}



.why-dubai:before {

    content: '';

    background-color: rgba(0, 0, 0, .35);

    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 2;

    display: block;

    bottom: 0;

}

.why-dubai .container {position:relative; z-index:5;}



.animated {

  -webkit-animation-duration: 1s;

          animation-duration: 1s;

  -webkit-animation-fill-mode: both;

          animation-fill-mode: both;

	transition-timing-function: ease-in

}



@-webkit-keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

            transform: translate3d(0, 100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

            transform: none;

  }

}



@keyframes fadeInUp {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

            transform: translate3d(0, 100%, 0);

  }



  100% {

    opacity: 1;

    -webkit-transform: none;

            transform: none;

  }

}



.fadeInUp {

  -webkit-animation-name: fadeInUp;

          animation-name: fadeInUp;

}



@media (min-width: 768px){

    h1 {font-size:100px;}

    .dine-around-banner .dine-around-banner-overlay {max-width:50%;}

    ul.steps li {width:45%;}

}



@media (min-width: 992px){

    .slick-prev, .slick-next {width:270px;}

    ul.steps li {width:20%;}

}



@media (min-width: 1600px){

    .intro {max-width:75%;}

}





/* new restaurant-cards */

.restaurant-cards .rest-image {border-radius:20px 20px 0 0; aspect-ratio:3/2;}

.op-hours {

    font-size: 14px;

    font-weight: 700;

    padding: 10px 0;

    color: #997F54;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.op-hours strong {color:#ffffff;}

.restaurant-cards .btn {width:100%; padding:12px 20px;}

.resta-card {display:flex; flex-direction:column;}

.rest-description {

    display: flex;

    flex-direction: column;

    height: 100%;

    background-color:rgba(255,255,255,.05);

    padding-bottom:30px;

    font-size:15px;

}

.rest-info strong{
    font-size: 13px;
    margin-bottom: 0;
}

.descript {height:100%;}

.restaurant-cards a:hover {color:#ffffff;}



@media (min-width: 768px){

    .restaurant-cards .btn {width:49%;}

}

@media (min-width: 576px) and (max-width: 991px) {

    .container {max-width: 100%;}

}