section[data-cattype="604"].wrapper_middle { padding-top: 150px; } [data-cattype="604"] h2 { font-size: 2.5em; color: #fb9202; } [data-cattype="604"] h4{ font-weight: bold; font-size: 20px; } [data-cattype="604"] ul.box { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 80px; padding: 0; } [data-cattype="604"] ul.box li{ width: calc(26% - 20px); text-align: center; list-style:none; padding: 20px; transition: 0.3s; } [data-cattype="604"] ul.box li:hover{ background-color: #ccc !important; transition: 0.3s; } [data-cattype="604"] ul.box li:nth-child(2n+1) { background-color: #fff; border: 1px solid #fb9201; margin: -60px -1px 0px -1px; border-radius: 40px 0px 0px 0px; } [data-cattype="604"] ul.box li:nth-child(even){ background-color: #e6e6e6; border: 1px solid #e6e6e6; margin-bottom: -60px; border-radius: 0px 0px 40px 0px; } [data-cattype="604"] .icon img { width: 70px; margin: auto; } [data-cattype="604"] .icon { border-radius: 50%; background-color: #fff; width: 70px; padding: 12px; margin: auto auto 10px auto; } [data-cattype="604"] .video-bg { transition: 1s; width: 100%; top: 15%; right: 0; height: 100vh; position: absolute; z-index: -1; overflow: hidden; border-radius: 3% !important; } [data-cattype="604"] .sphere-big-medium { width: 90% !important; position: absolute; right: 0 !important; top: 16% !important; border-radius: 5% !important; height: 1500px !important; z-index: -1; transition: 1s; overflow: hidden; } [data-cattype="604"] .sphere-medium { width: 70% !important; position: absolute; right: 0 !important; top: 18% !important; border-radius: 10% !important; height: 1500px !important; z-index: -1; transition: 1s; overflow: hidden; } [data-cattype="604"] .sphere-small { width: 50% !important; position: absolute; right: 0 !important; top: 20% !important; border-radius: 20% !important; height: 1200px !important; z-index: -1; transition: 1s; overflow: hidden; } [data-cattype="604"] .sphere { overflow: hidden; width: 1000px !important; position: absolute; right: -200px !important; top: 260px !important; border-radius: 50% !important; height: 1000px !important; z-index: -1; transition: 1s; } [data-cattype="604"] .sphere-border { position: absolute; background-color: #fb9201; height: 1000px; width: 1000px; position: absolute; right: -197px; top: 266px; border-radius: 50%; z-index: -2; } @media (min-width: 1350px) and (max-width: 1750px) { [data-cattype="604"] .sphere { width: 800px; border-radius: 50%; height: 800px; } [data-cattype="604"] .sphere-border { height: 800px; width: 800px; } [data-cattype="604"] .sphere { top: 300px; } [data-cattype="604"] .sphere-border { top: 316px; } } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="604"].wrapper_middle { padding-left: 10px; padding-right: 10px; } [data-cattype="604"] ul.box{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch !important; margin-top: 60px; } [data-cattype="604"] ul.box li { width: 47% !important; margin: 5px !important; padding: 13px 5px 0px 5px !important; background-color: #e6e6e6 !important; border: 1px solid #fb9201 !important; } [data-cattype="604"] .video-bg, [data-cattype="604"] .sphere, [data-cattype="604"] .sphere-small, [data-cattype="604"] .sphere-medium, [data-cattype="604"] .sphere-big-medium { width: 95% !important; right: 0 !important; top: 0px !important; left: 10px !important; height: 360px !important; border-radius: 50% !important; overflow: hidden !important; } [data-cattype="604"] video { width: 700px; } [data-cattype="604"] h2 { font-size: 30px; } [data-cattype="604"] h4 { font-size: 17px; } [data-cattype="604"] .sphere-border { height: 360px; width: 360px; left: 4px; top: 0; } [data-cattype="604"] p { font-size: 15px; } [data-cattype="604"] .icon { width: 50px; } }