* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }
 
 ::selection {
   color: #000;
   background: #fff;
 }
 
 .menu .logo a {
   text-decoration: none;
   color: #fff;
   font-size: 35px;
   font-weight: 600;
 }
 
 .menu ul {
   display: inline-flex;
 }
 
 .menu ul li {
   list-style: none;
   margin-left: 7px;
 }
 
 .menu ul li:first-child {
   margin-left: 0px;
 }
 
 .menu ul li a {
   text-decoration: none;
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   padding: 8px 15px;
   border-radius: 5px;
   transition: all 0.3s ease;
 }
 
 .menu ul li a:hover {
   background: #fff;
   color: black;
 }
 
 .img {
   background: url('img3.jpg') no-repeat;
   width: 100%;
   height: 100vh;
   background-size: cover;
   background-position: center;
   position: relative;
 }
 
 .img::before {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.4);
 }
 
 .center {
   position: absolute;
   top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   padding: 0 20px;
   text-align: center;
 }
 
 .center .title {
   color: white;
   font-size: 60px;
   font-weight: 600;
   text-align: center;
 }
 
 .center .sub_title {
   color: white;
   font-size: 57px;
   font-weight: 600;
   text-align: center;
 }
 
 .imm {
   border-radius: 40px;
   text-align: center;
   background-color: #d2dae2;
 }
 
 .aren2 {
   padding: 50px;
   margin: auto;
   text-align: center;
 }
 
 .aren3 {
   padding: 50px;
   text-align: center;
 }
 
 .aren4 {
   padding: 50px;
   text-align: center;
 }
 
 .aren5 {
   padding: 50px;
   text-align: center;
 }
 
 .aren6 {
   padding: 50px;
   text-align: center;
 }
 
 .aren7 {
   padding: 50px;
   text-align: center;
 }
 
 .center .aren {
   color: gray;
   font-size: 25px;
   font-weight: 600;
   padding: 3px;
   color: #ecf0f1;
 }
 
 .center .luqman {
   color: gray;
   font-size: 22px;
   font-weight: 600;
   padding: 3px;
   color: white;
 }
 
 fieldset {
   border-radius: 40px;
   background-color: white;
   font-weight: 800;
   padding: 50px;
 }
 
 li {
   font-wight: bold;
 }
 
 .center .aren9 {
   padding: 50p;
 }
 
 .qwe {
   padding: 20px;
   width: 300px;
   height: 300px;
 }
 
 .qwe2 {
   width: 300px;
   height: 150px;
 }
 
 .aren11 {
   float: left;
   margin-left: 1000px;
   padding: 20px;
 }

 .aren7{
   width: 400px;
   height:350px;
 }


 .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
}

.center .title {
  font-size: 60px;
}

.center .sub_title {
  font-size: 57px;
}

.center .aren {
  font-size: 25px;
  text-align: center;
}

.center .luqman {
  font-size: 22px;
}

@media (max-width: 768px) {
  /* Adjust the styling for screens with a maximum width of 768px */
  .center .title {
    font-size: 20px;
  }

  .center .sub_title {
    font-size: 27px;
  }

  .center .aren {
    font-size: 15px;
  }

  .center .luqman {
    font-size: 15px;
  }
}

/* Rest of your CSS code */

@media (max-width: 480px) {
  .container .content .left-side {
    flex-direction: row;
  }

  .container .content .left-side::before {
    display: none;
  }

  .container .content .right-side {
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .right-side .topic-text {
    text-align: center;
    margin-bottom: 0;
  }
}