/* -----------------

fonts 

--------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');



/* --------------

 variables 

 ------------*/

:root{

    --main-color: #eaa023;

    --dark: #0c1023;

    --dark-light: #191f3a;

    --white: #ffffff;

    --white-light: #c8c8c8;

    --shadow: 0 0 15px rgba(0,0,0,0.25);

    --cursive-font: 'DejaVu Sans Mono', monospace;/*'Dancing Script',cursive;*/

    scroll-behavior: smooth;

}



/* ------------------

 global settings 

----------------*/

*{

    margin:0;

    padding:0;

    box-sizing: border-box;

    outline: none;

}

::before,

::after{

    box-sizing: border-box;

}

body{

    font-size: 16px;

    line-height: 1.5;

    -webkit-tap-highlight-color: transparent;

    font-family: 'Poppins', sans-serif;

    font-weight: 300;

    color: var(--white-light);

}

img{

    vertical-align: middle;

    max-width: 100%;

}

a{

    text-decoration: none;

}

ul{

    list-style: none;

}

h1{

    font-weight: 700;

    color: var(--white);

}

h2{

    font-weight: 600;

    color: var(--white);

}

h3,

h4,

h5,

h6{

    font-weight: 500;

    color: var(--white);

}

p{

    font-size: 16px;

}

.container{

   max-width: 1170px;

   margin:auto;

}

.row{

    display: flex;

    flex-wrap: wrap;

}

.justify-content-between{

    justify-content: space-between;

}

.align-items-center{

    align-items: center;

}

.min-vh-100{

    min-height: 100vh;

}

.sec-padding{

    padding:80px 0;

}

section{

    overflow: hidden;

}



/* section title */

.section-title{

    width: 100%;

    padding:0 15px;

    text-align: center;

    margin-bottom: 60px;

}

.section-title h2{

    font-size: 35px;

    text-transform: capitalize;

}

.section-title h2::before{

    content: attr(data-title);

    display: block;

    font-size: 24px;

    color: var(--main-color);

    font-family: var(--cursive-font);

    font-weight: 400;

    text-transform: capitalize;

}



/* buttons */

.btn{

    display: inline-block;

    padding:10px 30px;

    background-color:transparent;

    border-radius: 30px;

    text-transform: capitalize;

    font-weight: 500;

    transition: all 0.3s ease;

    font-size: 16px;

    cursor: pointer;

    font-family: inherit;

    color: var(--main-color);

    line-height: 1.5;

    user-select: none;

    border:none;

}

.btn-default{

    border: 2px solid var(--main-color);

}

.btn-default:hover{

    color: var(--white);

    background-color: var(--main-color);

}



/* animation keyframes */

@keyframes zoomInOut{

    0%,100%{

        transform: scale(1);

    }

    50%{

        transform: scale(1.1);

    }

}

@keyframes spin01{

    0%{

        transform: rotate(0deg);

    }

    100%{

        transform: rotate(360deg);

    }

}

@keyframes pageLoader{

    0%,100%{

        transform: translateX(-50px);

    }

    50%{

        transform: translateX(50px);

    }

}



/* --------------------

 page loader 

 ------------*/

.page-loader{

    position: fixed;

    left:0;

    top:0;

    height: 100%;

    width: 100%;

    background-color: var(--dark);

    z-index: 999;

    transition: all 0.6s ease;

}

.page-loader.fade-out{

    opacity: 0;

}

.page-loader::before{

    content: '';

    position: absolute;

    height: 4px;

    width: 100px;

    background-color: var(--main-color);

    left: calc(50% - 50px);

    top:calc(50% - 2px);

    animation: pageLoader 1s linear infinite;

}



/* ------------

 header 

 --------------*/

.header{

    padding:12px 0;

    position: fixed;

    left:0;

    top:0;

    z-index: 99;

    width: 100%;

}

.header::before{

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background-color: var(--dark-light);

    box-shadow: var(--shadow);

    z-index: -1;

    transition: transform 0.5s ease;

    transform: translateY(-100%);

}

.header.sticky::before{

    transform: translateY(0%);

}

.header .logo{

    width: 100px;

    height: auto;

  

}

.header .nav-toggler{

    height: 34px;

    width: 44px;

    margin-right: 15px;

    cursor: pointer;

    border:none;

    background-color: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

}

.header .nav-toggler.active{

    position: absolute;

    right:0;

    z-index: 1;

    transition: all 0.5s ease;

    transform: translateX(-200px);

}

