.el-hero-section {background-repeat: no-repeat;background-position: center center;background-size: cover;width: 100%;height: 600px;display: flex;align-items: center;position: relative;z-index: 1;}.el-hero-section:before {background-image: url(../../img/square-pattern.png);-webkit-background-size: 20px;background-size: 20px;content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0.8;z-index: -1;}.hero-content {max-width: 50%;}.hero-content .dl-heading {font-size: 62px;line-height: 68px;font-weight: 700;color: #fff;text-transform: uppercase;margin: 0;}.hero-content .dl-heading span {color: #ffaa17;}.hero-content .dl-desc {color: #ddd;margin-top: 10px;}.hero-btn-wrap {display: flex;align-items: center;flex-wrap: wrap;gap: 30px;margin-top: 15px;}.dl-play-btn {width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 1px;font-size: 20px;color: #222429;-webkit-animation: hero-play-btn-ripple 2s linear infinite;animation: hero-play-btn-ripple 2s linear infinite;transition: all 0.3s ease-in-out;}.dl-play-btn:hover {transition: all 0.3s ease-in-out;}.dl-play-btn svg {width: auto;height: 20px;fill: currentColor;}.hero-btn-wrap .dl-el-btn {font-size: 14px;line-height: 1;font-weight: 600;text-transform: uppercase;color: #222429;padding: 16px 36px;}.hero-btn-wrap .dl-el-btn:hover {color: #fff;}@-webkit-keyframes hero-play-btn-ripple {0% {-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.05), 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05);box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.05), 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05);}100% {-webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05), 0px 0px 0px 18px rgba(255, 255, 255, 0);box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05), 0px 0px 0px 18px rgba(255, 255, 255, 0);}}@keyframes hero-play-btn-ripple {0% {-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.05), 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05);box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.05), 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05);}100% {-webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05), 0px 0px 0px 18px rgba(255, 255, 255, 0);box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.05), 0px 0px 0px 12px rgba(255, 255, 255, 0.05), 0px 0px 0px 18px rgba(255, 255, 255, 0);}}.hero-img-wrap {display: none;}@media (min-width: 993px) {.hero-img-wrap {display: block;width: 40%;height: 100%;position: absolute;right: 0;top: 0;}.hero-bg-half {clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);filter: grayscale(100%);background-repeat: no-repeat;background-position: center center;background-size: cover;position: absolute;width: 100%;height: 100%;left: 0;top: 0;}.hero-shape {background-color: #ffaa17;width: 150px;height: 90%;position: absolute;left: 0;top: 50%;transform: translateY(-50%) skew(-14deg, 0deg);}.hero-men {background-repeat: no-repeat;background-position: bottom center;background-size: 100%;width: 500px;height: 570px;position: absolute;left: -110px;bottom: 0;}}