* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0px;  
      background-color: gray;

  }
  nav{
    margin-top: 65px;

    
  }
  .container {
    width: 1400px;
    display: flex;
    align-items: center;
    height: 398px;
  }

  .paragraph {
    flex: 1; 
  }

  #cage{
    width: 100%;
    height: auto;
    border-radius:  0 20px 20px 0; 
    flex: 1;
  }
  #pre{
    color: white;
    margin: 0 auto;
    margin-left: 50px;
    margin-right: 100px;
    text-align: justify;
    text-justify: inter-word;
    font-family: 'Oswald';    
    padding-left: 20px;
    float: left;
  }
  h1{
    color: white;
    margin: 0 auto;
    margin-left: 190px;
    font-family: 'Oswald';
    }
  p{
    font-family: UfcSansCondensedMedium, "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    }
  
  .topnav {
    position: fixed;
    overflow: hidden;
    display: flex;
    background-color: #000000;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .info h3{
margin-left: 200px;
  }

.info p{
  margin-left: 280px;
}
  footer {

    padding: 10px;
    text-align: center;
  }
  
  .topnav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    padding: 10px;
  }
  .topnav a:hover {
    color: rgb(24, 110, 160);
  }
  #blank a:hover {
    background-color: #333;
    color:#f2f2f2;
  }
  .slider-container {
    overflow: hidden;
     width: 100%;
}
a{
  margin: 0 5px;
}
.box {
  width: 1225px;
  flex: 1;
  background-color: #727272;
  border-radius: 20px;
  margin-left: 70px;
  overflow: hidden; 
}
.slider {
    display: flex;
    animation: slide infinite linear 10s; 
}
.slide {
     margin: 0px 5px;
    width: 1000px; 
}
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-640px * 3)); } 
}


.text-overlay {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}
.text-overlay h2 {
  font-size: 24px;
}
.text-overlay p {
  font-size: 16px;
}
.curved-box {
  background-color: #727272; 
  border-radius: 20px;
  overflow: hidden;
  width: 250px; 
margin-right: 80px;
margin-top: 10px;
  float: right;
}
.curved-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.i {
  display: block;
}
.content {
  padding: 20px;
}
h2,h3{
  font-family: 'Oswald';
}
/* =========================================
   MOBILE ADAPTABILITY (Only runs on phones)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 1. Stop horizontal scrolling */
    body { 
        overflow-x: hidden; 
    }

    /* 2. Fix the Navigation Bar (Stop it from overlapping text) */
    .topnav { 
        position: relative !important; 
        flex-direction: column !important; 
        padding-bottom: 15px !important; 
    }
    .topnav a[style] { margin-right: 0 !important; } /* Fixes the logo margin */
    .topnav a { margin: 5px auto !important; padding: 5px !important; }
    nav { margin-top: 20px !important; }

    /* 3. Fix "About Us" Box */
    .box { 
        width: 95% !important; 
        margin-left: 2.5% !important; /* Centers the box */
    }
    .container { 
        width: 100% !important; 
        height: auto !important; 
        display: block !important; 
    }
    .paragraph { display: block !important; padding-bottom: 20px !important; }
    h1 { margin-left: 0 !important; text-align: center !important; }
    #pre { 
        margin-left: 10px !important; 
        margin-right: 10px !important; 
        width: auto !important; 
    }
    #cage { display: block !important; width: 100% !important; }
    #cage img { border-radius: 0 0 20px 20px !important; }

    /* 4. Fix the Slider and Images */
    .slider-container { width: 100vw !important; }
    .slide { width: 100vw !important; margin: 0 !important; }
    
    .slide img { 
        width: 90vw !important; 
        height: 350px !important; /* Overrides your 453px HTML height */
        object-fit: cover !important; 
        object-position: top center !important; /* Crucial: Keeps heads in frame */
        margin: 0 auto !important; 
        display: block !important; 
    }
    
    .info h3, .info p, .info h3[style] { 
        margin-left: 0 !important; 
        text-align: center !important; 
    }

    /* Mobile specific slider math */
    .slider { animation: mobileSlide 15s infinite linear !important; }
    @keyframes mobileSlide {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-100vw * 3)); }
    }

    /* 5. Fix Fighter Page (Disable Floats, Center Cards) */
    .curved-box { 
        float: none !important; 
        width: 90% !important; 
        margin: 20px auto !important; 
        display: block !important; 
    }
    .curved-top img { 
        width: 100% !important; 
        height: 400px !important; /* Overrides inline 350px */
        object-fit: cover !important; 
        object-position: top center !important; 
    }
}