.header .nav-toggler span{

    height: 2px;

    width: 30px;

    display: block;

    background-color: var(--white);

    position: relative;

}

.header .nav-toggler.active span{

    background-color: transparent;

    transition: background-color 0.5s ease;

}

.header .nav-toggler span::before,

.header .nav-toggler span::after{

    content: '';

    position: absolute;

    left:0;

    top:0;

    height: 100%;

    width: 100%;

    background-color: var(--white);

}

.header .nav-toggler span::before{

    transform: translateY(-8px);

}

.header .nav-toggler.active span::before{

    transform: rotate(45deg);

    transition: transform 0.5s ease;

}

.header .nav-toggler span::after{

    transform: translateY(8px);

}

.header .nav-toggler.active span::after{

    transform: rotate(-45deg);

    transition: transform 0.5s ease;

}





.header .nav{

    position: fixed;

    right: 0;

    top: 0;

    height: 100%;

    width: 280px;

    background-color: var(--dark-light);

    box-shadow: var(--shadow);

    overflow-y: auto;

    padding:80px 0 40px;

    transition: transform 0.5s ease;

    transform: translateX(100%);

}

.header .nav.open{

    transform: translateX(0%);

}

.header .nav ul li a{

    display: block;

    font-size: 25px;

    color: var(--white);

    padding:10px 30px;

    text-transform: capitalize;

    transition: color 0.3s ease;

}

.header .nav ul li a:hover{

    color: var(--main-color);

}



/* home-section */

.home-section{

    position: relative;

    overflow: hidden;

}

.home-section::before{

    content: '';

    position: absolute;

    left:0;

    top:0;

    height: 100%;

    width: 100%;

    background-color: #000000;

    opacity: 0.7;

    z-index: -1;

}

.home-section .home-bg{

   position: absolute;

   left: 0;

   top:0;

   height: 100%;

   width: 100%;

   background-image: url('../img/footer/footer2_1.jpg');

   background-attachment: fixed;

   background-size: cover;

   background-position: center;

   z-index: -2;

   animation: zoomInOut 20s ease infinite;

}

.home-section .min-vh-100{

    padding: 100px 0;

}

.home-text{

    padding: 0 15px;

    max-width: 700px;

    width: 100%;

    margin:auto;

    text-align: center;

}

.home-text h1{

    font-family: var(--cursive-font);

    font-size: 60px;

    line-height: 75px;

    margin:0 0 5px;

}

.home-text p{

    margin:0 0 30px;

}



/* --------------------

 about section 

 --------------------*/

.about-section{

    background-color: var(--dark);

}

.about-text,

.about-img{

    width: 50%;

    padding:0 15px;

}

.about-text h3{

    font-size: 30px;

    text-transform: capitalize;

    margin:0 0 15px;

}

.about-text p{

    margin:0 0 15px;

}

.about-text .btn{

    margin: 15px 0 0;

}

.about-img img{

    width: 100%;

    border-radius: 10px;

}

.about-img .img-box{

    position: relative;

}

.about-img .img-box::before{

    content: '';

    position: absolute;

    height: 100px;

    width: 100px;

    border:3px solid var(--main-color);

    left:calc(50% - 50px);

    top:calc(50% - 50px);

    animation: spin01 10s linear infinite;

}

.about-img .img-box h3{

    position: absolute;

    left: 50%;

    top:50%;

    width: 100%;

    max-width: 250px;

    text-align: center;

    transform: translate(-50%,-50%);

    font-size: 30px;

    font-family: var(--cursive-font);

    color: var(--dark);

    font-weight: bold;

    text-transform: capitalize;

}



/* -----------------

 menu section 

 -----------------*/

.menu-section{

    background-color: var(--dark);

    padding-bottom: 60px;

}

.menu-section .section-title{

    margin-bottom: 40px;

}

.menu-tabs{

    padding:0 15px;

    width: 100%;

    text-align: center;

    margin-bottom: 30px;

}

.menu-tab-item{

    font-size: 18px;

    font-family: inherit;

    text-transform: capitalize;

    border:none;

    background-color: transparent;

    font-weight: 500;

    color: var(--white);

    cursor: pointer;

    margin:0 10px 10px;

    transition: color 0.3s ease;

    display: inline-block;

}

.menu-tab-item.active{

    color: var(--main-color)

}

