body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      padding: 0;
  
    }

    .banner {
      padding: 90px 30px;
    background: linear-gradient(to right, #0B2E33, #135059)
    }

    .banner h1 {
      font-size: 5rem;
      font-weight: 700;
      line-height: 1.3;
      color: white;
      animation: fadeInDown 1s ease-in-out;
    }

    .banner p {
      font-size: 1.2rem;
      margin-top: 30px;
      margin-bottom: 20px;
      color: #aeabab;
      animation: fadeInUp 1.5s ease-in-out;
    }

    .banner img {
     height: 400px;
      animation: zoomIn 1.3s ease-in-out;
    }

    .main-content{
        background-color: red;
        gap: 110px;
    }
  
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes zoomIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 767px) {
      .banner {
        text-align: center;
        padding: 60px 20px;
      }
    }

/* button  */


.button-with-icon {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #0B2E33;
font-family: "Istok Web", sans-serif;
letter-spacing: 1px;
padding: 0 10px;
text-align: center;
width: 100px;
height: 30px;
font-size: 14px;
font-weight: normal;
border-radius: 3px;
outline: none;
user-select: none;
cursor: pointer;
transform: translateY(0px);
position: relative;
box-shadow:
inset 0 30px 30px -15px rgba(113, 15, 15, 0.1),
inset 0 0 0 1px #0e2d32,
inset 0 1px 20px rgba(0, 0, 0, 0),
0 3px 0 #0B2E33,
0 3px 2px rgba(0, 0, 0, 0.2),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.1);
background: #1d6772;
color: white;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
transition: 150ms all ease-in-out;
}

.button-with-icon .icon {
font-size: 25px;
transition: all 0.5s ease-in-out;
}

.button-with-icon:active {
transform: translateY(3px);
box-shadow:
inset 0 16px 2px -15px rgba(0, 0, 0, 0),
inset 0 0 0 1px rgba(255, 255, 255, 0.15),
inset 0 1px 20px rgba(0, 0, 0, 0.1),
0 0 0 #13606c,
0 0 0 2px rgba(255, 255, 255, 0.5),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0);
}

.button-with-icon:hover .text {

transform: translate(23px);
}
.button-with-icon:hover .icon {
transform: translateX(70px);
}

.acadmy-text {
transition: all 0.5s ease-in-out;
margin-right: 8px;
}


 @media (max-width: 768px) {
   .banner img{
  height: 200px; 
 }

 
    .banner h1 {
      font-size: 3rem;
    }
    }