img
  {
    border-radius: 0.375em;
    border-top-left-radius: 0.375em;
    border-top-right-radius: 0.375em;
    border-bottom-right-radius: 0.375em;
    border-bottom-left-radius: 0.375em;
    display: block;
    z-index: 0;
  }

    img.resp_image {
	max-width: 98%;
	margin:auto;
	border-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
  }

    @media screen and (orientation: portrait) {
    img.resp_image { max-width: 98%; }
  }

    @media screen and (orientation: landscape) {
   img.resp_image { max-height: 98%; }
 }


/* %start%  "form" styling  */
         label {
         font-weight: 500;
         font-size: 1em;
         }
         #submit_button {
         background-color: #B22222;
         height: 40px;
         width: 25%;
         color: #FFFFFF;
         font-weight: bold;
         text-align:center;
         }
         input, textarea {
         background-color: #F3F3F3;
         color: #2F4F4F;
         width: 240px;
         margin-bottom: 5px;
         box-shadow: 3px 3px 1px 1px #696969;
         font-weight: 500;
         font-size: 1em;
         }
/*- %end% form styling  */
            

/* https://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/  */

/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/

@keyframes carousel {
0%    { left: 0%; }
11%   { left: 0%; }
12.5% { left: -100%; }
23.5% { left: -100%; }
25%   { left: -200%; }
36%   { left: -200%; }
37.5% { left: -300%; }
48.5% { left: -300%; }
50%   { left: -400%; }
61%   { left: -400%; }
62.5% { left: -500%; }
73.5% { left: -500%; }
75%   { left: -600%; }
86%   { left: -600%; }
87.5% { left: -700%; }
99.5% { left: -700%; }
100%  { left: 0%; }
}

.carousel{
    margin:0;
    padding:0;
    overflow:hidden;
    width:100%;
    background: #07c;
}
.panes{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    width:800%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
        
    -moz-animation:carousel 24s infinite;
    -webkit-animation:carousel 24s infinite;
    animation:carousel 24s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:12.5%; /* 100 / number of panes */
    z-index: 0;
}
.carousel img{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    z-index: 0;    
}


<!-- CONTACT FORM codepen.io/imprakash/pen/GgNMXO -->

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 90%;
  }
  .popup{
    width: 90%;
  }
}

<!-- END Codepen -->

.liststyle li {
  font:90% Arial,Verdana,Sans-Serif;
  color:rgb(255,217,102);
  font-size:1px;
  font-weight:lighter;
  line-height:1px;
}
.stuck {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.h4-text {
  font-size:1.1em;
  font-weight:500;
  line-height:3em;
  white-space: nowrap;
  border: solid 1px black;
  border-radius: 10px;
  margin:7px;
  padding:7px;
  background-color:yellow;
  box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

.tabyb {
  font-weight:600;
  color:#429;
  background-color:gold;
  border-radius:5px;
  margin: 6px 0 6px 0;
  padding:3px;
  width:100%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.9);
}

.tabyh3 {
  font-weight:600;
  font-size:1.3em;
  color:gold;
  background-color:#337;
  border-radius:5px;
  margin: 3px 0 7px 0;
  padding:5px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.9);
/*  width:100%; */
}

.tabyh4 {
  font-weight:600;
  font-size:1.1em;
  color:#003;
  background-color:#ee7;
  border-radius:5px;
  margin: 3px 0 6px 0;
  padding:5px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.9);
/*  width:100%; */
}

/* PHOTO-GALLERY 1:2:4 columns */
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

/* Create three equal columns that sits next to each other */
.col-3 {
  flex: 33.3%;
  max-width: 33.3%;
  padding: 0 4px;
}

/* Create a 2 span of 3 column */
.col-6 {
  flex: 66.6%;
  max-width: 66.6%;
  padding: 0 4px;
}

.column, .col-3, .col-6 img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1200px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {
  .column, .col-3, .col-6 {
    flex: 100%;
    max-width: 100%;
  }
}

.box {
	width:40%;
	margin:0 auto;
	background:rgba(255,255,255,.2);
	padding:35px;border:2px solid #fff;
	border-radius:20px/50px;
	background-clip:padding-box;
	text-align:center;
}

