/* fonts  */
@font-face {
    font-family:"Raleway-regular";
    src:url(../fonts/Raleway-Regular.ttf)
}
@font-face {
    font-family:"Raleway-medium";
    src:url(../fonts/Raleway-Medium.ttf)
}
@font-face {
    font-family:"Raleway-bold";
    src:url(../fonts/Raleway-Bold.ttf)
}
@font-face {
    font-family:"Raleway-extrabold";
    src:url(../fonts/Raleway-ExtraBold.ttf)
}
@font-face {
    font-family:"Raleway-semibold";
    src:url(../fonts/Raleway-SemiBold.ttf)
}
@font-face {
    font-family:"Raleway-black";
    src:url(../fonts/Raleway-Black.ttf)
}


/* colors  */

:root {
    --primary:#EEBF00;
    --secondary:#232B38;
    --ternary:#6C6C6C;
    --danger:#FE4545;
    --pure:#FEFEFE;
    --light:#F0F0F0;
    --heaven:#FFFFFF;
    --footer:#2D333F;
}

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

body{
    -webkit-font-smoothing:antialiased;
    font-family: "Raleway-regular";
}
.container {
    width:100%;
    padding:o 15px;
    margin:0 auto;
}

@media (min-width:576px){
    .container{
        max-width:540px;
    }
}
@media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      max-width: 1152px;
    }
  }

  .main-wrapper{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
  }

  .nav-background{
      width:100%;
      height:100%;
      background:var(--light);
      position: absolute;
      top:0;
      left:0;
      padding:0;
      z-index:1;
  }

  .nav-trigger{
      position: absolute;
      top:0;
      left:0;
      z-index:1;
      padding:15px;
      display:none;
  }

  .nav-trigger svg{
      transform:rotate(90deg) scaleX(-1);
      -webkit-transform:rotate(90deg) scaleX(-1);
      -moz-transform:rotate(90deg) scaleX(-1);
      -ms-transform:rotate(90deg) scaleX(-1);
      -o-transform:rotate(90deg) scaleX(-1);
      width:40px;
      height:40px;
}
.site-content-wrapper{
    width:100%;
    height:100%;
    position:absolute;
    background:var(--heaven);
    z-index:2;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}

.site-content-wrapper.scaled{
    transform:scale(0.9) translateX(90%);
    -webkit-transform:scale(0.9) translateX(90%);
    -moz-transform:scale(0.9) translateX(90%);
    -ms-transform:scale(0.9) translateX(90%);
    -o-transform:scale(0.9) translateX(90%);
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    box-shadow:0 3px 10px 0 var(--secondary);
}

.site-content{
    width:100%;
    height:100%;
    overflow-x:auto;
}










  header.topbar{
      background:var(--secondary);
      color:var(--pure);
      font-family:"Raleway-semibold";
      padding:0.75rem 0;
  }
  header.topbar .auth > div a{
      color:var(--pure);
      text-decoration: none;
  }
  header.topbar .icons a{
    margin-right:0.6rem;
  }
  header.topbar .auth .divider{
      padding:0 1rem;
  }
  header.topbar .auth > div img{
      margin-right:0.35rem;
  }
  .flex{
    display:flex;
  }
  .justify-between{
    justify-content: space-between;
  }
  .items-center{
      align-items: center;
  }
  nav .top{
      padding:1.5rem 0;
  }
  nav .top .contact h5,  nav .top .time h5{
      font-family:"Raleway-black";
      margin-bottom:0.25rem;
  }
  nav .top .contact h6, nav .top .time h6{
    font-family:"Raleway-medium";
    letter-spacing: 0.055rem;
    font-size:0.75rem;
    color:var(--ternary);
}
nav .top .contact img, nav .top .time img{
    margin-right:1rem;
}

.justify-center{
    justify-content:center;
}
nav .navbar a{
    text-decoration:none;
    color:var(--secondary);
    font-family:"Raleway-semibold";
    font-size:1rem;
    padding:1rem 1.5rem;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}
