.crumbs { overflow-x: scroll; max-width: 760px; margin-bottom: 24px; white-space: nowrap; padding-bottom: 8px; } .crumbs::-webkit-scrollbar { width: 2px; height: 8px; cursor: pointer; } .crumbs::-webkit-scrollbar{ width:5px; max-height:5px } .crumbs::-webkit-scrollbar-track{ background:#e5e5e5 } .crumbs::-webkit-scrollbar-thumb{ background:#05ada3; border-radius:4px } .BreadcrumbList { display: flex; width: 100%; } .BreadcrumbList p { margin-bottom: 10px; margin-top: 0; } .BreadcrumbList p { font-weight: 400; font-size: 15px; line-height: 18px; } .BreadcrumbList p a { margin-right: 20px; position: relative; } .BreadcrumbList p a:hover { color: #05ADA3; text-decoration: underline; } .BreadcrumbList a { color: #333; } .BreadcrumbList span { font-size: 18px; margin: 0 15px; color: #bbb; display: none; } .BreadcrumbList p a::after { content: ""; position: absolute; right: -17px; top: 4px; background-image: url(../png/double_arrow.png); width: 13px; height: 13px; background-repeat: no-repeat; } .related { padding: 35px 0; } .relatedWraper { display: flex; align-items: flex-start; justify-content: space-between; } .blog-pWraper { max-width: 68%; width: 100%; } .bolg-p { background: #FFFFFF; box-shadow: 0px 4px 16px rgb(0 0 0 / 10%); border-radius: 5px; padding: 34px 50px 40px; max-width: 792px; width: 100%; } .headingWrapper { display: flex; justify-content: space-between; gap: 15px; } h1.text-left { font-weight: 700; font-size: 30px; line-height: 38px; color: #01305C; } .docDownload { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; background: #05ada3; border: 1px solid #05ada3; border-radius: 7px; height: 100%; transition: all ease .2s; display: none; } .bolg-p a { font-weight: 400; color: #2F2F31; } .downBtnText { font-weight: 500; font-size: 15px; line-height: 19px; color: #FFFFFF; } .docDownload:hover { background: #019990; border: 1px solid #019990; } .main-sidebar { width: 100%; max-width: 313px; position: sticky; top: 120px; left: 0; } .subject_detail { position: sticky; top: 120px; left: 0; height: 535px; border-radius: 13.406px; padding: 22px; border: 1.3406px dashed #75B2E6; box-shadow: 4.02179px 9.38417px 25.4713px 1.3406px rgb(75 97 113 / 13%); } .singleSubject { background: #FFFFFF; padding: 32px 20px 20px 20px; width: 100%; max-width: 293px; max-height: 465px; overflow-y: scroll; } .subject_link:hover{ color: #019990; } .subhead { font-style: normal; font-weight: 700; font-size: 28px; line-height: 35px; color: #1a202e; padding-bottom: 12px; text-align: center; } .subjectwraper { padding-bottom: 18px; display: flex; justify-content: space-between; } .subject { font-style: normal; font-weight: 450; font-size: 16px; line-height: 23px; color: #585858; display: inline-block; text-underline-offset: 3px; width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subject_link { text-decoration: underline; color: #2F2F31; } .singleSubject span { font-style: normal; font-weight: 400; font-size: 16px; line-height: 23px; color: #B4B4B4; } .singleSubject::-webkit-scrollbar { width: 5px; max-height: 5px } .singleSubject::-webkit-scrollbar-track { background: #e5e5e5 } .singleSubject::-webkit-scrollbar-thumb { background: #019990; border-radius: 4px } .bolg-p p, .bolg-p li { font-style: normal; margin-top: 35px; font-weight: 400; font-size: 19px; line-height: 188.5%; color: #2F2F31; } .bolg-p h2 { margin: 20px 0 10px; font-size: 23px; font-weight: 600; line-height: 32px; } .bolg-p ul, .bolg-p ol{ padding-left: 40px; } .noStyle{ list-style: none; } .cta-example{ margin-top: 20px; padding: 17px 20px; border: 1px solid transparent; background: linear-gradient(to right, white, white), linear-gradient(180deg, #24C7BD 0%, #046761 100%), #FFFFFF; background-clip: padding-box, border-box; background-origin: padding-box, border-box; border-radius: 5px; position: relative; } .cta-example::after{ content: ""; background-image: url(../svg/cta-icon.svg); width: 56px; height: 53px; display: block; position: absolute; bottom: 17px; right: 20px; } .cta-example p{ color: #1E2532; font-size: 14px; font-style: normal; font-weight: 400; line-height: 160%; /* 22.4px */ padding-bottom:22px; margin-top: 0; max-width: 90%; } .cta-example p.cta-link{ color: #1E2532; font-size: 15px; font-style: normal; font-weight: 500; line-height: 150%; /* 22.5px */ padding-bottom:0px; } .cta-example p.cta-link a{ text-decoration: underline; text-underline-offset: 4px; } .cta-example p.cta-link a:hover{ color: #05ADA3; } @media (max-width:1200px) { .blog-pWraper { max-width: 64%; } .bolg-p { padding: 60px 30px 30px; flex-basis: 70%; max-width: 100%; } .subject_detail { flex-wrap: wrap; } .singleSubject { margin-bottom: 15px; max-width: 300px; } .subject_detail { flex-wrap: wrap; } } @media (max-width:991px) { .blog-pWraper { max-width: 100%; } .relatedWraper { flex-direction: column; } .main-sidebar { margin: 30px auto 0; } } @media (max-width: 767px){ .BreadcrumbList p { font-size: 14px; margin-bottom: 12px; } h1.text-left { font-size: 26px; line-height: 32px; } .subject_detail { justify-content: center; } } @media (max-width: 575px){ h1.text-left { font-size: 19px; line-height: 23px; padding-bottom: 18px; } .relatedWraper p, .relatedWraper li { font-size: 17px; line-height: 191.5%; margin-top: 25px; } .relatedWraper h2, .relatedWraper h3, .relatedWraper h4 { margin: 19px 0 10px; font-size: 22px; } .subject { font-size: 16px; line-height: 20px; margin-top: 0!important; } .singleSubject { padding: 30px; } .singleSubject { max-width: 345px; } .cta-example p { font-size: 14px; padding-bottom: 15px; margin-top: 0; } .cta-example { margin-top: 20px; padding: 14px 15px; } .cta-example p.cta-link { font-size: 14px; } .cta-example::after { width: 54px; height: 49px; background-size: contain; background-repeat: no-repeat; bottom: 14px; right: 15px; } }