*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Times New Roman", "Times", "Georgia", "serif";
}
html, body{
  margin: 0; padding: 0; width: 100%;
  height: 100%;
  /* overflow-x: hidden !important; */
}

html{
  overflow-y: auto;
  scroll-behavior: smooth;
}
body{
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}
label {
  display: inline-block;
  text-align: left;
}
.w3-animate-top{
  position:relative;
  animation:animatetop 0.4s
}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
}
.error{
  display: inline-block;
  color: red;
}
hr {
align-items: center;
border: 0;
height: 2px;
background-color: #ccc;
margin: 20px 0;
width: 99%;
}
.navbar a {
  display: inline-block;
  position: relative; 
  padding: 10px 20px; 
  text-decoration: none;
  font-size: 20px;
  color: #001F3F;
  font-weight: 500;
}
h1{
  font-size: 350%;
  color: black
}
h2{
  color:#5ad0ff;
  font-size: 200%;
}
.w3-animate-top{
  position: relative;
  animation: animatetop 0.4s;
  font-size: 350%;
  line-height: 95%;
}
.navbar {
  height: 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; 
  top: 0; 
  width: 100%; 
  background-color: white;
  z-index: 1000;
  opacity: 0.95;
  box-shadow: 5px 1px 15px black;
}
.navbar a {
  font-size: 20px;
  color: #001F3F;
  font-weight: 500;
  text-decoration: none;
  padding: 0 30px;
}