nav .navbar a.active{
    /* background:var(--primary); */
    background: #f8c401;
    /* background: #dd9324; */
    color:var(--pure);
}
nav .navbar a:hover{
    /* background:var(--primary); */
    background: #f8c401;
    color:var(--pure); 
}
.magic-shadow{
    position: relative;
    background:var(--heaven);
}
.magic-shadow:after{
    content:'';
    display:block;
    width:100%;
    height:69px;
    background-image:url(../icons/shadow.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom:-22px;
    z-index:-1;
    
}
.magic-shadow-sm{
    position: relative;
    background:var(--heaven);
}
.magic-shadow-sm:after{
    content:'';
    display:block;
    width:100%;
    height:69px;
    background-image:url(../icons/shadow-sm.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    z-index:-1;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
}
header.hero{
    height:600px;
    
    background-position: 0% 0%;
    background-repeat: no-repeat;
    overflow:hidden;
}
header.hero .container{
    position: relative;
}
header.hero .welcome{
    margin-bottom:0.25rem;
}
header.hero .welcome span{
    font-family:"Raleway-bold";
    color:var(--secondary);
    margin-right:0.75rem;

}
header.hero h1{
    font-family:"Raleway-extrabold";
    color:var(--secondary);
    font-size: 2.5rem;
    margin-bottom:0.75rem;
}
header.hero h1 span{
    color:var(--primary);
}
header.hero p{
    font-family: "Raleway-medium";
    width:50%;
    line-height:1.5;
    margin-bottom:1rem;
}
.btn{
    padding:0.75rem 0.75rem;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    line-height:0.8;
    font-size:1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    border:1px solid transparent;
}

.btn-primary {
    background:var(--primary);
    color:var(--heaven);
}
.btn-primary:hover{
    background:var(--heaven);
    color:var(--primary); 
    border:1px solid var(--primary);
}
.btn-secondary{
    background:var(--secondary);
    color:var(--heaven); 
}
.btn-secondary:hover{
    background:var(--heaven);
    color:var(--secondary); 
    border:1px solid var(--secondary);
}

header.hero button:first-child{
    margin-right:0.50rem;
}

header.hero .hero-image{
    position:absolute;
    top:-40px;
    right:40px;
}

section{
    padding:4rem 0;
}
section.top-products{
    background:var(--light);
}

.section-heading{
    font-family:"Raleway-bold";
    text-align:center;
    Position:relative;
    margin-bottom:6rem;
}
.section-heading:after{
    content:'';
    display:block;
    width: 100%;
    height:30px;
    background-image:url(../icons/hr.svg);
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    bottom:-40px;
}
section.top-products .food-slider .food-card{
    background:var(--heaven);
    padding:1.5rem 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
section.top-products .food-slider .food-card .product-image img{
    width:80%;
    height:200px;
    object-fit:contain;
    padding-bottom:1rem;
}
hr{
    border:1px solid var(--light);
    opacity: 0.8;
    margin:1rem 0;
}
section.top-products .food-slider .food-card h2{
    font-family:"Raleway-bold";
    font-size:1.3rem;
    margin-bottom:0.25rem;
}
.text-center{
    text-align: center;
}
section.top-products .food-slider .food-card .stars{
    margin-bottom:0.5rem;
}
section.top-products .food-slider .food-card .stars img{
    margin-right:0.25rem;
}
section.top-products .food-slider .food-card .price{
    font-family:"Raleway-medium";
    color:var(--danger);
    margin-bottom: 1rem;
}
section.top-products .food-slider .food-card button{
    font-family:"Raleway-medium";
    color:var(--secondary);
    background:var(--heaven);
    border:2px solid var(--primary);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display:flex;
    align-items: center;
    width:50%;
    font-size:1rem;
    cursor: pointer;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
}
section.top-products .food-slider .food-card button:hover{
    background:var(--primary);
    color:var(--heaven);
}
.food-slider .food-card button img{
    background:var(--primary);
    padding:0.50rem;
    height:32px;
    margin-right:1.2rem;
}

.slick-slide{
    margin:0 27px;
}
.slick-list{
    margin:0 -27px;
}
.top-products .slider-btn{
    width: 30px;
    height:30px;
    border: none;
    background:var(--primary);
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    cursor:pointer;
    outline:none;
}

.prev-btn{
    position:absolute;
    top:46%;
    left:-3rem;
    z-index: 1;
}
.next-btn{
    position:absolute;
    top:46%;
    right:-3rem;
    z-index: 1;
}
.top-products .slider{
    position: relative;
}
.top-products .btn-wrapper{
    margin-top:2rem;
}
.slick-track{
    padding:1rem 0;
}
section.about-meal img{
    width:85%;
}
.flex-1{
    flex:1;
}
section.about-meal h2{
    font-family: "Raleway-bold";
    font-size:1.4rem;
    color:var(--secondary);
    margin-bottom:2rem;
    line-height:1.3;
}
section.about-meal p{
    line-height: 1.7;
    margin-bottom:4rem;
}

section.our-services{
    background:var(--light);
    position:relative;
    z-index:0;
}
section.our-services .card-wrapper{
    margin-right:-2rem;
    margin-top:8rem;
}
section.our-services .service-card{
    background:var(--heaven);
    text-align: center;
    padding:2rem;
    padding-top:4rem;
    margin-right:2rem;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
section.our-services .service-card .icon{
    position: absolute;
    top: -48px;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
} 
section.our-services .service-card h2{
    font-family: "Raleway-bold";
    font-size: 1.3rem;
    margin-bottom:1rem;
}
section.our-services .service-card p{
    line-height: 1.6;
    margin-bottom:1rem;
}
.text-primary{
    color:var(--primary);
}

section.big-deal {
    background: linear-gradient(
        rgba(35,43,56,0.9),
        rgba(35,43,56,0.9)
    ), url(../images/food-table.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
section.big-deal .timer{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-right:-2rem;
    margin-bottom:2rem;
}
section.big-deal .timer div{
    margin-right:2rem;
    background: var(--primary);
    width:150px;
    height:150px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section.big-deal .timer div span:first-child{
    font-family: "Raleway-semibold";
    font-size:2.5rem;
    color:var(--heaven);
    margin-bottom:0.05rem;
}
section.big-deal .timer div span:last-child{
    font-family: "Raleway-medium";
    color:var(--heaven);
}
.text-pure{
    color:var(--pure);
}

section.latest-news{
    background:var(--light);
    position:relative;
    z-index:0;
}
section.latest-news .article-wrapper{
    display:flex;
    margin-right:-2rem;

}
.latest-news .article-wrapper .card {
    margin-right:2rem;
    background:var(--heaven);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.latest-news .article-wrapper .card img{
    width:100%;
}
.latest-news .article-wrapper .card .card-content{
    padding:2rem;
}
.latest-news .article-wrapper .card .card-content .post-meta{
    margin-bottom: 1rem;
}
.latest-news .article-wrapper .card .card-content .post-meta .comment-count{
    margin-left:1rem;
}
.latest-news .article-wrapper .card .card-content h2{
    font-family: "Raleway-bold";
    font-size: 1.3rem;
    margin-bottom:1rem;
}
.latest-news .article-wrapper .card .card-content p{
    line-height: 1.6;
}
.latest-news .btn-wrapper{
    margin-top:2rem;
}
section.subscribe{
    background:var(--primary);
}
section.subscribe .container > div:first-child img{
    width:90%;
}
section.subscribe .container div:first-child{
    flex:1;
}
section.subscribe .container div:last-child{
    flex:1;
}

section.subscribe h1{
    font-family:"Raleway-bold";
    font-size: 1.5rem;
    margin-bottom:1.5rem;
}
section.subscribe p{
    font-family:"Raleway-medium"; 
    font-size: 1rem;
    margin-bottom:1.5rem;
    line-height: 1.5;
}
section.subscribe .input-wrap{
    background:var(--heaven);
    display:flex;
    padding:0.3rem;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
}
section.subscribe .input-wrap input{
    width:100%;
    border:none;
    padding: 0 1rem;
    font-size:1rem;
}
section.subscribe .input-wrap input:focus{
    outline:none;
}
section.subscribe .input-wrap button{
    padding:0.8rem 2rem;
    border:none;
    background:var(--primary);
    color:var(--pure);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size:1rem;
    cursor:pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    outline:none;
}
section.subscribe .input-wrap button:hover{
    background:var(--secondary);
}
section.contact-us{
    padding-top:0;
    padding-bottom: 0;
}
section.contact-us .contact-info-wrapper {
    padding:4rem 0;
    flex:1;
}
section.contact-us .map{
    flex:1;
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
}
section.contact-us .contact-info{
    display:flex;
    justify-content: center;
}
section.contact-us .contact-info > div > div {
    display:flex;
    align-items:center;
    margin-bottom:2rem;
}
section.contact-us .contact-info > div > div img{
    margin-right: 1rem;
}
section.contact-us .contact-info > div > div > div{
    display:flex;
    flex-direction: column;
}
section.contact-us .contact-info > div > div > div span:first-child{
    font-family: "Raleway-bold";
    margin-bottom:0.25rem;
}
footer{
    background:#ba0001;
    padding:4rem 0;
}
footer .container{
    display:flex;
    color:var(--pure);
}

footer .box{
    flex:1;
    margin-right:2rem;
    text-align:center;
}

footer .instagram-api img{
    width:100%;
    height:100%;
    object-fit: cover;
}
footer .instagram-api .post-wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
footer .instagram-api .post-wrap > div{
    width: calc(1/3*100% - (1 - 1/3)*10px);
    margin-bottom:10px;
}
footer .box ul{
    list-style-type: none;
}
footer .box ul li a{
    color:var(--pure);
    text-decoration: none;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
footer .box ul li a:hover{
    color:var(--primary);
}
footer .box h3{
    border-bottom:1px solid var(--primary);
    padding-bottom:1rem;
    margin-bottom:1rem;
}

footer .box p{
    line-height: 1.6;
    margin-bottom:1rem;
}
footer .box ul li{
    margin-bottom:1rem;
}
footer .box:nth-child(3) > div {
    display:flex;
    justify-content: center;
}
footer .box:nth-child(3){
    text-align: left;
}
footer .box:nth-child(3) h3{
    text-align: center;
}
footer .box:nth-child(3) > div img{
    margin-right:1rem;
}
footer .box:nth-child(3) ul li{
    margin-bottom:1.5rem;
}

footer.copyright{
    padding:1rem 0;
    background:#ba0001;
    color:var(--pure);
    text-align: center;
    font-size: 0.75rem;
}
footer.copyright a{
    color:var(--primary);
    text-decoration: none;
}

.nav-background .mobile-logo{
    padding:1rem;
}
.nav-background .mobile-nav{
    padding:1rem;
}
.nav-background .mobile-nav ul{
    list-style-type: none;
}
.nav-background .mobile-nav ul li{
    margin-bottom:1rem;
}
.nav-background .mobile-nav ul li a{
    text-decoration: none;
    color:var(--secondary);
    font-family: "Raleway-medium";
}
.nav-background .mobile-nav ul li a:hover{
    color:var(--primary);
}
.nav-background .contact, .nav-background .time{
    padding:1rem;
    padding-left:0;
}
.nav-background .contact img, .nav-background .time img{
    margin-right:1rem;
}
.nav-background .contact h5,.nav-background .time h5{
    font-family:"Raleway-bold";
    margin-bottom:0.25rem;
    font-size:1rem;
}
.nav-background .contact h6, .nav-background .contact h6{
    font-size: 0.75rem;
}
.nav-background .cart{
    margin-bottom:2rem;
}
.nav-background .cart a{
    color:var(--secondary);
    text-decoration: none;
    font-family: "Raleway-bold";
}
.nav-background .cart img{
    margin-right:0.75rem;
    width:20px;
    height:20px;
}

@media (max-width:992px){
    .nav-trigger{
        display:block;
    }
    header.topbar, nav{
        display:none;
    }

    header.hero {
        margin-top:-4rem;
    }
    header.hero .hero-image{
        right:-160px;
        top:100px;
    }
    .top-products .slider-btn{
        display:none!important;
    }
    .latest-news .article-wrapper{
        flex-direction:column;
    }
    .latest-news .article-wrapper .card{
        margin-right:0;
        margin-bottom:4rem;
    }

    footer .instagram-api .post-wrap > div{
        width:calc(1/2*100% - (1 - 1/3)*10px);
    }
}

@media (max-width:768px){
    .about-meal .about-meal-wrap{
        flex-direction: column;
    }
    .about-meal .about-meal-wrap img{
        width:100%;
        margin-bottom: 2rem;
    }

    section.our-services .card-wrapper{
        flex-direction:column;
    }
    section.our-services .card-wrapper .service-card{
        margin-bottom:6rem;
    }
    footer .container{
        flex-direction: column;
    }
    footer .box{
        text-align: left;
        margin-right:0;
        margin-bottom:3rem;
    }
    footer .box:nth-child(3) h3{
        text-align:left;
    }
    footer .box:nth-child(3) > div{
        display:block;
    }
}

@media( max-width:576px){
    header.hero .hero-image{
        right:-235px;
        top:150px;
    }
    header.hero .container{
        padding-left:1rem;
    }
    header.hero{
        margin-top:-3rem;
    }
    section.big-deal .timer > div{
        margin-right:0.50rem;
    }
    section.big-deal .timer{
        margin-right:-0.5rem;
    }

    section.subscribe .container{
        flex-direction: column;
        padding:0.50rem;
    }
   
}



/* Hero Section Styling */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(135deg, #FF5722, #FBC02D, #81C784); */
    position: relative;
}


.hero-animation {
    position: relative;
    width: 300px;
    height: 300px;
}

.burger1,
.burger2,
.final-image {
    position: absolute;
    width: 130%;
    height: 130%;
}

.burger1 {
    transform: translateX(-400px);
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
}

.burger2 {
    transform: translateX(400px);
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
}

.final-image {
    transform:  rotate(20deg);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease;
}

/* Button Styling */
.cta {
    background: #ff5722;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cta:hover {
    background: #fbc02d;
}

/* Animated Text */
.G1 {
    transform: translate(20px, 85px) rotate(-20deg);
}

.e1 {
    transform: translate(13px, 60px) rotate(-25deg);
}

.e2 {
    transform: translate(6px, 40px) rotate(-20deg);
}

.k1 {
    transform: translate(3px, 23px) rotate(-15deg);
}

.s1 {
    transform: translate(2px, 14px) rotate(-10deg);
}

.f {
    transform: translate(1px, 8px) rotate(-5deg);
}

.o {
    transform: translate(0px, 5px) rotate(0deg);
}

.r {
    transform: translate(-1px, 8px) rotate(5deg);
}

.G2 {
    transform: translate(-2px, 14px) rotate(10deg);
}

.e3 {
    transform: translate(-3px, 25px) rotate(15deg);
}

.e4 {
    transform: translate(-6px, 40px) rotate(20deg);
}

.k2 {
    transform: translate(-14px, 60px) rotate(25deg);
}

.s2 {
    transform: translate(-20px, 80px) rotate(30deg);
}

span {
    display: inline-block;
}

 /* Initially hide the text */
 .hero-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
 }

@media (max-width:728px) {

    .hero-animation > img{
        height: 200px;
        width: 200px;
    }

    .hero-animation > .wrap{
        height: 200px;
        width: 200px;
        position: relative;
        bottom: -82px;
        left: 50px;
    }

    .hero-text > span{
        font-size: 19px;
        transform: none;
        position: relative;
        top: 150px;
        left: 80px;
        display: inline-block;
        margin: -5px;
    }

    p, a, h3{
        margin: 8px;
    }
    
    }

    .service-card .zomato{
        mix-blend-mode: darken;
    }

    .hero-text  span{
        font-weight: bolder;
    }



    .card {
        width: 280px;
        height: 280px;
        background: white;
        border-radius: 32px;
        padding: 3px;
        position: relative;
        box-shadow: #604b4a30 0px 70px 30px -50px;
        transition: all 0.5s ease-in-out;
    }
    
    .card .profile-pic {
        position: absolute;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        top: 3px;
        left: 3px;
        border-radius: 29px;
        z-index: 1;
        overflow: hidden;
        transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
    }
    
    .card .profile-pic img {
        object-fit: cover;
        width: 100%;
        height: 85%;
        object-position: center;
        transition: all 0.5s ease-in-out;
    }
    
    .card .bottom {
        position: absolute;
        bottom: 3px;
        left: 3px;
        right: 3px;
        background: #f8c401;
        top: 80%;
        border-radius: 29px;
        z-index: 2;
        box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    }
    
    .card .bottom .content {
        position: absolute;
        bottom: 0;
        left: 1.5rem;
        right: 1.5rem;
        height: 160px;
    }
    
    .card .bottom .content .name {
        display: block;
        font-size: 1.2rem;
        color: white;
        font-weight: bold;
    }
    
    .card .bottom .content .about-me {
        display: block;
        font-size: 0.9rem;
        color: white;
        margin-top: 1rem;
    }
    
    .card .bottom .bottom-bottom {
        position: absolute;
        bottom: 1rem;
        left: 1.5rem;
        right: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .card .bottom .bottom-bottom .social-links-container {
        display: flex;
        gap: 1rem;
    }
    
    .card .bottom .bottom-bottom .social-links-container svg {
        height: 20px;
        fill: white;
        filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
    }
    
    .card .bottom .bottom-bottom .social-links-container svg:hover {
        fill: #f55d56;
        transform: scale(1.2);
    }
    
    .card .bottom .bottom-bottom .button {
        background: white;
        color: #fbb9b6;
        border: none;
        border-radius: 20px;
        font-size: 0.6rem;
        padding: 0.4rem 0.6rem;
        box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
    }
    
    .card .bottom .bottom-bottom .button:hover {
        background: #f55d56;
        color: white;
    }
    
    .card:hover {
        border-top-left-radius: 55px;
    }
    
    .card:hover .bottom {
        top: 20%;
        border-radius: 80px 29px 29px 29px;
        transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    }
    
    .card:hover .profile-pic {
        width: 100px;
        height: 100px;
        aspect-ratio: 1;
        top: 10px;
        left: 10px;
        border-radius: 50%;
        z-index: 3;
        border: 7px solid #f8c401;
        box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
        transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
    }
    
    .card:hover .profile-pic img {
        transform: scale(1.3);
        object-position: center;
        transition: all 0.5s ease-in-out 0.5s;
    }

    /* Add this to position the yellow line content */
.yellow-line {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 50px;
    background-color: #f8c401; /* Same as the original yellow color */
    border-radius: 0 0 29px 29px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Ensures it appears above the image */
    pointer-events: none; /* Prevents interference with hover animations */
}

.yellow-line .product-name {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

/* WhatsApp Floating Button Styles */
.whatsapp-float {
    position: fixed;
    bottom: 20px; /* Adjust vertical position */
    right: 20px; /* Adjust horizontal position */
    z-index: 1000; /* Ensures it stays above other content */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366; /* WhatsApp green */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

.whatsapp-icon {
    width: 40px;
    height: 40px;
}

/* Back to Top Button Styles */
.back-to-top {
    position: fixed;
    bottom: 20px; /* Vertical position */
    left: 20px; /* Horizontal position */
    z-index: 1000; /* Keeps it above other content */
    width: 50px;
    height: 50px;
    background-color: #f8c401; /* Yellow color */
    color: #ffffff; /* White arrow */
    border-radius: 50%;
    text-align: center;
    line-height: 50px; /* Centers the arrow vertically */
    font-size: 24px; /* Adjust arrow size */
    text-decoration: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.back-to-top:hover {
    transform: scale(1.1); /* Slight zoom */
}

#background-video {
    position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
              /* z-index: -1; */
  }

 /* Mobile view */
    @media (max-width: 768px) {
        .contact-us {
            flex-direction: column;
        }
    
        .contact-info-wrapper, .map {
            width: 100%;
        }
    
        .map iframe {
            width: 100%;
            height: 300px; /* Adjust the height as needed for mobile view */
        }
    }


/* Default video styles for large screens */
#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* For screens below 1024px (tablets) */
@media only screen and (max-width: 1024px) {
    #background-video {
        object-fit: cover; /* Maintain aspect ratio, fill the screen */
    }
}

/* For screens below 768px (small tablets and large phones) */
@media only screen and (max-width: 768px) {
    #background-video {
        object-fit: cover;
    }
}

/* For screens below 480px (phones) */
@media only screen and (max-width: 480px) {
    #background-video {
        object-fit: cover; /* Keeps aspect ratio and fills the screen */
    }
}

/* For screens below 350px (extra small phones) */
@media only screen and (max-width: 350px) {
    #background-video {
        /* Optionally, you can set it to contain to avoid cutting off content */
        object-fit: contain; 
    }
}