@import url("fonts.css");
@import url("variables.css");

body {
  font-family: var(--font-primary);
  overflow-x: hidden;

  /* Other global styles */
}
.contact-background {
  position: absolute;
  top: 0;
}
.email-link {
  color: var(--white);
  text-decoration: none;
}
/* Existing styles */
.hero {
  background: none; /* Removed placeholder image since we’re using a video */
  height: 100vh;
  color: var(--white);
  position: relative; /* Ensure positioning context for video and overlay */
}

.bg-blue {
  background-color: var(--smart-blue);
}

.navbar {
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  background-color: var(--white) !important;
  padding: 20px;
}

.card {
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

form {
  max-width: 500px;
}

.social-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  vertical-align: middle;
}

.navbar-logo {
  height: 45px;

  width: auto;
  vertical-align: middle;
}

.nav-link {
  color: var(--smart-blue);
  font-size: 20px;
  font-weight: 600;
}

/* Banner Section Styles (Updated with 3D Flip-In Effect on X-axis) */
.banner-section {
  padding: 30px 0;
  margin-top: 125px;
  color: var(--white);
  perspective: 1000px;
  overflow: hidden;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animation for flip-in effect on X-axis (for banner-content) */
@keyframes flipInX {
  from {
    transform: rotateX(
      -90deg
    ); /* Starts flipped 90 degrees on the X-axis (flat or edge-on) */
    opacity: 0;
    transform-origin: var(--motion-origin-x, 0%) var(--motion-origin-y, -50%); /* Custom pivot point */
  }
  to {
    transform: rotateX(0deg); /* Ends upright */
    opacity: 1;
    transform-origin: var(--motion-origin-x, 0%) var(--motion-origin-y, -50%); /* Same pivot point */
  }
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-evenly; /* Evenly space out flip1, banner-text, and flip2 */
  position: relative;
  animation: flipInX 1s ease-out forwards; /* Apply the X-axis flip animation */
  backface-visibility: hidden; /* Smooths out 3D transforms */
  transform-style: preserve-3d; /* Maintains 3D transforms for children */
  transform-origin: var(--motion-origin-x, 0%) var(--motion-origin-y, -50%); /* Default pivot point */
  width: 100%; /* Ensure full width for responsiveness */
}

.banner-text {
  padding: 10px 20px;
  background-color: var(
    --smart-orange
  ); /* Orange background for the text container */
  backface-visibility: hidden; /* Smooths out 3D transforms */
  transform-style: preserve-3d; /* Maintains 3D transforms for children */
}

.banner-title {
  font-size: 2.5rem; /* Adjust size as needed */
  color: var(--smart-blue); /* Blue for "SMARTPACK" text */
  font-weight: bold;
  margin-bottom: 5px;
  border-bottom: 3px solid var(--smart-blue); /* Bottom line for banner-title */
  letter-spacing: 5px;
}

.banner-subtitle {
  font-size: 1rem; /* Adjust size as needed */
  color: var(--white); /* White for "Corrugated Carton Manufacturer" */
  font-weight: normal;
  letter-spacing: 7px;
}

.flip1,
.flip2 {
  flex-shrink: 0; /* Prevent SVGs from shrinking */
}

.flip1 {
  --flip: scale(-1, -1);
  transform: rotate(136.627282deg);
  --comp-rotate-z: 136.627282deg;
}

.flip1 svg,
.flip2 svg {
  width: 104px;
  height: 104px;
}

.flip2 {
  --flip: scale(-1, 1);
  transform: rotate(316.6272820480582deg);
  --comp-rotate-z: 316.6272820480582deg;
}

/* Video Background and Overlay Styles */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* Behind the overlay and content */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
  z-index: 2; /* Above the video, below the content */
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video covers the area while maintaining aspect ratio */
}

.hero-content {
  position: relative; /* Positions content above the overlay */
  z-index: 3; /* Above the overlay and video */
  padding: 20px; /* Optional padding for better readability */
}

/* Welcome Section Styles */
.welcome-section {
  padding: 40px 0;
  background-color: var(--white); /* White background to match the image */
  color: var(--dark-blue); /* Blue text to match the image */
}

.welcome-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.welcome-text {
  /* flex: 1;  */
}

.welcome-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 10px;
}

.welcome-subtitle {
  font-size: 18px;
  font-weight: 400;
}

.welcome-icon {
  width: 400px;
  /* height: 167px; */
  flex-shrink: 0; /* Prevent icons from shrinking */
}