.logo {
  display: flex; 
  justify-content: flex-start; 
  height: 60px; 
  margin-left: 10px;
  cursor: pointer;
}
.nav-content {
  flex: 1;
  display: flex;
  justify-content: flex-end; 
  align-items: center;
}
.navbar a:hover {
  opacity: 0.6;
  transform: scale(1.1);
  color: rgb(150, 2, 2);
}
.navbar a:hover::after {
    width: 70%;
}
.navbar a::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 0; 
  height: 2px; 
  background-color: rgba(255, 255, 255, 0.3); 
  
  transition: width 0.3s ease, width 0.3s ease;
  transform: translateX(-50%); 
}
a.active {
  border-radius: 5px; 
  color: #001F3F; 
}
a.active::after {
  width: 50%; 
  height: 3px; 
  background-color: rgba(0, 31, 63, 0.8);
  transition: width 0.3s ease, background-color 0.3s ease;
}
a:hover i{
  transform: scale(1.5);
  box-shadow: 0px 40px 40px rgba(0,0,0,0.2); 
  transform: rotate(360deg);
  cursor: pointer;
}
i{
  transition: all 1s ease-in-out;      
}
.navbar.shrink {
  height:5%; 
}
.wrapper1 {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;  /* Align items to the top */
  text-align: center;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 5px;
  background: linear-gradient(rgb(255, 255, 255) 0%,  rgba(255, 252, 252, 0) 1%, #0251e8 100%);
}
.container1 {
    height: calc(100vh - 130px); /* Allow auto height */
    width: 100%; /* Set width */
    padding: 110px; /* Inner padding */
    /*background: linear-gradient(rgb(65, 46, 233) 0%, rgba(8, 134, 165, 0) 68%, rgba(3, 245, 192, 0.566) 100%); /* Semi-transparent background */
      /* Rounded corners */
     /* Border styling */

}
.content1{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.view_left_top_page{
  width: 95%;
  padding: 10px;
  text-align: left;
  margin: auto;
  margin-left: 60%;
  h1{
    color: #252525;
    text-align: left;
    padding: 5px;
  }
  p{
    color: #211e1e;
    padding: 10px;
    font-size: 17px;
  }
} 
.view_left{
  width: 100%;
  padding: 30px;
  text-align: left;
  h2{
    text-align: left;
    padding: 5px;
    color:#404b57;
  }
  p{
    color: #5e5a5a;
    padding: 10px;
  }
}
.download{
  width: 30%;
  height: auto;
}
  .view_left_top{
    padding:10px;
  }
  .view_left_btm{
    padding: 10px;
    display: flex;
  }
  .view_left_btm2{
    padding: 10px;
    display: flex;
    justify-content: center;
    text-align: center;

  }
  
  .view_right{
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 50px;

  }
.rental{
  max-width: 500px;
  height: auto;
}
.wrapper2 {
  min-height: 100vh; 
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: right;

  background-image:
    linear-gradient(to top, rgba(255, 255, 255, 0), rgb(255, 255, 255)),
    url('rental.webp');
    background-repeat: no-repeat;
    background-size: cover;
}
.container2 {
  height: 70%; 
  width: 75%; 
  padding: 10px; 
  
  border-radius: 25px;
  
  border: 5px solid #009688; 
  background-color: #adcade;
}
.content2{
  display: flex;
}
.wrapper3{
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  height: 100%;
  margin: 0; 
  background-color: rgb(212, 250, 252);
  box-shadow: 0px 10px 15px rgba(10, 10, 10, 0.5);
}
.container3{
  padding:40px;
  width:70%
}
.content3{
  display:flex;
}

.privacy_wrapper{
  margin: 0px auto;
  width:80%;
  flex: 1; 
  
  justify-content: center;
  align-items: center;
  text-align: center;
}
.privacy_container{
  padding: 20px;
  margin: 0px auto;
  width:100%;
  display: flex;
  flex-direction: column;
}
.p_content{
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
 
  padding-bottom: 5px;
  p{
    padding-bottom: 5px;
    font-size: 12px;
    word-wrap: break-word;
  }
  a:hover{
    color: rgb(150, 2, 2);
  }
}
.view_top{
  padding: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 40%;
}
.p_view{
  padding: 5%;
  p{word-wrap: break-word;}
}

.pp{
  margin: auto;
  display: flex;
  a{
    padding-left: 20px;
    padding-right: 20px;
  }
  align-items: center;
}
.c_content{
  width: 100%;
}
/* .ppheader{

} */
.pplinks{
  display: flex;

  justify-content: center;
}

.logo_wrapper{
  padding: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;

}
.content3{
  display: flex;
  flex-direction: columnn;
  padding: 5px;
  justify-content: center;
  img{
    width:55%;
    height:auto;
  }
}
/* .view_item_2{
  padding:20px;
  margin: auto;
} */
.section{
  padding:5px;
}
.review_wrapper {
  height: auto; /* Adjusts height based on content */
  background-color: white;
  padding: 20px;
  margin-bottom: 20px; /* Adds space below */
}

.r_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.r_header{
  padding:5px;
  margin: auto;
}
.r_content{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;

  align-items: center;
  padding: 5%;
  
}
.r_item{
  flex-wrap: wrap;
  gap: 5%;
  display: flex;
  flex-direction: column;
  padding: 20px ;
  border: 1px black solid;
  margin: 5% 3.5%;
  border-radius: 5px;
  height: 40%;
  box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 1); /* Add a shadow effect */
  background-color:white;
  i{
    font-size: 400%;
  }
.r_item.star {
  display: flex;
  flex-direction: row;
}
.star i{
    font-size: 200%;
  }
}
.r_review{
  padding: 15px;
  blockquote{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
  }
}

fieldset {
  height: 100%;
  width: 70%;
  border: 3px none white;
  border-radius: 30px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 2px 2px 55px;
}

/* Input field style */
button {
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/* Button styles */
button.buttonstyle {
  background-color: #2c6ddc;
  font-size: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 150px;
  height: 90px;
  text-align: center;
  margin: 20px 20px;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  
}

button.buttonstyle1 {
  background-color: transparent;
  font-size: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 150px;
  height: 90px;
  text-align: center;
  margin: 20px 20px;
  border-radius: 5px;
  font-weight: bold;
  border: 2px solid #2c6ddc;
  color: #2c6ddc;
  cursor: pointer;
}
button.buttonstyle:hover{
  background-color: #4e80d8;
}
button.buttonstyle1:hover{
  background-color: #2c6ddc;
  color: white;
}

/*Loader style ----------------------------------------------------------------------------------------------------- */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #333333;
  transition: opacity 2.5s, visibility 2.5s;
  z-index: 10000;
}

.loader--hidden {
  opacity: 0;
  visibility: hidden;
}

.loader::before {
  content: "";
  width: 75px;
  height: 75px;
  border: 15px solid #dddddd;
  border-top-color: #009578;
  border-radius: 50%;
  animation: loading 0.75s ease infinite;
}

.loading-text {
  color: #ffffff;
  font-size: 1.2em;
  margin-top: 15px;
}

@keyframes loading {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

/* Slider ---------------------------------------------------------------------------------------------------------- */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.logo-container{
max-height: 600px;
display: flex;
flex-direction: column;
transition: height 0.3s ease-in-out;
padding: 5px;
}
.content{
display: flex;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
filter: brightness(1.2) contrast(1.1); /* Increase brightness and contrast */
border-style: none;
border-radius: 20px;
box-shadow: 0px 10px 15px rgba(10, 10, 10, 0.5);
}
.logos {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0px 0;
  background: white;
  white-space: nowrap;
  position: relative;  
}
.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 25px; /* Adjust size of the ghosting effect */
  height: 100%;
  content: "";
  z-index: 2;
  transition: opacity 0.3s ease-in-out;
}
.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  /* Slightly transparent white gradient */
}
.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  /* Slightly transparent white gradient */
}
/* Add hover effect for smoother ghosting */
.logos:hover:before,
.logos:hover:after {
  opacity: 0; /* Ghost effect fades when hovering */
}

