/* ========== BASIC SETUP ========== */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;
  background: #000;
}

/* ========== BANNERS ========== */
.banner1, .banner2, .banner3, .banner4 {
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ========== IMAGES ========== */
.banner1 img,
.banner2 img,
.banner3 img,
.banner4 img {
  width: 120%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: zoom-out 4s ease-in-out infinite;
  object-fit: cover;
}

/* ========== ZOOM OUT EFFECT ========== */
@keyframes zoom-out {
  0% { width: 120%; }
  100% { width: 100%; }
}

/* ========== TEXT BOX ========== */
.text-box {
  width: 600px;
  position: absolute;
  top: 200px;
  left: 100px;
  color: white;
  opacity: 0;
  animation: textup 16s ease-in-out infinite;
}

.text-box h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.text-box p {
  font-size: 16px;
  line-height: 22px;
  margin-top: 10px;
}

.text-box span {
  display: block;
  background: red;
  height: 3px;
  width: 100px;
  margin-bottom: 15px;
}

/* ========== TEXT ANIMATION ========== */
@keyframes textup {
  0% { transform: translateY(40px); opacity: 0; }
  5% { transform: translateY(0px); opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* ========== SLIDE ANIMATIONS ========== */
.banner1 { animation-name: slide1; }
.banner2 { animation-name: slide2; }
.banner3 { animation-name: slide3; }
.banner4 { animation-name: slide4; }

.text-box1 { animation-delay: 0s; }
.text-box2 { animation-delay: 4s; }
.text-box3 { animation-delay: 8s; }
.text-box4 { animation-delay: 12s; }

/* SLIDE 1 */
@keyframes slide1 {
  0% { opacity: 1; visibility: visible; }
  25% { opacity: 1; visibility: visible; }
  26% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}

/* SLIDE 2 */
@keyframes slide2 {
  0%, 25% { opacity: 0; visibility: hidden; }
  26% { opacity: 1; visibility: visible; }
  50% { opacity: 1; visibility: visible; }
  51%, 100% { opacity: 0; visibility: hidden; }
}

/* SLIDE 3 */
@keyframes slide3 {
  0%, 50% { opacity: 0; visibility: hidden; }
  51% { opacity: 1; visibility: visible; }
  75% { opacity: 1; visibility: visible; }
  76%, 100% { opacity: 0; visibility: hidden; }
}

/* SLIDE 4 */
@keyframes slide4 {
  0%, 75% { opacity: 0; visibility: hidden; }
  76% { opacity: 1; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}




.automark-footer {
background: #111;
color: #ddd;
padding: 40px 0;
font-family: Arial, sans-serif;
}


.footer-container {
width: 85%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 30px;
}


.footer-section h3,
.footer-section h4 {
color: #fff;
margin-bottom: 15px;
}


.footer-section p {
line-height: 1.6;
}


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


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


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


.footer-section ul li a:hover {
color: #fff;
}


.social-links a {
display: inline-block;
margin-right: 10px;
color: #bbb;
text-decoration: none;
transition: 0.3s;
}


.social-links a:hover {
color: #fff;
}


.footer-bottom {
text-align: center;
padding-top: 20px;
margin-top: 30px;
border-top: 1px solid #333;
color: #888;
}