.overlay {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,.7);
	transition:opacity .5s;
	visibility:hidden;
	opacity:0;
}

.overlay:target {
	visibility:visible;
	opacity:1;
}

.popup   {
	margin:70px auto;padding:20px;
	background:#fff;
	border-radius:5px;
	width:30%; 
	position:relative;
	transition:all 5s ease-in-out;
}

.popup h2  {
	margin-top:0;
	color:#333;
	font-family:Tahoma,Arial,sans-serif;
}

.popup .close {
	position:absolute;
	top:20px;
	right:30px;
	transition:all .2s;
	font-size:30px;
	font-weight:700; 
	text-decoration:none;
	color:#333;
}

.popup .close:hover  {
	color:#06d85f;
}

.popup .content  {
	max-height:30%;
	overflow:auto;
}

@media screen and (max-width:700px)	{
	.box {
		width:90%;
	}
	.popup  {
		width:90%;
	}
}

/*  CLAUDE CODE */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    .x-header {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        color: white;
        padding: 30px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .x-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.05) 10px,
            rgba(255, 255, 255, 0.05) 20px
        );
        animation: slide 20s linear infinite;
    }

    @keyframes slide {
        0% { transform: translateX(-50px) translateY(-50px); }
        100% { transform: translateX(50px) translateY(50px); }
    }

    .x-header h1 {
        margin: 0;
        font-size: 2.5em;
        font-weight: 500;
        color: #ff3;
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .x-header p {
        margin: 10px 0 0 0;
        font-size: 1.1em;
        font-weight: 500;
        color: #ffd;
        opacity: 0.9;
        position: relative;
        z-index: 1;
    }

    .content {
        padding: 40px;
    }

    .year-section {
        margin-bottom: 40px;
        border-left: 4px solid #3498db;
        padding-left: 30px;
        position: relative;
    }

    .year-section::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 0;
        width: 12px;
        height: 12px;
        background: #3498db;
        border-radius: 50%;
        box-shadow: 0 0 0 4px white, 0 0 0 8px #3498db;
    }

    .year-title {
        font-size: 2em;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 20px;
        display: inline-block;
        background: linear-gradient(135deg, #3498db, #2980b9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .incident {
        background: white;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border-left: 5px solid #e74c3c;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .incident:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .incident.fatal {
        border-left-color: #c0392b;
        background: linear-gradient(135deg, #fff 0%, #ffebee 100%);
    }

    .incident.grounding {
        border-left-color: #f39c12;
        background: linear-gradient(135deg, #fff 0%, #fff8e1 100%);
    }

    .date {
        font-weight: bold;
        color: #e74c3c;
        font-size: 1.1em;
        margin-bottom: 8px;
    }

    .aircraft-info {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 0.95em;
    }

    .info-item {
        background: #ecf0f1;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: 500;
    }

    .airline {
        background: #3498db;
        color: white;
    }

    .registration {
        background: #9b59b6;
        color: white;
    }

    .location {
        background: #e67e22;
        color: white;
    }

    .description {
        font-size: 1.05em;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .report-status {
        display: inline-block;
        background: #27ae60;
        color: white;
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.85em;
        font-weight: 500;
    }

    .ongoing {
        background: #f39c12;
    }

    .alert-box {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        color: white;
        padding: 20px;
        border-radius: 10px;
        margin: 30px 0;
        text-align: center;
        box-shadow: 0 5px 15px rgba(238, 90, 36, 0.3);
    }

    .alert-box h3 {
        margin: 0 0 10px 0;
        font-size: 1.3em;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }

    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .stat-number {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        display: block;
    }

    .stat-label {
        color: #7f8c8d;
        font-size: 0.9em;
        margin-top: 5px;
    }

        .merger-info {
            background: #f8f9fa;
            padding: 30px;
            border-bottom: 1px solid #e9ecef;
        }

        .merger-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }

        .merger-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #1e3c72;
            margin-bottom: 15px;
        }




    @media (max-width: 768px) {
        .container {
            margin: 10px;
            border-radius: 10px;
        }

        .content {
            padding: 20px;
        }

        .aircraft-info {
            flex-direction: column;
        }

        .header h1 {
            font-size: 1.8em;
        }
    }