.about-container{padding: 15px 100px;display: grid;gap: 15px;}
.about-main{background-color: #fff;width: 100%;padding-top: var(--header-height);overflow-x: hidden;}
.about-hero-section{width: 100%;height: 100%;overflow: hidden;background: var(--color-brand1);}
.skewdiv{display: flex;position: absolute;width: 100%;height: 100%;overflow: hidden;z-index: 0;}
.skewdiv::after{content: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 138' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 137.5L1440 26.5V0.5H0V137.5Z' fill='%23445E7E'/%3E%3C/svg%3E%0A");position: absolute;right: 0;top: -10px;width: 100%;height: auto;}
.about-hero-section-img{position: relative;width: 100%;height: 120px;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;}
.about-hero-section-img::after{position: absolute;content: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='12' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3Crect y='64' width='72' height='12' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3Crect x='14' y='32' width='58' height='12' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3C/svg%3E%0A");width: 50px;height: 50px;right: 0;top: 50%;transform: translateY(-50%);}
.about-hero-section-img::before{position: absolute;content: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 76' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='12' transform='matrix(-1 0 0 1 72 0)' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3Crect width='72' height='12' transform='matrix(-1 0 0 1 72 64)' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3Crect width='58' height='12' transform='matrix(-1 0 0 1 58 32)' fill='%23D9D9D9' fill-opacity='0.08'/%3E%3C/svg%3E%0A");width: 50px;height: 50px;left: 0;top: 50%;transform: translateY(-50%);}
.about-hero-section-img .txt h2{color: #fff;}
.about-main-div{width: 100%;min-height: 200px;background-color: #fff;border-radius: var(--border-radius-sm);overflow: hidden;box-shadow: 0 0 25px 8px #00000011;padding: 50px;display: flex;flex-direction: column;gap: 10px;}

.rule-accordion {background-color: var(--color-brand1);color: #fff;cursor: pointer;padding: 18px;width: 100%;border: none;outline: none;text-align:right;font-size: 17px;font-weight: 600;transition: 0.5s;border-top-right-radius: 10px;border-top-left-radius: 10px;}
.showRule, .rule-accordion:hover {background-color:var(--color-brand1-hover);}
.rule-card {font-size:15px;font-weight: 600;padding: 0 18px;background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.5s ease-out;}
.rule-card ul {padding: 10px;}
.rule-card ul>li {padding: 10px;}
.exception-color{color:var(--color-brand2);}
@media screen and (max-width: 1300px) {
  .about-container{padding: 15px 50px;}
}
@media screen and (max-width: 1024px) {
  .about-container{padding: 15px 25px;}
  .about-main-div{padding: 25px}
}

@media screen and (max-width: 480px) {
  .about-container{padding: 15px;}
  .about-main-div{padding: 15px}
  .about-hero-section-img .txt h2{font-size: 15px;}
}