:root {
   --primary-color: #ff7f7e;
   --primary-hover-color: #ff6564;
   --secondary-color: #3498db;
   --dark-bg: #1a1a1a;
   --light-gray: #f8f9fa;
 }

 body {
   font-family: "Roboto", sans-serif;
   line-height: 1.6;
   color: #333;
 }
 a{
  text-decoration: none !important;
 }

 /* Common Desing */
 .btn-primary {
   background-color: var(--primary-color) !important;
   border: none;
   padding: 12px 30px;
   font-weight: 600;
   border-radius: 5px;
   transition: all 0.3s ease;
 }

 .btn-primary:hover {
   background-color: var(--primary-hover-color);
   transform: translateY(-2px);
 }

 .section-title {
   font-size: 2.5rem;
   font-weight: 700;
   text-align: center;
   margin-bottom: 1rem;
   color: var(--primary-color);
 }

 .section-subtitle {
   text-align: center;
   color: #666;
   font-size: 1.1rem;
   max-width: 700px;
   margin: 0 auto 50px;
 }

 .text-primary {
   color: var(--secondary-color) !important;
 }

 .modal-content {
   border-radius: 0px !important;
 }

 /* Header Section Desing*/
 #header {
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
 }

 #header .navbar-toggler {
   border: none !important;
 }

 #header .navbar {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 #header .navbar-brand {
   font-weight: bold;
   color: var(--primary-color) !important;
 }

 #header .navbar-toggler:focus {
   box-shadow: none !important;
 }

 /* Hero Section Desing*/
 #hero-section {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     url("../images/hero-bg.jpg");
   background-size: cover;
   background-position: center;
   min-height: 100vh;
   display: flex;
   align-items: center;
   color: #fff;
   text-align: center;
 }

 #hero-section #particles-js {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   position: absolute;
   z-index: 0;
 }

 #hero-section .hero-content {
   position: relative;
   z-index: 1;
 }

 #hero-section .hero-content h1 {
   font-size: 3.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

 #hero-section .hero-content p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
 }

 #hero-section .btn-outline-light {
   border: 2px solid #fff;
   padding: 12px 30px;
   font-weight: 600;
   border-radius: 5px;
   transition: all 0.3s ease;
 }

 #hero-section .btn-outline-light:hover {
   background-color: #fff;
   color: var(--primary-hover-color);
   transform: translateY(-2px);
 }





 /* Hero Section */
#hero-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  position: relative;
  background: #000;
  isolation: isolate;
}

/* Background YouTube iframe */
#hero-section .yt-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
#hero-section .yt-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 100vh * 16/9 */
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


/* Overlay */
#hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,0.55);
}

/* Content */
#hero-section .hero-content {
  max-width: 900px;
  padding: 2rem;
  z-index: 1;
}
#hero-section h1 {
  text-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