.menu-tab-content{

    display: none;

}

.menu-tab-content.active{

    display: flex;

}

.menu-item-title img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: 8px 8px 0 0;

}

/* -----------new code-------*/

.menu-item {

  max-width: 300px;

  margin: 15px auto;

  border: 1px solid #eee;

  border-radius: 8px;

  overflow: hidden;

  background-color: #fff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  text-align: center;

}



.menu-item h3 {

  margin: 10px 0;

  font-size: 1.1rem;

  color: #333;

}



.menu-item:hover .menu-item-title h3{

    color:var(--main-color);

}



.menu-item-price {

  padding: 10px;

  font-weight: bold;

  color: #8B0000; /* match Flying Brisket theme */

}



.menu-item:hover .menu-item-price{

    color: var(--white);

}

/* Map Section Styling this code was add instead testimonials */

.location-section {

  padding: 60px 0;

  background-color: #0c1023; /* #fefefe;*/

  text-align: center;

}



.location-section h2 {

  margin-bottom: 30px;

  font-size: 2rem;

  text-transform: uppercase;

}



#map {

  width: 100%;

  height: 400px;

  border-radius: 8px;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);

}



/* -----------------

 team section

 ------------------- */

.team-section{

    background-color: var(--dark);

    padding-bottom: 125px;

}

.team-item{

    width: calc(100% / 3);

    padding:0 15px;

    position:relative;

}

.team-item img{

    width: 100%;

    border-radius: 8px;

    transition: transform 0.3s ease;

}

.team-item:hover img{

    transform: skewY(2deg);

}

.team-item-info{

    background-color: var(--dark-light);

    border-radius: 8px;

    padding:15px;

    text-align: center;

    position: absolute;

    left: 30px;

    right: 30px;

    bottom:0;

    transform: translateY(50%);

    transition: all 0.3s ease;

    pointer-events: none;

}

.team-item:hover .team-item-info{

    transform: translateY(-15px);

    background-color: var(--main-color);

}

.team-item-info h3{

    font-size: 18px;

    text-transform: capitalize;

    margin:0 0 10px;

}

.team-item-info p{

    text-transform: capitalize;

    transition: all 0.3s ease;

}

.team-item:hover .team-item-info p{

    color: var(--white);

}



/* --------------------

 footer 

 -------------------*/

.footer{

    padding:80px 0 0;

    background-image: url('../img/background/background_brisket2_4.jpg');

    background-size: cover;

    background-attachment: fixed;

    background-position: center;

    position: relative;

    z-index: 1;

}

.footer::before{

    content: '';

    position: absolute;

    left:0;

    top:0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.7);

    z-index: -1;

}

.footer-item{

    width: calc(100% / 3);

    padding:0 15px;

    text-align: center;

}

.footer-item h3{

    text-transform: capitalize;

    font-size: 22px;

    margin:0 0 15px;

}

.footer-item p{

    line-height: 30px;

}

.footer-item .social-links{

    margin-top: 15px;

}

.footer-item .social-links a{

    display: inline-flex;

    height: 40px;

    width: 40px;

    color: var(--white-light);

    font-size: 22px;

    align-items: center;

    justify-content: center;

    transition: color 0.3s ease;

}

.footer-item .social-links a:hover{

    color: var(--main-color);

}

.footer .copyright{

    margin:80px 0 0;

    width: 100%;

    text-align: center;

    padding:25px 15px;

    font-size: 14px;

    border-top: 1px solid var(--white-light);

}



/* responsive */

@media(max-width:991px){

    .testi-item{

        width: calc(50% - 30px);

    }

    .team-item{

        width: 50%;

    }

    .team-item:not(:last-child){

        margin-bottom: 75px;

    }

}

@media(max-width:767px){

    .home-text h1{

        font-size: 50px;

        line-height: 65px;

    }

    .menu-item,

    .about-text, 

    .about-img{

        width: 100%;

    }

    .menu-item:nth-last-of-type(2):after{

       border-bottom: 2px dashed var(--dark-light);

    }

    .about-img{

        margin-top: 40px;

    }

    .about-text h3{

        font-size: 24px;

    }

    .footer-item{

        width: 100%;

    }

    .footer-item:not(:last-child){

        margin-bottom: 30px;

    }

    .testi-item{

        width: calc(100% - 30px);

    }

}

@media(max-width:575px){

    .team-item{

        width: 100%;

    }

}

