section.aboutus { border-radius: 200px; background-color: #0C0C0C; position: relative; margin: -20% 0 0 0; width: calc(100% + 200px); transform: translateX(-100px); }
section.aboutus:before { content: ''; background-color: var(--primarycolor); width: 4px; height: 88px; left: 50%; top: -57px; transform: translateX(-50%); position: absolute; z-index: 3; }
section.aboutus:after { content: ''; position: absolute; left: -30px; top: -30px; width: calc(100% + 60px); height: calc(100% + 60px); border: 2px solid #fff; border-radius: 200px; }
section.aboutus .aboutus-inner { padding: 100px; border: 2px solid #000000; border-radius: 200px; position: relative; background: url(../../assets/image/back-pattern.png) no-repeat center center / cover; z-index: 2; overflow: hidden; }
section.aboutus .aboutus-inner .details-inner > .image { border: 2px solid var(--primarycolor); margin: 90px 0; padding: 20px; border-radius: 20px; }
section.aboutus .aboutus-inner .details-inner > .image img { height: 450px; border-radius: 20px; }
section.aboutus .aboutus-inner .details-inner .title-content-logo .title-content-logo-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
section.aboutus .aboutus-inner .details-inner .title-content.title-content-bottom { margin: 0; }
section.aboutus .aboutus-inner .details-inner .title-content.title-content-bottom .main-title h2 { font-size: clamp(1.5rem, 1.2375rem + 1.3125vw, 2.8125rem); }
section.aboutus .aboutus-inner .details-inner .brandingimage .brandingimage-inner { display: inline-block; padding: 15px 15px; border-radius: 100px; background-color: #292524; }
section.aboutus .aboutus-inner .details-inner .brandingimage .brandingimage-inner img { max-width: 90px; margin: 0 auto; }
section.aboutus .aboutus-sideimages .aboutus-image { position: absolute; bottom: -30px; z-index: 2; }
section.aboutus .aboutus-sideimages .aboutus-image img { max-width: 300px; }
section.aboutus .aboutus-sideimages .aboutus-image.aboutus-image-left { left: -30px; }
section.aboutus .aboutus-sideimages .aboutus-image.aboutus-image-right { right: -30px; }

@media screen and (max-width:1429px) {
    section.aboutus { margin: -30% 0 0 0; }
    section.aboutus .aboutus-inner .details-inner > .image { margin: 30px 0; }
    section.aboutus .aboutus-inner .title-content .content { max-width: 70%; }
}

@media screen and (max-width:1199px) {
    section.aboutus { margin: 110px 0 30px 0; }
    section.aboutus .aboutus-inner .title-content .content { max-width: 90%; }
    section.aboutus .aboutus-inner .details-inner > .image img { height: 350px; }
    section.aboutus .aboutus-inner .details-inner .title-content-logo .title-content-logo-inner { flex-direction: column; gap: 10px; }
}

@media screen and (max-width:767px) {
    section.aboutus .aboutus-inner .title-content .content { max-width: 95%; }
    section.aboutus { border-radius: 20px; width: calc(100% - 30px); transform: none; margin: 100px 15px 0 15px; }
    section.aboutus:after { border-radius: 20px; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
    section.aboutus .aboutus-inner { border-radius: 20px; padding: 50px 0; }
    section.aboutus .aboutus-sideimages { display: none; }
    section.aboutus .aboutus-inner .details-inner > .image img, section.aboutus .aboutus-inner .details-inner > .image { border-radius: 20px; }
}