responsive design
This commit is contained in:
unknown
277
css/style.css
277
css/style.css
@@ -8,10 +8,8 @@
|
||||
/* for headings or special text */
|
||||
}
|
||||
|
||||
a
|
||||
|
||||
{
|
||||
text-decoration: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@@ -212,7 +210,6 @@ a.color-a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
|
||||
/* Floating WhatsApp Icon */
|
||||
@@ -225,7 +222,7 @@ a.color-a {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
@@ -370,11 +367,11 @@ a.color-a {
|
||||
.ask-advantage2 {
|
||||
padding: 0px 0px 60px 0px;
|
||||
}
|
||||
.ask-advantage2 {
|
||||
padding: 0px 0px 60px 0px;
|
||||
}
|
||||
.ask-advantage-scroll {
|
||||
padding: 60px 0 0 0;
|
||||
.ask-advantage2 {
|
||||
padding: 0px 0px 60px 0px;
|
||||
}
|
||||
.ask-advantage-scroll {
|
||||
padding: 60px 0 0 0;
|
||||
}
|
||||
|
||||
.ask-advantage h2 {
|
||||
@@ -998,9 +995,8 @@ span.textaccor {
|
||||
/* our-fund */
|
||||
|
||||
.ask-advantage3 {
|
||||
padding: 60px 0;
|
||||
background-image: url("../assests/images/Our-Funds-back.svg");
|
||||
|
||||
padding: 60px 0;
|
||||
background-image: url("../assests/images/Our-Funds-back.svg");
|
||||
}
|
||||
|
||||
.coming-soon-container {
|
||||
@@ -1061,17 +1057,16 @@ span.textaccor {
|
||||
background: url("../assests/images/about-banner-img.svg") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 420px;
|
||||
height: 70vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner_overlay {
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7rem;
|
||||
}
|
||||
|
||||
.hero_content {
|
||||
@@ -1080,17 +1075,17 @@ span.textaccor {
|
||||
|
||||
.hero_content .heading {
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-family: var(--font-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero_content .sub-heading {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-family: var(--font-primary);
|
||||
margin-top: 18px;
|
||||
@@ -1098,15 +1093,12 @@ span.textaccor {
|
||||
|
||||
/* about history text */
|
||||
.about-stats-section {
|
||||
height: 600px;
|
||||
min-height: 600px;
|
||||
background-color: #fff;
|
||||
color: #0a1f2b;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.about-stats-section .container {
|
||||
padding-top: 60px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
@@ -1135,7 +1127,16 @@ span.textaccor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-stat-border::before {
|
||||
.about-stat-box {
|
||||
border-right: 1px solid #b18c4a;
|
||||
/* width: 236px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.last-box {
|
||||
border-right: none;
|
||||
}
|
||||
/* .about-stat-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -1144,7 +1145,7 @@ span.textaccor {
|
||||
width: 1px;
|
||||
height: 112px;
|
||||
background-color: #b18c4a;
|
||||
}
|
||||
} */
|
||||
|
||||
.about-stat-box h3 {
|
||||
font-size: 40px;
|
||||
@@ -1174,19 +1175,18 @@ span.textaccor {
|
||||
|
||||
/* about history animation */
|
||||
|
||||
.history_animation{
|
||||
background: #131313;
|
||||
height: 718px;
|
||||
.history_animation {
|
||||
background: #131313;
|
||||
height: 650px;
|
||||
}
|
||||
.history_animation .container {
|
||||
padding-top: 60px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.history_animation .container .title{
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-family: var(--font-secondary);
|
||||
.history_animation .container .title {
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -1225,13 +1225,12 @@ span.textaccor {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 16px;
|
||||
color: #3E3F3F;
|
||||
color: #3e3f3f;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
|
||||
/* ===========================
|
||||
Kite Style
|
||||
=========================== */
|
||||
@@ -1296,7 +1295,7 @@ span.textaccor {
|
||||
z-index: 0;
|
||||
transform-origin: left;
|
||||
width: 0;
|
||||
transition: left 0.45s linear, width 0.45s linear; /* animate both */
|
||||
transition: left 0.45s linear, width 0.45s linear;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
@@ -1316,7 +1315,7 @@ span.textaccor {
|
||||
.swiper-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1px; /* added subtle gap between slides */
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
@@ -1326,32 +1325,32 @@ span.textaccor {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: #131313;
|
||||
gap: 2px; /* reduced gap between slide elements */
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
object-fit: contain;
|
||||
min-width: 82px;
|
||||
min-height: 82px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 0 auto 2px; /* small bottom margin to reduce space */
|
||||
margin: 0 auto 2px;
|
||||
}
|
||||
|
||||
.swiper-slide h2 {
|
||||
font-size: 40px;
|
||||
color: #b18c4a;
|
||||
margin: 0 0 10px 0; /* small margin below heading */
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.swiper-slide .heading {
|
||||
color: #b18c4a;
|
||||
text-align: center;
|
||||
line-height: 1.3; /* tighter line height */
|
||||
margin: 0 0 2px 0; /* small margin below heading */
|
||||
line-height: 1.3;
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
|
||||
.swiper-slide .sub-heading-container {
|
||||
width: 420px;
|
||||
width: 723px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
@@ -1359,11 +1358,10 @@ span.textaccor {
|
||||
|
||||
.swiper-slide .sub-heading-container p {
|
||||
color: #fff;
|
||||
margin: 0; /* remove default margin */
|
||||
line-height: 1.4; /* tighter line height */
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
/* ===========================
|
||||
Swiper Navigation
|
||||
=========================== */
|
||||
@@ -1371,14 +1369,12 @@ span.textaccor {
|
||||
.swiper-button-next {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color:#b18c4a ;
|
||||
|
||||
color: #b18c4a;
|
||||
}
|
||||
|
||||
/* Resize the arrow icons themselves */
|
||||
.swiper-button-prev::after,
|
||||
.swiper-button-next::after {
|
||||
font-size: 25px; /* control actual arrow size */
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
@@ -1389,7 +1385,6 @@ span.textaccor {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* blog */
|
||||
|
||||
.blog-banner {
|
||||
@@ -1837,12 +1832,164 @@ span.textaccor {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* mobile about-page */
|
||||
.hero_banner {
|
||||
background: url("../assests/images/mobile-about-banner.svg") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.banner_overlay {
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.hero_content .heading:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero_content .heading {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.hero_content .sub-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.about-stats-section .container {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.about-sub-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.about-stats-row {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-stat-box {
|
||||
border-bottom: 1px solid #033a49;
|
||||
border-right: none;
|
||||
width: 200px;
|
||||
box-sizing: border-box;
|
||||
/* margin-bottom: 20px; */
|
||||
margin: 0 auto 20px auto;
|
||||
}
|
||||
|
||||
.last-box {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.about-stat-box h3 {
|
||||
font-size: 32px;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-stat-box p {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.month-date-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 12vh;
|
||||
}
|
||||
|
||||
.about-as-of-date {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.history_animation {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.history_animation .container {
|
||||
padding: 60px 0 0 25px;
|
||||
}
|
||||
|
||||
.history_animation .container .title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* .timeline {
|
||||
min-width: 1200px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
} */
|
||||
|
||||
.timeline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 1px;
|
||||
background: #b18b4a65;
|
||||
transform: translateY(-50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.timeline li::before {
|
||||
content: attr(data-year);
|
||||
position: absolute;
|
||||
left: 8%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 18px;
|
||||
color: #3e3f3f;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 0;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.swiper-slide h2 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
min-width: 82px;
|
||||
min-height: 66px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
margin: 0 auto 2px;
|
||||
}
|
||||
|
||||
.swiper-slide .sub-heading-container {
|
||||
width: 285px;
|
||||
}
|
||||
|
||||
.swiper-slide .heading,
|
||||
.swiper-slide .sub-heading-container p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.blog-tittle-banner {
|
||||
font-size: 40px;
|
||||
@@ -1868,7 +2015,6 @@ span.textaccor {
|
||||
.navbar {
|
||||
background-color: #033a4900;
|
||||
padding: 0 0;
|
||||
|
||||
}
|
||||
.navbar-collapse.show {
|
||||
z-index: 999;
|
||||
@@ -1880,7 +2026,7 @@ span.textaccor {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #033a49;
|
||||
}
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-md,
|
||||
@@ -2019,16 +2165,7 @@ span.textaccor {
|
||||
.container.blog-aling {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.ask-advantage-scroll {
|
||||
.ask-advantage-scroll {
|
||||
padding: 60px 25px 0 25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user