/* last code testing for the picture *-------/

/* --- Image Lightbox Popup --- */

.img-popup {

  display: none;

  position: fixed;

  z-index: 9999;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  justify-content: center;

  align-items: center;

  flex-direction: column;

}



/* Close X button */

.close-btn {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 2rem;

  color: white;

  cursor: pointer;

  z-index: 10000;

}



/* Small centered image */

.img-popup img {

  width: 40%;

  max-width: 400px;

  height: auto;

  border-radius: 12px;

  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);

  transition: transform 0.3s ease;

}



@media (max-width: 768px) {

  .img-popup img {

    width: 90%;

  }

}

/*end of code */



/* Flying Cow Airplane Section */

/* === Flying Cow / Sky overlay (single source of truth) === */



/* Big word clouds */

.sky-scene .cloud {

  position: absolute;

  background: #ffffff;

  border-radius: 999px;

  padding: 5px 5px;             /* roomy for big text */

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0.92;

  box-shadow: 0 6px 20px rgba(0,0,0,0.08);

  z-index: 5;                     /* behind the plane */

  white-space: nowrap;

  /* Let them move with your existing keyframes */

  animation-name: cloudMove;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}



.sky-scene .cloud-text {

  font-family: 'Poppins', sans-serif;

  font-weight: 800;

  font-size: clamp(18px, 3.8vw, 44px); /* scales on mobile/desktop */

  color: #1b1b1b;

  letter-spacing: 1px;

  text-shadow: 0 1px 2px rgba(0,0,0,0.12);

}



/* Add little “puffs” to make the cloud shape cuter */

.sky-scene .cloud::before,

.sky-scene .cloud::after {

  content: "";

  position: absolute;

  background: #ffffff;

  border-radius: 50%;

  z-index: -1;                    /* keep behind text */

}

.sky-scene .cloud::before { width: 60px; height: 60px; left: -20px; top: -10px; }

.sky-scene .cloud::after  { width: 70px; height: 70px; right: -25px; top:  10px; }



/* Individual sizes/positions/durations (tweak as you like) */

.sky-scene .cloud1 { top: 40px; left: -260px; animation-duration: 40s; }

.sky-scene .cloud2 { top: 90px; left: -320px; animation-duration: 55s; }

.sky-scene .cloud3 { top: 10px; left: -300px; animation-duration: 65s; }



/* If you don’t already have it, keep the move keyframes */

@keyframes cloudMove {

  0%   { transform: translateX(0); }

  100% { transform: translateX(120vw); }

}

/*=============

cloud words message

======================*/

/* Cloud labels */

.cloud {

  display: flex;

  align-items: center;

  justify-content: center;

}



.cloud .cloud-label {

  font-family: 'Poppins', sans-serif;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  /* Scales with cloud size */

  font-size: clamp(14px, 4vw, 28px);

  color: #222;                      /* dark text for white cloud */

  text-shadow: 0 2px 6px rgba(0,0,0,0.18);

  padding: 0 10px;                  /* small padding so long words don't touch edges */

  white-space: nowrap;              /* keep phrases on one line */

  pointer-events: none;             /* clouds remain non-clickable */

}



/* Plane + banner */

.airplane{

  position: absolute;

  top: 110px;

  left: -220px;               /* start off-screen left */

  display: flex;

  align-items: center;

  will-change: transform;

  animation: planeFly 18s linear infinite;

}

.airplane img{

  width: 150px;

  height: auto;

  animation: planeBob 2s ease-in-out infinite;

}



/* Rope (SVG inserted by your JS) */

.rope{

    margin-left: -20px;

    margin-right: 0;

    /*

  margin: 0 6px;

  transform-origin: left center;

  */

}



/* Banner */

.banner{

  background: var(--main-color);

  color: #111;

  padding: 8px 14px;

  border-radius: 6px;

  font-weight: 700;

  font-family: 'Poppins', sans-serif;

  transform-origin: left center;

  animation: bannerSwing 2.2s ease-in-out infinite;

}



/* Plane animations */

@keyframes planeFly{

  0%   { transform: translateX(-240px); }

  100% { transform: translateX(120vw); }

}

@keyframes planeBob{

  0%,100%{ transform: translateY(0); }

  50%    { transform: translateY(-10px); }

}

@keyframes bannerSwing{

  0%,100%{ transform: rotate(-2deg); }

  50%    { transform: rotate(2deg); }

}