.logos-slide img {
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.logos-slide img:hover {
  background-color: #d2d2d2;
  transform: scale(1.05); /* Scale up and rotate slightly */
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 1); /* Add a shadow effect */
   /* Increase brightness and contrast */
  cursor: pointer;
  border-style: none;
  border-radius: 20px;
}

.logos-slide {
display: inline-block;    /* Ensure it behaves like a single row of items */
white-space: nowrap;      /* Prevent wrapping of items */
animation-iteration-count: infinite;  /* Apply the slide animation */
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}
.car-item {
position: relative;
display: inline-block;
margin: 10px;
}
.car-img {
cursor: pointer;
display: block;
width: 200px;
height: 150px;
padding: 5px;
transition: transform 2.3s ease;
margin: 0px 60px;
}

/*Sign Up -------------------------------------------------------------------------------------------------------*/
/* Sign-up page wrapper */
.su_wrapper {
  min-height: 100vh;
  /* Space for the fixed navbar */
  flex: 1; /* Take remaining space */
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  margin: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: 
  linear-gradient(to bottom, rgba(255, 255, 255,0), rgba(255,255,255,1)),
  url('background.webp');
}

/* Sign-up form container */
.su_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.header{
  padding: 5px;
  text-align: center;
  h2, h2 .fa-sharp {
    color: #06adff
  }
}
/* Form view to divide left and right sections */
.f_view {
  height: 100%;
  width: 30%;
  border: 3px none white;
  border-radius: 30px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 2px 2px 55px;
  display: flex;
  flex-direction: column;
  padding: 5%;
}
.f_bottom{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.f_bottom a{
padding-top: 2%;
}
/* Ensures inputs and buttons fill the available space */
.f_input {
  width: 100%;
}

/* Ensures the form width is 100% */
.su_wrapper form {
  width: 100%;
  margin: 0px 20% 0px;
}
.su_wrapper input {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  font-family: 'Times New Roman', Times, serif;
  background-color: #dcedeb;
  padding: 10px;
  font-size: 15px;
  border-style: none none solid none;
  border-bottom: 2px solid #06adff;
}
.su_wrapper button.buttonstyle1{
margin: 5% 0px 0px;
}

/* Home Page -----------------------------------------------------------------------------------------------------*/
.wrapper12{
  min-height: 100vh;
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  margin: 0;

  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255,0), rgba(255,255,255,1)),
    url('rental.webp');
    background-repeat: no-repeat;
    background-size: cover;
}
.container12{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align:center;
}

