Compare commits
7 Commits
tufail-dev
...
98ccbf52d7
| Author | SHA1 | Date | |
|---|---|---|---|
|
98ccbf52d7 | ||
|
|
ab688231a0 | ||
|
|
a87171cd6e | ||
|
|
d58c9c5059 | ||
|
|
96dcb4a26d | ||
|
|
a0034abfb1 | ||
|
|
6f578d1162 |
27
assests/images/ask-adv-card-bg.svg
Normal file
27
assests/images/ask-adv-card-bg.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="268" height="355" viewBox="0 0 268 355" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_213_910)">
|
||||
<rect width="268" height="356" transform="translate(0 -0.985596)" fill="#004A5D"/>
|
||||
<path d="M-27.5364 305.791L-413.859 -68.6042H391.279L390.626 218.921L-28.1892 719.963L-27.5364 305.791Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M368.46 210.835L-11.1865 664.783L-10.6227 290.119L-359.557 -48.0422H369.053L368.46 210.835Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M346.295 202.711L5.78801 609.606L6.32216 274.448L-305.282 -27.5168H346.829L346.295 202.711Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M324.129 194.622L22.7918 554.424L23.2369 258.774L-250.979 -6.95728H324.574L324.129 194.622Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M301.962 186.5L39.7649 499.247L40.1506 243.104L-196.676 13.6077H302.348L301.962 186.5Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M279.797 178.374L56.7686 444.105L57.095 227.431L-142.372 34.1301H280.123L279.797 178.374Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M257.599 170.288L73.7402 388.926L74.0073 211.759L-88.1006 54.6921H257.866L257.599 170.288Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M235.432 162.163L90.743 333.746L90.921 196.086L-33.7979 75.2542H235.64L235.432 162.163Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M213.267 154.075L107.717 278.566L107.836 180.452L20.5059 95.7771H213.415L213.267 154.075Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M191.1 145.953L124.69 223.389L124.779 164.783L74.8086 116.342H191.159L191.1 145.953Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<path d="M141.692 168.245V149.108L129.081 136.901H168.933V137.825L141.692 168.245Z" stroke="#B18C4A" stroke-width="0.540441" stroke-miterlimit="10"/>
|
||||
<rect x="-306.667" y="-103.544" width="575.029" height="693.926" fill="url(#paint0_linear_213_910)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_213_910" x1="0.999762" y1="378.015" x2="367.062" y2="192.736" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#004A5D"/>
|
||||
<stop offset="0.489094" stop-color="#004A5D" stop-opacity="0.9"/>
|
||||
<stop offset="1" stop-color="#004A5D" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_213_910">
|
||||
<rect width="268" height="356" fill="white" transform="translate(0 -0.985596)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -17,10 +17,10 @@
|
||||
<a href="#" class="me-3"><img src="./assests/images/facebook.svg" alt=""></a>
|
||||
<a href="#"><img src="./assests/images/lin.svg" alt=""></a>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<!-- <div class="d-flex gap-2">
|
||||
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" height="40" alt="Google Play"></a>
|
||||
<a href="#"><img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" height="40" alt="App Store"></a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
@@ -53,7 +53,7 @@
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Our Locations</a></li>
|
||||
<li><a href="#">Log In</a></li>
|
||||
<li><a href="#">Contact Us</a></li>
|
||||
<li><a href="#/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
|
||||
<nav class="navbar navbar-expand-lg ">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="mobile-adj">
|
||||
<a class="navbar-brand d-flex align-items-center" href="">
|
||||
<img src="./assests/images/ask-mutual-fund-logo.svg" alt="My Logo" height="40">
|
||||
<img
|
||||
src="./assests/images/ask-mutual-fund-logo.svg"
|
||||
alt="My Logo"
|
||||
height="40"
|
||||
/>
|
||||
</a>
|
||||
<!-- Toggle Button -->
|
||||
<button class="navbar-toggler" type="button">
|
||||
<span class="open-icon">☰</span> <!-- hamburger -->
|
||||
<span class="close-icon d-none">×</span> <!-- close icon -->
|
||||
<span class="open-icon">☰</span>
|
||||
<!-- hamburger -->
|
||||
<span class="close-icon d-none">×</span>
|
||||
<!-- close icon -->
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -17,11 +22,19 @@
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<!-- Center Links -->
|
||||
<ul class="navbar-nav gap-menu text-center">
|
||||
<li class="nav-item"><a class="nav-link" href="#/our-fund">Our Fund</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/our-team">Our Team</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#/contact">Contact</a></li>
|
||||
<ul class="navbar-nav gap-menu mx-auto text-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/our-fund">Our Fund</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/our-team">Our Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/about">About Us</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#/contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Right Buttons -->
|
||||
@@ -29,43 +42,51 @@
|
||||
<li class="nav-item me-3">
|
||||
<a href="#" class="invest-btn px-3 py-2">Invest Now</a>
|
||||
</li>
|
||||
<li class="nav-item d-flex align-items-center">
|
||||
<span class="text-white">Login</span>
|
||||
<li class="nav-item d-flex align-items-center login-btn">
|
||||
<span class="">Login</span>
|
||||
<i class="bi bi-chevron-down" style="font-size: 13px; color: #B18C4A; margin-left: 8px; display: none;"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="topbar-mobile ">
|
||||
<div class="topbar-mobile">
|
||||
<div class="mobile-call">
|
||||
|
||||
<a href="tel:(+91) 93256 07030" class="color-b">
|
||||
<i class="bi bi-telephone " style="width: 20px; height: 20px; color: #B18C4A;"></i> (+91) 93256 07030
|
||||
<i
|
||||
class="bi bi-telephone"
|
||||
style="width: 20px; height: 20px; color: #b18c4a"
|
||||
></i>
|
||||
(+91) 93256 07030
|
||||
</a>
|
||||
<a href="mailto:askdb@gmail.com" class="color-b">
|
||||
<i class="bi bi-envelope" style="width: 20px; height: 20px; color: #B18C4A;"></i> askdb@gmail.com
|
||||
<i
|
||||
class="bi bi-envelope"
|
||||
style="width: 20px; height: 20px; color: #b18c4a"
|
||||
></i>
|
||||
askdb@gmail.com
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="topbar py-2 ">
|
||||
<div class="topbar py-2">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<a href="tel:(+91) 93256 07030" class="color-a">
|
||||
<i class="bi bi-telephone me-2" style="width: 16px; height: 16px;"></i> (+91) 93256 07030
|
||||
<i class="bi bi-telephone me-2" style="width: 16px; height: 16px"></i>
|
||||
(+91) 93256 07030
|
||||
</a>
|
||||
<a href="mailto:askdb@gmail.com" class="color-a">
|
||||
<i class="bi bi-envelope ms-3 me-1" style="width: 16px; height: 16px;"></i> askdb@gmail.com
|
||||
<i
|
||||
class="bi bi-envelope ms-3 me-1"
|
||||
style="width: 16px; height: 16px"
|
||||
></i>
|
||||
askdb@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./js/navbar.js"></script>
|
||||
<script src="./js/navbar.js"></script>
|
||||
|
||||
356
css/contact.css
356
css/contact.css
@@ -1,11 +1,11 @@
|
||||
/* 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 */
|
||||
--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 */
|
||||
}
|
||||
|
||||
.contact-banner {
|
||||
@@ -16,8 +16,12 @@
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/* .contact-banner .container{
|
||||
padding: 60px 0 72px 0;
|
||||
} */
|
||||
|
||||
.contac-back-color {
|
||||
background: #F5F5F5;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.contact-aling {
|
||||
@@ -30,50 +34,50 @@
|
||||
}
|
||||
|
||||
.contact-tittle-banner {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p.contact-text-banner {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
justify-content: center;
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 280px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact a {
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.map-section .button-to {
|
||||
margin-top: 35px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.contact-cards {
|
||||
@@ -98,122 +102,122 @@ p.contact-text-banner {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-card h4 {
|
||||
color: #033A49;
|
||||
margin-bottom: 15px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: #033a49;
|
||||
margin-bottom: 15px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.contact-card p:first-child {
|
||||
font-size: 21px;
|
||||
}
|
||||
.contact-card p {
|
||||
color: #3E3F3F;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
color: #3e3f3f;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
flex: 1 1 55%;
|
||||
|
||||
overflow: hidden;
|
||||
flex: 1 1 55%;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-container iframe {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
flex: 1 1 40%;
|
||||
flex: 1 1 40%;
|
||||
}
|
||||
|
||||
.location-info h3 {
|
||||
color: #033A49;
|
||||
margin-bottom: 20px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
color: #033a49;
|
||||
margin-bottom: 20px;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.location-info strong {
|
||||
color: #B18C4B;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
color: #b18c4b;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
color: #3E3F3F;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
color: #3e3f3f;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 220px;
|
||||
justify-content: center;
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 15px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 220px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact2 a {
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.View {
|
||||
text-transform: uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.view-arrow {
|
||||
height: 11px !important;
|
||||
width: 17px !important;
|
||||
height: 11px !important;
|
||||
width: 17px !important;
|
||||
}
|
||||
|
||||
.location-info.none-desktop {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
.contact-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
flex-direction: column;
|
||||
@@ -226,95 +230,85 @@ p.contact-text-banner {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.location-info.none-desktop {
|
||||
display: block;
|
||||
}
|
||||
.location-info.none-desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact-banner {
|
||||
background-image: url("../assests/images/mobile-contact.svg");
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.contact-banner {
|
||||
background-image: url("../assests/images/mobile-contact.svg");
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
.invest-contact {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
width: 95%;
|
||||
.contact-card h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
}
|
||||
p.size-mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contact-card h4 {
|
||||
.location-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
font-size: 21px;
|
||||
.map-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
p.size-mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 95% !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
.location-info p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
h3.none-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.invest-contact2 {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-contact {
|
||||
background-color: #b58b4b;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
|
||||
transition: all 0.3s ease;
|
||||
padding: 20px 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 95% !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.location-info p {
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.view-top {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3.none-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hide-details-conne-dest {
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: flex
|
||||
;
|
||||
.hide-details-conne-dest {
|
||||
display: none;
|
||||
}
|
||||
.hide-details-conne-mobile {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.contact-banner {
|
||||
@@ -325,4 +319,4 @@ p.contact-text-banner {
|
||||
padding: 0px 20px;
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
447
css/style.css
447
css/style.css
@@ -19,7 +19,7 @@ a {
|
||||
}
|
||||
|
||||
a.nav-link:hover {
|
||||
color: #b58b4b;
|
||||
color: #b58b4b;
|
||||
}
|
||||
/* Logo styling */
|
||||
.navbar-brand img {
|
||||
@@ -46,18 +46,20 @@ a.nav-link:hover {
|
||||
}
|
||||
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: #fff;
|
||||
.nav-link:hover,
|
||||
.login-btn span:hover {
|
||||
color: #b58b4b;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
.login-btn span {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Invest Now button */
|
||||
@@ -146,10 +148,10 @@ span.banner-desc {
|
||||
color: #fff;
|
||||
}
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftslider-line {
|
||||
@@ -162,31 +164,29 @@ span.banner-desc {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.right-border {
|
||||
border-left: 2px solid #b58b4b;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-left: 2px solid #b58b4b;
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.right-new
|
||||
|
||||
{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.right-new {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invest-btn:hover {
|
||||
/* .invest-btn:hover {
|
||||
background-color: #b58b4b;
|
||||
color: #fff;
|
||||
}
|
||||
} */
|
||||
|
||||
a.color-a {
|
||||
color: #fff;
|
||||
@@ -361,7 +361,6 @@ a.color-a {
|
||||
|
||||
/* home */
|
||||
.Slider-back {
|
||||
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
@@ -370,10 +369,8 @@ a.color-a {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.carousel-indicators [data-bs-target] {
|
||||
box-sizing: content-box;
|
||||
flex: 0 1 auto;
|
||||
@@ -452,7 +449,6 @@ a.color-a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.advantage-box {
|
||||
border-top: 2.4px solid #b18c4a;
|
||||
padding-top: 45px;
|
||||
@@ -461,14 +457,15 @@ a.color-a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
gap: 20px;
|
||||
display: flex
|
||||
;
|
||||
flex-direction: column;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.advantage-box:hover {
|
||||
background-color: #004a5d;
|
||||
background-image: url("../assests/images/ask-adv-card-bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 90% 0%;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
border-top: 0px solid #b18c4a;
|
||||
transform: translateY(2px);
|
||||
@@ -521,7 +518,6 @@ a.color-a {
|
||||
letter-spacing: 0%;
|
||||
vertical-align: middle;
|
||||
color: #3e3f3f;
|
||||
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
@@ -595,8 +591,13 @@ a.color-a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.date-container {
|
||||
text-align: left;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.as-of-date {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-style: Italic;
|
||||
@@ -654,22 +655,22 @@ span.banner-desc2 {
|
||||
}
|
||||
|
||||
.ask-advantage-blog {
|
||||
padding: 80px 0px;
|
||||
padding: 80px 0px;
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
padding: 0px 0px 80px 0px;
|
||||
padding: 0px 0px 80px 0px;
|
||||
}
|
||||
.img-fluid {
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tittle-blog {
|
||||
.home-tittle-blog {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
font-size: 21px;
|
||||
line-height: 135%;
|
||||
letter-spacing: 0%;
|
||||
/* letter-spacing: 0%; */
|
||||
color: #3e3f3f;
|
||||
}
|
||||
|
||||
@@ -687,7 +688,7 @@ span.banner-desc2 {
|
||||
.desc-blog {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 135%;
|
||||
color: #929197;
|
||||
margin-bottom: 25px;
|
||||
@@ -765,25 +766,29 @@ span.textaccor {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.accordion-button {
|
||||
padding: 24px 0px;
|
||||
padding: 24px 0px;
|
||||
}
|
||||
.accordion-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.descktop .col-6:hover,
|
||||
.mobile .col-6:hover {
|
||||
background-color: rgba(155, 155, 155, 0.26);
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* out-team */
|
||||
.team-section {
|
||||
padding: 80px 0 30px 0;
|
||||
background-color: #F6F6F6;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.team-spac {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 50px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
.team-section h2 {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
@@ -801,8 +806,8 @@ padding: 24px 0px;
|
||||
color: #004a5d !important;
|
||||
}
|
||||
.team-img {
|
||||
width: 362px;
|
||||
height: 340px;
|
||||
width: 362px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@@ -869,6 +874,10 @@ padding: 24px 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* .g-80 {
|
||||
gap: 80px;
|
||||
} */
|
||||
|
||||
.team-card {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@@ -1037,66 +1046,130 @@ padding: 24px 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.descktop-marging-new {
|
||||
margin-left: 30px;
|
||||
gap: 50px;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 39px;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.outer_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(25% - 15px); /* 4 cards on desktop */
|
||||
max-width: 250px;
|
||||
padding: 45px 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.inner_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.inner_box img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.inner_box .heading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.inner_box .paragraph-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
line-height: 1.4;
|
||||
height: 40px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.inner_box h2 {
|
||||
font-family: var(--font-primary);
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
color: #004a5d !important;
|
||||
margin-bottom: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inner_box p {
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.outer_box:hover {
|
||||
background-color: rgba(128, 128, 128, 0.24);
|
||||
border-radius: 10px;
|
||||
transform: translateY(-2px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* .descktop-marging-new {
|
||||
margin-left: 30px;
|
||||
gap: 60px;
|
||||
}
|
||||
.padding-icon {
|
||||
width: 20%;
|
||||
padding: 30px 25px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 40px 25px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon1 {
|
||||
width: 20%;
|
||||
padding: 30px 24px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 40px 24px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon1:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon2 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 40px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon2:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.padding-icon3 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 40px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon3:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon4 {
|
||||
width: 20%;
|
||||
padding: 30px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
width: 20%;
|
||||
padding: 40px 35px;
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.padding-icon4:hover {
|
||||
background-color: #E6E7E8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
background-color: #e6e7e8;
|
||||
border-radius: 10px;
|
||||
} */
|
||||
|
||||
.gy-4 {
|
||||
--bs-gutter-y: 2.5rem;
|
||||
@@ -1312,7 +1385,7 @@ padding: 24px 0px;
|
||||
|
||||
.history_animation {
|
||||
background: #131313;
|
||||
padding: 60px 0;
|
||||
padding: 60px 0 140px 0;
|
||||
}
|
||||
|
||||
.history_animation .container .title {
|
||||
@@ -1582,6 +1655,7 @@ padding: 24px 0px;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
margin-right: 32px;
|
||||
width: 55%;
|
||||
@@ -1590,9 +1664,22 @@ padding: 24px 0px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-content .tittle-blog {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .gap-menu {
|
||||
.blog-content .desc-blog {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.blog-card .tittle-blog {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-expand-lg .gap-menu {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 25px 25px 12px 25px;
|
||||
@@ -1628,25 +1715,24 @@ padding: 24px 0px;
|
||||
}
|
||||
|
||||
.Slider-back {
|
||||
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.leftslider-line {
|
||||
/* border-left: 2px solid #b18c4a; */
|
||||
padding-left: 20px;
|
||||
/* border-left: 2px solid #b18c4a; */
|
||||
padding-left: 20px;
|
||||
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../assests/images/mobile-banner.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../assests/images/mobile-banner.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
span.banner-tittle {
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 400;
|
||||
@@ -1722,22 +1808,27 @@ padding: 24px 0px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.date-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ask-advantage-home h2 {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.ask-advantage-home p.lead {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ask-advantage h2 {
|
||||
|
||||
.ask-advantage-heading {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
|
||||
.ask-advantage p.lead {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@@ -1761,12 +1852,12 @@ padding: 24px 0px;
|
||||
}
|
||||
.arrang-back {
|
||||
background: #fff;
|
||||
}
|
||||
.d-block {
|
||||
}
|
||||
.d-block {
|
||||
display: block !important;
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-card::before {
|
||||
content: "";
|
||||
@@ -1859,12 +1950,11 @@ padding: 24px 0px;
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-section h2 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
|
||||
}
|
||||
|
||||
.team-info {
|
||||
@@ -1872,12 +1962,12 @@ padding: 24px 0px;
|
||||
display: inline-grid;
|
||||
align-content: space-around;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
.team-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.team-info h5 {
|
||||
font-size: 14px;
|
||||
@@ -1937,11 +2027,10 @@ padding: 24px 0px;
|
||||
|
||||
.descktop {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
}
|
||||
.mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.padding-icon {
|
||||
padding: 30px 15px;
|
||||
@@ -1949,7 +2038,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 0px;
|
||||
margin-right: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon1 {
|
||||
@@ -1958,7 +2047,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 0px;
|
||||
margin-left: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon2 {
|
||||
@@ -1967,7 +2056,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-right: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon3 {
|
||||
@@ -1976,7 +2065,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon4 {
|
||||
@@ -1985,7 +2074,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-right: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon5 {
|
||||
@@ -1994,7 +2083,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon6 {
|
||||
@@ -2003,7 +2092,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-right: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.padding-icon7 {
|
||||
@@ -2012,7 +2101,7 @@ padding: 24px 0px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
width: 47%;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.mt-row {
|
||||
@@ -2078,7 +2167,7 @@ padding: 24px 0px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile about-page */
|
||||
.hero_banner {
|
||||
@@ -2176,8 +2265,6 @@ padding: 24px 0px;
|
||||
|
||||
.about-as-of-date {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
.history_animation {
|
||||
width: 100%;
|
||||
@@ -2306,6 +2393,73 @@ padding: 24px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:767px){
|
||||
.wrapper {
|
||||
gap: 15px;
|
||||
justify-content: flex-start; /* Align to left on mobile too */
|
||||
}
|
||||
|
||||
.outer_box {
|
||||
width: calc(50% - 8px); /* 2 cards per row */
|
||||
padding: 20px 15px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.inner_box {
|
||||
height: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inner_box img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.inner_box h2 {
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.inner_box p {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.inner_box .paragraph-container {
|
||||
line-height: 1.2;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1200px){
|
||||
.wrapper {
|
||||
gap: 15px;
|
||||
justify-content: flex-start; /* Align to left on mobile too */
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.outer_box {
|
||||
width: calc(48% - 15px); /* 2 cards per row */
|
||||
padding: 30px 30px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
.inner_box h2 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.paragraph-container p{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.inner_box .paragraph-container {
|
||||
line-height: 1.2;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.topbar {
|
||||
display: none;
|
||||
@@ -2431,20 +2585,19 @@ padding: 24px 0px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.ask-advantage {
|
||||
padding: 60px 25px !important;
|
||||
}
|
||||
|
||||
.ask-advantage-home {
|
||||
.ask-advantage-home {
|
||||
padding: 40px 0px 40px 25px !important;
|
||||
}
|
||||
.ask-advantage-blog {
|
||||
padding: 60px 25px !important;
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
}
|
||||
.ask-advantage-blog2 {
|
||||
padding: 0px 0px 60px 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: 40px 25px !important;
|
||||
@@ -2474,3 +2627,11 @@ padding: 24px 0px;
|
||||
padding: 60px 25px 0 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Mobile Styles - 1 card per row (max 319px) */
|
||||
@media (max-width: 319px) {
|
||||
.outer_box {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
233
css/testing.css
233
css/testing.css
@@ -1,56 +1,46 @@
|
||||
/* 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 */
|
||||
--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 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;
|
||||
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;
|
||||
|
||||
/* margin-top: 60px; */
|
||||
}
|
||||
|
||||
|
||||
.card-scroll {
|
||||
background-image: url("../assests/images/desbackcard-scroll.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
|
||||
background-size: cover;
|
||||
|
||||
background-position: center center; /* centers it horizontally and vertically */
|
||||
|
||||
border-radius: 30px;
|
||||
@@ -59,61 +49,56 @@ section.ask-advantage-scroll {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #E6E7E8;
|
||||
box-shadow: 0px 5px 14px 0px #0000000D;
|
||||
border: 1px solid #e6e7e8;
|
||||
box-shadow: 0px 5px 14px 0px #0000000d;
|
||||
|
||||
/* reduce side padding so image aligns better */
|
||||
padding: 50px 80px 0px 80px;
|
||||
padding: 50px 80px 0px 80px;
|
||||
gap: 60px;
|
||||
transition: transform 0.3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 60%;
|
||||
margin-bottom: 50px;
|
||||
width: 60%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.card-image {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
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;
|
||||
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-desc {
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
color: #3e3f3f;
|
||||
}
|
||||
|
||||
.scroll-ul {
|
||||
margin-left: 15px;
|
||||
margin-left: 15px;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
@@ -121,98 +106,79 @@ color: #3E3F3F;
|
||||
}
|
||||
|
||||
.scroll-ul .scroll-li {
|
||||
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
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 */
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
.card-content {
|
||||
width: 100%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.card-image {
|
||||
}
|
||||
.card-image {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.card-image img {
|
||||
}
|
||||
.card-image img {
|
||||
width: 220px;
|
||||
display: block;
|
||||
}
|
||||
.card-label span {
|
||||
|
||||
}
|
||||
.card-label span {
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
.scroll-tiile {
|
||||
|
||||
}
|
||||
.scroll-tiile {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.cards-wrapper {
|
||||
|
||||
}
|
||||
.cards-wrapper {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.scroll-desc {
|
||||
|
||||
}
|
||||
.scroll-desc {
|
||||
font-size: 13px;
|
||||
|
||||
}
|
||||
.scroll-ul {
|
||||
|
||||
}
|
||||
.scroll-ul {
|
||||
display: none;
|
||||
}
|
||||
.ask-advantage-scroll h2
|
||||
|
||||
{
|
||||
|
||||
}
|
||||
.ask-advantage-scroll h2 {
|
||||
font-size: 26px;
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
.ask-advantage-scroll p.lead {
|
||||
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.ask-advantage-scroll p.lead {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cards-wrapper {
|
||||
position: relative;
|
||||
height: 530px; /* ya jitna aapko chahiye ho */
|
||||
height: 530px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -232,8 +198,7 @@ color: #3E3F3F;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
section.ask-advantage-scroll.container {
|
||||
section.ask-advantage-scroll.container {
|
||||
padding: 60px 25px 0 25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
246
js/main.js
246
js/main.js
@@ -36,64 +36,64 @@ const routes = {
|
||||
// ===============================
|
||||
const timelineData = {
|
||||
1983: {
|
||||
icon: "../assests/images/1983-Icon.svg",
|
||||
icon: "./assests/images/1983-Icon.svg",
|
||||
heading: "The beginning",
|
||||
sub1: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha,",
|
||||
sub2: "ASK Group offers research-based Investment advisory",
|
||||
sub3: "",
|
||||
},
|
||||
1991: {
|
||||
icon: "../assests/images/1991-Icon.svg",
|
||||
icon: "./assests/images/1991-Icon.svg",
|
||||
heading: "ASK Raymond James",
|
||||
sub1: "ASK Group and Raymond James",
|
||||
sub2: "Financial enter into a Partnership",
|
||||
sub3: "",
|
||||
},
|
||||
2007: {
|
||||
icon: "../assests/images/2007-Icon.svg",
|
||||
icon: "./assests/images/2007-Icon.svg",
|
||||
heading: "Launch of ASK Wealth Advisors",
|
||||
sub1: "Raymond James Financial partnership exits.",
|
||||
sub2: "",
|
||||
sub3: "",
|
||||
},
|
||||
2008: {
|
||||
icon: "../assests/images/2008-Icon.svg",
|
||||
icon: "./assests/images/2008-Icon.svg",
|
||||
heading: "Launch of ASK multi-family office",
|
||||
sub1: "",
|
||||
sub2: "",
|
||||
sub3: "",
|
||||
},
|
||||
2013: {
|
||||
icon: "../assests/images/2013-Icon.svg",
|
||||
icon: "./assests/images/2013-Icon.svg",
|
||||
heading: "License from SEBI",
|
||||
sub1: "ASK Wealth Advisors receives an",
|
||||
sub2: "Investment Advisor License from SEBI.",
|
||||
sub3: "",
|
||||
},
|
||||
2015: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "ASK Wealth Advisors adjudged",
|
||||
sub1: ` "the best Independent Wealth Advisor, 2015" `,
|
||||
sub2: "by Wealth Briefing, Asia.",
|
||||
sub3: "",
|
||||
},
|
||||
2016: {
|
||||
icon: "../assests/images/2016-Icon.svg",
|
||||
mobileIcon: "../assests/images/2016-Mobile-Icon.svg",
|
||||
icon: "./assests/images/2016-Icon.svg",
|
||||
mobileIcon: "./assests/images/2016-Mobile-Icon.svg",
|
||||
heading: "",
|
||||
sub1: "Advert International acquires minority ",
|
||||
sub2: "stake in ASK Group.",
|
||||
sub3: "",
|
||||
},
|
||||
2017: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "ASK Wealth Advisors adjudged",
|
||||
sub1: `"One to Watch - Wealth Manager - India Domestic" - Distinction, 2017"`,
|
||||
sub2: "by Asian Private Banker.",
|
||||
sub3: "",
|
||||
},
|
||||
2018: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading:
|
||||
"ASK launches its first offshore fund - ASK Global Strategies Fund",
|
||||
sub1: "TWICE IN A ROW:",
|
||||
@@ -101,21 +101,21 @@ const timelineData = {
|
||||
sub3: `"Best Performing Financial Advisor"-Wealth 2016-17 by UTI MF & CNBC TV18.`,
|
||||
},
|
||||
2019: {
|
||||
icon: "../assests/images/1983-Icon.svg",
|
||||
icon: "./assests/images/1983-Icon.svg",
|
||||
heading: "Hall of Fame",
|
||||
sub1: `ASK Wealth Advisors inducted into the "Hall of Fame"`,
|
||||
sub2: "at the Financial Advisor Awards for the Years ",
|
||||
sub3: "2018-19 and 2019-20 by UTI MF & CNBC TV18.",
|
||||
},
|
||||
2020: {
|
||||
icon: "../assests/images/2015-Icon.svg",
|
||||
icon: "./assests/images/2015-Icon.svg",
|
||||
heading: "Outstanding Private Bank",
|
||||
sub1: "Outstanding Private Bank for UNHW clients ",
|
||||
sub2: "at the Private Banker International Global",
|
||||
sub3: "Wealth Summit & Awards 2020, Singapore.",
|
||||
},
|
||||
2022: {
|
||||
icon: "../assests/images/2022-Icon.svg",
|
||||
icon: "./assests/images/2022-Icon.svg",
|
||||
heading: "Blackstone Acquisition",
|
||||
sub1: "Blackstone acquires majority stake in ",
|
||||
sub2: "ASK Group, Advert International exits.",
|
||||
@@ -329,28 +329,86 @@ window.openDrawer = function (name, role, img, desc) {
|
||||
let cards = [];
|
||||
let currentIndex = 0;
|
||||
let animating = false;
|
||||
let isInsideSection = false;
|
||||
let isSectionPinned = false;
|
||||
let scrollTrigger;
|
||||
let allowNormalScroll = false;
|
||||
|
||||
// ===============================
|
||||
// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only)
|
||||
// ===============================
|
||||
function initGsapStackScroll() {
|
||||
const section = document.querySelector(".cards-wrapper");
|
||||
const section = document.querySelector(".ask-advantage-scroll");
|
||||
if (!section) return;
|
||||
|
||||
cards = Array.from(section.querySelectorAll(".card-scroll"));
|
||||
const cardsWrapper = document.querySelector(".cards-wrapper");
|
||||
if (!cardsWrapper) return;
|
||||
|
||||
cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll"));
|
||||
if (!cards.length) return;
|
||||
|
||||
// Hide all cards initially, show the first one
|
||||
// Initial setup
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 });
|
||||
gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 });
|
||||
currentIndex = 0;
|
||||
allowNormalScroll = false;
|
||||
|
||||
section.addEventListener("mouseenter", () => (isInsideSection = true));
|
||||
section.addEventListener("mouseleave", () => (isInsideSection = false));
|
||||
// Calculate exact pinning distance
|
||||
const cardHeight = cardsWrapper.offsetHeight;
|
||||
const totalCards = cards.length;
|
||||
const pinningDistance = cardHeight * totalCards * 2;
|
||||
|
||||
window.removeEventListener("wheel", window._gsapStackHandler);
|
||||
// Scroll pinning logic
|
||||
scrollTrigger = ScrollTrigger.create({
|
||||
trigger: cardsWrapper,
|
||||
start: "top top",
|
||||
end: `+=${pinningDistance}`,
|
||||
pin: true,
|
||||
anticipatePin: 1,
|
||||
pinSpacing: true,
|
||||
onEnter: () => {
|
||||
isSectionPinned = true;
|
||||
allowNormalScroll = false;
|
||||
if (currentIndex !== 0) {
|
||||
resetToFirstCard();
|
||||
}
|
||||
},
|
||||
onLeave: () => {
|
||||
isSectionPinned = false;
|
||||
allowNormalScroll = true;
|
||||
},
|
||||
onEnterBack: () => {
|
||||
isSectionPinned = true;
|
||||
allowNormalScroll = false;
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
isSectionPinned = false;
|
||||
allowNormalScroll = true;
|
||||
},
|
||||
});
|
||||
|
||||
// ✅ Wheel handler with scroll block fix
|
||||
window._gsapStackHandler = function (e) {
|
||||
if (!isInsideSection) return;
|
||||
if (!isSectionPinned) return;
|
||||
|
||||
// Completely block scroll while animating
|
||||
if (animating) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Boundaries check
|
||||
if (
|
||||
(e.deltaY > 0 && currentIndex >= cards.length - 1) ||
|
||||
(e.deltaY < 0 && currentIndex <= 0)
|
||||
) {
|
||||
allowNormalScroll = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Start animation & block scroll during it
|
||||
e.preventDefault();
|
||||
if (animating) return;
|
||||
e.stopPropagation();
|
||||
|
||||
if (e.deltaY > 0) {
|
||||
showNextGsapCard();
|
||||
@@ -359,88 +417,135 @@ function initGsapStackScroll() {
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ Keyboard handler
|
||||
window._gsapKeyHandler = function (e) {
|
||||
if (!isSectionPinned || animating) return;
|
||||
|
||||
if (
|
||||
(e.key === "ArrowDown" && currentIndex >= cards.length - 1) ||
|
||||
(e.key === "ArrowUp" && currentIndex <= 0)
|
||||
) {
|
||||
return; // Allow normal scroll at boundaries
|
||||
}
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
showNextGsapCard();
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
showPrevGsapCard();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("wheel", window._gsapStackHandler, {
|
||||
passive: false,
|
||||
});
|
||||
window.addEventListener("keydown", window._gsapKeyHandler);
|
||||
}
|
||||
|
||||
function showNextGsapCard() {
|
||||
if (currentIndex >= cards.length - 1) return;
|
||||
// ✅ Reset to first card
|
||||
function resetToFirstCard() {
|
||||
animating = true;
|
||||
allowNormalScroll = false;
|
||||
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
|
||||
gsap.set(cards[0], {
|
||||
opacity: 1,
|
||||
y: "60px",
|
||||
zIndex: 5,
|
||||
onComplete: () => {
|
||||
currentIndex = 0;
|
||||
animating = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ Show next card
|
||||
function showNextGsapCard() {
|
||||
if (currentIndex >= cards.length - 1 || animating) return;
|
||||
|
||||
animating = true;
|
||||
allowNormalScroll = false;
|
||||
|
||||
const current = cards[currentIndex];
|
||||
const next = cards[currentIndex + 1];
|
||||
|
||||
// Animate current card (move it to previous stack position)
|
||||
gsap.to(current, {
|
||||
y: "40px",
|
||||
scale: 0.95,
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => current.classList.add("previous"),
|
||||
});
|
||||
|
||||
// Animate next card (slide in from below and become active)
|
||||
gsap.set(next, { zIndex: 5 }); // Active card gets highest z-index
|
||||
gsap.set(next, { zIndex: 5 });
|
||||
gsap.fromTo(
|
||||
next,
|
||||
{ y: "100%", opacity: 0, scale: 1 },
|
||||
{
|
||||
y: "60px", // Active card position
|
||||
y: "60px",
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
adjustPreviousCards();
|
||||
currentIndex++;
|
||||
adjustVisibleCards();
|
||||
animating = false;
|
||||
|
||||
// ✅ Allow normal scroll only after last card animation completes
|
||||
if (currentIndex >= cards.length - 1) {
|
||||
allowNormalScroll = true;
|
||||
ScrollTrigger.refresh(true);
|
||||
} else {
|
||||
allowNormalScroll = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
currentIndex++;
|
||||
}
|
||||
|
||||
// ✅ Show previous card
|
||||
function showPrevGsapCard() {
|
||||
if (currentIndex <= 0) return;
|
||||
if (currentIndex <= 0 || animating) return;
|
||||
|
||||
animating = true;
|
||||
allowNormalScroll = false;
|
||||
|
||||
const current = cards[currentIndex];
|
||||
const prev = cards[currentIndex - 1];
|
||||
|
||||
// Hide current card (slide it down)
|
||||
gsap.to(current, {
|
||||
y: "100%",
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => current.classList.remove("previous"),
|
||||
});
|
||||
|
||||
// Bring back previous card as active
|
||||
gsap.set(prev, { zIndex: 5 }); // Active card gets highest z-index
|
||||
gsap.set(prev, { zIndex: 5 });
|
||||
gsap.to(prev, {
|
||||
y: "60px", // Active card position
|
||||
y: "60px",
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
ease: "power2.inOut",
|
||||
onComplete: () => {
|
||||
adjustPreviousCards();
|
||||
currentIndex--;
|
||||
adjustVisibleCards();
|
||||
animating = false;
|
||||
|
||||
if (currentIndex <= 0) {
|
||||
allowNormalScroll = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
currentIndex--;
|
||||
}
|
||||
|
||||
// 🪄 Adjust visible cards (up to 4-layer stack including active card)
|
||||
function adjustPreviousCards() {
|
||||
// Reset all cards to default state
|
||||
// ✅ Adjust visible cards stack
|
||||
function adjustVisibleCards() {
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
|
||||
// Always show the current active card
|
||||
// Active card
|
||||
if (cards[currentIndex]) {
|
||||
gsap.set(cards[currentIndex], {
|
||||
y: "60px",
|
||||
@@ -450,13 +555,13 @@ function adjustPreviousCards() {
|
||||
});
|
||||
}
|
||||
|
||||
// Show up to 3 previous cards in the stack
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
// Show only 2 previous cards
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
const prevIndex = currentIndex - i;
|
||||
if (prevIndex >= 0) {
|
||||
const yOffset = 60 - i * 30; // 60px, 40px, 20px, 0px
|
||||
const scale = 1 - i * 0.05; // 1, 0.95, 0.9, 0.85
|
||||
const zIndex = 5 - i; // 5, 4, 3, 2
|
||||
const yOffset = 60 - i * 25;
|
||||
const scale = 1 - i * 0.05;
|
||||
const zIndex = 5 - i;
|
||||
|
||||
gsap.set(cards[prevIndex], {
|
||||
y: `${yOffset}px`,
|
||||
@@ -466,9 +571,36 @@ function adjustPreviousCards() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Hide older cards
|
||||
const hideIndex = currentIndex - 3;
|
||||
if (hideIndex >= 0 && cards[hideIndex]) {
|
||||
gsap.to(cards[hideIndex], {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
duration: 0.6,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ Cleanup function
|
||||
function cleanupGsapStackScroll() {
|
||||
if (window._gsapStackHandler) {
|
||||
window.removeEventListener("wheel", window._gsapStackHandler);
|
||||
}
|
||||
if (window._gsapKeyHandler) {
|
||||
window.removeEventListener("keydown", window._gsapKeyHandler);
|
||||
}
|
||||
if (scrollTrigger) {
|
||||
scrollTrigger.kill();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize after DOM load
|
||||
document.addEventListener("DOMContentLoaded", initGsapStackScroll);
|
||||
window.addEventListener("beforeunload", cleanupGsapStackScroll);
|
||||
|
||||
|
||||
// ===============================
|
||||
// ✅ Load Page Content Dynamically
|
||||
@@ -483,6 +615,16 @@ function loadPage() {
|
||||
document.getElementById("page-content").innerHTML = html;
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
||||
// ✅ Hide footer for #/our-fund route
|
||||
const footer = document.getElementById("footer");
|
||||
if (footer) {
|
||||
if (hash === "#/our-fund") {
|
||||
footer.style.display = "none";
|
||||
} else {
|
||||
footer.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
// Init all components after content load
|
||||
initSwiper();
|
||||
initTimelineSwiper();
|
||||
|
||||
209
pages/home.html
209
pages/home.html
@@ -201,7 +201,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="mt-4 date-container">
|
||||
<span class="as-of-date ">As of July 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -339,105 +339,122 @@
|
||||
|
||||
|
||||
<section class="ask-advantage container">
|
||||
<h2>Life Moments You Can Plan For</h2>
|
||||
<h2 class="ask-advantage-heading">Life Moments You Can Plan For</h2>
|
||||
<p class="lead">Choose a Goal and we’ll help you invest for it, step by step</p>
|
||||
|
||||
<div class="row descktop descktop-marging-new mobile-left">
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
|
||||
<h6 class=" text-primary">Buying My Dream Home</h6>
|
||||
<p class="text-muted small">Save up for the perfect place at your pace</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
|
||||
<h6 class=" text-primary">Kids' Big<br> Dreams</h6>
|
||||
<p class="text-muted small">Because tuition shouldn’t be a worry</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon1">
|
||||
<img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
|
||||
<h6 class=" text-primary">Early <br>Retirement Goals</h6>
|
||||
<p class="text-muted small">Plan your work-free years ahead</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
|
||||
<h6 class=" text-primary">Saving Taxes the Right Way</h6>
|
||||
<p class="text-muted small">Optimize your tax savings legally</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life1.svg" alt="Dream Home" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h1">Buying My</h2>
|
||||
<h2 class="h1">Dream Home</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Save up for the perfect</p>
|
||||
<p>place at your pace</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row descktop descktop-marging-new mobile-left">
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon2">
|
||||
<img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
|
||||
<h6 class=" text-primary">Dream Vacation</h6>
|
||||
<p class="text-muted small">Turn your dream getaway into reality</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
|
||||
<h6 class=" text-primary">Emergency Corpus</h6>
|
||||
<p class="text-muted small">Stay prepared for life’s unexpected turns</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon3">
|
||||
<img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
|
||||
<h6 class=" text-primary">Regular Income</h6>
|
||||
<p class="text-muted small">Secure a steady flow of income</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon4">
|
||||
<img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
|
||||
<h6 class=" text-primary">Wealth Creation</h6>
|
||||
<p class="text-muted small">Grow your money steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life2.svg" alt="Kid's Dream" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h2">Kid's Big</h2>
|
||||
<h2 class="h2">Dream</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Because Tution</p>
|
||||
<p>shoudln't be worry</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mobile mobile-left">
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
|
||||
<h6 class=" text-primary">Buying My Dream Home</h6>
|
||||
<p class="text-muted small">Save up for the perfect place at your pace</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon1">
|
||||
<img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
|
||||
<h6 class=" text-primary">Kids' Big Dreams</h6>
|
||||
<p class="text-muted small">Because tuition shouldn’t be a worry</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon2">
|
||||
<img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
|
||||
<h6 class=" text-primary">Early Retirement Goals</h6>
|
||||
<p class="text-muted small">Plan your work-free years ahead</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon3">
|
||||
<img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
|
||||
<h6 class=" text-primary">Saving Taxes the Right Way</h6>
|
||||
<p class="text-muted small">Optimize your tax savings legally</p>
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life3.svg" alt="Retirement" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h3">Early</h2>
|
||||
<h2 class="h3">Retirement Goals</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Plan your work-</p>
|
||||
<p>free years ahead</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life4.svg" alt="Tax Savings" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h4">Saving Taxes The</h2>
|
||||
<h2 class="h4">Right Way</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Optimize your tax</p>
|
||||
<p>savings legally</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mobile mobile-left">
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon4">
|
||||
<img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
|
||||
<h6 class=" text-primary">Dream Vacation</h6>
|
||||
<p class="text-muted small">Turn your dream getaway into reality</p>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life5.svg" alt="Vacation" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h5">Dream</h2>
|
||||
<h2 class="h5">Vacation</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Turn your dream</p>
|
||||
<p>getaway into reality</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life6.svg" alt="Emergency Fund" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h6">Emergency</h2>
|
||||
<h2 class="h6">Corpus</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Stay prepared for life's</p>
|
||||
<p>unexpected turns</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life7.svg" alt="Regular Income" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h7">Regular</h2>
|
||||
<h2 class="h7">Income</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Secure a steady</p>
|
||||
<p>flow of income</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life8.svg" alt="Wealth Creation" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h8">Wealth</h2>
|
||||
<h2 class="h8">Creation</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Grow your money</p>
|
||||
<p>steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon5">
|
||||
<img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
|
||||
<h6 class=" text-primary">Emergency Corpus</h6>
|
||||
<p class="text-muted small">Stay prepared for life’s unexpected turns</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon6">
|
||||
<img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
|
||||
<h6 class=" text-primary">Regular Income</h6>
|
||||
<p class="text-muted small">Secure a steady flow of income</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon7">
|
||||
<img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
|
||||
<h6 class=" text-primary">Wealth Creation</h6>
|
||||
<p class="text-muted small">Grow your money steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -478,7 +495,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog1.svg" alt="Understanding SIPs" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
|
||||
<h5 class="home-tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Small monthly investments can lead to big financial milestones. Explore how SIPs work, why they matter, and
|
||||
@@ -492,7 +509,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog2.svg" alt="Goals First" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
|
||||
<h5 class="home-tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Whether it’s your dream home or your child’s future, financial goals need clarity and discipline. Learn how
|
||||
@@ -506,7 +523,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog3.svg" alt="Market Cycles" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
|
||||
<h5 class="home-tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Markets rise and fall — but how does that impact your mutual fund investments? Learn how long-term compounding
|
||||
|
||||
Reference in New Issue
Block a user