html, body{ scroll-behavior: smooth; } .tipsSec{ padding: 44px 0 99px; } .tipsContent{ max-width: 1002px; border: 1px solid #EEEEEE; padding: 45px 45px 37px; min-height: 562px; } .tipsSec h1{ font-weight: 600; font-size: 34px; line-height: 120.19%; color: #000000; padding-bottom: 22px; border-bottom: 1px dashed rgba(162, 161, 154, 0.82); margin-bottom: 32px; } .tipsContent p{ margin-top: 16px; font-size: 16px; line-height: 150.19%; color: #000000; } .tipsContent p:first-child{ padding-left: 20px; } .tipsContent h2{ font-size: 25px; font-weight: 600; margin: 27px 0 0px; line-height: normal; } .tipsContent h3{ font-size: 20px; font-weight: 600; margin: 27px 0 0px; line-height: normal; } .tipsContent ul{ padding-left: 20px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-around; list-style: none; row-gap: 6px; } .tipsContent ul li{ width: 26%; } .tipsContent ul li::before { content: ''; background-image: url(../svg/tick-2.svg); position: relative; width: 19px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; margin-right: 20px; } .tipsContent a{ color:#0052C2; font-weight: 500; } .tipsContent a:hover{ text-decoration: underline; } .usecase-Wraper { display: flex; gap: 56px; } .usecase-left { max-width: 254px; width: 100%; flex: 0 0 254px; position: sticky; top: 110px; align-self: start; } .sidebarHead { font-style: normal; font-weight: 600; font-size: 13px; line-height: 16px; color: #222222; margin-bottom: 22px; display: flex; align-items: center; gap: 7px; } .desk { display: block; } .mob { display: none; } .usecase-Wraper .usecase-left ul, .usecase-Wraper .topicList { text-decoration: none; list-style: none; } .usecase-left ul li + li { margin-top: 22px; } .usecase-left ul li span { font-style: normal; font-weight: 400; font-size: 13px; line-height: 16px; color: #595959; } .usecase-left ul li.active span { color: #05ADA3; pointer-events: none; font-weight: 600; } .ctaBtn { max-width: 202px; width: 100%; height: 34px; display: flex; align-items: center; font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.03em; color: #FFFFFF!important; background: linear-gradient(180deg, #24C7BD 0%, #046761 100%); border-radius: 3px; margin: 35px 0 0; gap: 4px; justify-content: center; text-decoration: none; } .desk-flex { display: flex; } .ctaBtn:hover { background: #019990; } .usecase-right { max-width: 775px; width: 100%; } .tipsContent img { width: 100%; } .tipsContent .content img.toolsImg { max-width: 683px; width: 100%; max-height: 403px; height: 100%; } .tipsContent .content img.filledDetails { max-width: 683px; width: 100%; max-height: 403px; height: 100%; } .usecase-left ul li span:hover { color: #222222; } .commonQues p { padding-bottom: 20px; border-bottom: 1px solid #EEEEEE; } .commonQues p:last-child{ padding-bottom: 0; border-bottom: none; } .lazyImg { display: none; } .skeleton { background-size: 200px 100%; background-repeat: no-repeat; line-height: 1; width: 100%; height: inherit; animation: SkeletonLoading 1s ease-in-out infinite; background-color: #f3f3f3; background-image: linear-gradient(90deg, #f3f3f3, #ededee, #f3f3f3); } @keyframes SkeletonLoading { 0% { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } } @media (max-width:1199px) { .usecase-Wraper{ flex-wrap: wrap; justify-content: center; } .usecase-left{ display: none; } } @media(max-width:786px){ .tipsContent img{ display: block; width: 100%; } .tipsSec h1 { font-weight: 600; font-size: 22px; } .tipsContent h2{ font-size: 20px; margin: 20px 0 0px; } .tipsContent h3{ font-size: 18px; margin: 20px 0 0px; } .tipsContent ul li, .tipsContent p{ margin-top: 15px; font-size: 15px; font-weight: 400; } .tipsContent { border: none; padding: 0; } .tipsContent ul li + li{ margin-top: 12px; } }