.section-body { display: flex; flex-wrap: wrap; max-width: 100%; margin: 0 auto; } .section-wrap img { max-width: 100%; } .scrolling-wrap { width: 70%; float: left; padding-right: 30px; padding-top: 30px; } .fixed-wrap { width: 28%; position: absolute; top: 40px; min-width: 360px; max-width: 300px; z-index: 0; visibility: visible; opacity: 1; padding-left: 20px; display: flex; flex-direction: column; align-items: flex-end; left: 68.6%; } .fixed-wrap.fixed { position: fixed; top: -5px; left: 72.5%; background-color: #fff; z-index: 1; } .tutor { margin-bottom: 25px; } .tutor h2, .tutor h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 35px; line-height: 44px; margin-bottom: 4px; color: #000; margin-bottom: 10px; position: relative; } .tutor h2:after, .tutor h3:after { content: ""; width: 97px; height: 1px; background: #1967d2; position: relative; display: block; margin: 20px 0; } .tutor strong { font-family: "proxima-nova", sans-serif; font-weight: 700; } .tutor p { line-height: 28px; color: #131313; font-size: 18px; padding-bottom: 15px; } .pb20 { padding-bottom: 25px !important; } .tutor h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 26px; line-height: 38px; text-align: left; margin: 10px 0; color: #000; } .tutor ul { padding: 15px 0; } .tutor ul li { line-height: 26px; position: relative; padding-left: 25px; margin-bottom: 10px; } .tutor ul.colorchange li { font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 25px; } .tutor p b, .tutor ul li b { font-family: "proxima-nova", sans-serif; font-weight: 700; } .tutor ul li:after { content: ""; position: absolute; left: 0; top: 8px; height: 8px; width: 8px; border-radius: 50%; background: linear-gradient(45deg, #7963da 0, #7963da 1%, #25619a 99%, #25619a 100%); } .wp-block-code { font-size: 13px; line-height: 1.42857143; word-break: break-all; word-wrap: break-word; border: 1px solid #ccc; border-radius: 4px; padding: 15px 20px; margin-bottom: 20px; color: #bfc7d5; background-color: #292d3e; width: 100%; overflow: hidden; } code { font-family: monospace; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } code span { display: block; } .req-demo { display: block; background-color: #e4f0ff; background: url(../png/sidebar-bg.png) no-repeat; background-size: cover; border-radius: 20px; padding: 20px 25px; box-shadow: 0 0px 20px #3071c633; border: 3px solid #ffffff; border-radius: 20px; } .req-demo h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 19px; line-height: 30px; position: relative; color: #000; padding-bottom: 15px; margin-bottom: 15px; width: 100%; padding-top: 16px; } .req-demo h4:after { content: ""; width: 40px; height: 1px; background: #000; position: absolute; bottom: 0; display: block; margin: 0 auto 0; } .req-demo p { line-height: 26px; color: #131313; font-size: 16px; padding-bottom: 15px; } .req-demo ul li { line-height: 26px; color: #000; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 30px; position: relative; padding-left: 25px; margin-bottom: 5px; } .req-demo .colorchange li svg { top: 10px; } .req-demo ul li:after { content: ""; position: absolute; left: 0; top: 8px; height: 8px; width: 8px; border-radius: 50%; background: linear-gradient(45deg, #7963da 0, #7963da 1%, #25619a 99%, #25619a 100%); } .req-demo a, .signup-button { background: #ff0935; border-radius: 3px; transition: all ease 0.4s; padding: 8px 0; margin: 0 5px; min-width: 175px; display: inline-block; text-align: center; color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 18px; line-height: 30px; box-shadow: 8px 8px 32px 0 rgb(5 122 171 / 43%); } .req-demo a:hover, .signup-button:hover { box-shadow: 0 5px 12px 0 rgb(163 165 171 / 40%); } .signup-button { margin-bottom: 40px; } .caution-msg, .note-message { padding: 10px 10px; background-color: #f6c5a0; margin: 10px 0; font-size: 16px; border-radius: 4px; } .note-message { background-color: #efefd1; font-family: "proxima-nova", sans-serif; font-weight: 600; border-left: 3px solid #3806f5; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-bottom: 20px; } .note-desc { background-color: #f4f6a0; padding: 10px; border-radius: 3px; margin-bottom: 20px; } .colorchange li svg { position: absolute; left: 0; top: 6px; width: 20px; } .arrowbottom-animate { transition: 0.5s; } .colorchange li { position: relative; transition: 0.5s; } .colorchange li::after { display: none; } .colorchange li:hover .arrowbottom-animate { transform: translate(3px, 0); transition: 0.5s; } .colorchange li:hover { padding-left: 28px; } .tutor h5 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 30px; margin: 10px 0; } ul.tutor-inner-list { padding: 5px 0 0 0; } ul.tutor-inner-list li:hover { padding-left: 0; } ul.tutor-inner-list li { padding-left: 0; } code span { font-family: monospace !important; } table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed } .tutor-table { border-left: 1px solid #222; border-bottom: 1px solid #222; width: 100%; overflow: hidden; overflow-x: scroll; -webkit-box-shadow: 10px 13px 36px 0 rgb(67 94 224 / 9%); box-shadow: 10px 13px 36px 0 rgb(67 94 224 / 9%) } .tutor-table tr { border-top: 1px solid #222 } .req-demo ul { padding-left: 8px; padding-bottom: 15px } .tutor-table tr th { padding: 5px 10px; text-align: left; border-right: 1px solid #222; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; text-align: center } .tutor ul { padding-left: 20px } .tutor-table tr td { word-break: break-word; padding: 5px 10px; border-right: 1px solid #222; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 25px } thead tr:first-child { background-color: #7397f5; text-align: center; color: #fff } span.btn-arrow { position: absolute; bottom: 8px; } .sidebar-butn-wrapper { display: inline-block; position: relative; } @media(max-width:640px) { .tutor ul li { padding-left: 0 } } /*  table css */ /* Responsive css */ @media screen and (min-width: 1920px) { .fixed-wrap.fixed { position: sticky; right: 0px; top: 85px; height: 400px; } } @media screen and (max-width: 1920px) { .fixed-wrap.fixed { left: 65.6%; } } @media screen and (max-width: 1800px) { .fixed-wrap.fixed { left: 66.6%; } } @media screen and (max-width: 1700px) { .fixed-wrap.fixed { left: 66.6%; } } @media screen and (max-width: 1600px) { .fixed-wrap.fixed { left: 66.3%; } .fixed-wrap { left: 69.6%; } } @media screen and (max-width: 1440px) { .fixed-wrap.fixed { left: 70.9%; } } @media screen and (max-width: 1366px) { .fixed-wrap.fixed { left: 72.3%; } .fixed-wrap { left: 67.5%; } } @media screen and (max-width: 1280px) { .fixed-wrap.fixed { left: 67.5%; } } @media screen and (max-width: 1300px) { .scrolling-wrap { padding-left: 30px; } } @media screen and (max-width: 1200px) { .scrolling-wrap { width: 65%; } .fixed-wrap.fixed { left: 70%; } .tutorialpage-banner { margin-top: 70px; } } @media screen and (max-width: 1024px) { .tutor h2 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 29px; } .tutor h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 29px; } .tutor p { font-size: 16px; line-height: 28px; } .banner-wrapper h1 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 30px; line-height: 40px; } .fixed-wrap.fixed { left: 69%; } .scrolling-wrap { padding-left: 0; } .wp-block-code { overflow-x: scroll; } } @media screen and (max-width: 899px) { .new-sticky { display: block; } .new-sticky ul li { display: flex; align-items: center; justify-content: center; padding: 6px 20px; background: #f5f5f5; } .tutorialpage-banner { margin-top: 48px; } .fixed-wrap { display: none; } .section-body { flex-direction: column-reverse; } .fixed-wrap .req-demo { padding-bottom: 0; } .scrolling-wrap { padding-right: 0; width: 100%; } .wp-block-code { overflow-x: auto; } .heading h4 { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 14px; line-height: 26px; padding: 0 10px; } .tutor h2, .tutor h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 33px; } } @media screen and (max-width: 768px) { .tutorialpage-banner { margin-top: 60px; } } @media screen and (max-width: 580px) { table { border: 0; } table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { border-bottom: 1px solid #222; display: block; margin-bottom: 20px; } table td { border-bottom: 1px solid #222; display: block; } table td::before { content: attr(data-label); float: left; font-weight: 700; width: 100%; } table td:last-child { border-bottom: 0; } .tutor-table { border-left: none; border-bottom: none; } .tutor-table tr { border-top: 1px solid #222; border-left: 1px solid #222; } } @media screen and (max-width: 768px) { .colorchange li svg { position: absolute; left: -25px; } .tutor ul { padding: 0 15px 0 25px; } img.tutorialimage-one { width: 100%; height: auto; } }