/* Reserve Page -----------------------------------------------------------------------------------------------------*/
.reserve_wrapper label{
  display: inline-block;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.reserve_wrapper {
  min-height: 100vh;
  /* Space for the fixed navbar */
  flex: 1; /* Take remaining space */
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  background-image:

  linear-gradient(to bottom, rgba(255, 255, 255,0), rgba(255,255,255,1)),
  url('background.webp');
  background-repeat: no-repeat;
  background-size: cover;
}
/* Sign-up form container */
.reserve_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.reserve_wrapper fieldset{
  width: 50%;
  margin:0 5%;
  padding: 20px;
  background-color: rgb(46, 55, 189);
}

.reserve_info{
  display:flex;
  flex-direction: row;
  width: 100%;
}
.reserve_row{
  display: flex;
  flex-direction: row;
  padding: 5px;
  width: 100%;
}
.reserve_column{
  display: flex;
  flex-direction: column;
  width: 70%;
}
.reserve_column1{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.reserve_item{
  flex: 1;
  margin: 0 5px;
}
/* Form view to divide left and right sections */
.reserve_view {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures the .f_right and .f_left take equal space */
  width: 100%;
}
form{
  width: 100%;
}

.reserve_wrapper input, .reserve_wrapper select {
  
  width: 100%;
  border-radius: 10px;
  border-color: #23f0ff;
  font-family: 'Times New Roman', Times, serif;
  background-color: #dcedeb;
  padding: 10px;
  font-size: 15px;
}
select{
cursor: pointer;
}
.car_chosen{
padding: 10px;
font-size: 20px;
width: 100%;
height: 20%;
cursor:not-allowed;
}
.carbutton {
  background-color: rgb(27, 251, 187);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 99%;
  height: 40px;
  text-align: center;
  margin: 10px 0px;
  border-radius: 5px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  padding: 0px 0px;
  &:hover{
    background-color: rgb(117, 248, 211);
  }
}
.carbutton1 {
  background-color: rgb(27, 251, 187);
  font-size: 20px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 150px;
  height: 90px;
  text-align: center;
  margin: 20px 20px;
  border-radius: 5px;
  font-weight: bold;
  border: 2px solid #2c6ddc;
  color: #2c6ddc;
  cursor: pointer;

  /* background-color: rgb(27, 251, 187);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 99%;
  height: 40px;
  text-align: center;
  margin: 10px 0px;
  border-radius: 5px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  padding: 0px 0px; */
}
.reserve_wrapper button.buttonstyle{
background-color: rgb(27, 251, 187);
color: black;
&:hover{
  background-color: rgb(117, 248, 211);
}
}
.reserve_wrapper label, .reserve_wrapper h1, .reserve_wrapper h2{
    color: white;
}

/* Return Page ------------------------------------------------------------------------------------------------------*/
.ret_wrapper {
  padding-top: 6%;
  min-height: 100vh;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  background-color: rgb(46, 55, 189);
}

.ret_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  
  width:60%;
  margin: auto;
.btm_ret{
  display: flex;
  flex-direction: row;
}  
}
.t_container{
  display: flex;
  flex-direction: row;
  margin-right: 5%;
  margin-left: 5%;
  
  width:60%;
  img{
      width: 45%;

  }
.t_left{
  width: 55%;
}
.t_right{
  text-align: right;
}
}
.ret_wrapper h2{
  padding: 2%;
}
.ret_wrapper span{
  text-align: left;
  color: #cfcfcf;
  line-height: 160%;
}
.ret_container label{
  padding-bottom:2%;
  padding-top:4%;
}

/* About Page -------------------------------------------------------------------------------------------------------*/
.about_wrapper {
  margin-top: 4%;
  height: 50%;
  flex: 1; /* Take remaining space */
  display: flex;
  justify-content: center;
}

.about_wrapper2 {
  margin-top: 4%;
  height: 100%;
  flex: 1; /* Take remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align:center;
}
.about_container1{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 3%;
  width:75%;
  height:90%;
}
.a_left{
  width:60%;
}
.a_right{
  width: 60%;
  text-align: right;
  img{
    width:55%;
  }
}

.a1_left{
  text-align: left;
  width: 60%;
  img{
    width:55%;
  }
}

.a1_right{
  width: 60%;
}

.a2_left{
  width: 60%;
}

.a2_right{
  text-align: right;
  width: 60%;
  img{
    width:60%;
  }
}
.about_wrapper p {
  line-height: 150%;
  font-size: 20px;
}
.about_container2{
padding: 5%;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
img{
  width: 75%;
}
}
.a3_left, .a3_right{
width: 42%;
}

/* Confirm Page ---------------------------------------------------------------------------------------------------------------*/
.c_wrapper{
  padding-top: 6%;
  min-height: 100vh;
  /* Space for the fixed navbar */
  flex: 1; /* Take remaining space */
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  margin: 0;
  background-image:

  linear-gradient(to bottom, rgba(255, 255, 255,0), rgba(255,255,255,1)),
  url('confirm.webp');
  background-repeat: no-repeat;
  background-size: cover;
}
.c_container{
  background-color: #6d7695;
  opacity: 0.75;

  width: 30%;
  border: 1px solid black;
  border-radius: 10px;;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 4%;
}
.c_container_btm{
  justify-content: center;

  text-align: center;
  display: flex;
  flex-direction: row;
}
.c_container img{
  width:30%;
}
@media screen and (max-width: 1100px) {
  body, html
  {
    overflow-x: hidden !important;
  }
}

@media screen and (max-width: 900px) {
  
  .tooltip{
    display: none;
  }
  .nav-content span{
    display: none;
  }
  .view_left_top_page{
    margin-left: 0;
  }
  .r_content{
    flex-direction: column;
  }
  .container3{
    padding: 10px;
    width: 100%;
  }
  .view_item_2{
    font-size: 75%;
  }
  .view_left{
    order:2;
  }
  .view_right{
    img{width: 125%;}
    order: 1;
    padding: 0px;

  }
  .content1{
    flex-direction: column;
  }
  .view_top{
    img{width: 250%;}
  }
  .su_wrapper form {
    margin: 0px;
  }
  .f_view {
    width: 80%;
  }
  .reserve_wrapper fieldset{
    margin: auto;
    width: 90%;
  }
  .reserve_wrapper h1{
    display: none;
  }
  .reserve_wrapper h2{
    font-size: 100%;
  }
  .reserve_wrapper input, .reserve_wrapper select {
    font-size: 80%;
    padding: 0px;

  }.reserve_info, .reserve_row{
    flex-direction: column;
    padding: 0px;
  }
  .carbutton1{
    background-color: rgb(27, 251, 187);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 99%;
    height: 40px;
    text-align: center;
    margin: 10px 0px;
    border-radius: 5px;
    font-weight: bold;
    color: black;
    cursor: pointer;
    padding: 0px 0px;
  }
  .reserve_column{
  width:100%;
  
  }.ret_container{
    width: 80%;
  }
  .pp{
    flex-direction: column;
  }
  .p_content{
    flex-direction: column;
  }
  .top_map, .btm_map{
    flex-direction: column;
    align-items: center;
  }
  .map_wrapper{
    display: row;
  }
  .map_container{
    width: 100%;
  }
  button{
    width: 50%;
  }

  .c_container{
    width: 70%;
  }
  .c_container_btm{
    flex-direction: column;
  }
  .about_wrapper{
    height: 100%;
    margin-top: 18%;
  }
  .about_container1{
    width: 90%;
    padding: 3%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    img{
      width: 95%;
    }
    p{
      font-size: 75%;
      line-height: 160%;
      padding: 1%;
      
    }
    .a_left, .a1_left, .a_right, .a1_right, .a2_left, .a2_right{
      width: 100%;
      height: 100%;
    }
    .a_right, .a1_left, .a2_right{
      text-align: center;
      padding: 1%;
    }
    .a1_left{
      order: 2;
    }
    .a1_left{
      order: 1;
    }
    
  }
  .about_container2{
    flex-direction: row;
    align-items: center;
    img{
      width:100%;
    }
  }
}