/*------------------------------------------------------------------
* Project:        Photogen - Photography & Portfolio HTML Template
* Author:         Htmldesigntemplates
* URL:            https://themeforest.net/user/htmldesigntemplates/portfolio
* Created:        10/10/2025
-------------------------------------------------------------------*/
/*
Table Of Content

1. Default CSS
2. Header CSS
3. Banner CSS
4. Service CSS
5. Project CSS
6. Pricing CSS
7. Review CSS
8. Blog CSS
9. Footer CSS
10. Copyright CSS
11. Index-2 CSS
12. Index-3 CSS
13. Service Page CSS
14. Team Page CSS
15. Career Detail Page CSS
16. Faq page CSS
17. Testimonial Page CSS
18. Coming-Soon Page CSS
19. Error Page CSS
20. Product List CSS
21. Product Detail CSS
22. Portfolio Page CSS
23. Portfolio Detail Page CSS
24. Homepage 4 page CSS
25. Client Gallery Page CSS

*/
/* Remove default margins and paddings */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove text decoration for links */
a {
  text-decoration: none;
  color: inherit;
}

/* Set default font for body */
/* Reset images and media */
img,
picture,
video,
canvas,
svg {
  display: inline-block;
  width: 75%;
}

/* Reset form elements */
button,
input,
select,
textarea {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

.nav-link {
    display: block;
    color: white !important;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
body {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #707070;
  background-color: #0E1316;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  line-height: 1.22;
  color: #ffffff;
  text-transform: capitalize;
}

h1, .h1 {
  font-size: 70px;
}
@media (max-width: 1200px) {
  h1, .h1 {
    font-size: 60px;
  }
}
@media (max-width: 992px) {
  h1, .h1 {
    font-size: 50px;
  }
}
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 40px;
  }
}
@media (max-width: 576px) {
  h1, .h1 {
    font-size: 32px;
  }
}

h2, .h2 {
  font-size: 50px;
}
@media (max-width: 1200px) {
  h2, .h2 {
    font-size: 45px;
  }
}
@media (max-width: 992px) {
  h2, .h2 {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  h2, .h2 {
    font-size: 32px;
  }
}
@media (max-width: 576px) {
  h2, .h2 {
    font-size: 28px;
  }
}

h3, .h3 {
  font-size: 32px;
}
@media (max-width: 992px) {
  h3, .h3 {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  h3, .h3 {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  h3, .h3 {
    font-size: 20px;
  }
}

h4, .h4 {
  font-size: 24px;
}
@media (max-width: 768px) {
  h4, .h4 {
    font-size: 21px;
  }
}

h5, .h5 {
  font-size: 21px;
}
@media (max-width: 768px) {
  h5, .h5 {
    font-size: 18px;
  }
}

h6, .h6 {
  font-size: 18px;
}
@media (max-width: 768px) {
  h6, .h6 {
    font-size: 16px;
  }
}

p {
  margin-bottom: 14px;
}

a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: #ffc107;
}

small {
  font-size: 0.875rem;
}

.jost {
  font-family: "Jost", sans-serif;
}

.primary {
  color: #ffc107;
}

.secondary {
  color: #161F24;
}

.text {
  color: #707070;
}

.white {
  color: #fffff;
}

.grey {
  color: gray;
}

.primary-light {
  color: rgba(169, 138, 91, 0.5019607843);
}

.text-primary {
  color: #ffc107 !important;
}

.bg-primary {
  background-color: #ffc107 !important;
}

.bg-secondary {
  background-color: #161F24 !important;
}

.bg-dark {
  background-color: #101010 !important;
}

.bg-black {
  background-color: #0E1316 !important;
}

.bg-grey {
  background-color: rgba(255, 255, 255, 0.1019607843);
}

.bg-primarylight {
  background-color: rgba(169, 138, 91, 0.5019607843);
}

.border-light {
  border-color: rgba(255, 255, 255, 0.1019607843) !important;
}

.border-grey {
  border-color: rgba(221, 221, 221, 0.0901960784) !important;
}

.border-dark {
  border-color: #0E1316 !important;
}

.border-primary {
  border-color: #ffc107 !important;
}

.border-white-dashed {
  border: 1px dashed #ffffff;
}

.border-primary-dashed {
  border: 1px dashed rgba(169, 138, 91, 0.5019607843);
}

.border-primary-light {
  border-color: rgba(169, 138, 91, 0.5019607843) !important;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

/* ---------------- PADDING ---------------- */
.p-6 {
  padding: 4rem !important;
}

.p-7 {
  padding: 5rem !important;
}

.p-8 {
  padding: 6rem !important;
}

.p-9 {
  padding: 7rem !important;
}

.p-10 {
  padding: 8rem !important;
}

/* Padding Top */
.pt-6, .py-6 {
  padding-top: 4rem !important;
}

.pt-7, .py-7 {
  padding-top: 5rem !important;
}

.pt-8, .py-8 {
  padding-top: 6rem !important;
}

.pt-9, .py-9 {
  padding-top: 7rem !important;
}

.pt-10, .py-10 {
  padding-top: 8rem !important;
}

/* Padding Bottom */
.pb-6, .py-6 {
  padding-bottom: 4rem !important;
}

.pb-7, .py-7 {
  padding-bottom: 5rem !important;
}

.pb-8, .py-8 {
  padding-bottom: 6rem !important;
}

.pb-9, .py-9 {
  padding-bottom: 7rem !important;
}

.pb-10, .py-10 {
  padding-bottom: 8rem !important;
}

/* Padding Start */
.ps-6, .px-6 {
  padding-left: 4rem !important;
}

.ps-7, .px-7 {
  padding-left: 5rem !important;
}

.ps-8, .px-8 {
  padding-left: 6rem !important;
}

.ps-9, .px-9 {
  padding-left: 7rem !important;
}

.ps-10, .px-10 {
  padding-left: 8rem !important;
}

/* Padding End */
.pe-6, .px-6 {
  padding-right: 4rem !important;
}

.pe-7, .px-7 {
  padding-right: 5rem !important;
}

.pe-8, .px-8 {
  padding-right: 6rem !important;
}

.pe-9, .px-9 {
  padding-right: 7rem !important;
}

.pe-10, .px-10 {
  padding-right: 8rem !important;
}

/* ---------------- MARGIN ---------------- */
.m-6 {
  margin: 4rem !important;
}

.m-7 {
  margin: 5rem !important;
}

.m-8 {
  margin: 6rem !important;
}

.m-9 {
  margin: 7rem !important;
}

.m-10 {
  margin: 8rem !important;
}

/* Margin Top */
.mt-6, .my-6 {
  margin-top: 4rem !important;
}

.mt-7, .my-7 {
  margin-top: 5rem !important;
}

.mt-8, .my-8 {
  margin-top: 6rem !important;
}

.mt-9, .my-9 {
  margin-top: 7rem !important;
}

.mt-10, .my-10 {
  margin-top: 8rem !important;
}

/* Margin Bottom */
.mb-6, .my-6 {
  margin-bottom: 4rem !important;
}

.mb-7, .my-7 {
  margin-bottom: 5rem !important;
}

.mb-8, .my-8 {
  margin-bottom: 6rem !important;
}

.mb-9, .my-9 {
  margin-bottom: 7rem !important;
}

.mb-10, .my-10 {
  margin-bottom: 8rem !important;
}

/* Margin Start */
.ms-6, .mx-6 {
  margin-left: 4rem !important;
}

.ms-7, .mx-7 {
  margin-left: 5rem !important;
}

.ms-8, .mx-8 {
  margin-left: 6rem !important;
}

.ms-9, .mx-9 {
  margin-left: 7rem !important;
}

.ms-10, .mx-10 {
  margin-left: 8rem !important;
}

/* Margin Start */
.me-6, .mx-6 {
  margin-right: 4rem !important;
}

.me-7, .mx-7 {
  margin-right: 5rem !important;
}

.me-8, .mx-8 {
  margin-right: 6rem !important;
}

.me-9, .mx-9 {
  margin-right: 7rem !important;
}

.me-10, .mx-10 {
  margin-right: 8rem !important;
}



/* Popup hidden by default */
#search1, #cart {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
#search1 input, #cart input {
  width: 600px;
}
#search1 .close, #cart .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
#search1 form a, #cart form a {
  right: 10px;
}

#search1.open {
  display: flex;
}