/* Fallback Image */
#hero-section .yt-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

 /* Interior Section Desing*/
 #interior-section {
   padding: 80px 0;
 }

 #interior-section .interior-section-image {
   width: 100%;
   height: 100%;
 }

 #interior-section .project-name {
   opacity: 0;
   transition: opacity 0.6s ease;
 }

 #interior-section .interior-section-image img {
   width: 100%;
   height: 100%;
   overflow: hidden;
   filter: grayscale(100%) blur(0px);
   transition: 0.6s ease;
 }

 #interior-section .interior-section-image:hover img {
   filter: grayscale(0%) blur(0);
   transition: 0.6s ease;
 }

 #interior-section .interior-section-image:hover+.project-name {
   opacity: 1;
   transition: opacity 0.6s ease;
 }

 #interior-section .interior-section-image img {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }

 /* Stats Section Desing*/
 #stats-section {
   padding: 80px 0;
   background: var(--light-gray);
 }

 #stats-section .stat-item {
   text-align: center;
   padding: 30px 15px;
 }

 #stats-section .stat-number {
   font-size: 3rem;
   font-weight: bold;
   color: var(--primary-color);
   display: block;
 }

 #stats-section .stat-label {
   font-size: 1.1rem;
   color: #666;
   font-weight: 500;
 }

 /* Projects Section Desing*/
 #projects .project-card {
   border: none;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   margin-bottom: 10px;
 }

 #projects .project-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 #projects .project-img {
   height: 250px;
   background-size: cover;
   background-position: center;
 }

 #projects .project-img img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

 /* Expertise Section Desing*/
 #expertise {
   padding: 80px 0;
 }

 #expertise .exp-card {
   border: none;
   border-radius: 4px;
   padding: 28px;
   height: 100%;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
 }

 /* Video Section Desing*/
 #video {
   position: relative;
   background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../images/vedio/vedio-bg.jpg') center/cover no-repeat;
   place-items: center;
   text-align: center;
   color: #fff;
   padding: 150px 0px;
 }

 #video .play-btn {
   position: relative;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--primary-color);
   box-shadow: 0 10px 30px rgba(255, 127, 126, 0.5);
   cursor: pointer;
   transition: transform 0.2s ease;
 }

 #video .play-btn:hover {
   transform: scale(1.05);
 }

 #video .play-btn i {
   font-size: 38px;
   color: #fff;
   margin-left: 4px;
 }

 /* ripple */
 #video .play-btn::before,
 #video .play-btn::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, 0.7);
   animation: ripple 1.8s infinite ease-out;
 }

 #video .play-btn::after {
   animation-delay: 0.6s;
 }

 @keyframes ripple {
   from {
     transform: scale(1);
     opacity: 1;
   }

   to {
     transform: scale(1.8);
     opacity: 0;
   }
 }

 /* Team Section Desing*/
 #team {
   padding: 80px 0;
   background: var(--light-gray);
 }

 #team .team-card {
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   height: 100%;
 }

 #team .team-card:hover {
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
 }

 #team .team-img {
   height: 230px;
   overflow: hidden;
 }

 #team .team-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 #team .team-body {
   padding: 16px 16px 12px;
 }

 #team .team-name {
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 2px;
 }

 #team .team-role {
   color: var(--secondary-color);
   font-weight: 600;
   margin-bottom: 8px;
 }

 #team .team-desc {
   color: #666;
   font-size: 0.95rem;
   min-height: 46px;
 }

 #team .team-social a {
   color: #888;
   margin-right: 10px;
 }

 #team .team-social a:hover {
   color: var(--secondary-color);
 }

 /* About Section Desing*/
 #about {
   padding: 80px 0;
 }

 #about .about-content {
   display: flex;
   align-items: center;
   gap: 50px;
 }

 #about .about-text h2 {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 20px;
   color: var(--primary-color);
 }

 #about .about-img {
   background: linear-gradient(45deg, #bdc3c7, #95a5a6);
   border-radius: 8px;
   overflow: hidden;
   height: 400px;
 }

 #about .about-img img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }

 /* News Section Desing*/
 #news {
   background: var(--light-gray);
 }

 #news .new-top-image {
   height: 240px;
 }

 #news .new-top-image img {
   height: 100%;
   overflow: hidden;
   object-fit: cover;
 }

 #news .new-bottom-content {
   padding: 20px 16px;
 }

 /* Contact Section Desing*/
 #contact {
   padding: 80px 0;
 }

 #contact .contact-card {
   border: none;
   border-radius: 4px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
 }

 #contact .contact-info i {
   width: 38px;
   height: 38px;
   display: inline-grid;
   place-items: center;
   border-radius: 50%;
   background: var(--light-gray);
   margin-right: 10px;
 }

 /* Footer */
 #footer {
   background: var(--dark-bg);
   color: #fff;
   padding: 60px 0 30px;
 }

 #footer .footer-section h5 {
   color: #fff;
   margin-bottom: 20px;
   font-weight: 600;
 }

 #footer .footer-section ul {
   list-style: none;
   padding: 0;
 }

 #footer .footer-section ul li {
   margin-bottom: 8px;
 }

 #footer .footer-section ul li a {
   color: #bbb;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 #footer .footer-section ul li a:hover {
   color: var(--secondary-color);
 }

 #footer .footer-bottom {
   border-top: 1px solid #444;
   margin-top: 40px;
   padding-top: 20px;
   text-align: center;
   color: #bbb;
 }


.btn-group, .btn-group-vertical {
	display: flex !important;
	overflow: auto !important;
}
.navbar .dropdown-menu {
  border: 0;
  border-radius: 6px;
  padding: 8px 0;
}

.navbar .dropdown-item:focus,
.navbar .dropdown-item:hover {
  background-color: rgba(255, 127, 126, 0.1);
  color: var(--primary-hover-color);
}