﻿.about-us-page *, .about-us-page *::before, .about-us-page *::after{box-sizing: border-box;}
.about-us-page{position:relative; top: 0px; left: 0px; width: 100%; height: auto; box-sizing: border-box; display:grid; grid-template-columns: 1fr; grid-gap: 24px; grid-template-rows: max-content; overflow:hidden;}
.about-us-page img{position:relative; top: 0px; width: 100%; height:auto; min-height: 100%; object-fit:cover; object-position: center; display: block; border-radius: 8px;}
.about-us-page h2{position:relative; top: 0px; left: 0px; width: 100%; height: auto; text-align: justify; text-transform: capitalize;}
.about-us-page p{position:relative; top: 0px; left: 0px; width: 100%; height: auto; text-align: justify;  color: rgba(0,0,0,0.7);}
.about-us-page > *{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow:hidden;}
.about-us-item{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; border-radius: 8px; display: grid; grid-template-columns: 1fr; grid-gap: 24px; align-content:start; align-items: start;}
.about-us-item > *{position:relative; top: 0px; left: 0px; width: 100%; overflow:hidden;}
.about-us-item .aui-title{position:relative; top: 0px; left: 0px; width:max-content; height: auto; padding: 0px 0px 5px 0px; margin: 0px auto; text-transform: uppercase; color: #af998b; font-weight: 500;}
.about-us-item .aui-title:after{content: ""; position:absolute; top: auto; left: 50%; bottom: 0px; width: 50%; height: 1px; transform:translateX(-50%); background-color: #af998b;}
.about-us-item .aui-body{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; border-radius: 8px;}
        
.about-us-item:first-child .aui-body{grid-template-columns:repeat(2, 1fr); background-color: #f9faf5;}
.about-us-item:first-child img{aspect-ratio: 19/6;}
.about-us-item:first-child .aui-title{margin: 0px; color: #af998b;}
.about-us-item:first-child .aui-title:after{left: 0px; width: 70%; transform: translateX(0px);}

.about-us-item:not(:first-child) .aui-body{padding: 0px;}
.about-us-item:not(:first-child){grid-template-columns: 1fr;}
.about-us-item:not(:first-child) .aui-title{color: unset; font-size: 20px; font-weight: 700;}

.about-us-item:nth-child(2) .aui-body{background-color: #f5f1ee;}
.about-us-item:nth-child(2) .aui-body > div{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; overflow:hidden; padding: 24px; margin: 0px; display:grid; grid-template-columns: max-content 1fr; grid-template-rows: max-content 1fr; grid-column-gap: 24px; grid-row-gap: 5px;}
.about-us-item:nth-child(2) .aui-body > div img{width: 50px !important; height: 50px !important; grid-row:span 2; min-height: unset; object-fit:contain; max-height: 100%;}
.about-us-item:nth-child(2) .aui-body > div label{font-weight: 600; text-transform: uppercase;}
.about-us-item:nth-child(2) .aui-body > div p{margin: 0px; color: rgba(0,0,0,0.7);}

.about-us-item:nth-child(3) .aui-body{grid-template-columns: 1fr 1fr;}
.about-us-item:nth-child(3) .aui-body > div{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; overflow:hidden; background-color: #f5f2ed; border-radius: 8px; padding: 24px; margin: 0px; display:grid; grid-template-columns: max-content 1fr; grid-template-rows: max-content max-content 1fr; grid-column-gap: 24px; grid-row-gap: 5px;}
.about-us-item:nth-child(3) .aui-body > div img:first-child{width: 200px !important; height: auto; min-height: 100%; max-height: 100%; grid-row:span 3;}
.about-us-item:nth-child(3) .aui-body > div img:nth-child(2){width: 50px !important; height: 50px !important; margin: unset; object-fit:contain;}
.about-us-item:nth-child(3) .aui-body > div label{font-weight: 600; text-transform: uppercase;}
.about-us-item:nth-child(3) .aui-body > div p{margin: 0px; color: rgba(0,0,0,0.7);}

.about-us-item:nth-child(4) .aui-body > div{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; overflow:hidden; background-color: rgb(20, 83, 45); border-radius: 8px; color: #fff; padding: 24px; margin: 0px; display:grid; grid-template-columns: max-content 1fr; grid-template-rows: max-content 1fr; grid-column-gap: 24px; grid-row-gap: 5px;}
.about-us-item:nth-child(4) .aui-body > div img{width: 50px !important; height: 50px !important; grid-row:span 2; min-height: unset; min-width: unset;}
.about-us-item:nth-child(4) .aui-body > div label{font-weight: 600; text-transform: uppercase;}
.about-us-item:nth-child(4) .aui-body > div p{margin: 0px; color: rgba(255, 255, 255, 0.7);}

@media (max-width: 1024px) {
    .about-us-item > .aui-body{grid-template-columns: 1fr !important;}
}

@media (max-width: 600px) {
    .about-us-item:nth-child(3) .aui-body > div{grid-template-columns: 1fr;}
    .about-us-item:nth-child(3) .aui-body > div img:first-child{width: 100% !important; height: auto; aspect-ratio: 16/9; grid-row: unset;}
}
@media (max-width: 450px) {
    .about-us-item:first-child .aui-body{padding: 16px;}
    .about-us-item:nth-child(2) .aui-body > div{grid-template-columns: 1fr; padding: 16px;}
    .about-us-item:nth-child(2) .aui-body > div > img{margin: 0px;}
    .about-us-item:nth-child(3) .aui-body > div{padding: 16px; grid-row-gap: 5px;}
    .about-us-item:nth-child(4) .aui-body > div{grid-template-columns: 1fr; padding: 16px;}
    .about-us-item:nth-child(4) .aui-body > div img{grid-row: unset; margin: 0px;}
}