* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #080808;
  /* font-family: 'Arial', sans-serif; */
  overflow-x: hidden;
}
/* Splash Screen */
.splash-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
   background: #ffffff;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.8s ease-out;
}
.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
/* Logo Area */
.logo-graphic {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto 40px;
}
.triangle-assembly {
  position: relative;
  width: 100%;
  height: 100%;
}
.triangle-piece {
  position: absolute;
  opacity: 0;
}
.triangle-piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Triangles */
.top-triangle {
  bottom: 130px;
  left: 110px;
  width: 190px;
  height: 195px;
  transform: translateX(-50%);
  animation: slideInTop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
.left-triangle {
  bottom: -58px;
  right: 158px;
  width: 190px;
  height: 195px;
  transform: rotate(240deg);
  animation: slideInLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
.right-triangle {
  bottom: -20px;
  left: 145px;
  width: 190px;
  height:195px;
  transform: rotate(120deg);
  animation: slideInRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}
/* Fire Center */
.fire-container {
  position: absolute;
  left: 150px;
  bottom: -120px;
  transform: translate(-50%);
  width: 200px;
  height: 200px;
  opacity: 0;
  animation: scaleInFire 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards,
    fireGlow 2s ease-in-out 1.6s infinite alternate;
  z-index: 10;
}
.fire-container img {
  width: 150%;
  height: 150%;
  object-fit: contain;
}
/* Fire Animations */
 @keyframes scaleInFire {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
} 
/*  */

/* @keyframes fireGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.6))
      drop-shadow(0 0 20px rgba(255, 161, 110, 0.4));
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 170, 0, 0.9))
      drop-shadow(0 0 35px rgba(252, 155, 91, 0.6));
    transform: translate(-50%, -50%) scale(1.02);
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.7))
      drop-shadow(0 0 25px rgba(255, 155, 108, 0.5));
    transform: translate(-50%, -50%) scale(0.98);
  }
} */
/* Text Styling */
/* .text-content {
  opacity: 0;
  animation: fadeInText 0.8s ease-out 1.4s forwards;
}
.company-name {
  font-size: 42px;
  font-weight: 900;
  color: #d98a3b;
  letter-spacing: 3px;
  margin-bottom: 5px;
}
.tagline {
  font-size: 22px;
  font-weight: 600;
  color: #d98a3b;
  letter-spacing: 2px;
}
.company-type,
.motto {
  color: #1e6006;
  font-weight: 700;
  letter-spacing: 2px;
} */
 /* Center the text content in the middle of the screen */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5; /* optional background color */
    /* font-family: Arial, sans-serif; */
}

.text-content {
    text-align: center; /* center text horizontally */
    opacity: 0;
    transform: translateY(20px); /* start slightly down */
    animation: fadeInUp 1s ease-out forwards; /* fade in and move up */
}

/* staggered animation for children */
.company-name {
    font-size: 42px;
    font-weight: 900;
    color: #D98A00;
    font-family: 'Montserrat', 'Gotham', 'Proxima Nova', sans-serif !important;
    letter-spacing: 3px;
    margin-bottom: 5px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.tagline {
    font-size: 22px;
    font-weight: 600;
    color: #D98A00;
  font-family: 'Montserrat', 'Gotham', 'Proxima Nova', sans-serif !important;
    letter-spacing: 0cap;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1s forwards;
}

.company-type {
    color: #D98A00;
   font-size: 22px;
    font-weight: 700;
    font-family: 'Georgia', 'Times New Roman', 'Merriweather', serif !important;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.5s forwards;
}

.motto {
    color: #1e6006;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 12px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 2s forwards;
}

/* keyframes for fade in and slide up */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations */
@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px) rotate(240deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(240deg);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px) rotate(120deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(120deg);
  }
}
@keyframes fadeInText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Home Page */
/* .home-page {
  display: none;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 60px 20px;
}
.home-page.show {
  display: block;
}
.home-content {
  background: #fff;
  border-radius: 15px;
  padding: 60px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.8s ease-out forwards;
} */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.text-orange {
  color: #d98a3b;
}
.btn-custom {
  background: #d98a3b;
  color: white;
  padding: 12px 40px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-custom:hover {
  background: #c97a2a;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(217, 138, 59, 0.4);
}
/* Responsive */
@media (max-width: 992px) {
  .logo-graphic {
    width: 260px;
    height: 260px;
  }
}
@media (max-width: 768px) {
  .logo-graphic {
    width: 220px;
    height: 220px;
  }
  .company-name {
    font-size: 32px;
  }
  .tagline {
    font-size: 18px;
  }
  .company-type,
  .motto {
    font-size: 13px;
  }
  .home-content {
    padding: 40px 20px;
  }
}
@media (max-width: 480px) {
  .logo-graphic {
    width: 200px;
    height: 200px;
  }
  .company-name {
    font-size: 28px;
  }
}
 .tagline {
    font-size: 16px;
  }
  .company-type,
  .motto {
    font-size: 12px;
  }
  .fire-container img {
  width: 140px;
  height: 150px;
}
@media 
(max-width: 360px) {
  .logo-graphic {
    width: 180px;
    height: 180px;
  }
  .company-name {
    font-size: 24px;
  }
  .tagline {
    font-size: 14px;
  }
  .company-type,
  .motto {
    font-size: 11px;
  }
  .left-triangle {
    right: 90px;
    bottom: -80px;
    width: 150px;
   height: 155px;
  }
   .right-triangle {
    left: 90px;
    bottom: -50px;
     width: 150px;
   height: 155px;
  }
  .top-triangle {
    bottom: 70px;
    left: 60px;
    width: 150px;
    height: 155px;
  }
  .fire-container {
  left: 85px;
  bottom: -80px;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 130px;
  }
   .fire-container img {
  width: 140px;
  height: 150px;
}
}
@media 
(max-width: 420px) {
  .logo-graphic {
    width: 180px;
    height: 180px;
  }
  .company-name {
    font-size: 24px;
  }
  .tagline {
    font-size: 14px;
  }
  .company-type,
  .motto {
    font-size: 11px;
  }
  .left-triangle {
    right: 90px;
    bottom: -80px;
    width: 150px;
   height: 155px;
  }
   .right-triangle {
    left: 90px;
    bottom: -50px;
     width: 150px;
   height: 155px;
  }
  .top-triangle {
    bottom: 70px;
    left: 60px;
    width: 150px;
    height: 155px;
  }
  .fire-container {
  left: 85px;
  bottom: -80px;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  }
   .fire-container img {
  width: 140px;
  height: 150px;
}
}
/* Small phones (e.g., iPhone SE, small Android) */
@media (max-width: 420px) {
  .logo-graphic {
    width: 180px;
    height: 180px;
  }
  .company-name {
    font-size: 24px;
  }
  .tagline {
    font-size: 14px;
  }
  .company-type,
  .motto {
    font-size: 11px;
  }
  .left-triangle {
    right: 85px;
    bottom: -80px;
    width: 150px;
    height: 155px;
  }
  .right-triangle {
    left: 95px;
    bottom: -50px;
    width: 150px;
    height: 155px;
  }
  .top-triangle {
    bottom: 70px;
    left: 65px;
    width: 150px;
    height: 155px;
  }
  .fire-container {
    left: 80px;
    bottom: -80px;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
  }
   .fire-container img {
  width: 140px;
  height: 150px;
}
}

/* Medium phones (e.g., iPhone 11/12/13, Galaxy S series) */
@media (min-width: 421px) and (max-width: 576px) {
  .logo-graphic {
    width: 200px;
    height: 200px;
  }
  .company-name {
    font-size: 26px;
  }
  .tagline {
    font-size: 15px;
  }
  .company-type,
  .motto {
    font-size: 12px;
  }
  .left-triangle {
    right: 100px;
    bottom: -90px;
    width: 170px;
    height: 170px;
  }
  .right-triangle {
    left: 100px;
    bottom: -60px;
    width: 170px;
    height: 170px;
  }
  .top-triangle {
    bottom: 80px;
    left: 70px;
    width: 170px;
    height: 170px;
  }
  .fire-container {
    left: 50%;
    bottom: -80px;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
  }
   .fire-container img {
  width: 140px;
  height: 150px;
}
}

/* Large phones / small tablets (e.g., iPhone Plus, Pixel 8 Pro, iPad Mini) */
@media (min-width: 577px) and (max-width: 768px) {
  .logo-graphic {
    width: 230px;
    height: 230px;
  }
  .company-name {
    font-size: 30px;
  }
  .tagline {
    font-size: 17px;
  }
  .company-type,
  .motto {
    font-size: 13px;
  }
  .left-triangle {
    right: 120px;
    bottom: -100px;
    width: 190px;
    height: 190px;
  }
  .right-triangle {
    left: 120px;
    bottom: -70px;
    width: 190px;
    height: 190px;
  }
  .top-triangle {
    bottom: 90px;
    left: 80px;
    width: 190px;
    height: 190px;
  }
  .fire-container {
    left: 50%;
    bottom: -100px;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 150px;
  }
   .fire-container img {
  width: 140px;
  height: 150px;
}
}

/* Tablets (e.g., iPads, large Android tablets) */
@media (min-width: 769px) and (max-width: 992px) {
  .logo-graphic {
    width: 260px;
    height: 260px;
  }
  .company-name {
    font-size: 34px;
  }
  .tagline {
    font-size: 18px;
  }
  .company-type,
  .motto {
    font-size: 14px;
  }
  .left-triangle {
    right: 140px;
    bottom: -110px;
    width: 210px;
    height: 210px;
  }
  .right-triangle {
    left: 140px;
    bottom: -80px;
    width: 210px;
    height: 210px;
  }
  .top-triangle {
    bottom: 100px;
    left: 100px;
    width: 210px;
    height: 210px;
  }
  .fire-container {
    left: 50%;
    bottom: -110px;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
  }
}