233 lines
3.7 KiB
CSS
233 lines
3.7 KiB
CSS
/* Base setup */
|
|
:root {
|
|
--font-primary: 'Open Sans', sans-serif;
|
|
/* default body font */
|
|
--font-secondary: 'Larken', serif;
|
|
/* decorative font */
|
|
--font-tertiary: 'Inter', sans-serif;
|
|
/* for headings or special text */
|
|
}
|
|
|
|
section.ask-advantage-scroll {
|
|
padding: 60px 0 0 0;
|
|
}
|
|
|
|
.ask-advantage-scroll h2
|
|
|
|
{
|
|
font-family: var(--font-secondary);
|
|
font-weight: 400;
|
|
font-style: Regular;
|
|
font-size: 40px;
|
|
line-height: 100%;
|
|
letter-spacing: 0%;
|
|
color: #033A49;
|
|
}
|
|
.ask-advantage-scroll p.lead {
|
|
font-family: var(--font-primary);
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 100%;
|
|
letter-spacing: 0%;
|
|
color: #3E3F3F;
|
|
margin-bottom: 40px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
.cards-wrapper {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.card-scroll {
|
|
background-image: url("../assests/images/desbackcard-scroll.svg");
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center center; /* centers it horizontally and vertically */
|
|
|
|
border-radius: 30px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #E6E7E8;
|
|
box-shadow: 0px 0px 14px 0px #0000000D;
|
|
|
|
/* reduce side padding so image aligns better */
|
|
padding: 50px 80px 0px 80px;
|
|
gap: 60px;
|
|
}
|
|
|
|
.card-content {
|
|
width: 60%;
|
|
margin-bottom: 50px;
|
|
}
|
|
.card-image {
|
|
width: 40%;
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-label span {
|
|
color: #B18C4A;
|
|
font-family: var(--font-primary);
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
line-height: 21.9px;
|
|
letter-spacing: 0px;
|
|
vertical-align: middle;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.scroll-tiile {
|
|
margin: 20px 0 10px 0;
|
|
color: #033A49;
|
|
font-family: var(--font-secondary);
|
|
font-weight: 400;
|
|
font-size: 32px;
|
|
line-height: 100%;
|
|
letter-spacing: 2px;
|
|
}
|
|
.scroll-desc{
|
|
font-family: var(--font-primary);
|
|
font-weight: 400;
|
|
|
|
font-size: 18px;
|
|
line-height: 100%;
|
|
color: #3E3F3F;
|
|
|
|
|
|
}
|
|
|
|
.scroll-ul {
|
|
margin-left: 15px;
|
|
padding-left: 20px;
|
|
font-size: 14px;
|
|
color: #555;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.scroll-ul .scroll-li {
|
|
|
|
font-family: var(--font-primary);
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
|
|
|
|
.card-image img {
|
|
width: 316px;
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.card-scroll {
|
|
background-image: url("../assests/images/mobilebackcard-scroll.svg") ;
|
|
background-repeat: no-repeat;
|
|
background-size: cover; /* fills card area */
|
|
background-position: center center; /* show from top */
|
|
|
|
border-radius: 30px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid #E6E7E8;
|
|
box-shadow: 0px 0px 14px 0px #0000000D;
|
|
padding: 30px 20px 0px 20px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
margin-bottom: 0px;
|
|
}
|
|
.card-image {
|
|
width: 100%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
.card-image img {
|
|
width: 220px;
|
|
display: block;
|
|
}
|
|
.card-label span {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
.scroll-tiile {
|
|
|
|
font-size: 18px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.cards-wrapper {
|
|
|
|
margin-top: 30px;
|
|
}
|
|
.scroll-desc {
|
|
|
|
font-size: 13px;
|
|
|
|
}
|
|
.scroll-ul {
|
|
|
|
display: none;
|
|
}
|
|
.ask-advantage-scroll h2
|
|
|
|
{
|
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
.ask-advantage-scroll p.lead {
|
|
|
|
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.cards-wrapper {
|
|
position: relative;
|
|
height: 600px; /* ya jitna aapko chahiye ho */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-scroll {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.card-scroll.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
section.ask-advantage-scroll.container {
|
|
padding: 60px 25px 0 25px !important;
|
|
}
|
|
}
|
|
|