.text-gradient {
  background-color: transparent;
  background-image: linear-gradient(90deg, #ffc107 0%, #FF9A00 100%);
  color: #ffc107;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<style>
/* ================================
   FORCE FULL SITE BLACK BACKGROUND
   ================================ */

/* Global page */
html, body {
  background-color: #000 !important;
}

/* Kill all section backgrounds */
section,
header,
footer,
main,
div {
  background-color: transparent;
}

/* Force black on all major wrappers */
.banner,
.about,
.pricing,
.projects,
.services,
.faq-section,
footer,
.copyright {
  background-color: #000 !important;
}

/* Remove all overlay layers */
.overlay {
  display: none !important;
}

/* Remove theme gradients / pseudo elements */
section::before,
section::after,
header::before,
header::after,
footer::before,
footer::after {
  content: none !important;
}

/* Prevent height bleed causing grey bands */
section {
  min-height: auto;
}

/* Keep cards dark but visible */
.bg-secondary,
.bg-dark {
  background-color: #111 !important;
}
</style>


/* ================================= */
/* Hide Desktop Menu on Mobile */
/* ================================= */
@media (max-width: 1199px) {
  .header-nav {
    display: none;
  }
}


/* ================================= */
/* Mobile Hamburger (Right Side) */
/* ================================= */
.mobile-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1100;
}

.mobile-toggle span {
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: 0.3s ease;
}

/* ================================= */
/* Mobile Menu (Slide from RIGHT) */
/* ================================= */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 260px;
  height: 100vh;
  background: #0E1316;
  padding: 90px 25px;
  transition: right 0.35s ease-in-out;
  z-index: 1050;
}

/* Show menu when hamburger is clicked */
#nav-toggle:checked ~ .mobile-menu {
  right: 0;
}

/* ================================= */
/* Mobile Menu Links */
/* ================================= */
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu ul li {
  margin-bottom: 18px;
}

.mobile-menu ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  padding: 10px 0;
  display: block;
}

.mobile-menu ul li a:hover {
  color: #ffc107;
}

