@font-face {
         font-family: 'Shabnam';
         src: url('../font/Shabnam.woff2') format('woff2'),
         url('../font/Shabnam.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
     }



.cathodic {
    height: 470px;
    display: flex; 
    justify-content: center;   
    align-items: center;
}

.columns-wrapper {
    display: flex;
    justify-content: space-between;
    
}
.columns-wrapper > .column {
    padding: 20px;
    width: 370px;
    border-bottom: 5px solid transparent;
    border-radius: 6px;
}

.columns-wrapper > .column > h2 {
    font-family:"Shabnam" ;
    background-color:#444444;
    text-align: center;
    border-radius: 4px;
    transition: 1s;
    color: #EB8C23;
    margin: 2px;
    border: 1px solid #a05010;   
}

.columns-wrapper > .column > h2:hover {
    border: 1px solid #a05010;
    text-align: center;
    border-radius: 4px;  
}


.columns-wrapper > .column > p {
    background-color: #bebbb8;
    /* color: #cbcbcb; */
    margin-top: 10px;
    border-radius: 4px;
    padding: 10px;
    text-align: justify;
    transition: 0.5s; 
    border: 1px solid #a05010;   
}

.columns-wrapper > .column > p:hover {
    background-color:  #444444;
    color: #bebbb8;
    margin-top: 10px;
    border-radius: 4px;
    padding: 10px;
    text-align: justify;        
}

.columns-wrapper > .column:hover {
    border-bottom: 5px solid rgba(17,17,43,1);     
}


.design > .design-header {
    display: flex;
    justify-content: right;
    flex-direction: column;
}
.design-header-title {
    font-family: "Shabnam";
    width: max-content;
    padding: 00px 20px;
    color: #EB8C23;
    border-radius: 4px;
    margin-right: 30px;
}

.design-header-title > h2 {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #EB8C23;
}


.design-header-paragraph {
    padding: 10px 30px;
    text-align: justify;
    margin: 5px 30px;
}

.design-squre {
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-top: 30px; 
}

.design-wrapper {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    width: 1200px;    
 }

.design > .design-squre > .design-wrapper > .system {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.design > .design-squre > .design-wrapper > .system h2 {
    background-color:#444444 ;
    color: #EB8C23;
    width: 250px;
    border-radius: 4px;
    text-align: center;  
    margin: 2px;
    border: 1px solid #a05010;  
    
}

.design > .design-squre > .design-wrapper > .system p {
    border: 1px solid #a05010;
    background-color: #bebbb8;
    border-radius: 6px;
    padding: 10px;
    text-align: justify;
    margin-top: 5px;
}
.design > .design-squre > .design-wrapper > .system img {
  width: 600px; 
  margin-top: 20px; 
  border-radius: 10px;
  border: 1px solid #a05010;
}

.equipment {
    margin-top: 40px;
    
}


.euipment-titile {
    display: flex;
    justify-content: right;
    flex-direction: column;

}

.equipment > .euipment-titile > h2 {
    color:#EB8C23 ;
    width: 320px;
    border-radius: 4px;
    text-align: center;
    margin-right: 30px;
    font-family: "Shabnam";
    margin-top: 2px; 
    margin-bottom: 2px;
}
.equipment > .euipment-titile > p {
    padding: 10px 30px;
    text-align: justify; 
    background-color: #bebbb8;
    border: 1px solid #a05010;
    margin: 5px 30px;
    border-radius: 4px;
}


.equipment > .equipment-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
}

.equipment > .equipment-wrapper > .equipment-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
   
}
.equipment > .equipment-wrapper > .equipment-grid > .items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}


.equipment > .equipment-wrapper > .equipment-grid > .items img {
    border-radius: 4px;
    width: 250px;
    height: 300px;
    border: 1px solid #a05010; 
}

.equipment > .equipment-wrapper > .equipment-grid > .items h3 {
   width: max-content;
   padding: 00px 10px;
   border-radius: 4px;
   margin-bottom:5px ;
   text-align: center;
   color: #a05010;
   font-family: "Shabnam";
}

.equipment > .equipment-wrapper > .equipment-grid > .items a {
  text-decoration: none;
 }


.equipment > .equipment-wrapper > .equipment-grid > .items h3:hover {
    width: max-content;
    padding: 00px 10px;
    border-radius: 4px;
    margin-bottom:5px ;
    text-align: center;
    background-color:#ffffff ;
    color: #444444;
    border: 1px solid #a05010;
    font-family: "Shabnam";
 }