@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&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');

body{
    font-family: "Poppins", sans-serif;
    background-color: #030712;
    color: white;
}

nav a{
    text-decoration: none;
    color: white;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: transparent;
}

#home{
    background-image: url("/assets/images/lobster1_compressed.jpg");
    background-size: cover;      /* image covers full area */
    background-position: center; /* center the image */
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;

    display: flex;              /* enables centering */
    flex-direction: column;
    justify-content: center;    /* vertical center */
    align-items: center;        /* horizontal center */
    text-align: center;   

    filter: brightness(0.8);
}

#home::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        
        rgba(69, 10, 10, 0.7), /* deep red */
        rgba(0, 0, 0, 0.3),    /* fade out */
        transparent            /* fully transparent at edges */
    );
    z-index: 1;
}

#home > * {
    position: relative;
    z-index: 2; /* content stays above overlay */
}
section{
    min-height: 100vh;   
    height: auto;   
}

.section-padding{
    padding: 120px 60px; 
}

.full-section{
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.second-gray{
    background-color: #111827;
}

.company-type span{
    size: 16px;
    color: #ca4e4e;
}
.company-type h1{
    color: #fca5a5;
    text-transform: uppercase;
}

/* Primary - Solid Red Button */
.btn-primary-custom {
    background-color: #b91c1c;   /* red-700 */
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    transition: 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #dc2626;  /* red-600 */
    color: #fff;
}

/* Outline - Red Border Button */
.btn-outline-custom {
    background-color: transparent;
    color: #f87171;            /* red-400 */
    border: 2px solid #f87171;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 500;
    transition: 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: rgba(69, 10, 10, 0.5); /* red-950/50 */
    color: #fff;              /* text becomes white on dark hover */
    border-color: #f87171;
}

.heading-red{
    color:#ef4444;
}

.cargo-img{
    border-radius: 10px;
}

.nav-link{
    color: white !important;
}

.nav-link:hover{
    color: #ef4444 !important;
}

.banner-image {
  height: 400px;               
  object-fit: cover;
  width: 100%;
}

.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #111827, transparent);
  /* matches Tailwind: from-gray-900 to-transparent */
  pointer-events: none;        /* overlay won't block clicks */
}

.custom-card {
  background-color: #0f0f16;          /* similar to bg-gray-950 */
  border: 1px solid #1f2937;          /* gray border */
  border-radius: 10px;
  transition: 0.3s ease;
}

.custom-card:hover {
  border-color: #7f1d1d;              /* hover:border-red-900 */
}

.icon-box {
  width: 48px;
  height: 48px;
  background-color: rgba(69, 10, 10, 0.4);  /* red-950/50 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 




/* media query */

@media (max-width: 576px) {
  .section-padding {
    padding: 60px 20px;
  }

  #home {
    padding-top: 140px; /* space for navbar */
  }
}

@media (max-width: 768px) {
  .full-section {
    align-items: flex-start; /* content flows normally */
    padding-top: 100px;
  }
}

@media (max-width: 768px) {
  #about .col-lg-6 {
    margin-bottom: 30px;
  }

  .cargo-img {
    width: 100%;
  }
}

@media (max-width: 576px) {
  #home h3 {
    font-size: 20px;
  }
  #home h4 {
    font-size: 18px;
  }
  #home h5 {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .btn-primary-custom,
  .btn-outline-custom {
    width: 100%;
    text-align: center;
  }

  #home .col-auto.d-flex {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .banner-image {
    height: 250px;
  }
}

@media (max-width: 576px) {
  .custom-card {
    padding: 20px;
  }
}


/* Vertical line shown on desktop */
.timeline::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 0, 0, 0.2); 
}

.timeline-item {
  position: relative;
}

/* Icon circle */
.icon-circle {
  width: 70px;
  height: 70px;
  background: linear-gradient(to bottom right, #450a0a, #0f0f16);
  border: 2px solid #7f1d1d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.timeline-item:hover .icon-circle {
  transform: scale(1.1);
}

/* Step number badge */
.step-number {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  background: #dc2626;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

/* Responsive Fix: remove vertical line on mobile */
@media (max-width: 768px) {
  .timeline::before {
    display: none;
  }

  .timeline-item {
    margin-left: 0;
  }

  .icon-circle {
    width: 60px;
    height: 60px;
  }
}

/* Background video full section */
.process-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ensures full coverage */
  z-index: 0;
  filter: brightness(0.6); /* darker for text readability */
}

/* Dark overlay on top of the video */
.process-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 24, 39, 0.7); /* deep gray with transparency */
  z-index: 1;
}

/* Make sure your content stays ABOVE the video */
#process .container {
  position: relative;
  z-index: 2;
}


.contact-card {
  background-color: #111827;
  border: 1px solid #1f2937;
}

.contact-input {
  background-color: #0a0a0f;
  border: 1px solid #374151;
  color: white;
}

.contact-input::placeholder {
  color: #6b7280;
}

.contact-input:focus {
  border-color: #ef4444;
  box-shadow: none;
}

/* Icon box */
.icon-box-red {
  width: 48px;
  height: 48px;
  background-color: rgba(69, 10, 10, 0.5);
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect */
.hover-red:hover {
  color: #ef4444 !important;
}

/* Gradient red card */
.gradient-card {
  background: linear-gradient(to right, rgba(69,10,10,0.3), #0f0f16);
  border: 1px solid rgba(127,29,29,0.5);
}

/* Small red bullet */
.bullet-dot-small {
  width: 6px;
  height: 6px;
  background-color: #dc2626;
  border-radius: 50%;
  flex-shrink: 0;
}



.footer-dark {
  background-color: black;
  color: #d1d5db;
}

.footer-link {
  color: #9ca3af;
  text-decoration: none;
}

.footer-link:hover {
  color: #ef4444;
}

.social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  transition: 0.3s ease;
}

.social-icon:hover {
  background-color: #7f1d1d;
  color: white;
}


@media (max-width: 991px) {
  #mainNav {
    background: black; /* Dark with slight transparency */
    padding: 15px;
    border-radius: 6px;
  }
}


.nav-logo{
  border-radius: 50%;
}