File: /var/www/html/sarvodayahospital/public/services/onco/scss/custom.scss
$clrGreenDark: #40aace;
$clrGreenDark2: #35b6b4;
$clrGreenLight: #f4fbff;
$clrGreenMid: #40aace;
$clrBlueDark: #008fc5;
$clrBlueLight: #f3f7fb;
$clrBlueLight2: #ebf1f6;
$clrTransparent: rgba(0, 0, 0, 0);
$clrGrey: #848484;
$clrGreyDark: #65788b;
$clrGreyLight: #acacac;
$clrGreyLight2: #f5f8f8;
$clrGreyBlue: #6a8bb2;
$clrRed: #e31837;
$clrOrange: #f58025;
$clrGreen: #9fa617;
$clrBlueDark2: rgba(0, 77, 106, 1);
.clrRed {
color: $clrRed;
}
.clrOrange {
color: $clrOrange;
}
.clrGreen {
color: $clrGreen;
}
.clrBlueDark2 {
color: $clrBlueDark2;
}
.bgOrange {
background-color: $clrOrange;
}
.bgGreen {
background-color: $clrGreen;
}
.bgRed {
background-color: $clrRed;
}
.bgGreyDark {
background-color: $clrGreyDark;
}
.clrBlueDark3 {
color: #3eadda;
}
.clrGreenDark {
color: $clrGreenDark;
}
.clrGreenDark2 {
color: $clrGreenDark2;
}
.clrBlueDark {
color: $clrBlueDark;
}
.bgGreenDark {
background-color: $clrGreenDark;
}
.bgGreenDark2 {
background-color: $clrGreenDark2;
}
.bgGreenMid {
background-color: $clrGreenMid;
}
.bgGreenLight {
background-color: $clrGreenLight;
}
.bgBlueDark {
background-color: $clrBlueDark;
}
.bgBlueLight {
background-color: $clrBlueLight;
}
.bgBlueLight2 {
background-color: $clrBlueLight;
}
.bgGreyLight {
background-color: $clrGreyLight;
}
.bgGreyLight2 {
background-color: $clrGreyLight2;
}
.bgGreyBlue {
background-color: $clrGreyBlue;
}
.bgTransparent {
background-color: $clrTransparent;
}
.bg-white {
background-color: #fff;
}
.clrGreyDark {
color: $clrGreyDark;
}
.clrGrey {
color: $clrGrey;
}
.clrGreyBlue {
color: $clrGreyBlue;
}
.blue-grad {
background: linear-gradient(180deg, #ffffff 28.28%, #94dbff 253.09%);
}
.head-shadow {
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
.bgSmBlueLight {
background-color: $clrBlueLight !important;
}
.bgSmGreenDark2 {
background-color: $clrGreenDark2;
}
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
font-family: "Roboto", sans-serif;
}
p {
font-size: 17px;
}
h2 {
font-size: 44px;
line-height: 30px;
}
h3 {
font-size: 22px;
font-weight: 700;
span {
padding-bottom: 0px;
margin-bottom: 0px;
display: inline-block;
}
}
h4 {
font-size: 18px;
}
.sub-head {
font-size: 17px;
color: $clrGrey;
}
.line-heading {
border-bottom: 1px solid $clrBlueDark;
}
@media (max-width: 768px) {
h2 {
font-size: 22px;
line-height: 16px;
}
h3 {
font-size: 20px;
}
p {
font-size: 15px;
}
}
.fw-300 {
font-weight: 300;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}
.fw-900 {
font-weight: 900;
}
.lh-24 {
line-height: 24px;
}
.lh-19 {
line-height: 19px;
}
.lh-30 {
line-height: 30px;
}
.f-10 {
font-size: 10px;
}
.f-11 {
font-size: 11px;
}
.f-12 {
font-size: 12px;
}
.f-13 {
font-size: 13px;
}
.f-14 {
font-size: 14px;
}
.f-15 {
font-size: 15px;
}
.f-16 {
font-size: 16px;
}
.f-17 {
font-size: 17px;
}
.f-18 {
font-size: 18px;
}
.f-19 {
font-size: 19px;
}
.f-20 {
font-size: 20px;
}
.f-21 {
font-size: 21px;
}
.f-22 {
font-size: 22px;
}
.f-23 {
font-size: 23px;
}
.f-24 {
font-size: 24px;
}
.f-25 {
font-size: 25px;
}
.f-26 {
font-size: 26px;
}
.f-27 {
font-size: 27px;
}
.f-28 {
font-size: 28px;
}
.f-29 {
font-size: 29px;
}
.f-30 {
font-size: 30px;
}
.f-31 {
font-size: 31px;
}
.f-32 {
font-size: 32px;
}
.f-33 {
font-size: 33px;
}
.f-34 {
font-size: 34px;
}
.f-35 {
font-size: 35px;
}
.f-38 {
font-size: 38px;
}
.f-48 {
font-size: 48px;
}
.f-50 {
font-size: 50px;
}
.l-13 {
line-height: 13px;
}
.l-14 {
line-height: 14px;
}
.l-15 {
line-height: 15px;
}
.l-16 {
line-height: 16px;
}
.l-17 {
line-height: 17px;
}
.l-18 {
line-height: 18px;
}
.l-19 {
line-height: 19px;
}
.l-20 {
line-height: 20px;
}
.l-21 {
line-height: 21px;
}
.l-22 {
line-height: 22px;
}
.l-23 {
line-height: 23px;
}
.l-24 {
line-height: 24px;
}
.l-25 {
line-height: 25px;
}
.l-26 {
line-height: 26px;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.no-underline {
text-decoration: none !important;
}
.text-no-wrap {
white-space: nowrap;
}
.text-one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.p-sm-x-0 {
padding-left: 0;
padding-right: 0;
}
.order-sm-1 {
order: 1;
}
.order-sm-2 {
order: 2;
}
.order-sm-3 {
order: 3;
}
.order-sm-4 {
order: 4;
}
.f-sm-9 {
font-size: 9px;
}
.f-sm-10 {
font-size: 10px;
}
.f-sm-11 {
font-size: 11px;
}
.f-sm-12 {
font-size: 12px;
}
.f-sm-13 {
font-size: 13px;
}
.f-sm-14 {
font-size: 14px;
}
.f-sm-15 {
font-size: 15px;
}
.f-sm-16 {
font-size: 16px;
}
.f-sm-17 {
font-size: 17px;
}
.f-sm-18 {
font-size: 18px;
}
.f-sm-19 {
font-size: 19px;
}
.f-sm-20 {
font-size: 20px;
}
.f-sm-21 {
font-size: 21px;
}
.f-sm-22 {
font-size: 22px;
}
.f-sm-23 {
font-size: 23px;
}
.f-sm-23 {
font-size: 24px;
}
.f-sm-25 {
font-size: 25px;
}
.f-sm-26 {
font-size: 26px;
}
.f-sm-27 {
font-size: 27px;
}
.f-sm-28 {
font-size: 28px;
}
.f-sm-29 {
font-size: 29px;
}
.f-sm-30 {
font-size: 30px;
}
.f-sm-34 {
font-size: 34px;
}
.f-sm-35 {
font-size: 35px;
}
.f-sm-40 {
font-size: 40px;
}
.l-sm-13 {
line-height: 13px;
}
.l-sm-14 {
line-height: 14px;
}
.l-sm-15 {
line-height: 15px;
}
.l-sm-16 {
line-height: 16px;
}
.l-sm-17 {
line-height: 17px;
}
.l-sm-18 {
line-height: 18px;
}
.l-sm-19 {
line-height: 19px;
}
.l-sm-20 {
line-height: 20px;
}
.l-sm-21 {
line-height: 21px;
}
.l-sm-22 {
line-height: 22px;
}
.l-sm-23 {
line-height: 23px;
}
.l-sm-24 {
line-height: 24px;
}
.l-sm-25 {
line-height: 25px;
}
.l-sm-26 {
line-height: 26px;
}
.order-mob-1 {
order: 1;
}
.order-mob-2 {
order: 2;
}
.order-mob-3 {
order: 3;
}
.order-mob-4 {
order: 4;
}
.h-sm-100 {
height: 100%;
}
}
.pointer {
cursor: pointer;
}
.pt-1px {
padding-top: 1px;
}
.banner-sec {
background: radial-gradient(
70.94% 245.02% at 70.94% 45.65%,
#008fc5 0%,
#11779d 100%
);
}
@media (min-width: 768px) {
header,
section,
footer {
padding-left: 60px;
padding-right: 60px;
}
}
.treatment-sec {
background: linear-gradient(180deg, #35b6b4 0%, #008aba 100%);
}
.faq {
.card-header {
background-color: $clrGreenLight;
padding: 4px 6px;
> a {
font-size: 17px;
box-shadow: none;
}
}
.card-body {
padding: 6px 17px;
line-height: 21px;
background-color: $clrGreenLight;
ul {
padding-left: 20px;
margin-bottom: 12px;
li {
margin-bottom: 8px;
font-size: 16px;
}
}
}
.card {
margin-bottom: 10px;
border: 0;
border-bottom: 1px solid #e9e9e9;
a {
&:hover {
color: $clrGrey;
}
}
&:last-child {
border-bottom: 0;
}
}
.card-header > a::before {
content: "\2b";
position: absolute;
top: 25px;
right: 0.8rem;
transform: translateY(-50%);
display: block;
font-family: "FontAwesome";
font-size: 30px;
font-weight: 700;
color: #797979;
}
.card-header > a[aria-expanded="true"]::before {
content: "\f068";
font-size: 16px;
}
}
header {
position: sticky;
top: 0;
background-color: #fff;
z-index: 3;
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
a {
&:hover {
color: $clrRed;
}
}
}
.header-shadow {
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
header {
z-index: 1060 !important;
img.logo-img {
width: 120px;
}
}
.faq {
.card-header {
padding: 4px 0px;
> a {
font-size: 14px;
line-height: 18px;
padding: 0.2rem 0rem 0.2rem 00rem;
}
}
.card-body {
padding: 8px 17px 3px 0px;
font-size: 14px;
line-height: 18px;
ul {
li {
font-size: 14px;
}
}
}
.card {
margin-bottom: 10px;
}
.card-header > a::before {
top: 20px;
font-size: 20px;
}
.card-header > a[aria-expanded="true"]::before {
content: "\f068";
font-size: 10px;
}
}
}
// nnnnnnnnnnn
.fac-sec {
span {
img {
position: relative;
bottom: 2px;
}
}
}
.test-sec {
.form-control:focus {
border-right: 0;
border: 1px solid $clrBlueDark;
box-shadow: none;
}
.form-control:focus + span {
border-right: 0;
border: 1px solid $clrBlueDark;
}
.form-control + span {
cursor: pointer;
}
.test-card {
border: 0.93px solid rgba(191, 191, 191, 1);
border-radius: 10px;
margin-bottom: 25px;
height: 60px;
display: flex;
.row {
flex-grow: 1;
}
p {
line-height: 19px;
}
button {
border: 1px solid $clrOrange;
border-radius: 20px;
height: 25px;
font-size: 13px;
font-weight: 700;
background-color: #fff;
color: $clrOrange;
padding: 0px 12px 0;
white-space: nowrap;
}
&:hover {
background: linear-gradient(180deg, #ffffff 28.28%, #94dbff 253.09%);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
transition: box-shadow 0.5s linear;
cursor: pointer;
button {
background-color: $clrOrange;
color: #fff;
transition: background-color 0.6s linear;
}
}
}
}
.test-steps-sec {
.test-steps-box {
border: 2px dotted $clrBlueDark;
border-radius: 8px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
padding: 13px 10px 10px;
width: 150px;
p {
line-height: 23px;
margin-top: 10px;
}
}
}
.certi {
border: 1px solid $clrBlueDark;
border-radius: 10px;
}
.branch-line {
border-right: 1px solid rgba(173, 173, 173, 1);
}
.copyright-sec {
background: rgba(66, 66, 66, 1);
}
button {
transition: box-shadow 0.3s linear !important;
}
button:hover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
}
@media (max-width: 768px) {
.branch-line {
border-right: none;
}
.location-d-box {
border: 1px solid $clrGreyLight;
padding: 10px 10px;
border-radius: 5px;
}
footer {
position: relative !important;
border-radius: 8px;
z-index: initial !important;
}
.test-sec {
.test-card {
margin-bottom: 15px;
padding-top: 0 !important;
padding-bottom: 0 !important;
button {
padding: 0px 8px 0;
}
}
}
.assis-box {
border-radius: 0 !important;
}
.copyright-sec {
margin-bottom: 52px !important;
}
.certi-box {
padding: 0 15px;
}
.test-steps-sec {
.test-steps-box {
padding: 10px 3px 4px;
width: 95px;
height: 98px;
img {
width: 35px;
}
p {
line-height: 18px;
margin-top: 7px;
font-weight: 500;
}
}
.test-steps-arrow {
img {
width: 30px;
}
}
}
h3 {
font-size: 22px;
span {
padding-bottom: 0px;
margin-bottom: 0px;
}
}
.sub-head {
font-size: 14px;
}
}
.call-mob {
position: fixed;
bottom: -70px;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
transition: bottom 0.6s linear;
}
.call-mob.show-btn {
bottom: 0;
}
@media (min-width: 1450px) {
header,
section,
footer {
max-width: 1450px;
margin: 0 auto;
}
}
.banner-pointers {
p {
margin-bottom: 0px;
}
}
.mb-0-c {
margin-bottom: 0 !important;
}
.side-rules-txt {
background-color: #fff;
z-index: 1;
padding: 0 20px;
}
.pos-relative {
position: relative;
}
.pos-absolute {
position: absolute;
}
.side-rules {
left: 0;
right: 0;
margin: 0;
top: 50%;
border-top: 1px solid $clrBlueDark;
}
.topic-pills > div {
border: 1px solid rgba(0, 143, 197, 0.4);
border-radius: 13px;
padding: 4px 10px 4px;
font-size: 12px;
line-height: 1;
text-decoration: none;
color: $clrGrey;
white-space: nowrap;
margin-bottom: 8px;
margin-left: 3px;
margin-right: 3px;
font-weight: 300;
}
.close-footer i {
font-size: 18px;
position: relative;
top: 2px;
}
.rotate-footer-close-arrow {
transform: rotate(-180deg);
}
@media (max-width: 768px) {
.banner-sec {
form {
border-radius: 16px;
}
}
.topic-pills > div {
font-size: 11px;
padding: 4px 8px 4px;
text-transform: lowercase;
}
}
footer {
z-index: 1051 !important;
}
.footer-close {
background-color: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
color: #008fc5;
font-size: 20px;
position: absolute;
right: 25px;
top: -20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.notification_img {
position: absolute;
top: -140px;
left: 420px;
}
.banner-points-box-sec {
position: relative;
bottom: 50px;
form {
outline: 10px solid rgba(239, 237, 237, 0.4);
background-color: #fff;
border-radius: 50px;
.input-group {
.input-group-text {
border: 0;
background-color: #fff;
padding: 0;
}
.form-control {
border: 0;
padding: 0.375rem 0.45rem;
border-right: 2px solid #d8d8d8;
border-radius: 0;
&:focus {
outline: 0;
box-shadow: none;
background-color: $clrBlueLight;
}
}
border: 0;
img {
width: 22px;
margin: 0;
}
}
.form-control {
padding: 0.675rem 0.75rem;
}
.form-group {
input {
background-color: #f8f9fa;
border-radius: 0;
}
}
}
.banner-points-box {
// border-radius: 12px;
// padding: 28px 0;
// box-shadow: 0px 1px 36px 0px rgba(0, 0, 0, 0.13);
// background-color: #fff;
img {
margin-bottom: 7px;
}
p {
color: rgba(126, 126, 126, 1);
margin-bottom: 0;
line-height: 17.58px;
}
& > div {
border-right: 1px solid rgba(223, 223, 223, 1);
width: 25%;
}
& > div:last-child {
border-right: 0;
}
}
}
.package-card-sec {
.package-card-row > div {
margin-bottom: 25px;
}
background-color: #fdfbf9;
.package-m-box {
background-color: #fff;
max-height: 240px;
margin-right: -18px;
margin-top: 15px;
overflow-y: auto;
flex-grow: 1;
& > div {
padding-right: 18px;
}
}
.package-m-box::-webkit-scrollbar {
width: 3px;
}
.package-m-box::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.package-m-box::-webkit-scrollbar-thumb {
background: $clrGrey;
border-radius: 10px;
}
.package-m-box::-webkit-scrollbar-thumb:hover {
background: #555;
}
.package-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #fff;
border: 1px solid rgba(235, 234, 232, 1);
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.09);
border-radius: 4px;
padding: 23px 19px;
margin-bottom: 25px;
button {
border-radius: 20px;
margin-top: 20px;
}
.bar {
height: 2.5px;
margin-bottom: 10px;
}
.card-header {
background-color: #fff;
padding: 4px 0px;
> a {
font-size: 17px;
box-shadow: none;
padding: 0 0;
}
}
.card-body {
padding: 6px 0px 6px 0;
line-height: 21px;
background-color: #fff;
ul {
padding-left: 00px;
margin-bottom: 0px;
li {
margin-bottom: 0px;
font-size: 15px;
list-style-type: none;
}
}
}
.card {
margin-bottom: 10px;
padding-left: 22px;
border: 0;
&:last-child {
.card-header {
border: 0;
}
}
a {
&:hover {
color: $clrGrey;
}
}
&:last-child {
border-bottom: 0;
}
}
.card-header > a::after {
content: "";
position: absolute;
top: 14px;
right: 0rem;
display: block;
width: 13px;
height: 13px;
background-color: #dfdbd2;
border-radius: 2px;
}
.card-header > a::before {
z-index: 1;
content: "\2b";
position: absolute;
top: 20px;
right: 2px;
transform: translateY(-50%);
display: block;
font-family: "FontAwesome";
font-size: 15px;
font-weight: 700;
color: #7e7e7e;
}
.card-header > a.package-details::before {
content: "\f068";
font-size: 8px;
right: 3px;
}
}
.card {
&::before {
position: absolute;
left: 0;
top: 10px;
}
}
.essential-package {
.bar {
background-color: $clrBlueDark;
}
.card {
&::before {
content: url("../img/essential-package.png");
}
}
}
.advanced-package {
.bar {
background-color: $clrOrange;
}
.card {
&::before {
content: url("../img/orange-tick.png");
}
}
}
.total-package {
.bar {
background-color: $clrGreen;
}
.card {
&::before {
content: url("../img/green-tick.png");
}
}
}
.exclusive-package {
.bar {
background-color: $clrRed;
}
.card {
&::before {
content: url("../img/red-tick.png");
}
}
}
}
.banner-points-box-sec.why-choose {
position: static;
.banner-points-box {
box-shadow: none;
border: 0;
}
}
@media (max-width: 768px) {
.banner-points-box-sec {
bottom: 70px;
.banner-points-box {
flex-wrap: wrap;
border-radius: 6px;
padding: 15px 20px;
box-shadow: 0px 1px 36px 0px rgba(0, 0, 0, 0.13);
background-color: #fff;
img {
margin-bottom: 7px;
}
p {
color: rgba(126, 126, 126, 1);
margin-bottom: 0;
line-height: 17.58px;
}
& > div {
width: 50%;
padding-bottom: 15px;
padding-top: 15px;
}
& > div:nth-child(2) {
border-right: 0;
}
& > div:last-child {
border-right: 0;
border-top: 1px solid #dfdfdf;
}
& > div:nth-last-child(2) {
border-top: 1px solid #dfdfdf;
}
}
}
}
.footer-keys {
// background-color: #535353;
}
.outlined-box {
border: 2px solid #ecfaff;
height: 270px;
border-radius: 8px;
padding: 25px 25px;
margin-bottom: 25px;
p {
color: #abb3bf;
a {
color: #df2213;
text-decoration: none;
}
}
}
.outlined-box-slider {
.slick-slide {
margin-right: 25px;
}
.slick-dots {
bottom: -45px;
button {
border-radius: 50%;
}
}
}
.team-sec {
background: #035c7d;
}
.team-sec-b {
background: #035c7d;
border-top: 1px solid #48c6f5;
.col-md-3 {
display: flex;
align-items: center;
}
p {
padding: 50px 15px;
line-height: 28px;
}
.col-md-3:nth-of-type(3) {
border-right: 1px solid #48c6f5;
}
.col-md-3:nth-of-type(2) {
background: #008fc5;
margin-top: -20px;
}
}
.achievement-sec {
background-image: url("../img/achievement.png");
background-repeat: no-repeat;
background-position: top right;
background-size: contain;
.robbon-r > div {
position: relative;
border: 1px solid #e4e7e3;
background-color: #fff;
&:not(:last-child) {
border-right: 0;
}
p {
margin: 0;
padding: 50px 25px 25px;
}
&::after {
position: absolute;
content: url("../img/ribbon.png");
top: -35px;
left: 20px;
}
}
}
.footer-sec {
background-image: url("../img/footer.png");
background-repeat: no-repeat;
background-size: cover;
.footer-box {
border: 2px solid rgba(10, 123, 165, 1);
border-radius: 8px;
padding: 11px;
div {
background: #035c7d;
border-radius: 8px;
}
}
}