177 lines
4.0 KiB
HTML
177 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
|
||
|
||
</head>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
/* CTA Background */
|
||
|
||
.bg-secn-prt {
|
||
background: url("./wp-content/themes/evisa/assets/img/cta.png") center/cover no-repeat fixed;
|
||
position: relative;
|
||
}
|
||
|
||
/* Overlay */
|
||
.cta__overlay {
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(245, 130, 31, 0.8) 0%, /* #F5821F with 80% opacity */
|
||
rgba(245, 130, 31, 0.6) 50%, /* mid fade */
|
||
rgba(245, 130, 31, 0.4) 100% /* lighter at bottom */
|
||
);
|
||
}
|
||
|
||
|
||
/* Increased height */
|
||
.cta__inner11 {
|
||
padding: 120px 0; /* MORE HEIGHT */
|
||
}
|
||
|
||
/* Text */
|
||
.cta__title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cta__text11 {
|
||
font-size: 16px;
|
||
color: #e0e0e0;
|
||
max-width: 720px;
|
||
}
|
||
|
||
/* Button group */
|
||
.cta-btn-group {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Base button */
|
||
.cta-btn {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
padding: 18px 40px;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
background: linear-gradient(135deg, #F5821F, #ff9b45);
|
||
transition: transform 0.45s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* Liquid fill */
|
||
.cta-btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -30%;
|
||
width: 140%;
|
||
height: 140%;
|
||
background: linear-gradient(135deg, #ff9b45, #F5821F);
|
||
border-radius: 50% 50% 0 0;
|
||
transform: translateX(-50%) scaleY(0);
|
||
transform-origin: bottom;
|
||
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
|
||
border-radius 0.9s ease;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Hover */
|
||
.cta-btn:hover::before {
|
||
transform: translateX(-50%) scaleY(1);
|
||
border-radius: 0;
|
||
}
|
||
|
||
.cta-btn:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Secondary button */
|
||
.cta-btn.outline {
|
||
background: transparent;
|
||
border: 2px solid #F5821F;
|
||
}
|
||
|
||
.cta-btn.outline::before {
|
||
|
||
}
|
||
@media (max-width: 575px) {
|
||
.cta__inner {
|
||
padding: 80px 0; /* slightly smaller on mobile */
|
||
}
|
||
|
||
.cta__title {
|
||
font-size: 24px;
|
||
line-height: 1.3;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta__text {
|
||
font-size: 15px;
|
||
text-align: center;
|
||
margin: 0 auto 25px;
|
||
}
|
||
|
||
.cta-btn-group {
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cta-btn {
|
||
width: 100%;
|
||
max-width: 280px;
|
||
padding: 16px 24px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|
||
<body>
|
||
<section class="cta__area bg-secn-prt">
|
||
<div class="cta__overlay">
|
||
<div class="container">
|
||
<div class="cta__inner11">
|
||
<div class="row align-items-center">
|
||
|
||
<div class="col-lg-6 col-md-12">
|
||
<h3 class="cta__title">
|
||
Still Unsure? Let’s Make It Easy for You!
|
||
</h3>
|
||
<p class="cta__text11">
|
||
Choosing the right path can be overwhelming. Our experts are here to guide you
|
||
and help you make confident decisions for your future.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-lg-6 col-md-12 mt-4 mt-lg-0 text-lg-end">
|
||
<div class="cta-btn-group">
|
||
<a href="#" class="btn cta-btn">
|
||
Book Free Consultation
|
||
</a>
|
||
<a href="#" class="btn cta-btn outline">
|
||
Talk to an Expert
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
</body>
|
||
</html> |