@media (max-width: 1180px) {
  div#slicknav-mobile, .dropdown-toggle::after {
    display: block;
  }
  .header-top, .mt_search, .slicknav_nav .slicknav_arrow, .navbar-button, .navbar-sticky-in, #responsive-menu {
    display: none;
  }
  .slicknav_menu {
    display: block;
  }
  .nav-link {
    padding: 12px 36px !important;
    margin: 0 !important;
  }
  .slicknav_btn {
    position: absolute;
    right: 70px;
  }
  .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before {
    left: 0;
    top: 15px;
    padding: 8px;
    position: absolute;
    color: #ffffff;
  }
  .dropdown-menu {
    border-radius: 0 !important;
  }
  .slicknav_btn.slicknav_open:before {
    color: #ffc107;
  }
  .slicknav_nav {
    top: 84px;
    left: 0;
    background-color: #F5F5F5;
    position: absolute;
    height: 280px;
    overflow: auto;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12);
  }
  .slicknav_nav a:hover, li.nav-item.dropdown.slicknav_parent.slicknav_open > a > a {
    background-color: #0E1316 !important;
    color: #fff;
  }
  .slicknav_nav a, .dropdown-menu > li > a {
    font-size: 16px;
    background-color: #F5F5F5;
    color: #33373d;
    text-transform: capitalize !important;
    border: none !important;
    font-weight: 400 !important;
  }
  .dropdown-menu > li > a {
    padding-left: 50px !important;
    border-top: 1px solid #FBFBFB !important;
  }
  .dropdown-toggle::after {
    display: none;
  }
  .slicknav_nav .active, .fa-angle-up:before {
    background-color: #0E1316;
    color: #fff;
  }
  .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }
  .header-icons {
    margin-right: 500px;
  }
}
/* ============================= */
/* Mobile Hamburger Icon */
/* ============================= */
.mobile-toggle {
  cursor: pointer;
  width: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-toggle span {
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

/* ============================= */
/* Mobile Menu Hidden by Default */
/* ============================= */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 260px;
  height: 100vh;
  background: #000;
  padding: 80px 20px;
  transition: 0.4s ease;
  z-index: 999;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
}

.mobile-menu ul li {
  color: #fff;
  padding: 15px 0;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

/* ============================= */
/* Toggle Menu ON Click */
/* ============================= */
#nav-toggle:checked ~ .mobile-menu {
  left: 0;
}

/* ============================= */
/* Hide Desktop Nav on Mobile */
/* ============================= */
@media (max-width: 1199px) {
  .header-nav {
    display: none;
  }
}

@media (max-width: 1100px) {
  .slicknav_nav .slicknav_item a {
    pointer-events: none;
  }
}
@media (max-width: 768px) {
  header .header-nav .header-logo img {
    width: 160px;
  }
  .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before {
    top: 15px;
  }
  .slicknav_nav {
    top: 72px;
  }
  .banner .slide-inner {
    width: 100% !important;
  }
}
.banner, .breadcrumb {
  margin-top: -96px;
  cursor: grab;
}
.banner .banner-slider .slide, .breadcrumb .banner-slider .slide {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 750px;
}
.banner .banner-slider .slide p, .breadcrumb .banner-slider .slide p {
  font-size: 17px;
}
.banner .banner-slider .slide .overlay, .breadcrumb .banner-slider .slide .overlay {
  background-color: rgba(14, 19, 22, 0.7019607843);
}
.banner .banner-slider .slide .slide-inner, .breadcrumb .banner-slider .slide .slide-inner {
  top: 122%;
}
.banner .banner-slider .slide.slick-slide.slick-current.slick-active .slide-inner, .breadcrumb .banner-slider .slide.slick-slide.slick-current.slick-active .slide-inner {
  animation: bannerfadein 1.2s ease-out forwards;
}

.breadcrumb {
  height: 440px;
  background-image: url(../image/portrait-of-a-young-european-girl-with-long-hair-i-2022-01-05-22-12-29-utc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.breadcrumb {
    background-image: none !important;
    background-color: #000; /* optional solid color */
}

.breadcrumb .overlay {
  background-color: rgba(14, 19, 22, 0.7019607843);
}
/* Allow clicks on reels */
.banner-scroll,
.scroll-column,
.scroll-track,
.scroll-track a {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}
/* =====================================
   HARD MOBILE OVERFLOW FIX (SLICK SAFE)
   ===================================== */

@media (max-width: 576px) {

  /* 1. ABSOLUTE OVERFLOW KILL */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* 2. SLICK CORE FIX */
  .slick-slider,
  .slick-list,
  .slick-track,
  .slick-slide {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 3. FORCE SLIDE TO VIEWPORT WIDTH */
  .slick-slide {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 4. HERO / SLIDE CONTAINERS */
  .slide,
  .slide-inner,
  .hero-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  /* 5. BANNER STACK */
  .banner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 14px;
  }

  .banner-content {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* 6. HEADING CLEANUP */
  .banner-content h3 {
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }

  .banner-content h3 br {
    display: none;
  }

  /* 7. TRUSTED BOX */
  .trusted-box,
  .trusted-brands,
  .trusted-container {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin: 12px auto;
    box-sizing: border-box;
  }

  /* 8. BUTTONS */
  .btn-primary,
  .banner-content a {
    width: 100%;
    max-width: 280px;
    margin: 8px auto;
    display: block;
    padding: 14px 20px;
    border-radius: 30px;
  }

  /* 9. MEDIA ROW (IMAGES / VIDEOS) */
  .media-row,
  .video-row {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 10px;
  }

  .media-row img,
  .video-row video {
    flex-shrink: 0;
    width: 140px;
    border-radius: 8px;
  }

  /* 10. WHATSAPP BUTTON SAFE */
  .whatsapp_float {
    right: 16px;
    bottom: 16px;
  }
}


/* Disable overlay click blocking */
.overlay {
  pointer-events: none;
}
.scroll-track a::after {
  content: "▶";
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 10px;
  border-radius: 50%;
  font-size: 14px;
}
/* ===== WhatsApp-style Instagram Reel Size (9:16) ===== */
.scroll-track img {
  width: 300px;        /* WhatsApp reel width */
  height: 400px;       /* WhatsApp reel height (9:16) */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 16px; /* WhatsApp-like rounded corners */
}

/* Ensure full clickable area */
.scroll-track a {
  display: block;
}
.reel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.reel-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%; /* adjust fade height */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}


.services {
  background-image: linear-gradient(90deg, #0E1316 0%, #161F24 100%);
}
.services .overlay {
  background-image: linear-gradient(180deg, #101010 0%, #161F24 100%);
  opacity: 0.5;
}
.services .services-body .services-box .overlay {
  background-color: transparent;
  background-image: linear-gradient(180deg, #ffc107 0%, #101010 100%);
  opacity: 0.3;
}
.services .services-body .services-box:hover .overlay {
  filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
}
/* Force black background for Our Services section */

.services.bg-secondary {
  background-color: #000 !important;
}
/* FORCE BLACK BACKGROUND FOR SERVICES SECTION */
section.services {
  background: #000 !important;
}

/* If theme applies background on inner wrappers */
section.services * {
  background-color: transparent;
}

section.services .container,
section.services .services-inner {
  background-color: #000 !important;
}
.about-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-diagram {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(90, 124, 255, 0.25));
}




.projects .projects-body {
  transition: all 0.3s ease-in-out;
}
.projects .projects-body .project-img img {
  height: 500px;
  object-fit: cover;
  width: 100%;
}
.projects .projects-body .project-img:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}
.projects.bg-secondary {
  background-color: #000 !important;
}

/* .pricing {
  background-color: transparent;
  background-image: linear-gradient(180deg, #161F24 0%, #0E1316 100%);
}

.review {
  background-image: url(../image/man-is-posing-for-photographer-with-photo-camera-2021-08-28-02-00-27-utc.jpg);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.review .overlay {
  background-color: transparent;
  background-image: linear-gradient(180deg, #101010 0%, #161F24 100%);
  opacity: 0.8;
}

.blog .blog-body .blog-box .blog-image .overlay {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 75%);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.blog .blog-body .blog-box .blog-image:hover .overlay {
  opacity: 0;
  transition: all 0.3s ease-in-out;
} */
/*--pricing --*/


/* ===== PRICING SLIDER WITHOUT HTML CHANGE ===== */
/* ================================
   PRICING HORIZONTAL SLIDER
   PURE CSS – NO JS – NO LIBS
================================ */

/* Slider container */
.pricing-body {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Row becomes horizontal track */
.pricing-body .row {
  display: flex;
  flex-wrap: nowrap;              /* 🚫 NEVER WRAP */
  gap: 24px;
}

/* Each column becomes a slide */
.pricing-body .row > div {
  flex: 0 0 320px;                /* Fixed card width */
  max-width: 320px;
  scroll-snap-align: start;
}

/* Pricing card */
.pricing-box {
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, #161F24 0%, #0E1316 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Gold price */
.pricing-box .price {
  color: #d4af37;
}

/* Book button */
.pricing-box .btn-primary {
  background: linear-gradient(135deg, #d4af37, #b8962e);
  border: none;
  color: #000;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 30px;
  transition: 0.3s ease;
}

.pricing-box .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212,175,55,0.4);
}

/* Hide scrollbar */
.pricing-body::-webkit-scrollbar {
  display: none;
}
.pricing-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reel-card {
  display: block;
  position: relative;
}

.video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff4d00;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 600;
  z-index: 2;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Optional hover */
.reel-card:hover img {
  transform: scale(1.03);
  transition: 0.3s ease;
}
/* SECTION BACKGROUND – PURE BLACK */
.services {
  background: #000;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* DISABLE OVERLAY */
.services .overlay {
  display: none;
}

/* CONTENT LAYER */
.services .container {
  position: relative;
  z-index: 2;
}

/* INNER CARD */
.services-inner {
  background: linear-gradient(145deg, #0f0f0f, #000);
  border-radius: 22px;
  padding: 60px;
  box-shadow: 0 0 40px rgba(255, 200, 0, 0.18);
}

/* ROW FIX */
.services .row.align-items-center {
  position: relative;
}

/* DIVIDER LINE */
.services .row.align-items-center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  height: 84%;
  width: 1px;
  background: rgba(255, 200, 0, 0.25);
}

/* LEFT CONTENT */
.services-title h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.services-title p {
  font-size: 16px;
  line-height: 1.6;
  color: #d6d6d6;
}
.profile-box {
  width: 320px;
  background: #0b0b0b;
  border: 2px solid #f5b700;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 0 25px rgba(245, 183, 0, 0.2);
}

.profile-img {
  width: 284px;
  height: 381px;
  border-radius: 12px;
}
 

.profile-info .designation {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #f5b700;
  margin-bottom: 6px;
}

.profile-info .name {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.founder-box,
.contact-box {
  background: #0b0b0b;
  border: 2px solid #f5b700;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 0 30px rgba(245, 183, 0, 0.2);
}

/* LEFT BOX CENTER */
.founder-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* CENTER EVERYTHING INSIDE LEFT BOX */
.founder-box {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
}

/* OPTIONAL: ensure inner card doesn’t stretch weirdly */
.founder-card {
  text-align: center;
}
.founder-card img {
  display: block;
  margin: 0 auto 20px;  /* centers image */
}
.founder-card {
  transform: translateY(10px);
}
.cards-wrapper {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  gap: 40px;                 /* space between the two boxes */
  min-height: 100vh;         /* full screen height */
}

/* Optional – keeps layout responsive */
@media (max-width: 768px) {
  .cards-wrapper {
    flex-direction: column;
  }
}
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}


/* TARGET ANY IMAGE INSIDE founder-box */
.founder-box img {
  width: 320px !important;     /* increase size */
  height: auto !important;
  max-width: none !important;  /* removes Bootstrap/global limits */
  border-radius: 18px;
  display: block;
  margin: 0 auto 24px;
}
.founder-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.founder-box > * {
  width: 100%;
  text-align: center;
}





.designation {
  color: #f5b700;
  font-size: 12px;
  letter-spacing: 2px;
}

.founder-card h3 {
  color: #fff;
  margin-top: 6px;
}

/* FORM CARD */
.services-box {
  background: linear-gradient(145deg, #111, #000);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.18);
}

/* LABELS */
.services-box label {
  font-size: 14px;
  color: #ffc800;
}

/* INPUTS */
.services-box .form-control {
  background: #000;
  border: 1px solid rgba(255, 200, 0, 0.25);
  border-radius: 10px;
  color: #fff;
  padding: 12px 14px;
}

.services-box .form-control::placeholder {
  color: #777;
}

.services-box .form-control:focus {
  border-color: #ffc800;
  box-shadow: 0 0 0 1px rgba(255, 200, 0, 0.4);
}

/* BUTTON */
.services .btn-primary {
  background: linear-gradient(135deg, #ffc800, #ffb700);
  border: none;
  border-radius: 30px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  transition: all 0.3s ease;
}

.services .btn-primary:hover {
  background: linear-gradient(135deg, #ffb700, #ffc800);
  transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .services .row.align-items-center::after {
    display: none;
  }

  .services-inner {
    padding: 40px 25px;
  }

  .services-title h2 {
    font-size: 36px;
  }
}
.vc-follow-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 30px;
  width: 320px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.vc-follow-card h3 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

.vc-follow-icons {
  display: flex;
  gap: 18px;
}

.vc-icon {
  width: 54px;
  height: 54px;
  background: #FFD700; /* Yellow */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.vc-icon i {
  color: #ffffff; /* White icon */
  font-size: 20px;
}
/* FOLLOW US SMALL BOX */

.follow-box {
  background: #000000;
  border: 1px solid #ffc107;
  border-radius: 14px;
  padding: 18px 20px;
  width: fit-content;
  margin-top: 25px;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.15);
}

.follow-box h4 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 600;
}

/* Icons container */
.follow-icons {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* Icon style */
.follow-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000000;
  border: 1px solid #ffc107;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc107;
  font-size: 18px;
  transition: all 0.3s ease;
}

/* Hover effect */
.follow-icon:hover {
  background: #ffc107;
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
}

.follow-icon i {
  color: inherit;
}
/* CENTER FOLLOW US BOX */
.follow-box-center {
  background: #000000;
  border: 1px solid #ffc107;
  border-radius: 16px;
  padding: 22px 26px;
  width: fit-content;
  margin: 30px auto 0; /* centers horizontally */
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 193, 7, 0.2);
}

/* Title */
.follow-box-center h4 {
  color: #ffffff;
  font-size: 17px;
  margin-bottom: 14px;
  font-weight: 600;
}

/* Icons container */
.follow-icons {
  display: flex;
  gap: 18px;
  justify-content: center;
}

/* Icon button */
.follow-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000000;
  border: 1px solid #ffc107;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc107;
  font-size: 20px;
  transition: all 0.3s ease;
}

/* Hover effect */
.follow-icon:hover {
  background: #ffc107;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(255, 193, 7, 0.6);
}

.follow-icon i {
  color: inherit;
}
.founder-card {
    text-align: center;
    margin-top: 20px;
}

.founder-logo {
    width: 80px;
    margin-bottom: 12px;
}

.founder-title {
    font-size: 14px;
    letter-spacing: 2px;
    color: #f5c400; /* yellow accent */
    margin: 0;
    text-transform: uppercase;
}

.founder-name {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 6px;
}


/* ===============================
   FORCE REELS TO BE VERTICAL
   =============================== */

/* ===============================
   REEL CARD BASE
   =============================== */

.project-img {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

/* Force anchor to fill container */
.project-img a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image fills the reel properly */
.project-img img {
  width: 100%;
  height: 200%;
  object-fit: cover;
  display: block;
}

/* Reel clickable area */
.reel-card {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Video badge */
.video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff4d00;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 600;
  z-index: 5;
}
.projects,
.projects-body,
.projects-body .row {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ===============================
   RESPONSIVE HEIGHT CONTROL
   =============================== */

/* Desktop */
@media (min-width: 992px) {
  .project-img {
    min-height: 520px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .project-img {
    min-height: 480px;
    border-radius: 14px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .project-img {
    min-height: 420px;
  }

  .video-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* Small Mobile */
@media (max-width: 576px) {
  .project-img {
    min-height: 380px;
  }

  .video-badge {
    font-size: 10px;
    padding: 3px 7px;
  }
}
/* Services Section – Clean White Style (Like Reference Image) */
.services {
    background: #ffffff !important;
    padding: 100px 0;
}

.services .overlay {
    display: none !important;
}

/* Title styling */
.services-title h4 {
    color: #ff4d00 !important;
    font-weight: 600;
    letter-spacing: 1px;
}

.services-title h2 {
    color: #ffc107 !important;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.3;
}

.services-title .text-gradient {
    background: none !important;
    color: #000 !important;
}

/* Divider */
.header-divider {
    width: 80px;
    height: 4px;
    background: #ff4d00;
    margin-top: 20px;
}

/* Body text */
.services-body p {
    color: #666 !important;
    font-size: 18px;
    line-height: 1.9;
    margin-top: 30px;
}

/* Responsive */
@media (max-width: 768px) {
    .services {
        padding: 70px 15px;
    }

    .services-title h2 {
        font-size: 30px;
    }

    .services-body p {
        font-size: 16px;
    }
}
.contact-section {
  padding: 80px 0;
  background: #000000;
  color: #ffffff;
}

.contact-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 0 20px;
}

/* Left Image */


.contact-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  background: radial-gradient(circle, #000, #000);
  padding: 20px;
}

/* Right Content */
/* Center the heading section */
.contact-content {
  text-align: center !important;
}

/* GET IN TOUCH main heading */
.contact-title {
  font-size: 44px;
  font-weight: 900;          /* strong */
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #ffffff;            /* white */
}
.contact-section-yellow {
  background: #000000; /* BLACK background */
  padding: 60px 20px;
}

.contact-title {
  color: #ffffff !important;
}

.contact-subtitle {
  color: #cccccc !important;
}

/* .contact-container {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
} */

.contact-image img {
  max-width: 350px;

  border: 4px solid #FFD700;
}

.contact-card-yellow {
  background: #111111; /* dark card on black */
  border: 2px solid #FFD700;
  border-radius: 16px;
  padding: 30px;
  width: 320px;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
}

.contact-card-yellow strong {
  color: #ffffff;
}

.contact-card-yellow p {
  color: #cccccc;
}

.contact-item {
  margin-bottom: 16px;
}


/* TOUCH in yellow */
.contact-title span {
  color: #ffcc00;            /* yellow theme */
}

/* Subtitle centered & softer */
.contact-subtitle {
  max-width: 520px;
  margin: 0 auto 35px auto;
  font-size: 16px;
  color: #bfbfbf;
  line-height: 1.6;
  .contact-subtitle {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 520px;
}

}

/* Keep contact card content left-aligned */
.contact-card {
  text-align: left;
}


/* Force contact icons to normal white color */
.contact-item .icon,
.contact-item .icon i,
.contact-item .icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Icon background cleanup */
.contact-item .icon {
  background: #111111;      /* dark neutral */
  border: 1px solid #333;
}



/* Responsive */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    text-align: center;
  }

  .contact-image img {
    margin: auto;
  }

  .contact-item {
    justify-content: center;
  }
}






footer .overlay {
  opacity: 0.4;
  background-image: url(../image/photo-im-motion-studio-shot-in-dark-studio-with-n-2021-08-30-07-44-07-utc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #161F24;
  mix-blend-mode: overlay;
}
footer input::placeholder {
  color: rgba(247, 247, 247, 0.6666666667);
}

.social-links i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 5px 0px 5px 0px;
  transition: all 0.3s ease-in-out;
}
.social-links i:hover {
  background-color: #ffc107 !important;
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}

/* ========================================= */
/*     		      Index-2  CSS   			   	    */
/* ======================================== */
.home2 .banner {
  height: 800px;
  cursor: default;
}
.home2 .banner .overlay {
  background-color: #161F24;
  background-image: url(../image/focused-youngbg.jpg);
  background-size: cover;
  opacity: 0.3;
}
@media (max-width: 786px) {
  .home2 .stat .stat-right .stat-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1019607843);
    border-right: none !important;
  }
}
.home2 .services .services-left .service-box {
  cursor: pointer;
}
.home2 .services .services-left .service-box .service-box-inner {
  padding: 30px 20px;
}
.home2 .services .services-left .service-box .overlay {
  transition: height 0.8s ease-in-out;
}
.home2 .services .services-left .service-box h4 a {
  transition: all 0.3s ease-in-out;
}
.home2 .services .services-left .service-box .service-icon i {
  height: 90px;
  width: 90px;
  font-size: 30px;
  line-height: 90px;
  transition: all 0.3s ease-in-out;
}
.home2 .services .services-left .service-box:hover .overlay {
  height: 0;
  transition: height 0.8s ease-in-out;
}
.home2 .services .services-left .service-box:hover .service-icon i {
  color: #ffc107;
  transition: all 0.3s ease-in-out;
  background-color: #161F24 !important;
}
.home2 .services .services-left .service-box:hover h4 a {
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}

/* ========================================= */
/*     		      Index-3  CSS   			   	    */
/* ======================================== */
.home3 .banner {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: default;
}
.home3 .banner .overlay {
  background-color: transparent;
  background-image: linear-gradient(90deg, #0E1316 34%, rgba(2, 1, 1, 0) 0%);
  opacity: 1;
}
@media (min-width: 768px) {
  .home3 .banner .banner-left h1 {
    transform: rotate(270deg);
    margin: 12% -70% 27% 0%;
  }
}
@media (min-width: 1200px) {
  .home3 .banner .banner-left h1 {
    font-size: 90px;
  }
}
.home3 .banner .banner-left .overlay {
  background-image: url(../image/photo-circle-01.png);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4;
}
.home3 .experience .overlay {
  background-image: linear-gradient(90deg, #ffc107 33%, rgba(0, 0, 0, 0) 0%);
  opacity: 0.9;
}
@media (max-width: 1400px) {
  .home3 .experience .overlay {
    background-image: linear-gradient(90deg, #ffc107 28%, rgba(0, 0, 0, 0) 0%);
  }
}
@media (max-width: 996px) {
  .home3 .experience .overlay {
    background-image: none;
  }
}
.home3 .services .overlay {
  background-color: transparent;
  background-image: radial-gradient(at bottom right, #ffc107 0%, #101010 20%);
  opacity: 0.5;
}
.home3 .video-banner {
  background-image: url(../image/grunge-black.jpg);
  background-position: center left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.home3 .video-banner .overlay {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, #101010 0%);
}
.home3 .video-banner .playicon-wrapper a::after, .home3 .video-banner .playicon-wrapper a::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #ffc107;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0 #ffc107;
  box-shadow: 0 0 0 0 #ffc107;
  -webkit-animation: button-ripple 3s infinite;
  animation: button-ripple 3s infinite;
  opacity: 0.6;
  z-index: -1;
}
.home3 .video-banner .playicon-wrapper a i {
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 35px;
  transition: all 0.3s ease-in-out;
}
.home3 .video-banner .playicon-wrapper a:hover i {
  background-color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}
.home3 .teams .teams-body .team-box:hover h4 {
  color: #ffffff;
}
.home3 .review {
  background-image: url(../image/young-beautiful-and-attractive-woman-with-short-ha-2022-01-19-00-21-19-utc.jpg);
}
.home3 .contact .contact-inner {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #161F24 100%);
}
.home3 .contact .contact-bottom .contact-box i {
  height: 72px;
  width: 72px;
  line-height: 72px;
  font-size: 32px;
  transition: all 0.3s ease-in-out;
}
.home3 .contact .contact-bottom .contact-box:hover i {
  background-color: #ffffff !important;
  color: #ffc107;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 996px) {
  .home3 .contact .contact-bottom .col-lg-4:nth-of-type(2) .contact-box {
    border-right: 0 !important;
  }
  .home3 .contact .contact-bottom .col-lg-4 .contact-box {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1019607843);
  }
}
@media (max-width: 786px) {
  .home3 .contact .contact-bottom .col-lg-4:first-of-type .contact-box {
    border-right: 0 !important;
  }
}

/* ========================================= */
/*     		   Services Page CSS   			 	    */
/* ======================================== */
.services1 .services-bottom .service-box {
  cursor: pointer;
}
.services1 .services-bottom .service-box .service-box-inner {
  padding: 30px 20px;
}
.services1 .services-bottom .service-box .overlay {
  transition: height 0.8s ease-in-out;
}
.services1 .services-bottom .service-box h4 a {
  transition: all 0.3s ease-in-out;
}
.services1 .services-bottom .service-box .service-icon i {
  height: 90px;
  width: 90px;
  font-size: 30px;
  line-height: 90px;
  transition: all 0.3s ease-in-out;
}
.services1 .services-bottom .service-box:hover .overlay {
  height: 0;
  transition: height 0.8s ease-in-out;
}
.services1 .services-bottom .service-box:hover .service-icon i {
  color: #ffc107;
  transition: all 0.3s ease-in-out;
  background-color: #161F24 !important;
}
.services1 .services-bottom .service-box:hover h4 a {
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}



/* <!-- service page css --> */
/* Force single-column (line by line) layout */
.services-body .row > div {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Step box styling */
.services-box {
  border-left: 3px solid #c9a45c; /* gold accent */
  position: relative;
  background: rgba(255, 255, 255, 0.02);
}

/* Auto step numbers */
.services-box::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: -22px;
  top: 30px;
  width: 36px;
  height: 36px;
  background: #c9a45c;
  color: #000;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Initialize counter */
.services-body {
  counter-reset: step;
}

/* Spacing between steps */
.services-body .services-box {
  margin-bottom: 24px;
}

/* Text alignment consistency */
.services-info {
  padding-left: 40px;
}

/* Mobile polish */
@media (max-width: 768px) {
  .services-box::before {
    left: -18px;
  }
}
 /*<!-- service page css --> */
/* Force single-column (line by line) layout */

/* ========================================= */
/*     		     Team Page CSS     			 	    */
/* ======================================== */
.team .team-box::after {
  width: 100%;
  position: absolute;
  left: 0;
  transition: all ease-in-out 0.5s;
  content: "";
  height: 100%;
  top: 0;
}
.team .team-box .box-content {
  width: 100%;
  position: absolute;
  left: 0;
  transform: translateY(100%);
  transition: transform 0.5s ease-out;
}
.team .team-box .box-content .social-link li a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #a1a1a1;
  transition: all 0.3s ease-in-out;
}
.team .team-box .box-content .social-link li a:hover {
  background: #1DA1F2;
  color: #fff;
}
.team .team-box .box-content .social-link li a:hover i {
  -webkit-animation: iconTranslateY 0.4s forwards;
  animation: iconTranslateY 0.4s forwards;
}
.team .team-box .box-content .social-link li:last-child a:hover {
  background: #E60023;
}
.team .team-box .box-content .speaker-box .social-link li:first-child a:hover {
  background: #1877F2;
}
.team .team-box:hover::after {
  background: rgba(0, 0, 0, 0.7);
  transition: all ease-in-out 0.5s;
  top: 0;
}
.team .team-box:hover .box-content {
  transform: translateY(-20px);
}

@media (min-width: 768px) {
  .about1 .about-left .about-img1 {
    margin-right: -200px;
  }
}

/* ========================================= */
/*         Career Detail Page CSS     	    */
/* ======================================== */
.career-detail .job-tabs .nav-tabs .nav-item.show .nav-link, .career-detail .job-tabs .nav-tabs .nav-link.active, .career-detail .job-tabs .nav-tabs .nav-link.active:hover {
  border-color: rgba(255, 255, 255, 0.1019607843);
  border-bottom: 1px solid #101010;
  color: #ffc107 !important;
}
.career-detail .job-tabs .nav-tabs .nav-link:hover {
  border-color: rgba(255, 255, 255, 0.1019607843);
}
.career-detail .cv-box .cv-icon i {
  height: 100px;
  width: 100px;
  font-size: 50px;
  line-height: 100px;
}

/* ========================================= */
/*               Faq Page CSS         	    */
/* ======================================== */
/* ================================
   FAQ – REELONGO STYLE (CSS ONLY)
================================ */

/* FAQ wrapper spacing */
/* =====================================
   FAQ SECTION – REELONGO STYLE
   WORKS WITH PHOTOGEN (NO HTML CHANGE)
===================================== */

/* =========================
   FAQ SECTION – ReelOnGo Style
========================= */

.faq-section {
  padding: 100px 0;
  background: radial-gradient(circle at top, #0f1b22, #070b0e);
}

.faq-container {
  max-width: 900px;
  margin: auto;
}

.faq-title h5 {
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.faq-title h2 {
  color: #ffc107;
  font-size: 42px;
  margin-bottom: 40px;
}

/* FAQ Card */
.faq-item {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.6)
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 18px;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Open State */
.faq-item[open] {
  border-color: rgba(201, 162, 93, 0.6);
  box-shadow: 0 0 0 1px rgba(201, 162, 93, 0.15);
}

/* Question */
.faq-item summary {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Remove default arrow */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Custom Chevron */
.faq-item summary::after {
  content: "⌄";
  font-size: 20px;
  color: #c9a25d;
  transition: transform 0.3s ease;
}

/* Rotate Chevron when open */
.faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* Answer */
.faq-item p {
  margin-top: 14px;
  color: #cfcfcf;
  font-size: 15px;
  line-height: 1.7;
  max-width: 95%;
}




/* ========================================= */
/*            Testimonial Page CSS          */
/* ======================================== */
.testimonial .testimonials .overlay {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  background-image: url(../image/testimonial-1-1.png);
}

/* ========================================= */
/*            Coming-soon Page CSS          */
/* ======================================== */
.coming-soon {
  background-image: url(../image/portrait-of-a-young-european-girl-with-long-hair-i-2022-01-05-22-12-29-utc.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.coming-soon .overlay {
  background-color: transparent;
  background-image: linear-gradient(90deg, #0E1316 0%, #101010 100%);
  opacity: 0.6;
}
.coming-soon .social-links li a i {
  height: 40px;
  width: 40px;
  font-size: 16px;
  line-height: 40px;
}
.coming-soon .social-links li a i:hover {
  background-color: #ffc107 !important;
  color: #ffffff;
}
@media (max-width: 995px) and (orientation: landscape) {
  .coming-soon {
    height: 200vh !important;
  }
}
@media (max-width: 995px) {
  .coming-soon .coming-soon-inner {
    width: 100% !important;
  }
}

/* ========================================= */
/*              Error Page CSS              */
/* ======================================== */
.error .breadcrumb {
  height: 700px;
  background-image: url(../image/man-is-posing-for-photographer-with-photo-camera-2021-08-28-02-00-27-utc.jpg);
}
.error .breadcrumb h1 {
  font-size: 140px;
}

/* ========================================= */
/*             Product List CSS             */
/* ======================================== */
.product-list .product-gallery .gallery-image a .overlay {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100% !important;
  transition: all ease-in-out 0.3s;
}
.product-list .product-gallery .gallery-image:hover .overlay {
  opacity: 1;
  transition: all ease-in-out 0.3s;
}

/* ========================================= */
/*           Product Detail CSS             */
/* ======================================== */
.product-detail .product-detail-slide .slider-nav .slick-list {
  padding: 0 !important;
}
.product-detail .product-detail-slide .slider-nav .slick-list .slick-track {
  margin: 0 !important;
  width: 100% !important;
  display: flex;
  justify-content: space-evenly;
}
.product-detail .product-detail-slide .slider-nav .slick-list .slick-track .slick-slide {
  cursor: pointer;
  position: relative;
}
.product-detail .product-detail-slide .slider-nav .slick-list .slick-track .slick-slide::after {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 0;
  background: rgba(2, 1, 1, 0.5647058824);
  z-index: 1;
  opacity: 1;
  transition: all ease-in-out 0.3s;
}
.product-detail .product-detail-slide .slider-nav .slick-list .slick-track .slick-slide:hover::after {
  opacity: 0;
  transition: all ease-in-out 0.3s;
}
.product-detail .product-detail-slide .slider-nav .slick-list .slick-track .slick-slide.slick-current::after {
  opacity: 0;
  transition: all ease-in-out 0.3s;
}

.product-review .nav-tabs .nav-link.active {
  background-color: #0E1316 !important;
}

/* ========================================= */
/*           Portfolio Page CSS             */
/* ======================================== */
.portfolio-page .portfolio .portfolio-box {
  transition: all 0.3s ease-in-out;
}
.portfolio-page .portfolio .portfolio-box:hover {
  border-color: #F7F7F7 !important;
  transition: all 0.3s ease-in-out;
}

/* ========================================= */
/*          Portfolio Detail CSS            */
/* ======================================== */
.portfolio-detail-page .breadcrumb {
  height: 600px;
  background-image: url(../image/wedding.jpg);
}

/* ========================================= */
/*           Homepage4 Page CSS             */
/* ======================================== */
.home4 .banner {
  cursor: auto;
}
.home4 .banner .banner-spin:hover .spin-demo-main i {
  color: #ffc107;
  transition: all ease-in-out 0.5s;
}
.home4 .banner .spin-demo-main {
  display: grid;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}
.home4 .banner .spin-demo-main i {
  position: absolute;
  font-size: 25px;
  color: #fff;
  transition: all ease-in-out 0.5s;
}
.home4 .banner .spin-demo-main #rotatingText {
  animation-name: rotate-circle;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.home4 .banner .spin-demo-main .text {
  font-weight: 400;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  fill: #fff;
  font-size: 22px;
}
@keyframes rotate-circle {
  to {
    transform: rotate(1turn);
  }
}
.home4 .services {
  background-image: none;
}
.home4 .services .service-box {
  cursor: pointer;
}
.home4 .services .service-box .service-box-inner {
  padding: 30px;
}
.home4 .services .service-box .overlay {
  transition: height 0.8s ease-in-out;
}
.home4 .services .service-box h4 a {
  transition: all 0.3s ease-in-out;
}
.home4 .services .service-box .service-icon i {
  height: 70px;
  width: 70px;
  font-size: 30px;
  line-height: 70px;
  transition: all 0.3s ease-in-out;
}
.home4 .services .service-box:hover .service-icon i {
  color: #ffc107;
  transition: all 0.3s ease-in-out;
}
.home4 .about {
  background-color: transparent;
  background-image: linear-gradient(180deg, #161F24 0%, #0E1316 100%);
}
.home4 .process .process-body .process-box .process-number .h1 {
  font-size: 150px;
  transition: all 0.3s ease-in-out;
}
.home4 .process .process-body .process-box:hover .process-number .h1 {
  color: #ffc107 !important;
  transition: all 0.3s ease-in-out;
}
.home4 .portfolio {
  background-color: transparent;
  background-image: linear-gradient(360deg, #161F24 0%, #0E1316 100%);
}
.home4 .review {
  background-color: transparent;
  background-image: linear-gradient(360deg, #161F24 0%, #0E1316 100%);
  background-attachment: scroll;
}
.home4 .review .review-box {
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.home4 .review .slick-dots {
  bottom: -35px;
}
.home4 .review .slick-dots li.slick-active button:before {
  background-color: #ffc107;
  border-color: #ffc107;
}
.home4 .ad-banner .ad-banner-inner .overlay {
  background-image: url(../image/background-pattern.png);
  opacity: 0.08;
  background-position: center;
  background-size: 80%;
}
.home4 .ad-banner .camera-tripod {
  right: 13%;
}
.home4 .ad-banner .camera-girl {
  left: 8%;
}
.home4 .pricing .slick-prev, .home4 .pricing .slick-next {
  background-color: rgba(169, 138, 91, 0.5019607843);
}
@media (max-width: 768px) {
  .home4 .pricing .pricing-box-right {
    border: none !important;
  }
}
.home4 .contact {
  background-color: transparent;
  background-image: linear-gradient(180deg, #161F24 0%, #0E1316 100%);
}
.home4 .blog .blog-box .overlay {
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 80%);
}

/* ========================================= */
/*           Client Gallery CSS             */
/* ======================================== */
.client-gallery .nav-tabs .nav-link.active {
  background-color: #ffc107 !important;
}
.client-gallery {
  /* Masonry container */
}
.client-gallery .gallery {
  column-count: 4;
  column-gap: 15px;
}
.client-gallery .gallery a {
  display: inline-block;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}
.client-gallery .gallery a .overlay {
  background-color: rgba(2, 1, 1, 0.3137254902);
  height: 100%;
  opacity: 0;
  z-index: 1;
  left: 0;
  transition: all 0.3s ease-in-out;
}
.client-gallery .gallery a img {
  width: 100%;
  transition: transform 0.3s ease;
}
.client-gallery .gallery a .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.client-gallery .gallery a svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}
.client-gallery .gallery a:hover .overlay {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.client-gallery .gallery a:hover .play-icon {
  background: rgba(169, 138, 91, 0.5019607843);
  transform: translate(-50%, -50%) scale(1.1);
}
.client-gallery .gallery a:hover img {
  transform: scale(1.05);
}
.client-gallery .video-gallery {
  column-count: 3;
}
@media (max-width: 992px) {
  .client-gallery .gallery {
    column-count: 2;
  }
}
@media (max-width: 576px) {
  .client-gallery .gallery {
    column-count: 1;
  }
}

/*# sourceMappingURL=style.css.map */



/* ===============================
   1. Banner split layout
   =============================== */
/* Main banner */
.banner-wrapper {
  display: flex;
  align-items: center;
  height: 100vh;
}

/* Left slider */
.banner-scroll {
  width: 600px;
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  padding: 40px 30px;
  overflow: hidden;
}

/* Right content */
.banner-content {
  margin-left: 80px;
  max-width: 650px;
  text-align: left;
}

/* Columns */
.scroll-column {
  width: 50%;
  overflow: hidden;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: scrollUp 20s linear infinite;
}

.scroll-track.reverse {
  animation-duration: 26s;
}
/* ===== FIXED Vertical Text Scroll ===== */
.vertical-scroll-wrapper {
  display: inline-block;
  height: 38px;           /* show only one line */
  overflow: hidden;
  vertical-align: middle;
}

.vertical-scroll {
  display: flex;
  flex-direction: column;
  animation: verticalScroll 8s linear infinite;
}

.vertical-scroll span {
  height: 38px;
  line-height: 38px;
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
}

@keyframes verticalScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-190px); } /* 5 items × 38px */
}
.banner-scroll {
  display: flex;
  gap: 20px;
  height: 520px;
  overflow: hidden;
}

.scroll-column {
  width: 240px;
  overflow: hidden;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: scrollUp 18s linear infinite;
}

.scroll-track.reverse {
  animation: scrollDown 18s linear infinite;
}

.scroll-track img {
  width: 100%;
  border-radius: 18px;
}

/* animations */
@keyframes scrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}


 * ================================= */
/* Mobile Fixed Header Spacing Fix */
/* ================================= */
@media (max-width: 1199px) {
  body {
    padding-top: 90px; /* space for fixed header */
  }
}

/* Ensure header has consistent height */
header {
  min-height: 90px;
}

/* Safety: make sure hero content is not absolute at top */
/* ================================= */
/* Mobile fix for pages with hero/banner */
/* ================================= */
@media (max-width: 1199px) {

  .banner-wrapper,
  .home-banner,
  .hero-section {
    padding-top: 90px;
  }

}

/* ================================= */
/* FIX: Push Hero Text Below Logo (Mobile) */
/* ================================= */

  
  .hero-header {
    margin-top: 20px;
  }

  h1.we-capture {
    margin-top: 0;
  }

/* ================================= */
/* Contact Section – Mobile Center Fix */
/* ================================= */
@media (max-width: 768px) {

  /* Parent container holding image + contact box */
  .contact-section .row,
  .contact-wrapper,
  .contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Individual cards */
  .contact-card,
  .contact-info,
  .contact-box {
    width: 100%;
    max-width: 320px;   /* keeps it centered & neat */
    margin: 0 auto 30px;
    text-align: center;
  }

  /* Image card */
  .contact-card img {
    margin: 0 auto;
    display: block;
  }

  /* Follow icons centered */
  .contact-info .social-icons,
  .contact-info .follow-us {
    justify-content: center;
  }
}
/* ================================= */
/* Services Page – Mobile Layout Fix */
/* ================================= */
@media (max-width: 768px) {

  .services-section .row,
  .services-section .col,
  .services-section [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  .services-section {
    padding: 40px 20px;
  }
}
/* ================================= */
/* Services Page – Fix Content Under Fixed Header (Mobile) */
/* ================================= */
@media (max-width: 1199px) {

  /* first section after header */
  section.breadcrumb,
  section.services,
  section.about,
  .breadcrumb,
  .services-section {
    padding-top: 90px;
  }

}
@media (max-width: 768px) {

  .services-section,
  .about-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-section p,
  .about-section p {
    text-align: center;
    line-height: 1.6;
  }
}
/* ================================= */
/* Breadcrumb Layout Fix */
/* ================================= */

/* Desktop: keep center look */
@media (min-width: 1200px) {
  .breadcrumb-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Mobile: content flows under header */
@media (max-width: 1199px) {
  .breadcrumb-inner {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding-top: 120px; /* space for fixed header */
    padding-bottom: 40px;
  }
}
/* === Mobile fix for "Our Services" heading === */
@media (max-width: 768px) {
  .services-title {
    text-transform: none !important;
    white-space: nowrap;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
  }
}
/* === Force mobile fix for Our Services heading === */
@media (max-width: 768px) {
  h1,
  h2 {
    text-transform: none !important;
    white-space: nowrap;
  }

  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}
/* === Mobile fix: separate logo and "Our Services" === */
@media (max-width: 768px) {

  /* Logo container */
  header img,
  .logo,
  .site-logo {
    margin-bottom: 16px !important;
    display: block;
  }

  /* Our Services heading */
  h1 {
    margin-top: 20px !important;
    padding-top: 0 !important;
    position: relative !important;
    top: 0 !important;
    text-align: center !important;
    white-space: nowrap;
  }

}
/* =========================
   MOBILE VIEW FIX (≤768px)
   ========================= */
@media (max-width: 768px) {

  /* General fixes */
  body {
    overflow-x: hidden;
  }

  section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Banner layout */
  .banner-wrapper {
    flex-direction: column !important;
    text-align: center;
  }

  .banner-content {
    width: 100%;
  }

  /* Heading */
  h1.we-capture {
    font-size: 26px;
    margin-top: 20px;
    text-align: center;
  }

  /* Vertical scrolling text */
  .vertical-scroll-wrapper {
    height: 34px;
    margin: 10px auto;
  }

  .vertical-scroll span {
    font-size: 20px;
    line-height: 34px;
    height: 34px;
  }

  /* Buttons */
  .btn-primary {
    width: 100%;
    display: block;
    margin: 10px auto;
    text-align: center;
  }

  /* Trusted box */
  .banner-content h4 span {
    display: block;
    font-size: 14px;
  }

  /* Paragraph text */
  .banner-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Reels section */
  .banner-scroll {
    width: 100%;
    height: 380px;
    margin-top: 30px;
    justify-content: center;
  }

  .scroll-column {
    width: 48%;
  }

  .scroll-track img {
    border-radius: 14px;
  }

  /* Reduce animation speed on mobile */
  .scroll-track {
    animation-duration: 24s;
  }

  /* Hide second column if needed (optional) */
  /*
  .column-2 {
    display: none;
  }
  */

}
/* ===============================
   MOBILE VIEW – FINAL FIX
   =============================== */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* Stack banner */
  .banner-wrapper {
    flex-direction: column !important;
    padding-top: 20px;
    padding-bottom: 30px;
  }

  /* WE CAPTURE */
  h1.we-capture {
    font-size: 24px !important;
    margin: 10px 0 6px;
    text-align: center !important;
  }

  /* Scrolling category text */
  h3.mb-4 {
    text-align: center;
    margin-bottom: 10px;
  }

  .vertical-scroll-wrapper {
    height: 30px;
    overflow: hidden;
    display: inline-block;
  }

  .vertical-scroll {
    animation: verticalScroll 6s linear infinite !important;
  }

  .vertical-scroll span {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }

  @keyframes verticalScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-150px); }
  }

  /* INSTANTLY */
  h3 strong {
    display: block;
    font-size: 18px;
    margin-top: 4px;
  }

  /* Trusted box */
  .banner-content h4 span {
    display: block;
    padding: 10px;
    font-size: 13px;
    margin: 10px auto;
  }

  /* Paragraph */
  .banner-content p {
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
  }

  /* Buttons */
  .btn-primary {
    width: 100%;
    margin: 8px 0;
    padding: 14px !important;
    font-size: 15px;
  }

  /* Reels */
  .banner-scroll {
    margin-top: 30px;
    height: 360px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .scroll-column {
    width: 48%;
  }

  .scroll-track {
    animation-duration: 22s;
  }
}
/* ==================================
   MOBILE MEDIA QUERY (WORKING)
   ================================== */
@media only screen and (max-width: 768px) {

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Banner main wrapper */
  .banner-wrapper {
    display: block !important;
    width: 100% !important;
  }

  /* Left content */
  .banner-content {
    width: 100% !important;
    text-align: center;
  }

  /* WE CAPTURE */
  .we-capture {
    font-size: 24px !important;
    margin: 12px 0 6px 0 !important;
  }

  /* Scrolling text container */
  .vertical-scroll-wrapper {
    display: inline-block;
    height: 30px;
    overflow: hidden;
  }

  .vertical-scroll {
    display: flex;
    flex-direction: column;
    animation: verticalScrollMobile 6s linear infinite !important;
  }

  .vertical-scroll span {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }

  @keyframes verticalScrollMobile {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-150px); }
  }

  /* INSTANTLY */
  h3 strong {
    display: block;
    font-size: 18px;
    margin-top: 4px;
  }

  /* Paragraph */
  .banner-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 0;
  }

  /* Buttons */
  .btn-primary {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 14px !important;
  }

  /* Reels section */
  .banner-scroll {
    width: 100%;
    height: 360px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .scroll-column {
    width: 48%;
  }

  .scroll-track {
    animation-duration: 24s;
  }

}