@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");

:root{
   --main-color:#E6392D;
   --black:#000;
   --white:#fff;
   --bg: #fff5f5;
   --light-black:#4B4B4B;
}

*{
   font-family: 'Poppins', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none; text-decoration: none;
   transition: .2s linear;
}




/*------------ Banner ------------*/
.home{
   padding: 0;
}

.home .about-banner{
   background: url(../images/abous_us_page/banner2.png) no-repeat;
   height: 65vh;
   padding: 2rem;
   display: flex;
   align-items: center;
   background-size: cover !important;
   background-position: center !important;
   gap:5rem;
}

.home .about-banner .content{
   display: flex;
   flex-direction: column;
   gap:1rem;
}

.home  .about-banner .content h3{
   font-size: 2rem;
   color: var(--white);
}

.home .about-banner .content h1{
   font-size: 5rem;
   color: var(--white);
   font-weight: 700;
   text-transform: uppercase;
}

/*------------ about main------------*/

.about_section{
  padding: 3rem 0;
}
.about_section h2{
    text-align: center;
    color: var(--main-color);
   text-transform: uppercase;
   margin-bottom: 4rem;
   margin-top: 2rem;
   font-size: 3rem;
}


.about_section  h2:after {
   content:''; 
   display:block; 
   width:10rem; 
   height:3px; 
   background:var(--main-color); 
   margin:0 auto; 
   margin-top:15px; 
   border-radius:3px;
 }
 


.about_section .row{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    text-align: start;
 }
 
 .about_section .row .content{
    flex: 1 1 30rem;
 }
 

 .about_section .row .content p{
    font-size: 1.6rem;
    color: var(--light-black);
    line-height: 2;
    text-indent: 4rem;
 }
 
 
 

 /*------------ vision ------------*/

.vision{
   padding: 5rem 0;
   background-color: var(--bg);
}

 .about_vision h2{
   color: var(--main-color);
  text-transform: uppercase;
  font-size: 3rem;
  padding-bottom: 2rem;
}

.about_vision  h2:after {
   content:''; 
   display:block; 
   width:10rem; 
   height:3px; 
   background:var(--main-color); 
   margin:0 0; 
   margin-top:15px; 
   border-radius:3px;
 }
 

.about_vision .row{
   display: flex;
   flex-wrap: wrap;
   gap: 8rem;
}

.about_vision .row .content{
   flex: 1 1 30rem;
}

.about_vision .row .content h3{
   font-size: 3.5rem;
   color: var(--black);
   text-transform: uppercase;
}

.about_vision .row .content p{
   font-size: 1.6rem;
   color: var(--light-black);
   line-height: 2;
}


.about_vision .row .image{
   flex: 1 1 30rem;
}

.about_vision .row .image img{
   width: 100%;
   border-radius: 5px 100px;
}




 /*------------ mission ------------ */

.mission{
   padding: 5rem 0;
   background-color: var(--bg);
}

 .about_mission h2{
   color: var(--main-color);
  text-transform: uppercase;
  font-size: 3rem;
  padding-bottom: 2rem;
}

.about_mission  h2:after {
   content:''; 
   display:block; 
   width:10rem; 
   height:3px; 
   background:var(--main-color); 
   margin:0 0; 
   margin-top:15px; 
   border-radius:3px;
 }

.about_mission .row{
   display: flex;
   flex-wrap: wrap-reverse;
   gap: 8rem;
}

.about_mission .row .content{
   flex: 1 1 30rem;
}

.about_mission .row .content h3{
   font-size: 3.5rem;
   color: var(--black);
   text-transform: uppercase;
}

.about_mission .row .content p{
   font-size: 1.6rem;
   color: var(--light-black);
   line-height: 2;
}


.about_mission .row .image{
   flex: 1 1 30rem;
}

.about_mission .row .image img{
   width: 100%;
   border-radius: 100px 5px;
}



/*------------ table ------------*/ 

.machine_detail{
   padding: 3rem 0;
}

 .machine_detail h2{
   text-align: center;
    color: var(--main-color);
   text-transform: uppercase;
   margin-bottom: 4rem;
   margin-top: 2rem;
   font-size: 3rem;
}


.machine_detail h2:after {
   content:''; 
   display:block; 
   width:10rem; 
   height:3px; 
   background:var(--main-color); 
   margin:0 auto; 
   margin-top:15px; 
   border-radius:3px;
}


.machine_detail .table {
   width: 100%;
   border-collapse: collapse;
 }
 
 .machine_detail .table td,
 .table th {
   padding: 20px 20px;
   border: 1px solid var(--light-black);
   text-align: center;
   font-size: 16px;
 }
 
.machine_detail .table th {
   background-color: var(--main-color);
   color: #ffffff;
 }
 
.machine_detail .table tbody tr:nth-child(even) {
   background-color: var(--bg);
 }
 
 /*------------ responsive ------------*/

 @media (max-width: 770px) {
	.about_section .row .content p{
      text-indent: 0;
   }
   

   
}
 
 @media (max-width: 500px) {
  .machine_detail .table thead {
     display: none;
   }
 
   .machine_detail .table,
   .table tbody,
   .table tr,
   .table td {
     display: block;
     width: 100%;
   }
   .machine_detail.table tr {
     margin-bottom: 15px;
   }
  .machine_detail .table td {
     padding-left: 50%;
     text-align: left;
     position: relative;
   }
  .machine_detail .table td::before {
     content: attr(data-label);
     position: absolute;
     left: 0;
     width: 50%;
     padding-left: 15px;
     font-size: 15px;
     font-weight: bold;
     text-align: left;
   }
 }
 
 @media (max-width: 442px) {
	
   .home .about-banner .content h1{
    font-size: 4rem;
    
  }
   
}