/* Infinite 3D Flip Animation for Icons */
.flip-icon-left,
.flip-icon-right {
  animation: infiniteFlipX 3s linear infinite;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes infiniteFlipX {
  0% {
    transform: rotateY(0deg); /* Start upright */
  }
  50% {
    transform: rotateY(180deg); /* Flip to the back (upside down) */
  }
  100% {
    transform: rotateY(360deg); /* Return to upright (full rotation) */
  }
}

/* About Us Section Styles */
.about-us-section {
  padding: 60px 0;
  background-color: var(--white); /* White background for contrast */
}

.about-us-content {
  display: flex;
  align-items: stretch; /* Ensure both divs have the same height */
}

.about-us-text {
  background-color: var(
    --smart-orange
  ); /* Orange background to match the image */
  flex: 75%; /* Text div takes 75% of the flex space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center text vertically */
  padding: 20px; /* Consistent padding */
  border-radius: 25px 0 0 25px;
}

.about-us-title {
  font-size: 24px; /* Professional font size for title */
  color: var(--white); /* White text to match the image */
  font-weight: 600; /* Medium boldness for a professional look */
  margin-bottom: 15px;
  line-height: 1.5; /* Improve readability */
}

.btn-primary {
  background-color: var(--smart-blue); /* Blue button to match the image */
  border: none;
  padding: 10px 20px;
  font-size: 16px; /* Professional font size for button */
  color: var(--white); /* Ensure text is white for contrast */
}

.btn-primary:hover {
  background-color: var(--smart-blue); /* Darker blue on hover */
}

.about-us-video {
  flex: 25%; /* Video div takes 25% of the flex space */
  position: relative;
  overflow: hidden;
  height: auto; /* Match the height of about-us-text */
  border-radius: 0 25px 25px 0;
}

/* Parallax Effect for Video */
.parallax-video .video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parallax-video {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Contact Us Section Styles */
.contact-section {
  padding: 60px 0;
  background-color: var(
    --smart-orange
  ); /* Orange background to match the image */
}

.contact-content {
  display: flex;
  align-items: stretch; /* Ensure both divs have the same height */
  gap: 30px; /* Space between info and form */
  border-bottom: 1px solid var(--smart-blue);
  margin: auto;
}

.contact-info {
  background-color: var(
    --smart-orange
  ); /* Orange background to match the image */
  border-radius: 8px; /* Optional: Rounded corners */
  flex: 1; /* Allow info to take available space */
  padding: 20px;
}

.contact-title {
  font-size: 28px; /* Professional font size for title */
  color: var(--smart-blue); /* Blue text to match the image */
  font-weight: 600; /* Medium boldness for a professional look */
  margin-bottom: 20px;
}

.contact-info p {
  font-size: 16px; /* Professional font size for text */
  color: var(--white); /* White text for contrast */
  margin-bottom: 10px;
  line-height: 1.5;
}

.contact-info p i {
  margin-right: 10px; /* Space between icon and text */
  color: var(--smart-blue); /* Blue icons to match the image */
}

.social-icons {
  margin-top: 20px;
}

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.5rem; /* Adjust size of icons */
  color: var(--smart-blue); /* Blue icons to match the image */
}

.social-icons a:hover {
  color: var(--smart-blue); /* Darker blue on hover */
}

.contact-form {
  flex: 1; /* Allow form to take available space */
  padding: 20px;
}

.contact-form .form-control {
  border: 1px solid var(--white); /* Default border */
  border-radius: 4px; /* Rounded corners for inputs */
  padding: 12px; /* Professional padding for inputs */
  margin-bottom: 15px;
  font-size: 16px; /* Professional font size for input text */
}

.contact-form .form-control[required]:invalid {
  border-color: red; /* Red border for required fields with invalid input */
}

.contact-form .form-control[required]:focus {
  border-color: var(
    --smart-blue
  ); /* Blue border on focus for required fields */
  outline: none; /* Remove default focus outline */
}

.contact-form .form-control[placeholder="Email *"],
.contact-form textarea[placeholder="Message"] {
  border-color: red; /* Red border for Email and Message fields by default */
}

.contact-form button {
  background-color: var(--smart-blue); /* Blue button to match the image */
  border: none;
  padding: 12px 24px; /* Professional padding for button */
  font-size: 16px; /* Professional font size for button text */
  color: var(--white); /* White text for contrast */
  border-radius: 4px; /* Rounded corners for button */
}

.contact-form button:hover {
  background-color: var(--smart-blue); /* Darker blue on hover */
}

/* Map Section Styles */
.map-section {
  background-color: var(
    --smart-orange
  ); /* Orange background to match the image */
  border-radius: 8px; /* Optional: Rounded corners */
  padding: 20px;
  margin: auto; /* Space above the map */
  max-width: 85%;

}

.map-section iframe {
  border: 0;
  width: 100%;
  height: 450px; /* Match the image height */
  border-radius: 8px; /* Optional: Rounded corners to match the design */
}

/* Footer Section Styles */
.footer-section {
  background-color: var(
    --smart-blue
  ); /* Dark blue background to match the image */
  color: var(--white); /* White text for contrast */
}

.footer-section .back-to-top {
  font-size: 18px; /* Professional font size for "Back to Top" */
  color: var(--white); /* White text for contrast */
  text-decoration: none; /* Remove underline */
}

.footer-section .back-to-top i {
  margin-right: 8px; /* Professional spacing between arrow and text */
}

.footer-section .back-to-top:hover {
  color: var(--white); /* White on hover for consistency */
  text-decoration: underline; /* Underline on hover */
}

.footer-section .footer-nav {
  margin: 20px 0;
  display: flex; /* Use flex for 25% width links */
  justify-content: space-between; /* Evenly distribute links */
  max-width: 600px; /* Optional: Cap width for better layout */
  margin-left: auto;
  margin-right: auto;
}

.footer-section .footer-link {
  font-size: 16px; /* Professional font size for links */
  color: var(--white); /* White text for contrast */
  text-decoration: none; /* Remove underline */
  width: 25%; /* Set each link to 25% width */
  text-align: center; /* Center text within each link */
}

.footer-section .footer-link:hover {
  color: var(--white); /* White on hover for consistency */
  text-decoration: underline; /* Underline on hover */
}

.footer-section .social-icons {
  margin: 20px 0;
}

.footer-section .footer-social {
  font-size: 24px; /* Professional font size for social icons */
  color: var(--white); /* White icons for contrast */
  margin-right: 20px; /* Professional spacing between icons */
}

.footer-section .footer-social:hover {
  color: var(--white); /* White on hover for consistency */
  text-decoration: none; /* Remove underline on hover */
}

.footer-section .copyright {
  font-size: 14px; /* Professional font size for copyright */
  color: var(--white); /* White text for contrast */
  margin-top: 15px;
}

@media (max-width: 768px) {
  .hero {
    height: 60vh; /* Reduce height on mobile */
  }
  .contact-background {
    display: none;
  }

  form {
    max-width: 100%;
  }

  .social-icon {
    width: 25px;
    height: 25px;
  }

  .navbar-logo {
    height: 40px;
  }

  .banner-section {
    padding: 20px 0; /* Reduce padding on mobile */
  }

  .banner-content {
    flex-direction: row; /* Stack elements vertically on mobile */
    justify-content: center; /* Center vertically */
  }

  .banner-text {
    padding: 5px 10px; /* Reduce padding on mobile */
  }

  .banner-title {
    font-size: 24px; /* Professional font size for mobile */
  }

  .banner-subtitle {
    font-size: 14px; /* Professional font size for mobile */
  }

  .flip1,
  .flip2 {
    margin: 10px 0; /* Add spacing around SVGs on mobile */
  }

  .flip1 svg,
  .flip2 svg {
    width: 80px; /* Smaller SVGs on mobile */
    height: 80px;
  }

  .welcome-section {
    padding: 20px 0; /* Reduce padding on mobile */
  }

  .welcome-content {
    flex-direction: column; /* Stack icons and text vertically on mobile */
    gap: 15px; /* Reduce gap on mobile */
  }

  .welcome-title {
    font-size: 24px; /* Professional font size for mobile */
  }

  .welcome-subtitle {
    font-size: 16px; /* Professional font size for mobile */
  }

  .welcome-icon {
    width: 40px; /* Smaller icons on mobile */
  }

  .flip-icon-left,
  .flip-icon-right {
    animation: infiniteFlipX 3s linear infinite; /* Faster infinite flip on mobile */
  }

  .about-us-section {
    padding: 30px 0; /* Reduce padding on mobile */
  }

  .about-us-content {
    flex-direction: column; /* Stack text and video vertically on mobile */
    gap: 20px; /* Reduce gap on mobile */
  }

  .about-us-text {
    padding: 15px; /* Reduce padding on mobile */
  }

  .about-us-title {
    font-size: 20px; /* Professional font size for mobile */
  }

  .about-us-video {
    height: auto; /* Match the height of about-us-text on mobile */
  }

  .contact-section {
    padding: 30px 0; /* Reduce padding on mobile */
  }

  .contact-content {
    flex-direction: column; /* Stack info and form vertically on mobile */
    gap: 20px; /* Reduce gap on mobile */
  }

  .contact-info,
  .contact-form {
    flex: 1; /* Equal width on mobile */
    padding: 15px; /* Reduce padding on mobile */
  }

  .contact-title {
    font-size: 24px; /* Professional font size for mobile */
  }

  .contact-info p {
    font-size: 14px; /* Professional font size for mobile */
  }

  .social-icons a {
    font-size: 1.2rem; /* Smaller icons on mobile */
  }

  .contact-form .form-control {
    padding: 8px; /* Reduce padding on mobile */
    margin-bottom: 10px; /* Reduce margin on mobile */
    font-size: 14px; /* Professional font size for mobile */
  }

  .contact-form button {
    padding: 8px 16px; /* Reduce padding on mobile */
    font-size: 14px; /* Professional font size for mobile */
  }

  .map-section {
    padding: 15px; /* Reduce padding on mobile */
    margin-top: 20px; /* Reduce margin on mobile */
  }

  .map-section iframe {
    height: 300px; /* Smaller height on mobile */
  }

  .footer-section {
    padding: 20px 0; /* Reduce padding on mobile */
  }

  .footer-section .back-to-top {
    font-size: 16px; /* Professional font size for mobile */
  }

  .footer-section .footer-nav {
    flex-direction: column; /* Stack links vertically on mobile */
    max-width: 100%; /* Full width on mobile */
  }

  .footer-section .footer-link {
    font-size: 14px; /* Professional font size for mobile */
    width: 100%; /* Full width on mobile */
    text-align: center; /* Center text on mobile */
    margin-bottom: 8px; /* Reduce space between links */
  }

  .footer-section .footer-social {
    font-size: 20px; /* Professional font size for mobile */
    margin-right: 10px; /* Reduce space between icons */
  }

  .footer-section .copyright {
    font-size: 12px; /* Professional font size for mobile */
  }

  .video-overlay {
    background: rgba(
      0,
      0,
      0,
      0.4
    ); /* Slightly darker overlay on mobile for better contrast */
  }
}

@media (max-width: 480px) {
  .contact-background {
    display: none;
  }
  .banner-title {
    font-size: 20px; /* Professional font size for very small screens */
  }

  .banner-subtitle {
    font-size: 12px; /* Professional font size for very small screens */
  }

  .welcome-title {
    font-size: 20px; /* Professional font size for very small screens */
  }

  .welcome-subtitle {
    font-size: 14px; /* Professional font size for very small screens */
  }

  .about-us-title {
    font-size: 18px; /* Professional font size for very small screens */
  }

  .contact-title {
    font-size: 20px; /* Professional font size for very small screens */
  }

  .contact-info p {
    font-size: 12px; /* Professional font size for very small screens */
  }

  .social-icons a {
    font-size: 1rem; /* Professional font size for very small screens */
  }

  .map-section iframe {
    height: 200px; /* Even smaller height on very small screens */
  }

  .footer-section .back-to-top {
    font-size: 14px; /* Professional font size for very small screens */
  }

  .footer-section .footer-link {
    font-size: 12px; /* Professional font size for very small screens */
    margin-bottom: 6px; /* Reduce space between links */
  }

  .footer-section .footer-social {
    font-size: 18px; /* Professional font size for very small screens */
    margin-right: 8px; /* Reduce space between icons */
  }

  .footer-section .copyright {
    font-size: 10px; /* Professional font size for very small screens */
  }
}

.activeText {
  font-size: 30px; /* Professional font size for active text */
  font-weight: 600; /* Medium boldness for a professional look */
  color: var(--smart-blue);
}

/* Define dark blue color variable */
.bg-dark-blue {
  background-color: var(--smart-blue);
}
.promo-section {
  height: 400px;
}

/* Bottom-left positioned slogan with creative effects */
.slogan-wrapper {
  max-width: 40%;
  transform-origin: bottom left;
  z-index: 10;
}

.slogan-container {
  position: relative;
  overflow: visible;
}

.slogan-container img {
  width: 400px;
}

.slogan-image {
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
  transform-origin: bottom left;
  animation: floatUpDown 6s ease-in-out infinite;
}

.slogan-glow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  animation: pulsateGlow 4s ease-in-out infinite;
  z-index: -1;
  opacity: 0.7;
}

@keyframes floatUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes pulsateGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .slogan-wrapper {
    max-width: 60%;
  }
}

@media (max-width: 767px) {
  .slogan-wrapper {
    max-width: 80%;
  }

  .slogan-image {
    animation: floatUpDown 5s ease-in-out infinite;
  }
}

@media (max-width: 575px) {
  .slogan-wrapper {
    max-width: 90%;
    padding: 1rem !important;
  }
}