header{
    position: absolute;
    width: 100%;
    top: 0;
    background: #2b2b2b50;
    z-index: 1;
    border-bottom: 1px solid #ccc;


    .main-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo{
        display: flex;
        img{
            width: 130px;
        }
    }

    a{
        color: #fff;
    }
    .top-details{
        display: flex;
        gap: 20px;
        justify-content: end;
        padding-bottom: 20px;
        font-size: 16px;

        .item{
            a{
                display: flex;
                align-items: center;
                gap: 15px;
            }
        }
    }
    .menu-icon{
        display: none;
    }
    .primary-menu{
        padding-top: 20px;
        border-top: 1px solid #ccc;

        nav{
            ul{
                display: flex;
                gap: 15px;
                gap: 10px;
            }

            li a{
                font-size: 20px;
                padding: 5px 10px;
            }
        }
    }
}

/* ========= bannner ======== */

.hero-section{
    position: relative;
    height: 100vh;
    overflow: hidden;

    .main-hero-section{
        position: absolute;
        top: 38%;
        width: 100%;
        color: #fff;
        text-align: center;
    }
    .banner-heading{
        font-family: "Playwrite CU", cursive;
        font-size: 60px;
        text-shadow: 2px 1px 1px #00000085;
    }
    video{
        height: 100%;
    }
    .phone{
        display: none;
    }
}

/* ========== about us ======== */

.about-us{
    background: url(../uploads/banner/about-banner.jpg);
    background-position: center;
    background-size: cover;
    position: sticky;
    top: 0;

    .main-about{
        display: flex;
        gap: 60px;
    }
    .about-img{
        width: 50%;
        img{
            width: 100%;
            border-radius: 20px;
            box-shadow: 0px 0px 17px #565656a6;
        }
    }
    .about-content{
        width: 50%;
        color: #fff;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    h1{
        span{
            display: block;
        }
    }
 
}

/* ======= facebook ======= */

.facebook{
    background: url(../uploads/other/facebook-background.jpg);
    background-position: center;
    background-size: cover;
    position: sticky;
    top: 0;

    .main-facebook{
        display: flex;
        gap: 40px;
    }
    .facebook-img{
        width: 50%;
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
    .facebook-content{
        width: 50%;
        color: #fff;
        display: flex;
        align-items: self-start;
        flex-direction: column;
        gap: 20px;
    }
    .primary-btn{
        a{
            background: #3b5999; 
        }
    }
}

/* ======= Insta ======= */

.insta{
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../uploads/other/insta-background.jpg);
    background-position: center;
    background-size: cover;
    position: sticky;
    top: 0;


    .main-insta{
        display: flex;
        gap: 40px;
    }
    .insta-img{
        width: 50%;
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
    .insta-content{
        width: 50%;
        color: #fff;
        display: flex;
        align-items: self-start;
        flex-direction: column;
        gap: 20px;
    }
    .primary-btn{
        a{
            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
        }
    }
}

/* ======= gallery ====== */

.gallery {
background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../uploads/other/gallery-banner.jpg);
background-position: center;
background-size: cover;
  --space: 2rem;

  display: grid;
  align-content: center;
  overflow: hidden;
  gap: var(--space);
  font-size: 1.5rem;
  line-height: 1.5;
  position: sticky;
  top: 0;
}

.marquee {
  --duration: 60s;
  --gap: var(--space);

  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  transform: skewY(-3deg);
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee__group img {
  max-width: clamp(10rem, 1rem + 28vmin, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}

.marquee__group p {
  background-image: linear-gradient(
    75deg,
    hsl(240deg 70% 49%) 0%,
    hsl(253deg 70% 49%) 11%,
    hsl(267deg 70% 49%) 22%,
    hsl(280deg 71% 48%) 33%,
    hsl(293deg 71% 48%) 44%,
    hsl(307deg 71% 48%) 56%,
    hsl(320deg 71% 48%) 67%,
    hsl(333deg 72% 48%) 78%,
    hsl(347deg 72% 48%) 89%,
    hsl(0deg 73% 47%) 100%
  );
  font-size: 42px;
  font-family: poppins-bold;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.marquee--borders {
  border-block: 3px solid rgb(255, 255, 255);
  padding-block: 0.75rem;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* ======== footer ======== */

footer{
    position: relative;
    .top-footer{
        padding: 40px 0;
        background: #000;
        color: #fff;
        .main-top-footer{
            display: flex;
            justify-content: center;
            .item{
                display: flex;
                align-items: center;
                gap: 20px;
                font-size: 24px;
            }
        }
        .item:nth-child(1){
            padding-right: 50px;
            border-right: 2px solid #ccc;
        }

        .item:nth-child(2){
            padding-left: 50px;
        }

        a{
            color: #fff;
        }
        i{
            font-size: 32px;
        }
    }
    .map{
        display: flex;
        iframe{
            width: 100%;
        }
    }
    .bottom-footer{
        background: #000;
        text-align: center;
        padding: 15px 0px;
        color: #fff;
        font-size: 14px;
        a{
            color: #fff;
        }
        img{
            margin-top: 10px;
        }
    }
}