/* General Styles */
/* Banner Section */
.banner-2 {
color: #222;
padding: 20px 80px;
background:#e0ebfa;
}

.mock-container {
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

/* Registration Section */
.registration {
width: 30%;
text-align: left;
}

.registration h2 {
font-size: 2rem;
}

.registration p {
font-size: 1.1rem;
margin: 14px 0;
}

.btn {
display: inline-block;
background: #34495e;
color: white;
font-size: 1.2rem;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}

.btn:hover {
box-shadow: 0 10px 15px rgba(0, 123, 255, 0.4); /* Adjusted shadow size on hover */
transform: translateY(-3px);
}

/* How It Works Section */
.how-it-works {
width: 60%;
text-align: center;
}

.how-it-works h2 {
font-size: 2rem;
}

.subtitle {
font-size: 1.1rem;
margin-bottom: 30px;
margin-top: 8px;
}

/* Timeline */
.timeline {
position: relative;
max-width: 600px;
margin: 0 auto;
}

.timeline p{
margin: 8px 0px 0px 0px;
font-size:14px;
}

/* Vertical Line */
.timeline::after {
content: "";
position: absolute;
width: 4px;
background: #34495e;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

/* Timeline Items */
.timeline-item {
height: 125px;
position: relative;
width: 45%;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
margin: 20px 0;
}

.timeline-item.left {
left: 30px;
text-align: left;
}

.timeline-item.right {
left: 50%;
text-align: left;
}

.timeline-item .icon {
position: absolute;
top: 0%;
left: 0%;
background: #fff;
color: #4CAF50;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 2rem;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index:9;
}
.timeline-item.left .icon {  
left: 100%;
}
/* Responsive */
@media (max-width: 992px) {
.banner-2 {
padding: 20px 20px;
}
.mock-container {
flex-direction: column;
text-align: center;
}

.registration, .how-it-works {
width: 100%;
margin-bottom: 40px;
}

.timeline::after {
left: 20px;
}

.timeline-item {
width: 90%;
left: 0 !important;
text-align: left;
padding-left: 60px;
}

.timeline-item .icon {
left: 20px;
}
.timeline-item.left .icon {
left: 5%;
}
}