html{
overflow-x: hidden;
}
body{
margin: auto;
overflow-x: hidden;
font-family: 'Helvetica Neue';
}
a{
transition:all ease-in-out .4s;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Black.eot');
src: url('../fonts/HelveticaNeue-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Black.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Black.woff') format('woff'),
url('../fonts/HelveticaNeue-Black.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Black.svg#HelveticaNeue-Black') format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-BlackItalic.eot');
src: url('../fonts/HelveticaNeue-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-BlackItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-BlackItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-BlackItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-BlackItalic.svg#HelveticaNeue-BlackItalic') format('svg');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-BoldItalic.eot');
src: url('../fonts/HelveticaNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-BoldItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-BoldItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-BoldItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-BoldItalic.svg#HelveticaNeue-BoldItalic') format('svg');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Bold.eot');
src: url('../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Bold.woff') format('woff'),
url('../fonts/HelveticaNeue-Bold.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Heavy.eot');
src: url('../fonts/HelveticaNeue-Heavy.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Heavy.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Heavy.woff') format('woff'),
url('../fonts/HelveticaNeue-Heavy.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Heavy.svg#HelveticaNeue-Heavy') format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-HeavyItalic.eot');
src: url('../fonts/HelveticaNeue-HeavyItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-HeavyItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-HeavyItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-HeavyItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-HeavyItalic.svg#HelveticaNeue-HeavyItalic') format('svg');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Italic.eot');
src: url('../fonts/HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Italic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Italic.woff') format('woff'),
url('../fonts/HelveticaNeue-Italic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Italic.svg#HelveticaNeue-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Light.eot');
src: url('../fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Light.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Light.woff') format('woff'),
url('../fonts/HelveticaNeue-Light.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-LightItalic.eot');
src: url('../fonts/HelveticaNeue-LightItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-LightItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-LightItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-LightItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-LightItalic.svg#HelveticaNeue-LightItalic') format('svg');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Medium.eot');
src: url('../fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Medium.woff') format('woff'),
url('../fonts/HelveticaNeue-Medium.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-MediumItalic.eot');
src: url('../fonts/HelveticaNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-MediumItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-MediumItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-MediumItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-MediumItalic.svg#HelveticaNeue-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Roman.eot');
src: url('../fonts/HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Roman.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Roman.woff') format('woff'),
url('../fonts/HelveticaNeue-Roman.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Roman.svg#HelveticaNeue-Roman') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Thin.eot');
src: url('../fonts/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Thin.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Thin.woff') format('woff'),
url('../fonts/HelveticaNeue-Thin.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-ThinItalic.eot');
src: url('../fonts/HelveticaNeue-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-ThinItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-ThinItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-ThinItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-ThinItalic.svg#HelveticaNeue-ThinItalic') format('svg');
font-weight: 100;
font-style: italic;
font-display: swap;
}
.service-sec-det {
width: 100%;
float: left;
padding: 90px 0;
background: #fff;
border-bottom: 1px dashed #edf0f5;
position: relative;
}
.service-sec-det .container {
}
/* =========================================
LEFT CONTENT
========================================= */
.service-left {
width: 65%;
float: left;
padding-right: 55px;
}
/* Image */
.service-left img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
border-radius: 24px;
float: left;
position: relative;
box-shadow: 0 20px 50px rgba(25, 35, 60, 0.12);
transition: all 0.5s ease;
}
.service-left img:hover {
transform: translateY(-5px);
box-shadow: 0 28px 60px rgba(25, 35, 60, 0.16);
}
/* Heading */
.service-left h2 {
width: 100%;
float: left;
margin: 20px 0 0;
font-size: 44px;
line-height: 1.15;
letter-spacing: -1px;
color: #000000;
font-weight: 700;
}
/* Small accent line */
.service-left h2:after {
/* content: ''; */
width: 55px;
height: 4px;
background: #f36719;
border-radius: 10px;
display: block;
margin-top: 18px;
}
/* Paragraph */
.service-left p {
width: 100%;
float: left;
margin: 10px 0 5px;
font-size: 16px;
line-height: 1.85;
color: #667085;
font-weight: 400;
}
/* =========================================
FEATURE LIST
========================================= */
.service-left ul {
width: 100%;
float: left;
padding: 0;
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.service-left ul li {
width: auto;
float: none;
display: inline-flex;
align-items: center;
min-height: 45px;
margin: 0;
padding: 8px 18px 8px 45px;
list-style: none;
position: relative;
background: #fff8f3;
border: 1px solid #ffe2d2;
border-radius: 50px;
font-size: 14px;
line-height: 1.4;
color: #555f6d;
font-weight: 500;
transition: all 0.3s ease;
}
.service-left ul li:hover {
background: #f36719;
border-color: #f36719;
color: #fff;
transform: translateY(-2px);
}
/* Tick icon */
.service-left ul li:after {
position: absolute;
content: '';
width: 20px;
height: 20px;
left: 15px;
top: 50%;
transform: translateY(-50%);
background-image: url('../images/ico4.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.3s ease;
}
.service-left ul li:hover:after {
filter: brightness(0) invert(1);
}
/* =========================================
RIGHT ENQUIRY CARD
========================================= */
.service-right {
width: 35%;
float: right;
background: #fff8f3;
padding: 42px 38px 40px;
border: 1px solid #ffe5d6;
border-radius: 24px;
box-shadow: 0 18px 50px rgba(35, 35, 35, 0.08);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/* Decorative circle */
.service-right:before {
content: '';
position: absolute;
width: 170px;
height: 170px;
right: -80px;
top: -80px;
background: rgba(243, 103, 25, 0.08);
border-radius: 50%;
}
/* Second decorative circle */
.service-right:after {
content: '';
position: absolute;
width: 100px;
height: 100px;
left: -55px;
bottom: -55px;
background: rgba(243, 103, 25, 0.05);
border-radius: 50%;
}
/* Heading */
.service-right h2 {
width: 100%;
float: left;
position: relative;
z-index: 2;
margin: 0;
font-size: 30px;
line-height: 1.25;
color: #101828;
font-weight: 700;
letter-spacing: -0.5px;
}
/* Heading accent */
.service-right h2:after {
/* content: ''; */
display: block;
width: 45px;
height: 3px;
background: #f36719;
border-radius: 10px;
margin-top: 14px;
}
/* Form */
.service-right form {
width: 100%;
float: left;
position: relative;
z-index: 2;
}
/* Form field */
.service-field {
width: 100%;
float: left;
margin-top: 18px;
}
/* Label */
.service-field label {
width: 100%;
float: left;
margin-bottom: 7px;
font-size: 14px;
color: #344054;
font-weight: 600;
}
/* Input */
.service-field input {
width: 100%;
height: 52px;
float: left;
padding: 0 17px;
background: #fff;
border: 1px solid #e4e7ec;
border-radius: 12px;
outline: none;
font-size: 15px;
color: #101828;
box-sizing: border-box;
transition: all 0.3s ease;
}
/* Input focus */
.service-field input:focus {
border-color: #f36719;
box-shadow: 0 0 0 4px rgba(243, 103, 25, 0.09);
}
/* Submit */
.service-right button {
width: 100%;
height: 54px;
float: left;
margin-top: 25px;
padding: 0 25px;
background: #f36719;
border: 0;
border-radius: 50px;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 25px rgba(243, 103, 25, 0.22);
transition: all 0.35s ease;
}
/* Button hover */
.service-right button:hover {
background: #1b2c58;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(243, 103, 25, 0.28);
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.service-sec-det {
padding: 65px 0;
}
.service-left {
width: 100%;
padding-right: 0;
}
.service-left img {
height: 380px;
}
.service-left h2 {
font-size: 38px;
}
.service-right {
width: 100%;
margin-top: 50px;
padding: 40px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.service-sec-det {
padding: 50px 0;
}
.service-left img {
height: 250px;
border-radius: 18px;
}
.service-left h2 {
font-size: 30px;
line-height: 1.2;
margin-top: 28px;
}
.service-left h2:after {
margin-top: 14px;
}
.service-left p {
font-size: 15px;
line-height: 1.75;
}
.service-left ul {
gap: 8px;
}
.service-left ul li {
font-size: 13px;
padding: 8px 14px 8px 40px;
}
.service-left ul li:after {
left: 12px;
}
.service-right {
margin-top: 40px;
padding: 30px 22px;
border-radius: 20px;
}
.service-right h2 {
font-size: 25px;
}
.service-field input {
height: 50px;
}
.service-right button {
height: 52px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.service-left img {
height: 220px;
}
.service-left h2 {
font-size: 35px;
}
.service-right {
padding: 27px 18px;
}
}
One import.cta:after{
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.cta{width: 100%;float: left;background-image: url('../images/cta-bg.webp');background-size: cover;background-position: center;padding: 200px 0;position: relative;text-align: center;background-attachment: fixed;}
.cta h2{font-size: 60px;color: #ffffff;font-weight: 700;line-height: 120%;position: relative;z-index: 9;margin-bottom: 20px;}
.cta a{background: #f36719;font-size: 18px;color: #ffffff;font-weight: 700;text-decoration: none;padding: 13px 30px;border-radius: 30px;float: none;margin: 20px auto;}
.cta a:hover{background: #fff;color: #000;background: #ffffff;animation: 1.5s infinite pulse5;}
.service-p{
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 220px;
}
.service-box:hover{
background: #fbede5;
}.service-box:hover h6{
color: #1e2e59;
}
.service-sec{width: 100%;float: left;padding: 70px 0;background: #fff;margin-top: -40px;border-top-left-radius: 40px;border-top-right-radius: 40px;}
.service-sec h2{font-size: 50px;color: #000;font-weight: 700;text-align: center;margin: 0;}
.service-box{width: 100%;float: left;border: 1px dashed #cecece;padding: 20px;margin-top: 30px;border-radius: 20px;}
.service-box h6{font-size: 30px;color: #000;font-weight: 600;float: left;width: 40%;}
.service-box .s1{width: 57px;float: right;padding: 15px;background: #fbede5;border-radius: 10px;}
.service-box p{width: 100%;float: left;font-size: 16px;color: #A9A9A9;line-height: 160%;font-weight: 400;margin-top: 0;}
.service-box a{float: left;background: #f36719;padding: 10px 20px;font-size: 16px;color: #fff;text-decoration: none;border-radius: 30px;}
.service-box a img{width: 24px;margin-left: 10px;}
.service-box a:hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.innerban{
width: 100%;
float: left;
background-image: url('../images/innerban.webp');
height: 350px;
margin-top: -140px;
background-size: cover;
background-position: center;
}
.ftr-left form input:focus-visible{
outline: none;
}
.ftr-left{border-left: 1px dashed #586999;float: left;width: 47%;padding: 80px 80px 118px;border-right: 1px dashed #586999;}
.ftr-left h6{font-size: 20px;color: #fff;font-weight: 500;float: left;width: 100%;}
.ftr-left form{width: 100%;float: left;position: relative;margin-bottom: 30px;}
.ftr-left form button:hover img{
animation-name: zoomIn;
animation-duration: .5s;
animation-iteration-count: 1;
}
.ftr-left form button:hover{
color: #000;
background: #ffffff;
animation: 1.5s infinite pulse5;
}
.ftr-left form input{background: transparent;border-top: 0;border-left: 0;border-right: 0;border-bottom: 1px solid #444f6e;font-size: 15px;color: #fff;width: 100%;padding: 10px 0;}
.ftr-left form button{position: absolute;background: #f36719;border: 0;right: 0;top: -4px;height: 35px;font-size: 13px;color: #fff;font-weight: 400;padding: 8px 15px;border-radius: 30px;}
.ftr-left form button img{width: 18px;}
.ftr-left h5{font-size: 18px;color: #fff;margin-top: 15px;font-weight: 700;float: left;width: 100%;}
.ftr-left p{font-size: 16px;color: #fff;font-weight: 400;line-height: 160%;float: left;width: 100%;}
.ftr-left p a{font-size: 16px;color: #fff;font-weight: 400;line-height: 160%;text-decoration: none;}
.ftr-left p a:hover{
}
.ftr-copy p{
width: 50%;
float: left;
font-size: 16px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0;
}
.ftr-copy h6{
width: 50%;
float: right;
font-size: 16px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0;
text-align: right;
}
.ftr-copy h6 a{
color: #fff;
text-decoration: none;
}
.ftr-copy h6 a:hover{
color: #f36719;
}
.ftr-copy{
float: left;
width: 100%;
border-top: 1px solid #586999;
}
.ftr-right{border-right: 1px dashed #586999;float: left;width: 53%;padding: 80px 30px 149px 80px;}
.quickbox{width: 50%;float: left;}
.ftr-right h2{font-size: 20px;color: #fff;font-weight: 700;margin-bottom: 20px;}
.ftr-right a{color: #fff;width: 100%;float: left;font-size: 16px;text-decoration: none;padding: 10px 0;}
.ftr-right a:hover{color: #f36719;}
.ftr-social{float: left;width: 100%;margin-top: 30px;}
.ftr-social a{width: 50px;height: 50px;border: 1px solid #cecece;display: inline-block;margin: 0 10px 0 0;text-align: center;border-radius: 100%;position: relative;}
.ftr-social a img{width: 28px;}
.ftr-social a:hover{background: #f36719;border-color: #f36719;}
.ftr-social a:hover img{
animation: 1.5s infinite pulse3;
}
.footer{
background: #23325B;
background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);
width: 100%;
float: left;
}
.p7-left a{
background: #F36719;
width: 259px;
height: 54px;
float: left;
font-size: 18px;
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 15px 20px;
border-radius: 30px;
}
.p7-left a img{
width: 24px;
float: right;
margin-top: 1px;
}
.p7-left a:hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
}
.panel7{width: 100%;float: left;padding: 70px 0;}
.p7-left{width: 50%;float: left;}
.p7-left h2{font-size: 60px;color: #000;font-weight: 500;width: 80%;margin-bottom: 30px;}
.p7-left p{font-size: 16px;color: #A9A9A9;font-weight: 400;width: 51%;margin-bottom: 30px;}
.p7-right{
width: 48%;
float: right;
}
.faq-accordion .accordion-item{
border-bottom: 1px solid #e5e5e5;
border-radius:12px;
overflow:hidden;
margin-bottom:15px;
background: #F8F5F1;
border-left: 0;
border-right: 0;
border-radius: 0;
border-top: 0;
margin-bottom: 0;
}
.faq-accordion .accordion-button{
background:#fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 80px 30px 70px;
box-shadow:none;
position:relative;
border-top: 0 !important;
}
.accordion-body{
font-size: 18px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 15px 70px;
position: relative;
}
.faq-accordion .accordion-button:not(.collapsed){
background: #F8F5F1;
color: #000;
box-shadow:none;
}
.faq-accordion .accordion-button:focus{
box-shadow:none;
}
/* Remove Bootstrap default arrow */
.faq-accordion .accordion-button::after{
display:none;
}
/* Plus / Minus */
.faq-accordion .accordion-button::before{
content:"+";
position:absolute;
right:25px;
top: 35%;
transform:translateY(-50%);
width:30px;
height:30px;
border: 2px solid #A9A9A9;
border-radius:50%;
color: #A9A9A9;
display:flex;
align-items:center;
justify-content:center;
font-size: 18px;
font-weight:500;
transition:.3s;
}
.faq-accordion .accordion-button:not(.collapsed)::before{
content:"-";
background: #f8f5f1;
color: #000000;
border-color: #000;
}
.panel6 .owl-nav{
position: relative;
}
.panel6 .owl-next:hover{
background: #f26719 !important;
border-color: #f26719 !important;
}
.panel6 .owl-prev:hover{
background: #f26719 !important;
border-color: #f26719 !important;
}
.panel6 .owl-next:hover img{
filter: brightness(111);
}
.panel6 .owl-prev:hover img{
filter: brightness(111);
}
.panel6 .owl-prev{
position: absolute;
top: -280px;
left: -45px;
width: 88px;
height: 56px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next{
position: absolute;
top: -280px;
right: -44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
width: 88px;
height: 56px;
transform: rotate(180deg);
}
.panel6 .owl-prev img{
width: 24px;
}.panel6 .owl-next img{
width: 24px;
}
.c-name span{
font-size: 16px;
color: #A9A9A9;
float: left;
}
.panel6{width: 100%;float: left;background: #FCFCFC;}
.panel6-left{width: 100%;float: left;border-left: dashed 1px #c0c0c0;border-right: dashed 1px #c0c0c0;padding: 0;}
.p6-carousel1{
}.p6-box:nth-child(3n){
border-right: 0;
}.p6-box:nth-child(even) {
border-right: dashed 1px #c0c0c0;
}
.p6-box{width: 100%;float: left;border-right: dashed 1px #c0c0c0;padding: 100px 60px 110px;}
.p6-box img{width: 150px !important;}
.p6-box p{font-size: 25px;color: #000;font-weight: 400;line-height: 120%;margin-top: 20px;}
.c-name{width: 100%;float: left;/* display: flex; *//* flex-direction: row; *//* display: flex; */ /* Stack vertically *//* gap: 20px; */}
.c-name h5{width: 64px;height: 64px;background: #C3C7DF;border-radius: 100%;text-align: center;padding: 20px;font-size: 22px;color: #000;font-weight: 700;float: left;margin-right: 20px;}
.c-name h6{font-size: 20px;color: #3C2D25;font-weight: 700;/* float: left; */margin: 0;padding-top: 10px;}
.c-name h6 span{/* float: left; */font-size: 16px;color: #A9A9A9;font-weight: 400;/* clear: both; */}
.panel6-right{
}
.p6-carousel2{
}
.panel5{width: 100%;float: left;background-image: url('../images/bg2.png');margin-top: 50px;background-size: cover;background-position: center;padding: 115px 0;}
.panel5 h6{margin-bottom: 12px;font-size: 18px;color: #A9A9A9;font-weight: 400;}
.panel5 h6 img{width: 27px;position: relative;left: 5px;top: -2px;}
.panel5 h2{font-size: 64px;color: #fff;width: 60%;}
.panel5 p{
font-size: 16px;
color: #A9A9A9;
width: 49%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}
.panel4{width: 100%;background-image: url('../images/bg1.png');background-size: cover;background-position: center;background-repeat: no-repeat;background-color: #F8F5F1;border-radius: 32px;max-width: 97%;display: table;padding: 65px 75px 75px;margin: auto;}
.panel4 h2{text-align: center;font-size: 65px;color: #000;font-weight: 500;}
.p4-box-full{width: 100%;float: left;padding: 20px 0 30px;border-top: 1px solid #A9A9A9;border-bottom: 1px solid #A9A9A9;margin-top: 40px;}
.p4-box{width: 25%;float: left;}
.p4-box h5{font-size: 100px;color: #000;}
.p4-box h6{
font-size: 24px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}
.panel3{width: 100%;float: left;background: #fcfcfc;margin-bottom: 46px;}
.p3-left1{width: 50%;float: left;padding: 120px 63px 20px;border-left: dashed 1px #c0c0c0;border-right: dashed 1px #c0c0c0;}
.p3-left1 h2{font-size: 60px;color: #000;line-height: 100%;}
.p3-right1{width: 50%;float: left;padding: 190px 63px 5px;border-right: dashed 1px #c0c0c0;}
.p3-right1 p{font-size: 16px;color: #A9A9A9;font-weight: 400;line-height: 160%;}
.p3-right1 a{
width: 220px;
height: 54px;
border: 1px solid #2F2A27;
float: left;
font-size: 18px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 14px 20px;
border-radius: 30px;
margin-top: 10px;
}.p3-right1 a:hover img{
filter: invert(1);
}
.p3-right1 a img{width: 24px;float: right;margin-top: 2px;}
.p3-right1 a:hover{background: #1c2c58;animation: 1.5s infinite pulse3;color: #fff;}
.p3-left2{width: 50%;float: left;border-left: dashed 1px #c0c0c0;border-right: dashed 1px #c0c0c0;margin-top: -60px;padding-top: 60px;}
.p3-left-box{width: 100%;float: left;padding: 60px 70px;transition: .4s;}
.s-img{width: 57px;float: right;padding: 15px;background: #fbede5;border-radius: 10px;}
.p3-left-box h5{font-size: 40px;color: #000;font-weight: 500;float: left;}
.p3-left-box p{width: 100%;float: left;font-size: 16px;color: #A9A9A9;line-height: 160%;margin-top: 15px;font-weight: 400;}
.p3-right2{width: 50%;float: left;border-right: dashed 1px #c0c0c0;}
.p3-left-box:hover{background: #23325B;}
.p3-left-box:hover h5{color: #fff;}
.p3-left-box:hover p{
}
.p3-left-box:hover img{
}
.panel3-right
{float: right;width: 67%;}
.panel3-right h6{color: #A9A9A9;font-size: 18px;font-weight: 400;text-transform: uppercase;}
.panel3-right h6 img{width: 27px;position: relative;left: 5px;top: -2px;}
.panel3-right h2{
font-size: 61px;
color: #fff;
font-weight: 500;
line-height: 100%;
}
.panel2{background: #23325B;background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);width: 100%;float: left;padding: 70px 0;position: relative;}
.p2-img{position: absolute;top: -37px;left: 0;width: 405px;}
.moving-section{
width:100%;
overflow:hidden;
padding: 20px 0 0;
}
.moving-track{
display:flex;
width:max-content;
animation: marquee 35s linear infinite;
}
.moving-section:hover .moving-track{
animation-play-state:paused;
}
.moving-item:after{
position:absolute;
content:'';
background-image: url('../images/ico4.png');
width: 25px;
height: 25px;
background-position: center;
background-size: contain;
left: -40px;
top: 12px;
background-repeat: no-repeat;
}
.moving-item{
/* width:260px; */
margin: 0 30px;
border-radius:18px;
text-align:center;
flex-shrink:0;
position: relative;
}
.moving-item img{
width: 190px;
margin-bottom:20px;
height: 80px;
object-fit: contain;
}
.moving-item h4{
margin:0;
font-size:22px;
font-weight:600;
}
@keyframes marquee{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
/* Desktop */
@media(min-width:1200px){
.moving-item{
/* width: calc((100vw - 50px)/7); */
}
}
/* Tablet */
@media(max-width:991px){
.moving-item{
width:300px;
}
}
/* Mobile */
@media(max-width:767px){
.moving-item{
width:250px;
}
}.panel1-left h2 br{
display: none;
}
.panel1{width: 100%;float: left;border-top-left-radius: 40px;border-top-right-radius: 40px;margin-top: -40px;position: relative;z-index: 99;background: #fff;}
.panel1-left{width: 56%;float: left;padding: 181px 70px;border-left: dashed 1px #c0c0c0;border-right: dashed 1px #c0c0c0;}
.panel1-left h2{font-size: 62px;color: #000;font-weight: 500;}
.panel1-left p{margin: 0;font-size: 16px;color: #A9A9A9;padding-top: 0;margin: 0;line-height: 160%;width: 100%;}
.panel1-right{width: 44%;float: left;padding: 140px 83px 118px 45px;border-right: dashed 1px #c0c0c0;}
.panel1-right h5{font-size: 24px;color: #000;margin-top: 16px;float: left;width: 100%;font-weight: 500;}
.p1-right-img{
position: relative;
float: left;
width: 100%;
}
.img1{
width: 100%;
height: 196px;
object-fit: cover;
border-radius: 16px;
position: relative;
z-index: 9;
}
.img2{
position: absolute;
right: -36px;
top: -78px;
z-index: 0;
}
.panel1-right h6{font-size: 16px;color: #A9A9A9;font-weight: 400;line-height: 160%;}
.panel1-right a{width: 194px;height: 54px;border: 1px solid #2F2A27;float: left;font-size: 18px;color: #2F2A27;font-weight: 700;text-decoration: none;padding: 14px 20px;border-radius: 30px;margin-top: 20px;}
.panel1-right a img{width: 24px;float: right;margin-top: 2px;}
.panel1-right a:hover{background: #1c2c58;animation: 1.5s infinite pulse3;color: #fff;}
.panel1-right a:hover img{
filter: invert(1);
}
.max-text-ban{position: absolute;right: 8%;bottom: 140px;z-index: 99;max-width: 406px;}
.max-text-ban a{display: inline-block;margin-right: 10px;}
.max-text-ban a img{width: 72px;height: 72px;transform: none;animation: none;}
.max-text-ban a:hover img{animation-name: zoomIn;animation-duration: .5s;animation-iteration-count: 1;}
.max-text-ban p{
font-size: 16px;
color: #fff;
font-weight: 400;
line-height: 160%;
width: 75%;
float: right;
margin: 0;
padding-top: 11px;
}
.btn1{background: #fff;width: 138px;height: 52px;text-align: center;float: left;color: #000;font-size: 16px;font-weight: 500;text-decoration: none;border-radius: 30px;padding: 15px 0;}
.btn2{background: transparent;width: 138px;height: 52px;text-align: center;float: left;color: #fff;font-size: 16px;font-weight: 500;text-decoration: none;border-radius: 30px;padding: 15px 0;}
.btn1:hover{
background: #f36719;
animation: 1.5s infinite pulse4;
color: #fff;
}
.btn2:hover{
/* background: #fff; */
color: #f36719;
}
.hero-slider{
height: 868px;
width: 100%;
float: left;
margin-top: -140px;
position: relative;
}
.hero-slider .carousel-item{
height: 868px;
overflow:hidden;
}
.hero-slider img{width:100%;height: 868px;object-fit:cover;transform:scale(1);animation:kenburns 10s linear infinite;}
.overlay{position:absolute;inset:0;/* background:
linear-gradient(
to right,
rgba(0,0,0,.65),
rgba(0,0,0,.20),
rgba(0,0,0,.55)); */}
.carousel-caption{left: 8%;right:auto;width: 748px;top: 52%;bottom:auto;transform:translateY(-50%);text-align:left;z-index:10;}
.word{position:relative;display:inline-block;overflow:hidden;}
.fill{position:absolute;inset:0;background: #ffffff;animation:moveMask 1.2s ease forwards;}
@keyframes moveMask{
0%{
transform:translateX(-100%);
}
50%{
transform:translateX(0%);
}
100%{
transform:translateX(100%);
}
}
@keyframes fillText{
from{
background-size:0% 100%;
}
to{
background-size:100% 100%;
}
}
@keyframes textReveal{
from{
background-position:100% 0;
}
to{
background-position:0 0;
}
}
@keyframes blurReveal{
0%{
opacity:0;
filter:blur(15px);
transform:translateY(60px);
}
100%{
opacity:1;
filter:blur(0);
transform:translateY(0);
}
}
.hero-title{animation:blurReveal 1s ease forwards;font-size: 96px;color: #fff;line-height: 105%;font-weight: 500;}
.carousel-caption p{
font-size:20px;
margin:30px 0;
opacity:0;
animation:fadeUp .9s .5s forwards;
}
.carousel-caption .btn{
border-radius:50px;
opacity:0;
animation:fadeUp .9s .7s forwards;
}
.carousel-indicators{
bottom:45px;
}
.carousel-indicators button{
width:60px;
height:3px;
margin:0 6px;
opacity:.4;
}
.carousel-indicators .active{
opacity:1;
}
@keyframes kenburns{
0%{
transform:scale(1);
}
100%{
transform:scale(1.18);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@-webkit-keyframes pulse3 {
0% {
-webkit-box-shadow: 0 0 0 0 #187c0e
}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
@-webkit-keyframes pulse4 {
0% {
-webkit-box-shadow: 0 0 0 0 #f36719
}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
@keyframes pulse3 {
0% {
-moz-box-shadow: 0 0 0 0 #1a7d10;
box-shadow: 0 0 0 0 #1a7d10;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
.social_chat_block img {
width: 30px;
float: right;
}
.
/* circle rotate 360 deg */
@keyframes shape-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.dot{
width: 15px;
height: 15px;
background: #0055FF;
border-radius:50%;
position:relative;
z-index:2;
flex-shrink:0;
margin-top:10px;
margin-left: 3px;
}
/* Content */
.content{
}
.year{
display:block;
color: #0055FF;
font-size: 32px;
font-weight: 500;
margin-bottom:6px;
}
.content h3{
}
.content p{
}
/* Responsive */
@media(max-width:768px){
.timeline-wrap{
padding:20px;
}
.timeline-wrap::before{
left:25px;
}
.year{
font-size:28px;
}
.content h3{
font-size:22px;
}
.content p{
font-size:14px;
}
}
.p10-right{
width: 55%;
float: left;
}
.ip-loader {
/* bottom: 0 !important; */
/* text-align: center !important; */
/* position: relative !important; */
/* margin-left: 0%; */
/* width: 100%; */
/* height: 100vh; */
/* display: flex; */
/* align-items: center; */
/* align-content: center; */
/* justify-content: center; */
}
.loading img {
width: 60px;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
/* OTHER PAGES */
.inner-header {
/* background: #000; */
position: relative;
}
.inner-header .logo img {
/* filter: brightness(0) invert(11); */
}
.inner-header .nav-toggle:before {
background-color: #ffffff;
box-shadow: 0 0.5em 0 0 #ffffff, 0 1em 0 0 #ffffff;
}
.header .menu li a img{
width: 10px;
margin-left: 5px;
}
/* default (home page) */
.header .menu li a {
color: #ffffff; /* or your normal color */
}
/* INNER PAGES */
.inner-header .menu li a {
/* color: #fff; */
}
/* arrow icon white */
.inner-header .menu li a img {
/* filter: brightness(0) invert(1); */
width: 10px;
margin-left: 10px;
}
.inner-header .menu li a:hover {
color: #b5b5b5;
}
.head-menu{
display: none;
}
.header{
width: 100%;
float: left;
padding: 0;
position: relative;
/* height: 130px; */
z-index: 999;
/* padding-bottom: 22px; */
}
.logo {
/* width: 100%; */
float: left;
/* display: flex; */
/* align-items: center; */
justify-content: center;
height: 100%;
width: 19%;
margin-top: 17px;
}
.logo img{
width: 100%;
float: left;
max-width: 101px;
position: relative;
z-index: 1111;
}
.hdr-menu {
width: 100%;
float: right;
/* display: flex; */
height: 100%;
/* align-items: center; */
gap: 28px;
}
.menus{
float: right;
width: 100%;
}
.header_menu_area {
width: 100%;
position: relative;
float: left;
}
.burger-menu{
float: right;
width: 143px;
height: 56px;
border: 1px solid #fff;
text-align: center;
text-decoration: none;
padding: 16px 10px;
border-radius: 30px;
margin-top: 58px;
font-size: 16px;
color: #fff;
}
.header_menu_area > ul {
padding-right: 0px;
padding: 75px 0px 0px 0px;
/* width: 90%; */
float: left;
vertical-align: middle;
margin: unset;
/* text-align: right; */
}
.header_menu_area > ul > li:last-child {
padding-right: 0;
}
.header_menu_area > ul > li {
display: inline-block;
vertical-align: middle;
/* width: auto; */
margin: 0;
/* float: left; */
text-decoration: none;
list-style-type: none;
position: relative;
z-index: 9;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
text-decoration: none;
text-align: center;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.header_menu_area > ul > li > a {
position: relative;
float: left;
color: #ffffff;
padding: 1px 18px;
text-decoration: none;
letter-spacing: 0.5px;
font-size: 16px;
border-radius: 2px;
font-weight: 300;
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.header_menu_area > ul > li > a:hover{
color: #f4671a;
}
.stable{
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
top: 0;
/* height: 0; */
padding: 0;
width: 430px;
position: absolute;
right: 20px;
padding-top: 30px;
right: 0;
bottom: 0;
background: transparent;
z-index: 99999;
/* transform: translate(0, 20px); */
/* transition: all .2s ease-out; */
/* -webkit-transform: perspective(600px) rotateX(-90deg); */
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
/* transform: perspective(600px) rotateX(-90deg); */
/* -webkit-transition: -webkit-transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
-o-transition: -o-transform .5s ease,opacity .6s ease,max-height .6s step-end,max-width .6s step-end,padding .6s step-end;
/* transition: transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
}
.menu ul li a:hover, .menu ul li:hover>a {
background: #ffffff82;
color: #ffffff !important;
text-decoration: none;
transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.menu li:first-child {
/* margin-left: 0; */
}
.menu li:first-child {
/* margin-left: 0; */
}
.menu ul li {
display: block;
float: left;
background: 0 0;
margin: 0;
padding: 0;
width: 50%;
position: relative;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
/* z-index: 9; */
/* padding-bottom: 50px; */
}
.menu ul li a {
width: 100%;
font-size: 15px;
font-weight: 400;
padding: 15px 15px;
display: block;
color: #ffffff !important;
background: #ffffff4f;
text-align: -webkit-match-parent;
text-decoration: none;
text-align: left;
border-bottom: 1px solid #f3f3f32b;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
/* transform: translate(0, 0); */
transition: all .5s ease-out;
height: auto;
right: -106px;
}
/*mobile-wrapper*/
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1180px;
}
}
.banner-indicator {
position: absolute;
left: 7%;
bottom: 8px;
display: flex;
align-items: center;
display: none;
gap: 5px;
z-index: 9;
flex-direction: column;
}
#slide-count {
color: #fff;
font-size: 18px;
letter-spacing: 2px;
/* display: none; */
}
/* DOTS AS VERTICAL BARS */
#banner-dots .owl-dot {
border: unset;
width: 17px;
height: 17px;
background: transparent;
margin: 0 6px;
display: inline-block;
border: 1px solid #cecece;
transition: 0.3s;
border-radius: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background: #fff;
height: 100px;
}.sticky .logo{
width: 13%;
}
.sticky ul{padding-top: 20px;}
.social_chat_block {
width: auto;
position: fixed;
bottom: 30px;
right: 2%;
background: #f36719;
border: solid 1px #58585c24;
z-index: 9999;
animation: 1.5s infinite pulse4;
text-align: left;
text-decoration: none;
font-size: 17px;
padding-left: 10px;
padding-right: 10px;
/* line-height: 42px; */
color: black;
font-weight: 500;
transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
border-radius: 50px;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
@-webkit-keyframes pulse3 {
0% {
-webkit-box-shadow: 0 0 0 0 #167d0b
}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
@keyframes pulse3 {
0% {
-moz-box-shadow: 0 0 0 0 #1e2e59;
box-shadow: 0 0 0 0 #1c2c58;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
@keyframes pulse5 {
0% {
-moz-box-shadow: 0 0 0 0 #ffffff;
box-shadow: 0 0 0 0 #ffffff;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)
}
}
.contact-full
{width: 100%;float: left;padding: 100px 0;background: #fff;margin-top: -40px;border-top-left-radius: 40px;border-top-right-radius: 40px;}
.contact-left{
width: 100%;
float: left;
}.contact-box:hover .icon {background: #f36719;}
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
}.section-title {
position: relative;
z-index: 99;
margin-bottom: 20px;
margin-top: -1px;
}.section-title h6 {
font-size: 20px;
font-weight: 400;
line-height: 1;
color: var(--theme);
margin-bottom: 10px;
} .contact-right-box .contact-form-items {
padding-top: 15px;
}.contact-right-box .contact-form-items .form-clt span {
font-weight: 400;
color: #000;
display: inline-block;
margin-bottom: 10px;
}.contact-right-box .contact-form-items .form-clt input, .contact-wrapper .contact-right-box .contact-form-items .form-clt textarea {
width: 100%;
background-color: var(--white);
padding: 13px 17px;
line-height: 1;
border-radius: 12px;
color: rgba(85, 85, 85, 0.6);
border: none;
outline: none;
font-size: 16px;
font-weight: 300;
}.contact-right-box .contact-form-items .form-clt textarea {
padding-bottom: 120px !important;!i;!;
}
.theme-btn:hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.theme-btn{width: 200px;float: none;background: #f36719;padding: 16px;display: table;margin: auto;border: 0;font-size: 15px;color: #fff;border-radius: 30px;position: relative;z-index: 9;font-weight: 700;} .contact-right-box .contact-form-items .form-clt input, .contact-right-box .contact-form-items .form-clt textarea {
width: 100%;
background-color: #fff;
padding: 13px 17px;
line-height: 1;
border-radius: 10px;
color: rgb(0 0 0);
border: none;
outline: none;
font-size: 16px;
font-weight: 400;
border: 1px solid #cecece;
}
.contact-right-box h2{
font-size: 45px;
color: #000;
font-weight: 600;
}
.theme-btn:before{
/* content: ""; */
position: absolute;
top: 50%;
left: 0px;
width: 0px;
height: 5px;
background-color: rgb(255 255 255 / 40%);
transition: none 0s ease 0s;
border-top-left-radius: 35px;
border-top-right-radius: 20px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 20px;
}
.theme-btn:hover::before{
width: 120%;
background-color: rgba(255, 255, 255, 0);
transition: all 0.4s ease-in-out 0s;
}
.contact-left .contact-box {
padding: 34px 36px;
text-align: center;
border-radius: 12px;
background-color: #1c2d58;
transition: all 0.4s ease-in-out;
margin-top: 20px;
} .contact-left .contact-box .icon {
width: 60px;
height: 60px;
line-height: 55px;
text-align: center;
border-radius: 50%;
border: 1px solid #ffffff;
margin: 0 auto;
transition: all 0.4s ease-in-out;
}.contact-left .contact-box .content {
margin-top: 20px;
}.contact-left .contact-box .content h4 {
margin-bottom: 5px;
color: #fff;
} .contact-left .contact-box .content p a {
color: var(--text);
}.contact-left .contact-box:hover .content p {
color: #fff;
}
.contact-left p{
color:#fff;
}
.icon img{width: 30px;filter: invert(1);}
.contact-box:hover{
}.contact-box:hover icon {
}
.contact-box:hover img{filter: invert(1);}
.career-form-sec {width: 100%;float: left;padding: 110px 0 120px;background: #f7f8fa;position: relative;overflow: hidden;margin-top: -40px;border-top-left-radius: 40px;border-top-right-radius: 40px;} /* ========================================== BACKGROUND DECORATION ========================================== */ .career-form-sec:before { content: ""; position: absolute; width: 550px; height: 550px; right: -300px; top: -300px; border-radius: 50%; border: 1px solid rgba(243,103,25,.08); } .career-form-sec:after { content: ""; position: absolute; width: 300px; height: 300px; left: -200px; bottom: -180px; border-radius: 50%; background: rgba(243,103,25,.035); } /* ========================================== CAREER HEADER ========================================== */ .career-head { width: 100%; display: grid; grid-template-columns: 1fr 430px; gap: 70px; align-items: end; margin-bottom: 60px; position: relative; z-index: 2; } /* ========================================== LEFT ========================================== */ .career-head-left span {display: inline-flex;align-items: center;gap: 10px;color: #f36719;font-size: 11px;display: none;font-weight: 700;letter-spacing: 2px;margin-bottom: 20px;} .career-head-left span:before { content: ""; width: 28px; height: 2px; background: #f36719; border-radius: 20px; } .career-head h2 {max-width: 680px;margin: 0;color: #000000;font-size: 55px;line-height: 1.05;font-weight: 500;letter-spacing: -2px;} .career-head h2 strong {display: block;font-weight: 500;} /* ========================================== RIGHT ========================================== */ .career-head-right { padding-bottom: 5px; } .career-head-right p {margin: 0;color: #667085;font-size: 16px;line-height: 1.85;} .career-note {margin-top: 22px;display: flex;align-items: center;gap: 9px;color: #344054;font-size: 13px;font-weight: 600;} .career-note span { width: 7px; height: 7px; border-radius: 50%; background: #22b573; } /* ========================================== APPLICATION CARD ========================================== */ .career-application { width: 100%; position: relative; z-index: 2; background: #fff; border: 1px solid #eaecf0; border-radius: 28px; box-shadow: 0 25px 70px rgba(16,24,40,.07); overflow: hidden; } /* ========================================== APPLICATION TOP ========================================== */ .career-application-top { min-height: 125px; display: flex; align-items: center; justify-content: space-between; padding: 30px 45px; border-bottom: 1px solid #eaecf0; background: #fff; } .application-label { display: block; margin-bottom: 8px; color: #f36719; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; } .career-application-top h3 { margin: 0; color: #101828; font-size: 25px; font-weight: 600; } .application-number {color: #f36719;font-size: 30px;font-weight: 700;letter-spacing: -1px;display: none;} .application-number span { color: #98a2b3; font-size: 13px; font-weight: 500; } /* ========================================== FORM ========================================== */ .career-form { width: 100%; padding: 0; } /* ========================================== FORM SECTION ========================================== */ .career-form-section { padding: 45px; border-bottom: 1px solid #eaecf0; } /* ========================================== SECTION TITLE ========================================== */ .career-section-title { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 35px; } .career-section-title > span { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff5ef; border: 1px solid #ffd9c5; border-radius: 50%; color: #f36719; font-size: 11px; font-weight: 700; } .career-section-title h4 { margin: 0; color: #101828; font-size: 18px; font-weight: 700; } .career-section-title p { margin: 5px 0 0; color: #98a2b3; font-size: 12px; } /* ========================================== GRID ========================================== */ .career-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 25px; } .career-field-full { grid-column: 1 / -1; } /* ========================================== FIELD ========================================== */ .career-field { position: relative; } .career-field label {display: block;margin-bottom: 9px;color: #000000;font-size: 15px;font-weight: 500;} .career-field input, .career-field select, .career-field textarea { width: 100%; box-sizing: border-box; padding: 15px 17px; border: 1px solid #d0d5dd; border-radius: 11px; background: #fff; color: #101828; font-family: inherit; font-size: 14px; outline: none; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; } .career-field input::placeholder, .career-field textarea::placeholder { color: #98a2b3; } .career-field input:hover, .career-field select:hover, .career-field textarea:hover { border-color: #98a2b3; } .career-field input:focus, .career-field select:focus, .career-field textarea:focus { border-color: #f36719; background: #fff; box-shadow: 0 0 0 4px rgba(243,103,25,.08); } .career-field textarea { min-height: 150px; resize: vertical; line-height: 1.7; } .career-field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* ========================================== RESUME UPLOAD ========================================== */ .career-upload { width: 100%; min-height: 145px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 25px; border: 1px dashed #c7cdd4; border-radius: 16px; background: #fafbfc; cursor: pointer; position: relative; transition: border-color .35s ease, background .35s ease, transform .35s ease; } .career-upload:hover { border-color: #f36719; background: #fff8f4; transform: translateY(-2px); } .career-upload input { display: none; } /* ========================================== UPLOAD ICON ========================================== */ .upload-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eaecf0; border-radius: 14px; color: #f36719; font-size: 25px; transition: all .35s ease; } .career-upload:hover .upload-icon { background: #f36719; border-color: #f36719; color: #fff; transform: translateY(-4px); } /* ========================================== UPLOAD CONTENT ========================================== */ .upload-content { display: flex; flex-direction: column; gap: 4px; flex: 1; } .upload-content strong { color: #101828; font-size: 14px; font-weight: 700; } .upload-content span { color: #667085; font-size: 12px; } .upload-content small { margin-top: 4px; color: #98a2b3; font-size: 10px; } /* ========================================== UPLOAD ARROW ========================================== */ .upload-arrow {width: 40px;height: 40px;display: none;/* display: flex; */align-items: center;justify-content: center;flex-shrink: 0;border: 1px solid #e4e7ec;border-radius: 50%;color: #667085;transition: all .35s ease;} .career-upload:hover .upload-arrow { background: #101828; border-color: #101828; color: #fff; transform: rotate(8deg); } /* ========================================== SELECTED FILE ========================================== */ .selected-file { min-height: 0; display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #344054; font-size: 12px; } .selected-file span { color: #22b573; font-weight: 700; } .selected-file small { color: #98a2b3; } /* ========================================== SUBMIT AREA ========================================== */ .career-submit { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 25px 45px; background: #fcfcfd; } /* ========================================== NOTE ========================================== */ .submit-note { color: #98a2b3; font-size: 11px; display: flex; align-items: center; gap: 8px; } .submit-note span { color: #22b573; font-size: 8px; } /* ========================================== BUTTON ========================================== */ .career-submit button {min-width: 210px;height: 55px;display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 6px 7px 6px 22px;border: 0;border-radius: 40px;background: #f36719;color: #fff;font-family: inherit;font-size: 16px;font-weight: 600;cursor: pointer;transition: background .35s ease, transform .35s ease;} .career-submit button i {width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border-radius: 50%;color: #ffffff;font-size: 18px;font-style: normal;transition: transform .35s ease;} .career-submit button:hover {transform: translateY(-2px);background: #1c2c58;animation: 1.5s infinite pulse3;color: #fff;} .career-submit button:hover i { transform: rotate(45deg); } /* ========================================== TABLET ========================================== */ @media (max-width: 991px) { .career-form-sec { padding: 80px 0 90px; } .career-head { grid-template-columns: 1fr; gap: 25px; margin-bottom: 45px; } .career-head h2 { font-size: 48px; } } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .career-form-sec { padding: 60px 0 70px; } .career-head { gap: 20px; } .career-head h2 { font-size: 36px; letter-spacing: -1px; } .career-head-right p {font-size: 16px;} .career-application { border-radius: 20px; } .career-application-top { min-height: auto; padding: 25px 20px; } .career-application-top h3 { font-size: 21px; } .application-number { font-size: 22px; } .career-form-section { padding: 30px 20px; } .career-section-title { margin-bottom: 25px; } .career-grid { grid-template-columns: 1fr; gap: 20px; } .career-field-full { grid-column: auto; } .career-upload { min-height: 135px; padding: 20px; } .upload-arrow { display: none; } .career-submit { align-items: stretch; flex-direction: column; padding: 25px 20px; gap: 18px; } .career-submit button { width: 100%; } } /* ========================================== SMALL MOBILE ========================================== */ @media (max-width: 480px) { .career-head h2 {font-size: 38px;} .career-upload { align-items: flex-start; } .upload-icon { width: 48px; height: 48px; } .upload-content strong { font-size: 13px; } }
.stable{color: #f4671a !important;}/* ==========================================
CONTENT BELOW ENQUIRY FORM
========================================== */
.service-right-bottom {
width: 35%;
float: right;
margin-top: 22px;
padding: 30px 30px 28px;
background: #1b2c58;
border-radius: 22px;
position: relative;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 40px rgba(16, 24, 40, .10);
}
/* Decorative orange circle */
.service-right-bottom:before {
content: '';
position: absolute;
width: 140px;
height: 140px;
right: -65px;
top: -65px;
border-radius: 50%;
background: rgba(243, 103, 25, .15);
}
/* Small label */
.service-mini-label {
position: relative;
z-index: 2;
display: inline-block;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
}
/* Heading */
.service-right-bottom h3 {
position: relative;
z-index: 2;
margin: 12px 0 20px;
color: #fff;
font-size: 24px;
line-height: 1.35;
font-weight: 700;
}
/* List */
.service-right-bottom ul {
position: relative;
z-index: 2;
padding: 0;
margin: 0;
list-style: none;
}
.service-right-bottom ul li {
position: relative;
padding-left: 20px;
margin-top: 11px;
color: #d0d5dd;
font-size: 16px;
line-height: 1.5;
}
.service-right-bottom ul li:before {
content: '';
position: absolute;
left: 0;
top: 6px;
font-size: 14px;
font-weight: 700;
width: 10px;
height: 10px;
background: #f36719;
border-radius: 100%;
}
/* Divider */
.service-bottom-line {
width: 100%;
height: 1px;
background: rgba(255,255,255,.10);
margin: 22px 0 18px;
}
/* Description */
.service-right-bottom p {
position: relative;
z-index: 2;
margin: 0;
color: #98a2b3;
font-size: 13px;
line-height: 1.7;
}
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 991px) {
.service-right-bottom {
width: 100%;
float: left;
margin-top: 20px;
}
}
@media (max-width: 767px) {
.service-right-bottom {
padding: 27px 22px;
border-radius: 20px;
}
.service-right-bottom h3 {
font-size: 20px;
}
}```css
/* ==========================================
PREMIUM SERVICE BENEFITS
========================================== */
.service-benefits {
width: 100%;
float: left;
padding: 105px 0 110px;
background: #101828;
position: relative;
overflow: hidden;
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.service-benefits{
width: 100%;
float: left;
background: #1b2c58;
padding: 70px 0;
position: relative;
overflow: hidden;
}
.service-benefits:before {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -250px;
top: -250px;
border-radius: 50%;
border: 1px solid rgb(56 72 112 / 29%);
}
.service-benefits:after {
content: '';
position: absolute;
width: 300px;
height: 300px;
left: -170px;
bottom: -170px;
border-radius: 50%;
background: rgb(56 72 112 / 29%);
}
/* ==========================================
HEADER
========================================== */
.service-benefits-head {
width: 100%;
float: left;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
/* Left intro */
.benefits-intro {
width: 60%;
60%:
left;
float: left;
}
.benefits-label {
display: inline-block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 18px;
}
.benefits-intro h2 {
margin: 0;
color: #ffffff;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
letter-spacing: -1.3px;
}
.benefits-intro h2 span {
}
.benefits-intro p {
max-width: 570px;
margin: 22px 0 0;
color: #ffffff;
font-size: 16px;
line-height: 1.8;
}
/* ==========================================
LARGE NUMBER
========================================== */
.benefits-number {
display: flex;
align-items: flex-end;
gap: 12px;
padding-bottom: 5px;
float: right;
}
.benefits-number strong {
color: rgb(243 103 25);
font-size: 90px;
line-height: .8;
font-weight: 800;
letter-spacing: -5px;
}
.benefits-number span {
color: #d3ddf5;
font-size: 16px;
font-weight: 600;
padding-bottom: 4px;
}
/* ==========================================
CARDS
========================================== */
.benefits-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 16px;
position: relative;
z-index: 2;
}
.benefit-card {
min-height: 320px;
background: #ffffff;
padding: 30px 27px 27px;
box-sizing: border-box;
border: 2px dashed rgb(243 103 25);
border-radius: 20px;
position: relative;
overflow: hidden;
transition:
transform .4s ease,
background .4s ease,
border-color .4s ease;
}
/* Orange top line */
.benefit-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .45s ease;
}
/* Card hover */
.benefit-card:hover {
transform: translateY(-8px);
background: rgb(255 255 255);
border-color: rgba(243,103,25,.35);
}
.benefit-card:hover:before {
width: 100%;
}
/* ==========================================
CARD TOP
========================================== */
.benefit-top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.benefit-number {
color: #667085;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
}
/* Icon */
.benefit-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(243,103,25,.10);
color: #f36719;
font-size: 17px;
transition: all .35s ease;
}
.benefit-card:hover .benefit-icon {
background: #f36719;
color: #fff;
transform: rotate(-5deg);
}
/* ==========================================
CARD CONTENT
========================================== */
.benefit-card h3 {
margin: 55px 0 14px;
color: #000000;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
}
.benefit-card p {
margin: 0;
color: #98a2b3;
font-size: 14px;
line-height: 1.75;
}
/* ==========================================
BOTTOM LINE
========================================== */
.benefit-line {
width: 100%;
height: 1px;
background: rgba(255,255,255,.08);
position: absolute;
left: 0;
bottom: 0;
}
.benefit-line span {
display: block;
width: 0;
height: 2px;
background: #f36719;
transition: width .5s ease;
}
.benefit-card:hover .benefit-line span {
width: 100%;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.benefits-grid {
grid-template-columns:
repeat(2, 1fr);
}
.benefit-card {
min-height: 280px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.service-benefits {
padding: 75px 0 80px;
}
.service-benefits-head {
display: block;
margin-bottom: 40px;
}
.benefits-number {
display: none;
}
.benefits-intro h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.service-benefits {
padding: 60px 0 65px;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.benefits-intro h2 {
font-size: 32px;
}
.benefits-intro p {
font-size: 15px;
}
.benefit-card {
min-height: 260px;
padding: 25px 23px;
}
.benefit-card h3 {
margin-top: 40px;
font-size: 20px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.benefits-intro h2 {
font-size: 29px;
}
}
/* ==========================================
PREMIUM ABOUT INTRO
========================================== */
.about-intro {
width: 100%;
float: left;
padding: 100px 0 110px;
background: #fff;
overflow: hidden;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -30px;
}
.about-intro .container {
}
/* ==========================================
GRID
========================================== */
.about-intro-grid {
display: grid;
grid-template-columns:
48% 52%;
align-items: center;
gap: 70px;
}
/* ==========================================
IMAGE AREA
========================================== */
.about-intro-image {
position: relative;
padding: 0 25px 25px 0;
}
/* Image */
.about-image-main {
position: relative;
z-index: 2;
overflow: hidden;
border-radius: 28px;
box-shadow:
0 25px 60px rgba(16, 24, 40, .14);
}
.about-image-main img {
width: 100%;
height: 550px;
object-fit: cover;
display: block;
transition: transform .7s ease;
}
.about-image-main:hover img {
transform: scale(1.04);
}
/* Orange frame */
.about-intro-image:before {
/* content: ''; */
position: absolute;
width: 170px;
height: 170px;
left: -70px;
top: -50px;
border-radius: 50%;
border: 1px solid #f36719;
opacity: .25;
background: #ffe1c9;
}
/* Bottom accent */
.about-intro-image:after {
content: '';
position: absolute;
width: 75%;
height: 75%;
right: 0;
bottom: 0;
border-radius: 25px;
background: #fff4ec;
z-index: 0;
}
/* ==========================================
EXPERIENCE CARD
========================================== */
.about-experience {
position: absolute;
z-index: 4;
right: -20px;
bottom: 55px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 25px;
background: #f36719;
border-radius: 15px;
color: #fff;
box-shadow:
0 15px 35px rgba(243,103,25,.28);
}
.about-experience strong {
font-size: 40px;
line-height: 1;
font-weight: 800;
}
.about-experience span {
font-size: 12px;
line-height: 1.4;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .7px;
}
/* ==========================================
CONTENT
========================================== */
.about-intro-content {
padding-right: 25px;
}
.about-label {
display: inline-block;
margin-bottom: 18px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
/* Heading */
.about-intro-content h1 {
margin: 0;
color: #000000;
font-size: 52px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -1.7px;
}
.about-intro-content h1 span {
/* color: #f36719; */
}
/* Accent */
.about-intro-content h1:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
background: #f36719;
border-radius: 20px;
}
/* Paragraphs */
.about-intro-content p {
margin: 20px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.85;
}
.about-intro-content .about-lead {
margin-top: 25px;
color: #344054;
font-size: 18px;
line-height: 1.7;
font-weight: 500;
}
/* ==========================================
CHECK ITEMS
========================================== */
.about-signature-row {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 27px;
}
.about-check {
display: flex;
align-items: center;
gap: 9px;
}
.about-check span {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff1e8;
color: #f36719;
font-size: 12px;
font-weight: 700;
}
.about-check strong {
color: #000000;
font-size: 16px;
}
/* ==========================================
BUTTON
========================================== */
.about-btn {
display: inline-flex;
align-items: center;
gap: 18px;
margin-top: 32px;
padding: 14px 23px;
background: #101828;
border-radius: 50px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all .35s ease;
}
.about-btn span {
font-size: 20px;
line-height: 1;
transition: transform .3s ease;
}
.about-btn:hover {
background: #f36719;
color: #fff;
transform: translateY(-3px);
}
.about-btn:hover span {
transform: translateX(5px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.about-intro-grid {
gap: 45px;
}
.about-intro-content h1 {
font-size: 44px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-intro {
padding: 70px 0 80px;
}
.about-intro-grid {
grid-template-columns: 1fr;
gap: 55px;
}
.about-intro-content {
padding-right: 0;
}
.about-image-main img {
height: 450px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-intro {
padding: 55px 0 65px;
}
.about-intro-image {
padding-right: 12px;
padding-bottom: 12px;
}
.about-image-main {
border-radius: 20px;
}
.about-image-main img {
height: 330px;
}
.about-intro-content h1 {
font-size: 34px;
letter-spacing: -.8px;
}
.about-intro-content .about-lead {
font-size: 16px;
}
.about-experience {
right: -5px;
bottom: 30px;
padding: 14px 18px;
}
.about-experience strong {
font-size: 32px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.about-intro-content h1 {
font-size: 30px;
}
.about-image-main img {
height: 280px;
}
.about-experience span {
font-size: 10px;
}
.about-signature-row {
gap: 15px;
flex-direction: column;
}
}/* ==========================================
PREMIUM OUR STORY
========================================== */
.about-story {
width: 100%;
float: left;
padding: 105px 0 110px;
background: #1d2d59;
position: relative;
overflow: hidden;
}
.about-story .container {
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.about-story:before {
content: '';
position: absolute;
width: 520px;
height: 520px;
right: -260px;
top: -260px;
border-radius: 50%;
border: 1px solid rgba(243,103,25,.12);
}
.about-story:after {
content: '';
position: absolute;
width: 350px;
height: 350px;
left: -220px;
bottom: -220px;
border-radius: 50%;
background: rgba(243,103,25,.035);
}
/* ==========================================
GRID
========================================== */
.about-story-grid {
display: grid;
grid-template-columns: 34% 60%;
gap: 70px;
position: relative;
z-index: 2;
}
/* ==========================================
LEFT SIDE
========================================== */
.about-story-left {
position: relative;
padding-top: 8px;
}
.about-story-label {
display: inline-block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
/* Year */
.about-story-year {
margin-top: 55px;
}
.about-story-year span {
display: block;
color: #667085;
font-size: 13px;
font-weight: 600;
letter-spacing: 3px;
margin-bottom: 5px;
}
.about-story-year strong {
display: block;
color: rgba(255,255,255,.09);
font-size: 105px;
line-height: .9;
font-weight: 800;
letter-spacing: -7px;
}
/* Vertical accent */
.about-story-line {
width: 1px;
height: 145px;
background: rgba(255,255,255,.12);
margin: 45px 0 0 8px;
position: relative;
overflow: hidden;
}
.about-story-line span {
display: block;
width: 3px;
height: 55px;
background: #f36719;
position: absolute;
left: -1px;
top: 0;
border-radius: 10px;
animation: storyLineFlow 2.2s ease-in-out infinite;
}
@keyframes storyLineFlow {
0% {
top: -55px;
}
50% {
top: 100%;
}
100% {
top: -55px;
}
}
/* ==========================================
CONTENT
========================================== */
.about-story-content h2 {
margin: 0;
max-width: 750px;
color: #fff;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
/* letter-spacing: -1.3px; */
}
.about-story-content h2 span {
/* color: #f36719; */
}
/* Orange line */
.about-story-content h2:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
background: #f36719;
border-radius: 20px;
}
/* Highlight */
.about-story-content .story-highlight {
max-width: 760px;
margin: 28px 0 0;
color: #d0d5dd;
font-size: 18px;
line-height: 1.75;
font-weight: 500;
}
/* Normal paragraph */
.about-story-content > p:not(.story-highlight) {
max-width: 760px;
margin: 18px 0 0;
color: #98a2b3;
font-size: 16px;
line-height: 1.85;
}
/* ==========================================
STORY POINTS
========================================== */
.story-points {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 12px;
margin-top: 40px;
}
.story-point {
min-height: 150px;
padding: 22px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
transition: all .35s ease;
}
.story-point:hover {
transform: translateY(-5px);
border-color: rgba(243,103,25,.35);
background: rgba(255,255,255,.055);
}
/* Number */
.story-point-icon {
display: block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 25px;
}
/* Title */
.story-point h4 {
margin: 0 0 7px;
color: #fff;
font-size: 18px;
font-weight: 700;
}
/* Description */
.story-point p {
margin: 0;
color: #667085;
font-size: 13px;
line-height: 1.6;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-story {
padding: 75px 0 80px;
}
.about-story-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.about-story-year {
margin-top: 30px;
}
.about-story-year strong {
font-size: 80px;
}
.about-story-line {
display: none;
}
.about-story-content h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-story {
padding: 60px 0 65px;
}
.about-story-grid {
gap: 35px;
}
.about-story-year {
margin-top: 22px;
}
.about-story-year strong {
font-size: 65px;
letter-spacing: -4px;
}
.about-story-content h2 {
font-size: 32px;
}
.about-story-content .story-highlight {
font-size: 16px;
}
.about-story-content > p:not(.story-highlight) {
font-size: 14px;
}
.story-points {
grid-template-columns: 1fr;
gap: 10px;
}
.story-point {
min-height: auto;
}
}/* ==========================================
PREMIUM ABOUT STATS
========================================== */
.about-stats {
width: 100%;
float: left;
padding: 100px 0 105px;
background: #fff;
position: relative;
overflow: hidden;
}
.about-stats .container {
margin: 0 auto;
}
/* ==========================================
HEADER
========================================== */
.about-stats-head {
width: 100%;
float: left;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 60px;
margin-bottom: 55px;
}
.stats-label {
display: inline-block;
margin-bottom: 17px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.about-stats-head h2 {
max-width: 600px;
margin: 0;
color: #000000;
font-size: 46px;
line-height: 130%;
font-weight: 500;
}
.about-stats-head h2 span {
}
.about-stats-head p {
max-width: 430px;
margin: 0;
color: #667085;
font-size: 15px;
line-height: 1.8;
}
/* ==========================================
STATS GRID
========================================== */
.stats-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top: 1px solid #e4e7ec;
border-bottom: 1px solid #e4e7ec;
}
/* ==========================================
STAT ITEM
========================================== */
.stat-item {
min-height: 270px;
padding: 40px 30px;
position: relative;
border-right: 1px dashed #e4e7ec;
transition: all .35s ease;
}
.stat-item:first-child {
border-left: 1px solid #e4e7ec;
}
.stat-item:hover {
background: #fff8f3;
}
/* ==========================================
NUMBER
========================================== */
.stat-number {
display: flex;
align-items: baseline;
gap: 2px;
}
.stat-number strong {
color: #101828;
font-size: 58px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
transition: color .35s ease;
}
.stat-number span {
color: #f36719;
font-size: 27px;
font-weight: 700;
}
.stat-item:hover .stat-number strong {
color: #f36719;
}
/* ==========================================
TITLE
========================================== */
.stat-item h3 {
margin: 28px 0 12px;
color: #101828;
font-size: 17px;
font-weight: 700;
}
/* ==========================================
DESCRIPTION
========================================== */
.stat-item p {
max-width: 220px;
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
ORANGE INDICATOR
========================================== */
.stat-item:after {
content: '';
position: absolute;
left: 30px;
bottom: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .4s ease;
}
.stat-item:hover:after {
width: 55px;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.about-stats-head {
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.about-stats-head p {
max-width: 650px;
}
.stats-grid {
grid-template-columns:
repeat(2, 1fr);
}
.stat-item:nth-child(2) {
border-right: 0;
}
.stat-item:nth-child(3) {
border-left: 1px solid #e4e7ec;
border-top: 1px solid #e4e7ec;
}
.stat-item:nth-child(4) {
border-top: 1px solid #e4e7ec;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-stats {
padding: 65px 0 70px;
}
.about-stats-head h2 {
font-size: 33px;
}
.about-stats-head p {
font-size: 14px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item,
.stat-item:nth-child(3),
.stat-item:nth-child(4) {
min-height: auto;
border-left: 1px solid #e4e7ec;
border-right: 1px solid #e4e7ec;
border-top: 0;
}
.stat-item + .stat-item {
border-top: 1px solid #e4e7ec;
border-right: 1px solid #e4e7ec;
}
.stat-item {
padding: 32px 25px;
}
.stat-number strong {
font-size: 48px;
}
}/* ==========================================
PREMIUM OUR APPROACH
========================================== */
/* ==========================================
PREMIUM OUR APPROACH
========================================== */
.about-approach {
width: 100%;
float: left;
padding: 110px 0 115px;
background: #1d2d59;
position: relative;
overflow: hidden;
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.about-approach:before {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -250px;
top: -250px;
border-radius: 50%;
border: 1px solid rgba(243, 103, 25, .08);
}
.about-approach:after {
content: '';
position: absolute;
width: 300px;
height: 300px;
left: -180px;
bottom: -180px;
border-radius: 50%;
background: rgba(243, 103, 25, .035);
}
/* ==========================================
MAIN WRAPPER
========================================== */
.approach-wrap {
width: 100%;
display: grid;
grid-template-columns: 38% 62%;
gap: 70px;
align-items: start;
position: relative;
z-index: 2;
}
/* ==========================================
LEFT INTRO
========================================== */
.approach-intro {
padding-top: 15px;
position: sticky;
top: 100px;
}
.approach-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 11px;
display: none;
font-weight: 700;
letter-spacing: 2px;
}
.approach-kicker:before {
content: '';
width: 28px;
height: 2px;
background: #f36719;
border-radius: 10px;
}
/* ==========================================
HEADING
========================================== */
.approach-intro h2 {
max-width: 480px;
margin: 22px 0 0;
color: #ffffff;
font-size: 50px;
line-height: 1.08;
font-weight: 500;
letter-spacing: -1.8px;
}
.approach-intro h2 span {
display: block;
}
/* ==========================================
DESCRIPTION
========================================== */
.approach-intro > p {
max-width: 450px;
margin: 25px 0 0;
color: #ffffff;
font-size: 16px;
line-height: 1.85;
}
/* ==========================================
BIG NUMBER
========================================== */
.approach-big-number {
margin-top: 65px;
display: flex;
align-items: flex-end;
gap: 18px;
}
.approach-big-number span {
color: rgb(249 249 249 / 64%);
font-size: 130px;
line-height: .75;
font-weight: 800;
letter-spacing: -8px;
}
.approach-big-number small {
color: #98a2b3;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
padding-bottom: 5px;
}
/* ==========================================
RIGHT STEPS
========================================== */
.approach-steps {
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ==========================================
APPROACH CARD
========================================== */
.approach-card {
width: 100%;
min-height: 165px;
display: grid;
grid-template-columns: 80px minmax(0, 1fr) 52px;
align-items: center;
gap: 25px;
padding: 28px 28px 28px 30px;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 20px;
position: relative;
overflow: hidden;
box-sizing: border-box;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
/* Orange bottom line */
.approach-card:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .5s ease;
}
/* ==========================================
NUMBER
========================================== */
.approach-card-number {
color: #e4e7ec;
font-size: 42px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
transition: color .4s ease;
}
/* ==========================================
CARD CONTENT
========================================== */
.approach-card-content > span {
display: block;
margin-bottom: 6px;
color: #f36719;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
}
.approach-card-content h3 {
margin: 0;
color: #101828;
font-size: 24px;
line-height: 1.25;
font-weight: 700;
}
.approach-card-content p {
max-width: 570px;
margin: 9px 0 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
ARROW
========================================== */
.approach-card-arrow {
width: 48px;
height: 48px;
display: flex;
display: none;
align-items: center;
justify-content: center;
border: 1px solid #e4e7ec;
border-radius: 50%;
color: #667085;
font-size: 19px;
transition:
all .4s ease;
}
.approach-card-arrow span {
transition: transform .4s ease;
}
/* ==========================================
HOVER
========================================== */
.approach-card:hover {
transform: translateX(-8px);
border-color: #f1d8c8;
box-shadow:
0 20px 50px rgba(16, 24, 40, .08);
}
.approach-card:hover:after {
width: 100%;
}
.approach-card:hover .approach-card-number {
color: #f36719;
}
.approach-card:hover .approach-card-arrow {
background: #f36719;
border-color: #f36719;
color: #fff;
}
.approach-card:hover .approach-card-arrow span {
transform: translate(2px, -2px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.approach-wrap {
grid-template-columns: 34% 66%;
gap: 40px;
}
.approach-intro h2 {
font-size: 42px;
}
.approach-big-number {
margin-top: 45px;
}
.approach-big-number span {
font-size: 100px;
}
.approach-card {
grid-template-columns: 65px minmax(0, 1fr) 48px;
gap: 18px;
padding: 25px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-approach {
padding: 75px 0 85px;
}
.approach-wrap {
grid-template-columns: 1fr;
gap: 45px;
}
.approach-intro {
position: relative;
top: auto;
}
.approach-intro h2 {
max-width: 650px;
font-size: 44px;
}
.approach-intro > p {
max-width: 700px;
}
.approach-big-number {
display: none;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-approach {
padding: 60px 0 70px;
}
.approach-wrap {
gap: 35px;
}
.approach-intro h2 {
font-size: 34px;
letter-spacing: -1px;
}
.approach-intro > p {
margin-top: 20px;
font-size: 16px;
}
.approach-steps {
gap: 12px;
}
.approach-card {
min-height: auto;
grid-template-columns: 55px minmax(0, 1fr);
gap: 18px;
padding: 24px 20px;
}
.approach-card-number {
font-size: 32px;
}
.approach-card-content h3 {
font-size: 21px;
}
.approach-card-content p {
font-size: 16px;
}
.approach-card-arrow {
display: none;
}
.approach-card:hover {
transform: translateX(0) translateY(-3px);
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.approach-intro h2 {
font-size: 34px;
}
.approach-card {
grid-template-columns: 45px minmax(0, 1fr);
gap: 15px;
padding: 22px 17px;
}
.approach-card-number {
font-size: 27px;
}
.approach-card-content h3 {
font-size: 19px;
}
}
/* ==========================================
PREMIUM OUR TEAM
========================================== */
.about-team {
width: 100%;
float: left;
padding: 105px 0 115px;
background: #fff;
position: relative;
overflow: hidden;
}
.about-team .container {
}
/* ==========================================
HEADER
========================================== */
.team-head {
width: 100%;
float: left;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
margin-bottom: 55px;
}
.team-heading {
max-width: 600px;
}
.team-label {
display: none;
margin-bottom: 17px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.team-heading h2 {
margin: 0;
color: #000000;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
}
.team-heading h2 span {
}
.team-heading h2:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 20px;
background: #f36719;
border-radius: 20px;
}
.team-intro {
max-width: 430px;
}
.team-intro p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.8;
}
/* ==========================================
TEAM GRID
========================================== */
.team-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
/* ==========================================
TEAM CARD
========================================== */
.team-card {
position: relative;
min-width: 0;
}
/* ==========================================
IMAGE
========================================== */
.team-image {
width: 100%;
height: 440px;
position: relative;
overflow: hidden;
border-radius: 22px;
background: #f2f4f7;
}
.team-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .7s ease,
filter .5s ease;
}
/* ==========================================
OVERLAY
========================================== */
.team-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 25px;
background:
linear-gradient(
to top,
rgba(16,24,40,.78),
rgba(16,24,40,.05) 55%,
transparent
);
opacity: 0;
transition: opacity .45s ease;
}
/* ==========================================
SOCIAL
========================================== */
.team-social {
display: flex;
gap: 8px;
transform: translateY(15px);
transition: transform .45s ease;
}
.team-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #101828;
text-decoration: none;
font-size: 13px;
transition: all .3s ease;
}
.team-social a:hover {
background: #f36719;
color: #fff;
transform: translateY(-3px);
}
/* ==========================================
NUMBER
========================================== */
.team-index {
position: absolute;
right: 20px;
top: 20px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.9);
color: #101828;
font-size: 11px;
font-weight: 700;
transition: all .35s ease;
}
/* ==========================================
TEAM INFO
========================================== */
.team-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 20px 5px 0;
}
.team-info h3 {
margin: 0;
color: #101828;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
.team-info p {
margin: 5px 0 0;
color: #98a2b3;
font-size: 13px;
line-height: 1.4;
}
/* ==========================================
ARROW
========================================== */
.team-arrow {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e4e7ec;
border-radius: 50%;
color: #667085;
font-size: 18px;
transition: all .35s ease;
}
/* ==========================================
HOVER
========================================== */
.team-card:hover .team-image img {
transform: scale(1.06);
filter: brightness(.82);
}
.team-card:hover .team-overlay {
opacity: 1;
}
.team-card:hover .team-social {
transform: translateY(0);
}
.team-card:hover .team-index {
background: #f36719;
color: #fff;
transform: rotate(8deg);
}
.team-card:hover .team-arrow {
background: #f36719;
border-color: #f36719;
color: #fff;
transform: rotate(8deg);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.team-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 25px 18px;
}
.team-image {
height: 430px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-team {
padding: 75px 0 85px;
}
.team-head {
display: block;
margin-bottom: 40px;
}
.team-intro {
max-width: 650px;
margin-top: 20px;
}
.team-heading h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-team {
padding: 60px 0 70px;
}
.team-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.team-heading h2 {
font-size: 32px;
}
.team-intro p {
font-size: 14px;
}
.team-image {
height: 420px;
border-radius: 20px;
}
.team-overlay {
opacity: 1;
padding: 20px;
background:
linear-gradient(
to top,
rgba(16,24,40,.7),
transparent 50%
);
}
.team-social {
transform: translateY(0);
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.team-heading h2 {
font-size: 29px;
}
.team-image {
height: 380px;
}
.team-info h3 {
font-size: 17px;
}
}/* ==========================================
HEADER ENQUIRE BUTTON
========================================== */
.header-enquire-btn {
}
.header-enquire-btn span {
}
.header-enquire-btn:hover {
background: #ffffff;
animation: 1.5s infinite pulse5;
color: #17223e;
html{
overflow-x: hidden;
}
body{
margin: auto;
overflow-x: hidden;
font-family: 'Helvetica Neue';
}
a{
transition:all ease-in-out .4s;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Black.eot');
src: url('../fonts/HelveticaNeue-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Black.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Black.woff') format('woff'),
url('../fonts/HelveticaNeue-Black.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Black.svg#HelveticaNeue-Black') format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-BlackItalic.eot');
src: url('../fonts/HelveticaNeue-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-BlackItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-BlackItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-BlackItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-BlackItalic.svg#HelveticaNeue-BlackItalic') format('svg');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-BoldItalic.eot');
src: url('../fonts/HelveticaNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-BoldItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-BoldItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-BoldItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-BoldItalic.svg#HelveticaNeue-BoldItalic') format('svg');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Bold.eot');
src: url('../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Bold.woff') format('woff'),
url('../fonts/HelveticaNeue-Bold.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Heavy.eot');
src: url('../fonts/HelveticaNeue-Heavy.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Heavy.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Heavy.woff') format('woff'),
url('../fonts/HelveticaNeue-Heavy.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Heavy.svg#HelveticaNeue-Heavy') format('svg');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-HeavyItalic.eot');
src: url('../fonts/HelveticaNeue-HeavyItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-HeavyItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-HeavyItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-HeavyItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-HeavyItalic.svg#HelveticaNeue-HeavyItalic') format('svg');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Italic.eot');
src: url('../fonts/HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Italic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Italic.woff') format('woff'),
url('../fonts/HelveticaNeue-Italic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Italic.svg#HelveticaNeue-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Light.eot');
src: url('../fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Light.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Light.woff') format('woff'),
url('../fonts/HelveticaNeue-Light.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-LightItalic.eot');
src: url('../fonts/HelveticaNeue-LightItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-LightItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-LightItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-LightItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-LightItalic.svg#HelveticaNeue-LightItalic') format('svg');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Medium.eot');
src: url('../fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Medium.woff') format('woff'),
url('../fonts/HelveticaNeue-Medium.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-MediumItalic.eot');
src: url('../fonts/HelveticaNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-MediumItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-MediumItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-MediumItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-MediumItalic.svg#HelveticaNeue-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Roman.eot');
src: url('../fonts/HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Roman.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Roman.woff') format('woff'),
url('../fonts/HelveticaNeue-Roman.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Roman.svg#HelveticaNeue-Roman') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-Thin.eot');
src: url('../fonts/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-Thin.woff2') format('woff2'),
url('../fonts/HelveticaNeue-Thin.woff') format('woff'),
url('../fonts/HelveticaNeue-Thin.ttf') format('truetype'),
url('../fonts/HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('../fonts/HelveticaNeue-ThinItalic.eot');
src: url('../fonts/HelveticaNeue-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-ThinItalic.woff2') format('woff2'),
url('../fonts/HelveticaNeue-ThinItalic.woff') format('woff'),
url('../fonts/HelveticaNeue-ThinItalic.ttf') format('truetype'),
url('../fonts/HelveticaNeue-ThinItalic.svg#HelveticaNeue-ThinItalic') format('svg');
font-weight: 100;
font-style: italic;
font-display: swap;
}
.service-sec-det {
width: 100%;
float: left;
padding: 90px 0;
background: #fff;
border-bottom: 1px dashed #edf0f5;
position: relative;
}
.service-sec-det .container {
}
/* =========================================
LEFT CONTENT
========================================= */
.service-left {
width: 65%;
float: left;
padding-right: 55px;
}
/* Image */
.service-left
img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
border-radius: 24px;
float: left;
position: relative;
box-shadow: 0 20px 50px rgba(25, 35, 60, 0.12);
transition: all 0.5s ease;
}
.service-left
img:hover {
transform: translateY(-5px);
box-shadow: 0 28px 60px rgba(25, 35, 60, 0.16);
}
/* Heading */
.service-left
h2 {
width: 100%;
float: left;
margin: 20px 0 0;
font-size: 44px;
line-height: 1.15;
letter-spacing: -1px;
color: #000000;
font-weight: 700;
}
/* Small accent line */
.service-left
h2:after {
/* content: ''; */
width: 55px;
height: 4px;
background: #f36719;
border-radius: 10px;
display: block;
margin-top: 18px;
}
/* Paragraph */
.service-left
p {
width: 100%;
float: left;
margin: 10px 0 5px;
font-size: 16px;
line-height: 1.85;
color: #667085;
font-weight: 400;
}
/* =========================================
FEATURE LIST
========================================= */
.service-left
ul {
width: 100%;
float: left;
padding: 0;
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.service-left
ul li {
width: auto;
float: none;
display: inline-flex;
align-items: center;
min-height: 45px;
margin: 0;
padding: 8px 18px 8px 45px;
list-style: none;
position: relative;
background: #fff8f3;
border: 1px solid #ffe2d2;
border-radius: 50px;
font-size: 14px;
line-height: 1.4;
color: #555f6d;
font-weight: 500;
transition: all 0.3s ease;
}
.service-left
ul li:hover {
background: #f36719;
border-color: #f36719;
color: #fff;
transform: translateY(-2px);
}
/* Tick icon */
.service-left
ul li:after {
position: absolute;
content: '';
width: 20px;
height: 20px;
left: 15px;
top: 50%;
transform: translateY(-50%);
background-image: url('../images/ico4.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.3s ease;
}
.service-left
ul li:hover:after {
filter: brightness(0) invert(1);
}
/* =========================================
RIGHT ENQUIRY CARD
========================================= */
.service-right {
width: 35%;
float: right;
background: #fff8f3;
padding: 42px 38px 40px;
border: 1px solid #ffe5d6;
border-radius: 24px;
box-shadow: 0 18px 50px rgba(35, 35, 35, 0.08);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/* Decorative circle */
.service-right:
before {
content: '';
position: absolute;
width: 170px;
height: 170px;
right: -80px;
top: -80px;
background: rgba(243, 103, 25, 0.08);
border-radius: 50%;
}
/* Second decorative circle */
.service-right:
after {
content: '';
position: absolute;
width: 100px;
height: 100px;
left: -55px;
bottom: -55px;
background: rgba(243, 103, 25, 0.05);
border-radius: 50%;
}
/* Heading */
.service-right
h2 {
width: 100%;
float: left;
position: relative;
z-index: 2;
margin: 0;
font-size: 30px;
line-height: 1.25;
color: #101828;
font-weight: 700;
letter-spacing: -0.5px;
}
/* Heading accent */
.service-right
h2:after {
/* content: ''; */
display: block;
width: 45px;
height: 3px;
background: #f36719;
border-radius: 10px;
margin-top: 14px;
}
/* Form */
.service-right
form {
width: 100%;
float: left;
position: relative;
z-index: 2;
}
/* Form field */
.service-field {
width: 100%;
float: left;
margin-top: 18px;
}
/* Label */
.service-field
label {
width: 100%;
float: left;
margin-bottom: 7px;
font-size: 14px;
color: #344054;
font-weight: 600;
}
/* Input */
.service-field
input {
width: 100%;
height: 52px;
float: left;
padding: 0 17px;
background: #fff;
border: 1px solid #e4e7ec;
border-radius: 12px;
outline: none;
font-size: 15px;
color: #101828;
box-sizing: border-box;
transition: all 0.3s ease;
}
/* Input focus */
.service-field
input:focus {
border-color: #f36719;
box-shadow: 0 0 0 4px rgba(243, 103, 25, 0.09);
}
/* Submit */
.service-right
button {
width: 100%;
height: 54px;
float: left;
margin-top: 25px;
padding: 0 25px;
background: #f36719;
border: 0;
border-radius: 50px;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 25px rgba(243, 103, 25, 0.22);
transition: all 0.35s ease;
}
/* Button hover */
.service-right
button:hover {
background: #1b2c58;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(243, 103, 25, 0.28);
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.service-sec-det {
padding: 65px 0;
}
.service-left {
width: 100%;
padding-right: 0;
}
.service-left img {
height: 380px;
}
.service-left h2 {
font-size: 38px;
}
.service-right {
width: 100%;
margin-top: 50px;
padding: 40px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.service-sec-det {
padding: 50px 0;
}
.service-left img {
height: 250px;
border-radius: 18px;
}
.service-left h2 {
font-size: 30px;
line-height: 1.2;
margin-top: 28px;
}
.service-left h2:
after {
margin-top: 14px;
}
.service-left p {
font-size: 15px;
line-height: 1.75;
}
.service-left ul {
gap: 8px;
}
.service-left ul li {
font-size: 13px;
padding: 8px 14px 8px 40px;
}
.service-left ul li:
after {
left: 12px;
}
.service-right {
margin-top: 40px;
padding: 30px 22px;
border-radius: 20px;
}
.service-right h2 {
font-size: 25px;
}
.service-field input {
height: 50px;
}
.service-right button {
height: 52px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.service-left img {
height: 220px;
}
.service-left h2 {
font-size: 35px;
}
.service-right {
padding: 27px 18px;
}
}
One import.cta:after{
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.cta{
width: 100%;
float: left;
background-image: url('../images/cta-bg.webp');
background-size: cover;
background-position: center;
padding: 200px 0;
position: relative;
text-align: center;
background-attachment: fixed;}
.cta
h2{font-size: 60px;
color: #ffffff;
font-weight: 700;
line-height: 120%;
position: relative;
z-index: 9;
margin-bottom: 20px;}
.cta
a{background: #f36719;
font-size: 18px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
padding: 13px 30px;
border-radius: 30px;
float: none;
margin: 20px auto;}
.cta
a:hover{background: #fff;
color: #000;
background: #ffffff;
animation: 1.5s infinite pulse5;}
.service-p{
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 220px;
}
.service-box:
hover{
background: #fbede5;
}.service-box:
hover h6{
color: #1e2e59;
}
.service-sec{
width: 100%;
float: left;
padding: 70px 0;
background: #fff;
margin-top: -40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;}
.service-sec
h2{font-size: 50px;
color: #000;
font-weight: 700;
text-align: center;
margin: 0;}
.service-box{
width: 100%;
float: left;
border: 1px dashed #cecece;
padding: 20px;
margin-top: 30px;
border-radius: 20px;}
.service-box
h6{font-size: 30px;
color: #000;
font-weight: 600;
float: left;
width: 40%;}
.service-box .s1{
width: 57px;
float: right;
padding: 15px;
background: #fbede5;
border-radius: 10px;}
.service-box
p{width: 100%;
float: left;
font-size: 16px;
color: #A9A9A9;
line-height: 160%;
font-weight: 400;
margin-top: 0;}
.service-box
a{float: left;
background: #f36719;
padding: 10px 20px;
font-size: 16px;
color: #fff;
text-decoration: none;
border-radius: 30px;}
.service-box
a img{width: 24px;
margin-left: 10px;}
.service-box
a:hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.innerban{
width: 100%;
float: left;
background-image: url('../images/innerban.webp');
height: 350px;
margin-top: -140px;
background-size: cover;
background-position: center;
}
.ftr-left
form input:focus-visible{
outline: none;
}
.ftr-left{
border-left: 1px dashed #586999;
float: left;
width: 47%;
padding: 80px 80px 118px;
border-right: 1px dashed #586999;}
.ftr-left
h6{font-size: 20px;
color: #fff;
font-weight: 500;
float: left;
width: 100%;}
.ftr-left
form{width: 100%;
float: left;
position: relative;
margin-bottom: 30px;}
.ftr-left
form button:hover img{
animation-name: zoomIn;
animation-duration: .5s;
animation-iteration-count: 1;
}
.ftr-left
form button:hover{
color: #000;
background: #ffffff;
animation: 1.5s infinite pulse5;
}
.ftr-left
form input{background: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #444f6e;
font-size: 15px;
color: #fff;
width: 100%;
padding: 10px 0;}
.ftr-left
form button{position: absolute;
background: #f36719;
border: 0;
right: 0;
top: -4px;
font-size: 16px;
color: #fff;
font-weight: 500;
padding: 10px 10px;
border-radius: 30px;}
.ftr-left
form button img{width: 18px;}
.ftr-left
h5{font-size: 18px;
color: #fff;
margin-top: 15px;
font-weight: 700;
float: left;
width: 100%;}
.ftr-left
p{font-size: 16px;
color: #fff;
font-weight: 400;
line-height: 160%;
float: left;
width: 100%;}
.ftr-left
p a{font-size: 16px;
color: #fff;
font-weight: 400;
line-height: 160%;
text-decoration: none;}
.ftr-left
p a:hover{}
.ftr-copy
p{
width: 50%;
float: left;
font-size: 16px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0;
}
.ftr-copy
h6{
width: 50%;
float: right;
font-size: 16px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0;
text-align: right;
}
.ftr-copy
h6 a{
color: #fff;
text-decoration: none;
}
.ftr-copy
h6 a:hover{
color: #f36719;
}
.ftr-copy{
float: left;
width: 100%;
border-top: 1px solid #586999;
}
.ftr-right{
border-right: 1px dashed #586999;
float: left;
width: 53%;
padding: 80px 30px 65px 80px;}
.quickbox{
width: 50%;
float: left;}
.ftr-right
h2{font-size: 20px;
color: #fff;
font-weight: 700;
margin-bottom: 20px;}
.ftr-right
a{color: #fff;
width: 100%;
float: left;
font-size: 16px;
text-decoration: none;
padding: 10px 0;}
.ftr-right
a:hover{color: #f36719;}
.ftr-social{
float: left;
width: 100%;
margin-top: 30px;}
.ftr-social
a{width: 50px;
height: 50px;
border: 1px solid #cecece;
display: inline-block;
margin: 0 10px 0 0;
text-align: center;
border-radius: 100%;
position: relative;}
.ftr-social
a img{width: 28px;}
.ftr-social
a:hover{background: #f36719;
border-color: #f36719;}
.ftr-social
a:hover img{
animation: 1.5s infinite pulse3;
}
.footer{
background: #23325B;
background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);
width: 100%;
float: left;
}
.p7-left
a{
background: #F36719;
width: 259px;
height: 54px;
float: left;
font-size: 18px;
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 14px 20px;
border-radius: 30px;
}
.p7-left
a img{
width: 24px;
float: right;
margin-top: 3px;
}
.p7-left
a:hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
}
.panel7{
width: 100%;
float: left;
padding: 70px 0;}
.p7-left{
width: 50%;
float: left;}
.p7-left
h2{font-size: 60px;
color: #000;
font-weight: 500;
width: 80%;
margin-bottom: 30px;}
.p7-left
p{font-size: 16px;
color: #A9A9A9;
font-weight: 400;
width: 51%;
margin-bottom: 30px;}
.p7-right{
width: 48%;
float: right;
}
.faq-accordion .accordion-item{
border-bottom: 1px solid #e5e5e5;
border-radius:12px;
overflow:hidden;
margin-bottom:15px;
background: #F8F5F1;
border-left: 0;
border-right: 0;
border-radius: 0;
border-top: 0;
margin-bottom: 0;
}
.faq-accordion .accordion-button{
background:#fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 80px 30px 70px;
box-shadow:none;
position:relative;
border-top: 0 !important;
}
.accordion-body{
font-size: 18px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 15px 70px;
position: relative;
}
.faq-accordion .accordion-button:not(.collapsed){
background: #F8F5F1;
color: #000;
box-shadow:none;
}
.faq-accordion .accordion-button:
focus{
box-shadow:none;
}
/* Remove Bootstrap default arrow */
.faq-accordion .accordion-button::
after{
display:none;
}
/* Plus / Minus */
.faq-accordion .accordion-button::
before{
content:"+";
position:absolute;
right:25px;
top: 35%;
transform:translateY(-50%);
width:30px;
height:30px;
border: 2px solid #A9A9A9;
border-radius:50%;
color: #A9A9A9;
display:flex;
align-items:center;
justify-content:center;
font-size: 18px;
font-weight:500;
transition:.3s;
}
.faq-accordion .accordion-button:not(.collapsed)::
before{
content:"-";
background: #f8f5f1;
color: #000000;
border-color: #000;
}
.panel6 .owl-nav{
position: relative;
}
.panel6 .owl-next:
hover{
background: #f26719 !important;
border-color: #f26719 !important;
}
.panel6 .owl-prev:
hover{
background: #f26719 !important;
border-color: #f26719 !important;
}
.panel6 .owl-next:
hover img{
filter: brightness(111);
}
.panel6 .owl-prev:
hover img{
filter: brightness(111);
}
.panel6 .owl-prev{
position: absolute;
top: -280px;
left: -45px;
width: 88px;
height: 56px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next{
position: absolute;
top: -280px;
right: -44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
width: 88px;
height: 56px;
transform: rotate(180deg);
}
.panel6 .owl-prev
img{
width: 24px;
}.panel6 .owl-next
img{
width: 24px;
}
.c-name
span{
font-size: 16px;
color: #A9A9A9;
float: left;
}
.panel6{
width: 100%;
float: left;
background: #FCFCFC;}
.panel6-left{
width: 100%;
float: left;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
padding: 0;}
.p6-carousel1{
}.p6-box:nth-child(3n){
border-right: 0;
}.p6-box:nth-child(
even) {
border-right: dashed 1px #c0c0c0;
}
.p6-box{
width: 100%;
float: left;
border-right: dashed 1px #c0c0c0;
padding: 100px 60px 110px;}
.p6-box
img{width: 150px !important;}
.p6-box
p{font-size: 25px;
color: #000;
font-weight: 400;
line-height: 120%;
margin-top: 20px;}
.c-name{
width: 100%;
float: left;
/* display: flex; */
/* flex-direction: row; */
/* display: flex; */ /* Stack vertically */
/* gap: 20px; */}
.c-name
h5{width: 64px;
height: 64px;
background: #C3C7DF;
border-radius: 100%;
text-align: center;
padding: 20px;
font-size: 22px;
color: #000;
font-weight: 700;
float: left;
margin-right: 20px;}
.c-name
h6{font-size: 20px;
color: #3C2D25;
font-weight: 700;
/* float: left; */
margin: 0;
padding-top: 10px;}
.c-name
h6 span{/* float: left; */font-size: 16px;
color: #A9A9A9;
font-weight: 400;
/* clear: both; */}
.panel6-right{
}
.p6-carousel2{
}
.panel5{
width: 100%;
float: left;
background-image: url('../images/bg2.png');
margin-top: 50px;
background-size: cover;
background-position: center;
padding: 115px 0;}
.panel5
h6{margin-bottom: 12px;
font-size: 18px;
color: #A9A9A9;
font-weight: 400;}
.panel5
h6 img{width: 27px;
position: relative;
left: 5px;
top: -2px;}
.panel5
h2{font-size: 64px;
color: #fff;
width: 60%;}
.panel5
p{
font-size: 16px;
color: #A9A9A9;
width: 49%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}
.panel4{
width: 100%;
background-image: url('../images/bg1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #F8F5F1;
border-radius: 32px;
max-width: 97%;
display: table;
padding: 65px 75px 75px;
margin: auto;}
.panel4
h2{text-align: center;
font-size: 65px;
color: #000;
font-weight: 500;}
.p4-box-full{
width: 100%;
float: left;
padding: 20px 0 30px;
border-top: 1px solid #A9A9A9;
border-bottom: 1px solid #A9A9A9;
margin-top: 40px;}
.p4-box{
width: 25%;
float: left;}
.p4-box
h5{font-size: 100px;
color: #000;}
.p4-box
h6{
font-size: 24px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}
.panel3{
width: 100%;
float: left;
background: #fcfcfc;
margin-bottom: 46px;}
.p3-left1{
width: 50%;
float: left;
padding: 120px 63px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;}
.p3-left1
h2{font-size: 60px;
color: #000;
line-height: 100%;}
.p3-right1{
width: 50%;
float: left;
padding: 190px 63px 5px;
border-right: dashed 1px #c0c0c0;}
.p3-right1
p{font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;}
.p3-right1
a{
width: 220px;
height: 54px;
border: 1px solid #2F2A27;
float: left;
font-size: 18px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 14px 20px;
border-radius: 30px;
margin-top: 10px;
}.p3-right1
a:hover img{
filter: invert(1);
}
.p3-right1
a img{width: 24px;
float: right;
margin-top: 2px;}
.p3-right1
a:hover{background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;}
.p3-left2{
width: 50%;
float: left;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
margin-top: -60px;
padding-top: 60px;}
.p3-left-box{
width: 100%;
float: left;
padding: 60px 70px;
transition: .4s;}
.s-img{
width: 57px;
float: right;
padding: 15px;
background: #fbede5;
border-radius: 10px;}
.p3-left-box
h5{font-size: 40px;
color: #000;
font-weight: 500;
float: left;}
.p3-left-box
p{width: 100%;
float: left;
font-size: 16px;
color: #A9A9A9;
line-height: 160%;
margin-top: 15px;
font-weight: 400;}
.p3-right2{
width: 50%;
float: left;
border-right: dashed 1px #c0c0c0;}
.p3-left-box:
hover{background: #23325B;}
.p3-left-box:
hover h5{color: #fff;}
.p3-left-box:
hover p{}
.p3-left-box:
hover img{}
.panel3-right
{
float: right;
width: 67%;}
.panel3-right
h6{color: #A9A9A9;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;}
.panel3-right
h6 img{width: 27px;
position: relative;
left: 5px;
top: -2px;}
.panel3-right
h2{
font-size: 61px;
color: #fff;
font-weight: 500;
line-height: 100%;
}
.panel2{
background: #23325B;
background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);
width: 100%;
float: left;
padding: 70px 0;
position: relative;}
.p2-img{
position: absolute;
top: 16px;
left: 0;
width: 405px;}
.moving-section{
width:100%;
overflow:hidden;
padding: 20px 0 0;
}
.moving-track{
display:flex;
width:max-content;
animation: marquee 12s linear infinite;
}
.moving-section:
hover .moving-track{
animation-play-state:paused;
}
.moving-item{
width:260px;
margin:0 15px;
border-radius:18px;
text-align:center;
flex-shrink:0;
}
.moving-item
img{
width: 190px;
margin-bottom:20px;
height: 80px;
object-fit: contain;
}
.moving-item
h4{
margin:0;
font-size:22px;
font-weight:600;
}
@keyframes marquee{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
/* Desktop */
@media(min-width:1200px){
.moving-item{
width: calc((100vw - 50px)/7);
}
}
/* Tablet */
@media(max-width:991px){
.moving-item{
width:300px;
}
}
/* Mobile */
@media(max-width:767px){
.moving-item{
width:250px;
}
}
.panel1{
width: 100%;
float: left;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -40px;
position: relative;
z-index: 99;
background: #fff;}
.panel1-left{
width: 56%;
float: left;
padding: 95px 70px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;}
.panel1-left
h2{font-size: 62px;
color: #000;
font-weight: 500;}
.panel1-left
p{margin: 0;
font-size: 16px;
color: #A9A9A9;
padding-top: 160px;
margin: 0;
line-height: 160%;
width: 100%;}
.panel1-right{
width: 44%;
float: left;
padding: 140px 83px 118px 45px;
border-right: dashed 1px #c0c0c0;}
.panel1-right
h5{font-size: 24px;
color: #000;
margin-top: 16px;
float: left;
width: 100%;
font-weight: 500;}
.p1-right-img{
position: relative;
float: left;
width: 100%;
}
.img1{
width: 100%;
height: 196px;
object-fit: cover;
border-radius: 16px;
position: relative;
z-index: 9;
}
.img2{
position: absolute;
right: -36px;
top: -78px;
z-index: 0;
}
.panel1-right
h6{font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;}
.panel1-right
a{width: 194px;
height: 54px;
border: 1px solid #2F2A27;
float: left;
font-size: 18px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 14px 20px;
border-radius: 30px;
margin-top: 20px;}
.panel1-right
a img{width: 24px;
float: right;
margin-top: 2px;}
.panel1-right
a:hover{background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;}
.panel1-right
a:hover img{
filter: invert(1);
}
.max-text-ban{
position: absolute;
right: 8%;
bottom: 140px;
z-index: 99;
max-width: 455px;}
.max-text-ban
a{display: inline-block;
margin-right: 10px;}
.max-text-ban
a img{width: 72px;
height: 72px;
transform: none;
animation: none;}
.max-text-ban
a:hover img{animation-name: zoomIn;
animation-duration: .5s;
animation-iteration-count: 1;}
.max-text-ban
p{
font-size: 16px;
color: #fff;
font-weight: 400;
line-height: 160%;
width: 61%;
float: right;
margin: 0;
padding-top: 8px;
}
.btn1{
background: #fff;
width: 138px;
height: 52px;
text-align: center;
float: left;
color: #000;
font-size: 16px;
font-weight: 500;
text-decoration: none;
border-radius: 30px;
padding: 14px 0;}
.btn2{
background: transparent;
width: 138px;
height: 52px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
font-weight: 500;
text-decoration: none;
border-radius: 30px;
padding: 13px 0;}
.btn1:
hover{
background: #f36719;
animation: 1.5s infinite pulse4;
color: #fff;
}
.btn2:
hover{
/* background: #fff; */
color: #f36719;
}
.hero-slider{
height: 868px;
width: 100%;
float: left;
margin-top: -140px;
position: relative;
}
.hero-slider .carousel-item{
height: 868px;
overflow:hidden;
}
.hero-slider
img{width:100%;
height: 868px;
object-fit:cover;
transform:scale(1);
animation:kenburns 10s linear infinite;}
.overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,.65),
rgba(0,0,0,.20),
rgba(0,0,0,.55));
}
.carousel-caption{
left: 8%;
right:auto;
width: 748px;
top: 52%;
bottom:auto;
transform:translateY(-50%);
text-align:left;
z-index:10;}
.word{
position:relative;
display:inline-block;
overflow:hidden;}
.fill{
position:absolute;
inset:0;
background: #ffffff;
animation:moveMask 1.2s ease forwards;}
@keyframes moveMask{
0%{
transform:translateX(-100%);
}
50%{
transform:translateX(0%);
}
100%{
transform:translateX(100%);
}
}
@keyframes fillText{
from{
background-size:0% 100%;
}
to{
background-size:100% 100%;
}
}
@keyframes textReveal{
from{
background-position:100% 0;
}
to{
background-position:0 0;
}
}
@keyframes blurReveal{
0%{
opacity:0;
filter:blur(15px);
transform:translateY(60px);
}
100%{
opacity:1;
filter:blur(0);
transform:translateY(0);
}
}
.hero-title{
animation:blurReveal 1s ease forwards;
font-size: 96px;
color: #fff;
line-height: 105%;
font-weight: 500;}
.carousel-caption
p{
font-size:20px;
margin:30px 0;
opacity:0;
animation:fadeUp .9s .5s forwards;
}
.carousel-caption .btn{
border-radius:50px;
opacity:0;
animation:fadeUp .9s .7s forwards;
}
.carousel-indicators{
bottom:45px;
}
.carousel-indicators
button{
width:60px;
height:3px;
margin:0 6px;
opacity:.4;
}
.carousel-indicators .active{
opacity:1;
}
@keyframes kenburns{
0%{
transform:scale(1);
}
100%{
transform:scale(1.18);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@-webkit-keyframes pulse3 {
0% {
-webkit-box-shadow: 0 0 0 0 #187c0e}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
@-webkit-keyframes pulse4 {
0% {
-webkit-box-shadow: 0 0 0 0 #f36719}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
@keyframes pulse3 {
0% {
-moz-box-shadow: 0 0 0 0 #1a7d10;
box-shadow: 0 0 0 0 #1a7d10;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
.social_chat_block
img {
width: 30px;
float: right;
}
.
/* circle rotate 360 deg */
@keyframes shape-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.dot{
width: 15px;
height: 15px;
background: #0055FF;
border-radius:50%;
position:relative;
z-index:2;
flex-shrink:0;
margin-top:10px;
margin-left: 3px;
}
/* Content */
.content{
}
.year{
display:block;
color: #0055FF;
font-size: 32px;
font-weight: 500;
margin-bottom:6px;
}
.content
h3{}
.content
p{}
/* Responsive */
@media(max-width:768px){
.timeline-wrap{
padding:20px;
}
.timeline-wrap::
before{
left:25px;
}
.year{
font-size:28px;
}
.content h3{
font-size:22px;
}
.content p{
font-size:14px;
}
}
.p10-right{
width: 55%;
float: left;
}
.ip-loader {
/* bottom: 0 !important; */
/* text-align: center !important; */
/* position: relative !important; */
/* margin-left: 0%; */
/* width: 100%; */
/* height: 100vh; */
/* display: flex; */
/* align-items: center; */
/* align-content: center; */
/* justify-content: center; */
}
.loading
img {
width: 60px;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% {
opacity: 0.3; }
100% {
opacity: 1; }
}
/* OTHER PAGES */
.inner-header {
/* background: #000; */
position: relative;
}
.inner-header .logo
img {
/* filter: brightness(0) invert(11); */}
.inner-header .nav-toggle:
before {
background-color: #ffffff;
box-shadow: 0 0.5em 0 0 #ffffff, 0 1em 0 0 #ffffff;
}
.header .menu
li a img{
width: 10px;
margin-left: 5px;
}
/* default (home page) */
.header .menu
li a {
color: #ffffff; /* or your normal color */
}
/* INNER PAGES */
.inner-header .menu
li a {
/* color: #fff; */}
/* arrow icon white */
.inner-header .menu
li a img {
/* filter: brightness(0) invert(1); */
width: 10px;
margin-left: 10px;
}
.inner-header .menu
li a:hover {
color: #b5b5b5;
}
.head-menu{
display: none;
}
.header{
width: 100%;
float: left;
padding: 0;
position: relative;
/* height: 130px; */
z-index: 999;
/* padding-bottom: 22px; */
}
.logo {
/* width: 100%; */
float: left;
/* display: flex; */
/* align-items: center; */
justify-content: center;
height: 100%;
width: 19%;
margin-top: 17px;
}
.logo
img{
width: 100%;
float: left;
max-width: 101px;
position: relative;
z-index: 1111;
}
.hdr-menu {
width: 100%;
float: right;
/* display: flex; */
height: 100%;
/* align-items: center; */
gap: 28px;
}
.menus{
float: right;
width: 100%;
}
.header_menu_area {
width: 100%;
position: relative;
float: left;
}
.burger-menu{
float: right;
width: 143px;
height: 56px;
border: 1px solid #fff;
text-align: center;
text-decoration: none;
padding: 15px;
border-radius: 30px;
margin-top: 58px;
font-size: 16px;
color: #fff;
}
.header_menu_area >
ul {
padding-right: 0px;
padding: 75px 0px 0px 0px;
/* width: 90%; */
float: left;
vertical-align: middle;
margin: unset;
/* text-align: right; */
}
.header_menu_area >
ul > li:last-child {
padding-right: 0;
}
.header_menu_area >
ul > li {
display: inline-block;
vertical-align: middle;
/* width: auto; */
margin: 0;
/* float: left; */
text-decoration: none;
list-style-type: none;
position: relative;
z-index: 9;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
text-decoration: none;
text-align: center;
}
.menu
li {
display: inline-block;
position: relative;
z-index: 100;
}
.header_menu_area >
ul > li > a {
position: relative;
float: left;
color: #ffffff;
padding: 1px 18px;
text-decoration: none;
letter-spacing: 0.5px;
font-size: 16px;
border-radius: 2px;
font-weight: 300;
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.header_menu_area >
ul > li > a:hover{
color: #f4671a;
}
.stable{
}
.menu
ul {
visibility: hidden;
opacity: 0;
margin: 0;
top: 0;
/* height: 0; */
padding: 0;
width: 430px;
position: absolute;
right: 20px;
padding-top: 30px;
right: 0;
bottom: 0;
background: transparent;
z-index: 99999;
/* transform: translate(0, 20px); */
/* transition: all .2s ease-out; */
/* -webkit-transform: perspective(600px) rotateX(-90deg); */
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
/* transform: perspective(600px) rotateX(-90deg); */
/* -webkit-transition: -webkit-transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
-o-transition: -o-transform .5s ease,opacity .6s ease,max-height .6s step-end,max-width .6s step-end,padding .6s step-end;
/* transition: transform .5s ease, opacity .6s ease, max-height .6s step-end, max-width .6s step-end, padding .6s step-end; */
}
.menu
ul li a:hover, .menu ul li:hover>a {
background: #ffffff82;
color: #ffffff !important;
text-decoration: none;
transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.menu
li:first-child {
/* margin-left: 0; */}
.menu
li:first-child {
/* margin-left: 0; */}
.menu
ul li {
display: block;
float: left;
background: 0 0;
margin: 0;
padding: 0;
width: 50%;
position: relative;
}
.menu
li {
display: inline-block;
position: relative;
z-index: 100;
/* z-index: 9; */
/* padding-bottom: 50px; */
}
.menu
ul li a {
width: 100%;
font-size: 15px;
font-weight: 400;
padding: 15px 15px;
display: block;
color: #ffffff !important;
background: #ffffff4f;
text-align: -webkit-match-parent;
text-decoration: none;
text-align: left;
border-bottom: 1px solid #f3f3f32b;
}
.menu
li:hover>ul {
visibility: visible;
opacity: 1;
/* transform: translate(0, 0); */
transition: all .5s ease-out;
height: auto;
right: -106px;
}
/*mobile-wrapper*/
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1180px;
}
}
.banner-indicator {
position: absolute;
left: 7%;
bottom: 8px;
display: flex;
align-items: center;
display: none;
gap: 5px;
z-index: 9;
flex-direction: column;
}
#slide-count {
color: #fff;
font-size: 18px;
letter-spacing: 2px;
/* display: none; */
}
/* DOTS AS VERTICAL BARS */
#banner-dots .owl-dot {
border: unset;
width: 17px;
height: 17px;
background: transparent;
margin: 0 6px;
display: inline-block;
border: 1px solid #cecece;
transition: 0.3s;
border-radius: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background: #fff;
height: 100px;
}.sticky .logo{
width: 13%;
}
.sticky
ul{padding-top: 20px;}
.social_chat_block {
width: auto;
position: fixed;
bottom: 30px;
right: 2%;
background: #f36719;
border: solid 1px #58585c24;
z-index: 9999;
animation: 1.5s infinite pulse4;
text-align: left;
text-decoration: none;
font-size: 17px;
padding-left: 10px;
padding-right: 10px;
/* line-height: 42px; */
color: black;
font-weight: 500;
transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
border-radius: 50px;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
@-webkit-keyframes pulse3 {
0% {
-webkit-box-shadow: 0 0 0 0 #167d0b}
70% {
-webkit-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
@keyframes pulse3 {
0% {
-moz-box-shadow: 0 0 0 0 #1e2e59;
box-shadow: 0 0 0 0 #1c2c58;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
@keyframes pulse5 {
0% {
-moz-box-shadow: 0 0 0 0 #ffffff;
box-shadow: 0 0 0 0 #ffffff;
}
70% {
-moz-box-shadow: 0 0 0 1.25rem rgba(5,103,168,0);
box-shadow: 0 0 0 1.25rem rgba(5,103,168,0)}
100% {
-moz-box-shadow: 0 0 0 0 rgba(5,103,168,0);
box-shadow: 0 0 0 0 rgba(5,103,168,0)}
}
.contact-full
{
width: 100%;
float: left;
padding: 100px 0;
background: #fff;
margin-top: -40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;}
.contact-left{
width: 100%;
float: left;
}.contact-box:
hover .icon {background: #f36719;}
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
}.section-title {
position: relative;
z-index: 99;
margin-bottom: 20px;
margin-top: -1px;
}.section-title
h6 {
font-size: 20px;
font-weight: 400;
line-height: 1;
color: var(--theme);
margin-bottom: 10px;
} .contact-right-box .contact-form-items {
padding-top: 15px;
}.contact-right-box .contact-form-items .form-clt
span {
font-weight: 400;
color: #000;
display: inline-block;
margin-bottom: 10px;
}.contact-right-box .contact-form-items .form-clt
input, .contact-wrapper .contact-right-box .contact-form-items .form-clt textarea {
width: 100%;
background-color: var(--white);
padding: 13px 17px;
line-height: 1;
border-radius: 12px;
color: rgba(85, 85, 85, 0.6);
border: none;
outline: none;
font-size: 16px;
font-weight: 300;
}.contact-right-box .contact-form-items .form-clt
textarea {
padding-bottom: 120px !important;!i;!;
}
.theme-btn:
hover{
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.theme-btn{
width: 200px;
float: none;
background: #f36719;
padding: 16px;
display: table;
margin: auto;
border: 0;
font-size: 15px;
color: #fff;
border-radius: 30px;
position: relative;
z-index: 9;
font-weight: 700;} .contact-right-box .contact-form-items .form-clt
input, .contact-right-box .contact-form-items .form-clt textarea {
width: 100%;
background-color: #fff;
padding: 13px 17px;
line-height: 1;
border-radius: 10px;
color: rgb(0 0 0);
border: none;
outline: none;
font-size: 16px;
font-weight: 400;
border: 1px dashed #7682a1;
}
.contact-right-box
h2{
font-size: 45px;
color: #000;
font-weight: 600;
}
.theme-btn:
before{
/* content: ""; */
position: absolute;
top: 50%;
left: 0px;
width: 0px;
height: 5px;
background-color: rgb(255 255 255 / 40%);
transition: none 0s ease 0s;
border-top-left-radius: 35px;
border-top-right-radius: 20px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 20px;
}
.theme-btn:
hover::before{
width: 120%;
background-color: rgba(255, 255, 255, 0);
transition: all 0.4s ease-in-out 0s;
}
.contact-left .contact-box {
padding: 34px 36px;
text-align: center;
border-radius: 12px;
background-color: #1c2d58;
transition: all 0.4s ease-in-out;
margin-top: 20px;
} .contact-left .contact-box .icon {
width: 60px;
height: 60px;
line-height: 55px;
text-align: center;
border-radius: 50%;
border: 1px solid #ffffff;
margin: 0 auto;
transition: all 0.4s ease-in-out;
}.contact-left .contact-box .content {
margin-top: 20px;
}.contact-left .contact-box .content
h4 {
margin-bottom: 5px;
color: #fff;
} .contact-left .contact-box .content
p a {
color: var(--text);
}.contact-left .contact-box:
hover .content p {
color: #fff;
}
.contact-left
p{
color:#fff;
}
.icon
img{width: 30px;
filter: invert(1);}
.contact-box:
hover{}.contact-box:
hover icon {}
.contact-box:
hover img{filter: invert(1);}
.career-form-sec {
width: 100%;
float: left;
padding: 110px 0 120px;
background: #f7f8fa;
position: relative;
overflow: hidden;
margin-top: -40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;} /* ========================================== BACKGROUND DECORATION ========================================== */ .career-form-sec:
before { content: "";
position: absolute;
width: 550px;
height: 550px;
right: -300px;
top: -300px;
border-radius: 50%;
border: 1px solid rgba(243,103,25,.08); } .career-form-sec:
after { content: "";
position: absolute;
width: 300px;
height: 300px;
left: -200px;
bottom: -180px;
border-radius: 50%;
background: rgba(243,103,25,.035); } /* ========================================== CAREER HEADER ========================================== */ .career-head {
width: 100%;
display: grid;
grid-template-columns: 1fr 430px;
gap: 70px;
align-items: end;
margin-bottom: 60px;
position: relative;
z-index: 2; } /* ========================================== LEFT ========================================== */ .career-head-left
span {display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 11px;
display: none;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 20px;} .career-head-left
span:before { content: "";
width: 28px;
height: 2px;
background: #f36719;
border-radius: 20px; } .career-head
h2 {max-width: 680px;
margin: 0;
color: #000000;
font-size: 55px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -2px;} .career-head
h2 strong {display: block;
font-weight: 500;} /* ========================================== RIGHT ========================================== */ .career-head-right {
padding-bottom: 5px; } .career-head-right
p {margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.85;} .career-note {
margin-top: 22px;
display: flex;
align-items: center;
gap: 9px;
color: #344054;
font-size: 13px;
font-weight: 600;} .career-note
span { width: 7px;
height: 7px;
border-radius: 50%;
background: #22b573; } /* ========================================== APPLICATION CARD ========================================== */ .career-application {
width: 100%;
position: relative;
z-index: 2;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 28px;
box-shadow: 0 25px 70px rgba(16,24,40,.07);
overflow: hidden; } /* ========================================== APPLICATION TOP ========================================== */ .career-application-top {
min-height: 125px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 45px;
border-bottom: 1px solid #eaecf0;
background: #fff; } .application-label {
display: block;
margin-bottom: 8px;
color: #f36719;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px; } .career-application-top
h3 { margin: 0;
color: #101828;
font-size: 25px;
font-weight: 600; } .application-number {
color: #f36719;
font-size: 30px;
font-weight: 700;
letter-spacing: -1px;
display: none;} .application-number
span { color: #98a2b3;
font-size: 13px;
font-weight: 500; } /* ========================================== FORM ========================================== */ .career-form {
width: 100%;
padding: 0; } /* ========================================== FORM SECTION ========================================== */ .career-form-section {
padding: 45px;
border-bottom: 1px solid #eaecf0; } /* ========================================== SECTION TITLE ========================================== */ .career-section-title {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 35px; } .career-section-title >
span { width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff5ef;
border: 1px solid #ffd9c5;
border-radius: 50%;
color: #f36719;
font-size: 11px;
font-weight: 700; } .career-section-title
h4 { margin: 0;
color: #101828;
font-size: 18px;
font-weight: 700; } .career-section-title
p { margin: 5px 0 0;
color: #98a2b3;
font-size: 12px; } /* ========================================== GRID ========================================== */ .career-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 25px; } .career-field-full {
grid-column: 1 / -1; } /* ========================================== FIELD ========================================== */ .career-field {
position: relative; } .career-field
label {display: block;
margin-bottom: 9px;
color: #000000;
font-size: 15px;
font-weight: 500;} .career-field
input, .career-field select, .career-field textarea { width: 100%;
box-sizing: border-box;
padding: 15px 17px;
border: 1px solid #d0d5dd;
border-radius: 11px;
background: #fff;
color: #101828;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; } .career-field
input::placeholder, .career-field textarea::placeholder { color: #98a2b3; } .career-field
input:hover, .career-field select:hover, .career-field textarea:hover { border-color: #98a2b3; } .career-field
input:focus, .career-field select:focus, .career-field textarea:focus { border-color: #f36719;
background: #fff;
box-shadow: 0 0 0 4px rgba(243,103,25,.08); } .career-field
textarea { min-height: 150px;
resize: vertical;
line-height: 1.7; } .career-field
select { appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, #667085 50%), linear-gradient(135deg, #667085 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat; } /* ========================================== RESUME UPLOAD ========================================== */ .career-upload {
width: 100%;
min-height: 145px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 18px;
padding: 25px;
border: 1px dashed #c7cdd4;
border-radius: 16px;
background: #fafbfc;
cursor: pointer;
position: relative;
transition: border-color .35s ease, background .35s ease, transform .35s ease; } .career-upload:
hover { border-color: #f36719;
background: #fff8f4;
transform: translateY(-2px); } .career-upload
input { display: none; } /* ========================================== UPLOAD ICON ========================================== */ .upload-icon {
width: 58px;
height: 58px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 14px;
color: #f36719;
font-size: 25px;
transition: all .35s ease; } .career-upload:
hover .upload-icon { background: #f36719;
border-color: #f36719;
color: #fff;
transform: translateY(-4px); } /* ========================================== UPLOAD CONTENT ========================================== */ .upload-content {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1; } .upload-content
strong { color: #101828;
font-size: 14px;
font-weight: 700; } .upload-content
span { color: #667085;
font-size: 12px; } .upload-content
small { margin-top: 4px;
color: #98a2b3;
font-size: 10px; } /* ========================================== UPLOAD ARROW ========================================== */ .upload-arrow {
width: 40px;
height: 40px;
display: none;
/* display: flex; */
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #e4e7ec;
border-radius: 50%;
color: #667085;
transition: all .35s ease;} .career-upload:
hover .upload-arrow { background: #101828;
border-color: #101828;
color: #fff;
transform: rotate(8deg); } /* ========================================== SELECTED FILE ========================================== */ .selected-file {
min-height: 0;
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
color: #344054;
font-size: 12px; } .selected-file
span { color: #22b573;
font-weight: 700; } .selected-file
small { color: #98a2b3; } /* ========================================== SUBMIT AREA ========================================== */ .career-submit {
min-height: 105px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 25px 45px;
background: #fcfcfd; } /* ========================================== NOTE ========================================== */ .submit-note {
color: #98a2b3;
font-size: 11px;
display: flex;
align-items: center;
gap: 8px; } .submit-note
span { color: #22b573;
font-size: 8px; } /* ========================================== BUTTON ========================================== */ .career-submit
button {min-width: 210px;
height: 55px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 6px 7px 6px 22px;
border: 0;
border-radius: 40px;
background: #f36719;
color: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background .35s ease, transform .35s ease;} .career-submit
button i {width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
font-size: 18px;
font-style: normal;
transition: transform .35s ease;} .career-submit
button:hover {transform: translateY(-2px);
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;} .career-submit
button:hover i { transform: rotate(45deg); } /* ========================================== TABLET ========================================== */
@media (max-width: 991px) { .career-form-sec { padding: 80px 0 90px; } .career-head {
grid-template-columns: 1fr;
gap: 25px;
margin-bottom: 45px; } .career-head h2 {
font-size: 48px; } } /* ========================================== MOBILE ========================================== */
@media (max-width: 767px) { .career-form-sec { padding: 60px 0 70px; } .career-head {
gap: 20px; } .career-head h2 {
font-size: 36px;
letter-spacing: -1px; } .career-head-right p {
font-size: 16px;} .career-application {
border-radius: 20px; } .career-application-top {
min-height: auto;
padding: 25px 20px; } .career-application-top h3 {
font-size: 21px; } .application-number {
font-size: 22px; } .career-form-section {
padding: 30px 20px; } .career-section-title {
margin-bottom: 25px; } .career-grid {
grid-template-columns: 1fr;
gap: 20px; } .career-field-full {
grid-column: auto; } .career-upload {
min-height: 135px;
padding: 20px; } .upload-arrow {
display: none; } .career-submit {
align-items: stretch;
flex-direction: column;
padding: 25px 20px;
gap: 18px; } .career-submit button {
width: 100%; } } /* ========================================== SMALL MOBILE ========================================== */
@media (max-width: 480px) { .career-head h2 {font-size: 38px;} .career-upload {
align-items: flex-start; } .upload-icon {
width: 48px;
height: 48px; } .upload-content strong {
font-size: 13px; } }
.stable{
color: #f4671a !important;}/* ==========================================
CONTENT BELOW ENQUIRY FORM
========================================== */
.service-right-bottom {
width: 35%;
float: right;
margin-top: 22px;
padding: 30px 30px 28px;
background: #1b2c58;
border-radius: 22px;
position: relative;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 40px rgba(16, 24, 40, .10);
}
/* Decorative orange circle */
.service-right-bottom:
before {
content: '';
position: absolute;
width: 140px;
height: 140px;
right: -65px;
top: -65px;
border-radius: 50%;
background: rgba(243, 103, 25, .15);
}
/* Small label */
.service-mini-label {
position: relative;
z-index: 2;
display: inline-block;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
}
/* Heading */
.service-right-bottom
h3 {
position: relative;
z-index: 2;
margin: 12px 0 20px;
color: #fff;
font-size: 24px;
line-height: 1.35;
font-weight: 700;
}
/* List */
.service-right-bottom
ul {
position: relative;
z-index: 2;
padding: 0;
margin: 0;
list-style: none;
}
.service-right-bottom
ul li {
position: relative;
padding-left: 20px;
margin-top: 11px;
color: #d0d5dd;
font-size: 16px;
line-height: 1.5;
}
.service-right-bottom
ul li:before {
content: '';
position: absolute;
left: 0;
top: 6px;
font-size: 14px;
font-weight: 700;
width: 10px;
height: 10px;
background: #f36719;
border-radius: 100%;
}
/* Divider */
.service-bottom-line {
width: 100%;
height: 1px;
background: rgba(255,255,255,.10);
margin: 22px 0 18px;
}
/* Description */
.service-right-bottom
p {
position: relative;
z-index: 2;
margin: 0;
color: #98a2b3;
font-size: 13px;
line-height: 1.7;
}
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 991px) {
.service-right-bottom {
width: 100%;
float: left;
margin-top: 20px;
}
}
@media (max-width: 767px) {
.service-right-bottom {
padding: 27px 22px;
border-radius: 20px;
}
.service-right-bottom h3 {
font-size: 20px;
}
}```
css
/* ==========================================
PREMIUM SERVICE BENEFITS
========================================== */
.service-benefits {
width: 100%;
float: left;
padding: 105px 0 110px;
background: #101828;
position: relative;
overflow: hidden;
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.service-benefits{
width: 100%;
float: left;
background: #1b2c58;
padding: 70px 0;
position: relative;
overflow: hidden;
}
.service-benefits:
before {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -250px;
top: -250px;
border-radius: 50%;
border: 1px solid rgb(56 72 112 / 29%);
}
.service-benefits:
after {
content: '';
position: absolute;
width: 300px;
height: 300px;
left: -170px;
bottom: -170px;
border-radius: 50%;
background: rgb(56 72 112 / 29%);
}
/* ==========================================
HEADER
========================================== */
.service-benefits-head {
width: 100%;
float: left;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
/* Left intro */
.benefits-intro {
width: 60%;
60%:
left;
float: left;
}
.benefits-label {
display: inline-block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 18px;
}
.benefits-intro
h2 {
margin: 0;
color: #ffffff;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
letter-spacing: -1.3px;
}
.benefits-intro
h2 span {}
.benefits-intro
p {
max-width: 570px;
margin: 22px 0 0;
color: #ffffff;
font-size: 16px;
line-height: 1.8;
}
/* ==========================================
LARGE NUMBER
========================================== */
.benefits-number {
display: flex;
align-items: flex-end;
gap: 12px;
padding-bottom: 5px;
float: right;
}
.benefits-number
strong {
color: rgb(243 103 25);
font-size: 90px;
line-height: .8;
font-weight: 800;
letter-spacing: -5px;
}
.benefits-number
span {
color: #d3ddf5;
font-size: 16px;
font-weight: 600;
padding-bottom: 4px;
}
/* ==========================================
CARDS
========================================== */
.benefits-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 16px;
position: relative;
z-index: 2;
}
.benefit-card {
min-height: 320px;
background: #ffffff;
padding: 30px 27px 27px;
box-sizing: border-box;
border: 2px dashed rgb(243 103 25);
border-radius: 20px;
position: relative;
overflow: hidden;
transition:
transform .4s ease,
background .4s ease,
border-color .4s ease;
}
/* Orange top line */
.benefit-card:
before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .45s ease;
}
/* Card hover */
.benefit-card:
hover {
transform: translateY(-8px);
background: rgb(255 255 255);
border-color: rgba(243,103,25,.35);
}
.benefit-card:
hover:before {
width: 100%;
}
/* ==========================================
CARD TOP
========================================== */
.benefit-top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.benefit-number {
color: #667085;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
}
/* Icon */
.benefit-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(243,103,25,.10);
color: #f36719;
font-size: 17px;
transition: all .35s ease;
}
.benefit-card:
hover .benefit-icon {
background: #f36719;
color: #fff;
transform: rotate(-5deg);
}
/* ==========================================
CARD CONTENT
========================================== */
.benefit-card
h3 {
margin: 55px 0 14px;
color: #000000;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
}
.benefit-card
p {
margin: 0;
color: #98a2b3;
font-size: 14px;
line-height: 1.75;
}
/* ==========================================
BOTTOM LINE
========================================== */
.benefit-line {
width: 100%;
height: 1px;
background: rgba(255,255,255,.08);
position: absolute;
left: 0;
bottom: 0;
}
.benefit-line
span {
display: block;
width: 0;
height: 2px;
background: #f36719;
transition: width .5s ease;
}
.benefit-card:
hover .benefit-line span {
width: 100%;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.benefits-grid {
grid-template-columns:
repeat(2, 1fr);
}
.benefit-card {
min-height: 280px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.service-benefits {
padding: 75px 0 80px;
}
.service-benefits-head {
display: block;
margin-bottom: 40px;
}
.benefits-number {
display: none;
}
.benefits-intro h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.service-benefits {
padding: 60px 0 65px;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.benefits-intro h2 {
font-size: 32px;
}
.benefits-intro p {
font-size: 15px;
}
.benefit-card {
min-height: 260px;
padding: 25px 23px;
}
.benefit-card h3 {
margin-top: 40px;
font-size: 20px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.benefits-intro h2 {
font-size: 29px;
}
}
/* ==========================================
PREMIUM ABOUT INTRO
========================================== */
.about-intro {
width: 100%;
float: left;
padding: 100px 0 110px;
background: #fff;
overflow: hidden;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -30px;
}
.about-intro .container {
}
/* ==========================================
GRID
========================================== */
.about-intro-grid {
display: grid;
grid-template-columns:
48% 52%;
align-items: center;
gap: 70px;
}
/* ==========================================
IMAGE AREA
========================================== */
.about-intro-image {
position: relative;
padding: 0 25px 25px 0;
}
/* Image */
.about-image-main {
position: relative;
z-index: 2;
overflow: hidden;
border-radius: 28px;
box-shadow:
0 25px 60px rgba(16, 24, 40, .14);
}
.about-image-main
img {
width: 100%;
height: 550px;
object-fit: cover;
display: block;
transition: transform .7s ease;
}
.about-image-main:
hover img {
transform: scale(1.04);
}
/* Orange frame */
.about-intro-image:
before {
/* content: ''; */
position: absolute;
width: 170px;
height: 170px;
left: -70px;
top: -50px;
border-radius: 50%;
border: 1px solid #f36719;
opacity: .25;
background: #ffe1c9;
}
/* Bottom accent */
.about-intro-image:
after {
content: '';
position: absolute;
width: 75%;
height: 75%;
right: 0;
bottom: 0;
border-radius: 25px;
background: #fff4ec;
z-index: 0;
}
/* ==========================================
EXPERIENCE CARD
========================================== */
.about-experience {
position: absolute;
z-index: 4;
right: -20px;
bottom: 55px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 25px;
background: #f36719;
border-radius: 15px;
color: #fff;
box-shadow:
0 15px 35px rgba(243,103,25,.28);
}
.about-experience
strong {
font-size: 40px;
line-height: 1;
font-weight: 800;
}
.about-experience
span {
font-size: 12px;
line-height: 1.4;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .7px;
}
/* ==========================================
CONTENT
========================================== */
.about-intro-content {
padding-right: 25px;
}
.about-label {
display: inline-block;
margin-bottom: 18px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
/* Heading */
.about-intro-content
h1 {
margin: 0;
color: #000000;
font-size: 52px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -1.7px;
}
.about-intro-content
h1 span {
/* color: #f36719; */}
/* Accent */
.about-intro-content
h1:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
background: #f36719;
border-radius: 20px;
}
/* Paragraphs */
.about-intro-content
p {
margin: 20px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.85;
}
.about-intro-content .about-lead {
margin-top: 25px;
color: #344054;
font-size: 18px;
line-height: 1.7;
font-weight: 500;
}
/* ==========================================
CHECK ITEMS
========================================== */
.about-signature-row {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 27px;
}
.about-check {
display: flex;
align-items: center;
gap: 9px;
}
.about-check
span {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff1e8;
color: #f36719;
font-size: 12px;
font-weight: 700;
}
.about-check
strong {
color: #000000;
font-size: 16px;
}
/* ==========================================
BUTTON
========================================== */
.about-btn {
display: inline-flex;
align-items: center;
gap: 18px;
margin-top: 32px;
padding: 14px 23px;
background: #101828;
border-radius: 50px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all .35s ease;
}
.about-btn
span {
font-size: 20px;
line-height: 1;
transition: transform .3s ease;
}
.about-btn:
hover {
background: #f36719;
color: #fff;
transform: translateY(-3px);
}
.about-btn:
hover span {
transform: translateX(5px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.about-intro-grid {
gap: 45px;
}
.about-intro-content h1 {
font-size: 44px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-intro {
padding: 70px 0 80px;
}
.about-intro-grid {
grid-template-columns: 1fr;
gap: 55px;
}
.about-intro-content {
padding-right: 0;
}
.about-image-main img {
height: 450px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-intro {
padding: 55px 0 65px;
}
.about-intro-image {
padding-right: 12px;
padding-bottom: 12px;
}
.about-image-main {
border-radius: 20px;
}
.about-image-main img {
height: 330px;
}
.about-intro-content h1 {
font-size: 34px;
letter-spacing: -.8px;
}
.about-intro-content .about-lead {
font-size: 16px;
}
.about-experience {
right: -5px;
bottom: 30px;
padding: 14px 18px;
}
.about-experience strong {
font-size: 32px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.about-intro-content h1 {
font-size: 30px;
}
.about-image-main img {
height: 280px;
}
.about-experience span {
font-size: 10px;
}
.about-signature-row {
gap: 15px;
flex-direction: column;
}
}/* ==========================================
PREMIUM OUR STORY
========================================== */
.about-story {
width: 100%;
float: left;
padding: 105px 0 110px;
background: #1d2d59;
position: relative;
overflow: hidden;
}
.about-story .container {
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.about-story:
before {
content: '';
position: absolute;
width: 520px;
height: 520px;
right: -260px;
top: -260px;
border-radius: 50%;
border: 1px solid rgba(243,103,25,.12);
}
.about-story:
after {
content: '';
position: absolute;
width: 350px;
height: 350px;
left: -220px;
bottom: -220px;
border-radius: 50%;
background: rgba(243,103,25,.035);
}
/* ==========================================
GRID
========================================== */
.about-story-grid {
display: grid;
grid-template-columns: 34% 60%;
gap: 70px;
position: relative;
z-index: 2;
}
/* ==========================================
LEFT SIDE
========================================== */
.about-story-left {
position: relative;
padding-top: 8px;
}
.about-story-label {
display: inline-block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
/* Year */
.about-story-year {
margin-top: 55px;
}
.about-story-year
span {
display: block;
color: #667085;
font-size: 13px;
font-weight: 600;
letter-spacing: 3px;
margin-bottom: 5px;
}
.about-story-year
strong {
display: block;
color: rgba(255,255,255,.09);
font-size: 105px;
line-height: .9;
font-weight: 800;
letter-spacing: -7px;
}
/* Vertical accent */
.about-story-line {
width: 1px;
height: 145px;
background: rgba(255,255,255,.12);
margin: 45px 0 0 8px;
position: relative;
overflow: hidden;
}
.about-story-line
span {
display: block;
width: 3px;
height: 55px;
background: #f36719;
position: absolute;
left: -1px;
top: 0;
border-radius: 10px;
animation: storyLineFlow 2.2s ease-in-out infinite;
}
@keyframes storyLineFlow {
0% {
top: -55px;
}
50% {
top: 100%;
}
100% {
top: -55px;
}
}
/* ==========================================
CONTENT
========================================== */
.about-story-content
h2 {
margin: 0;
max-width: 750px;
color: #fff;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
/* letter-spacing: -1.3px; */
}
.about-story-content
h2 span {
/* color: #f36719; */}
/* Orange line */
.about-story-content
h2:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 22px;
background: #f36719;
border-radius: 20px;
}
/* Highlight */
.about-story-content .story-highlight {
max-width: 760px;
margin: 28px 0 0;
color: #d0d5dd;
font-size: 18px;
line-height: 1.75;
font-weight: 500;
}
/* Normal paragraph */
.about-story-content >
p:not(.story-highlight) {
max-width: 760px;
margin: 18px 0 0;
color: #98a2b3;
font-size: 16px;
line-height: 1.85;
}
/* ==========================================
STORY POINTS
========================================== */
.story-points {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 12px;
margin-top: 40px;
}
.story-point {
min-height: 150px;
padding: 22px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
transition: all .35s ease;
}
.story-point:
hover {
transform: translateY(-5px);
border-color: rgba(243,103,25,.35);
background: rgba(255,255,255,.055);
}
/* Number */
.story-point-icon {
display: block;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 25px;
}
/* Title */
.story-point
h4 {
margin: 0 0 7px;
color: #fff;
font-size: 18px;
font-weight: 700;
}
/* Description */
.story-point
p {
margin: 0;
color: #667085;
font-size: 13px;
line-height: 1.6;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-story {
padding: 75px 0 80px;
}
.about-story-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.about-story-year {
margin-top: 30px;
}
.about-story-year strong {
font-size: 80px;
}
.about-story-line {
display: none;
}
.about-story-content h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-story {
padding: 60px 0 65px;
}
.about-story-grid {
gap: 35px;
}
.about-story-year {
margin-top: 22px;
}
.about-story-year strong {
font-size: 65px;
letter-spacing: -4px;
}
.about-story-content h2 {
font-size: 32px;
}
.about-story-content .story-highlight {
font-size: 16px;
}
.about-story-content > p:not(.story-highlight) {
font-size: 14px;
}
.story-points {
grid-template-columns: 1fr;
gap: 10px;
}
.story-point {
min-height: auto;
}
}/* ==========================================
PREMIUM ABOUT STATS
========================================== */
.about-stats {
width: 100%;
float: left;
padding: 100px 0 105px;
background: #fff;
position: relative;
overflow: hidden;
}
.about-stats .container {
margin: 0 auto;
}
/* ==========================================
HEADER
========================================== */
.about-stats-head {
width: 100%;
float: left;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 60px;
margin-bottom: 55px;
}
.stats-label {
display: inline-block;
margin-bottom: 17px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.about-stats-head
h2 {
max-width: 600px;
margin: 0;
color: #000000;
font-size: 46px;
line-height: 130%;
font-weight: 500;
}
.about-stats-head
h2 span {}
.about-stats-head
p {
max-width: 430px;
margin: 0;
color: #667085;
font-size: 15px;
line-height: 1.8;
}
/* ==========================================
STATS GRID
========================================== */
.stats-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top: 1px solid #e4e7ec;
border-bottom: 1px solid #e4e7ec;
}
/* ==========================================
STAT ITEM
========================================== */
.stat-item {
min-height: 270px;
padding: 40px 30px;
position: relative;
border-right: 1px dashed #e4e7ec;
transition: all .35s ease;
}
.stat-item:
first-child {
border-left: 1px solid #e4e7ec;
}
.stat-item:
hover {
background: #fff8f3;
}
/* ==========================================
NUMBER
========================================== */
.stat-number {
display: flex;
align-items: baseline;
gap: 2px;
}
.stat-number
strong {
color: #101828;
font-size: 58px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
transition: color .35s ease;
}
.stat-number
span {
color: #f36719;
font-size: 27px;
font-weight: 700;
}
.stat-item:
hover .stat-number strong {
color: #f36719;
}
/* ==========================================
TITLE
========================================== */
.stat-item
h3 {
margin: 28px 0 12px;
color: #101828;
font-size: 17px;
font-weight: 700;
}
/* ==========================================
DESCRIPTION
========================================== */
.stat-item
p {
max-width: 220px;
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
ORANGE INDICATOR
========================================== */
.stat-item:
after {
content: '';
position: absolute;
left: 30px;
bottom: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .4s ease;
}
.stat-item:
hover:after {
width: 55px;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.about-stats-head {
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.about-stats-head p {
max-width: 650px;
}
.stats-grid {
grid-template-columns:
repeat(2, 1fr);
}
.stat-item:nth-child(2) {
border-right: 0;
}
.stat-item:nth-child(3) {
border-left: 1px solid #e4e7ec;
border-top: 1px solid #e4e7ec;
}
.stat-item:nth-child(4) {
border-top: 1px solid #e4e7ec;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-stats {
padding: 65px 0 70px;
}
.about-stats-head h2 {
font-size: 33px;
}
.about-stats-head p {
font-size: 14px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item,
.stat-item:nth-child(3),
.stat-item:nth-child(4) {
min-height: auto;
border-left: 1px solid #e4e7ec;
border-right: 1px solid #e4e7ec;
border-top: 0;
}
.stat-item + .stat-item {
border-top: 1px solid #e4e7ec;
border-right: 1px solid #e4e7ec;
}
.stat-item {
padding: 32px 25px;
}
.stat-number strong {
font-size: 48px;
}
}/* ==========================================
PREMIUM OUR APPROACH
========================================== */
/* ==========================================
PREMIUM OUR APPROACH
========================================== */
.about-approach {
width: 100%;
float: left;
padding: 110px 0 115px;
background: #1d2d59;
position: relative;
overflow: hidden;
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.about-approach:
before {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -250px;
top: -250px;
border-radius: 50%;
border: 1px solid rgba(243, 103, 25, .08);
}
.about-approach:
after {
content: '';
position: absolute;
width: 300px;
height: 300px;
left: -180px;
bottom: -180px;
border-radius: 50%;
background: rgba(243, 103, 25, .035);
}
/* ==========================================
MAIN WRAPPER
========================================== */
.approach-wrap {
width: 100%;
display: grid;
grid-template-columns: 38% 62%;
gap: 70px;
align-items: start;
position: relative;
z-index: 2;
}
/* ==========================================
LEFT INTRO
========================================== */
.approach-intro {
padding-top: 15px;
position: sticky;
top: 100px;
}
.approach-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 11px;
display: none;
font-weight: 700;
letter-spacing: 2px;
}
.approach-kicker:
before {
content: '';
width: 28px;
height: 2px;
background: #f36719;
border-radius: 10px;
}
/* ==========================================
HEADING
========================================== */
.approach-intro
h2 {
max-width: 480px;
margin: 22px 0 0;
color: #ffffff;
font-size: 50px;
line-height: 1.08;
font-weight: 500;
letter-spacing: -1.8px;
}
.approach-intro
h2 span {
display: block;
}
/* ==========================================
DESCRIPTION
========================================== */
.approach-intro >
p {
max-width: 450px;
margin: 25px 0 0;
color: #ffffff;
font-size: 16px;
line-height: 1.85;
}
/* ==========================================
BIG NUMBER
========================================== */
.approach-big-number {
margin-top: 65px;
display: flex;
align-items: flex-end;
gap: 18px;
}
.approach-big-number
span {
color: rgb(249 249 249 / 64%);
font-size: 130px;
line-height: .75;
font-weight: 800;
letter-spacing: -8px;
}
.approach-big-number
small {
color: #98a2b3;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
padding-bottom: 5px;
}
/* ==========================================
RIGHT STEPS
========================================== */
.approach-steps {
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ==========================================
APPROACH CARD
========================================== */
.approach-card {
width: 100%;
min-height: 165px;
display: grid;
grid-template-columns: 80px minmax(0, 1fr) 52px;
align-items: center;
gap: 25px;
padding: 28px 28px 28px 30px;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 20px;
position: relative;
overflow: hidden;
box-sizing: border-box;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
/* Orange bottom line */
.approach-card:
after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #f36719;
transition: width .5s ease;
}
/* ==========================================
NUMBER
========================================== */
.approach-card-number {
color: #e4e7ec;
font-size: 42px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
transition: color .4s ease;
}
/* ==========================================
CARD CONTENT
========================================== */
.approach-card-content >
span {
display: block;
margin-bottom: 6px;
color: #f36719;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
}
.approach-card-content
h3 {
margin: 0;
color: #101828;
font-size: 24px;
line-height: 1.25;
font-weight: 700;
}
.approach-card-content
p {
max-width: 570px;
margin: 9px 0 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
ARROW
========================================== */
.approach-card-arrow {
width: 48px;
height: 48px;
display: flex;
display: none;
align-items: center;
justify-content: center;
border: 1px solid #e4e7ec;
border-radius: 50%;
color: #667085;
font-size: 19px;
transition:
all .4s ease;
}
.approach-card-arrow
span {
transition: transform .4s ease;
}
/* ==========================================
HOVER
========================================== */
.approach-card:
hover {
transform: translateX(-8px);
border-color: #f1d8c8;
box-shadow:
0 20px 50px rgba(16, 24, 40, .08);
}
.approach-card:
hover:after {
width: 100%;
}
.approach-card:
hover .approach-card-number {
color: #f36719;
}
.approach-card:
hover .approach-card-arrow {
background: #f36719;
border-color: #f36719;
color: #fff;
}
.approach-card:
hover .approach-card-arrow span {
transform: translate(2px, -2px);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.approach-wrap {
grid-template-columns: 34% 66%;
gap: 40px;
}
.approach-intro h2 {
font-size: 42px;
}
.approach-big-number {
margin-top: 45px;
}
.approach-big-number span {
font-size: 100px;
}
.approach-card {
grid-template-columns: 65px minmax(0, 1fr) 48px;
gap: 18px;
padding: 25px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-approach {
padding: 75px 0 85px;
}
.approach-wrap {
grid-template-columns: 1fr;
gap: 45px;
}
.approach-intro {
position: relative;
top: auto;
}
.approach-intro h2 {
max-width: 650px;
font-size: 44px;
}
.approach-intro > p {
max-width: 700px;
}
.approach-big-number {
display: none;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-approach {
padding: 60px 0 70px;
}
.approach-wrap {
gap: 35px;
}
.approach-intro h2 {
font-size: 34px;
letter-spacing: -1px;
}
.approach-intro > p {
margin-top: 20px;
font-size: 16px;
}
.approach-steps {
gap: 12px;
}
.approach-card {
min-height: auto;
grid-template-columns: 55px minmax(0, 1fr);
gap: 18px;
padding: 24px 20px;
}
.approach-card-number {
font-size: 32px;
}
.approach-card-content h3 {
font-size: 21px;
}
.approach-card-content p {
font-size: 16px;
}
.approach-card-arrow {
display: none;
}
.approach-card:
hover {
transform: translateX(0) translateY(-3px);
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.approach-intro h2 {
font-size: 34px;
}
.approach-card {
grid-template-columns: 45px minmax(0, 1fr);
gap: 15px;
padding: 22px 17px;
}
.approach-card-number {
font-size: 27px;
}
.approach-card-content h3 {
font-size: 19px;
}
}
/* ==========================================
PREMIUM OUR TEAM
========================================== */
.about-team {
width: 100%;
float: left;
padding: 105px 0 115px;
background: #fff;
position: relative;
overflow: hidden;
}
.about-team .container {
}
/* ==========================================
HEADER
========================================== */
.team-head {
width: 100%;
float: left;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
margin-bottom: 55px;
}
.team-heading {
max-width: 600px;
}
.team-label {
display: none;
margin-bottom: 17px;
color: #f36719;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.team-heading
h2 {
margin: 0;
color: #000000;
font-size: 48px;
line-height: 1.12;
font-weight: 500;
}
.team-heading
h2 span {}
.team-heading
h2:after {
/* content: ''; */
display: block;
width: 60px;
height: 4px;
margin-top: 20px;
background: #f36719;
border-radius: 20px;
}
.team-intro {
max-width: 430px;
}
.team-intro
p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.8;
}
/* ==========================================
TEAM GRID
========================================== */
.team-grid {
width: 100%;
float: left;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
/* ==========================================
TEAM CARD
========================================== */
.team-card {
position: relative;
min-width: 0;
}
/* ==========================================
IMAGE
========================================== */
.team-image {
width: 100%;
height: 440px;
position: relative;
overflow: hidden;
border-radius: 22px;
background: #f2f4f7;
}
.team-image
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .7s ease,
filter .5s ease;
}
/* ==========================================
OVERLAY
========================================== */
.team-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 25px;
background:
linear-gradient(
to top,
rgba(16,24,40,.78),
rgba(16,24,40,.05) 55%,
transparent
);
opacity: 0;
transition: opacity .45s ease;
}
/* ==========================================
SOCIAL
========================================== */
.team-social {
display: flex;
gap: 8px;
transform: translateY(15px);
transition: transform .45s ease;
}
.team-social
a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #101828;
text-decoration: none;
font-size: 13px;
transition: all .3s ease;
}
.team-social
a:hover {
background: #f36719;
color: #fff;
transform: translateY(-3px);
}
/* ==========================================
NUMBER
========================================== */
.team-index {
position: absolute;
right: 20px;
top: 20px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.9);
color: #101828;
font-size: 11px;
font-weight: 700;
transition: all .35s ease;
}
/* ==========================================
TEAM INFO
========================================== */
.team-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 20px 5px 0;
}
.team-info
h3 {
margin: 0;
color: #101828;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
.team-info
p {
margin: 5px 0 0;
color: #98a2b3;
font-size: 13px;
line-height: 1.4;
}
/* ==========================================
ARROW
========================================== */
.team-arrow {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e4e7ec;
border-radius: 50%;
color: #667085;
font-size: 18px;
transition: all .35s ease;
}
/* ==========================================
HOVER
========================================== */
.team-card:
hover .team-image img {
transform: scale(1.06);
filter: brightness(.82);
}
.team-card:
hover .team-overlay {
opacity: 1;
}
.team-card:
hover .team-social {
transform: translateY(0);
}
.team-card:
hover .team-index {
background: #f36719;
color: #fff;
transform: rotate(8deg);
}
.team-card:
hover .team-arrow {
background: #f36719;
border-color: #f36719;
color: #fff;
transform: rotate(8deg);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.team-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 25px 18px;
}
.team-image {
height: 430px;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.about-team {
padding: 75px 0 85px;
}
.team-head {
display: block;
margin-bottom: 40px;
}
.team-intro {
max-width: 650px;
margin-top: 20px;
}
.team-heading h2 {
font-size: 40px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.about-team {
padding: 60px 0 70px;
}
.team-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.team-heading h2 {
font-size: 32px;
}
.team-intro p {
font-size: 14px;
}
.team-image {
height: 420px;
border-radius: 20px;
}
.team-overlay {
opacity: 1;
padding: 20px;
background:
linear-gradient(
to top,
rgba(16,24,40,.7),
transparent 50%
);
}
.team-social {
transform: translateY(0);
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.team-heading h2 {
font-size: 29px;
}
.team-image {
height: 380px;
}
.team-info h3 {
font-size: 17px;
}
}/* ==========================================
HEADER ENQUIRE BUTTON
========================================== */
.header-enquire-btn {
}
.header-enquire-btn
span {}
.header-enquire-btn:
hover {
background: #f36719;
color: #fff;
border-color: #f36719;
}
.header-enquire-btn:
hover span {
transform: rotate(45deg);
}
/* ==========================================
OVERLAY
========================================== */
.enquiry-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
z-index: 99999;
background: rgba(8, 13, 22, .88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition:
opacity .45s ease,
visibility .45s ease;
}
/* ACTIVE */
.enquiry-overlay.active {
opacity: 1;
visibility: visible;
}
/* ==========================================
PANEL
========================================== */
.enquiry-panel {
position: absolute;
right: 0;
top: 0;
width: min(1200px, 94%);
height: 100%;
background: #fff;
overflow: hidden;
transform: translateX(100%);
transition:
transform .7s cubic-bezier(.77,0,.18,1);
box-shadow:
-30px 0 100px rgba(0,0,0,.18);
}
.enquiry-overlay.active .enquiry-panel {
transform: translateX(0);
}
/* ==========================================
CLOSE BUTTON
========================================== */
.enquiry-close {
position: absolute;
top: 30px;
right: 35px;
width: 52px;
height: 52px;
border: 1px solid rgba(255,255,255,.25);
background: #1c2d58;
border-radius: 50%;
z-index: 20;
cursor: pointer;
transition: all .35s ease;
}
.enquiry-close
span {
position: absolute;
left: 15px;
width: 21px;
height: 1px;
background: #fff;
}
.enquiry-close
span:first-child {
transform: rotate(45deg);
}
.enquiry-close
span:last-child {
transform: rotate(-45deg);
}
.enquiry-close:
hover {
background: #f36719;
transform: rotate(90deg);
}
/* ==========================================
INNER
========================================== */
.enquiry-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 44% 56%;
}
/* ==========================================
LEFT CONTENT
========================================== */
.enquiry-content {
position: relative;
padding: 60px 65px 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #1c2d58;
color: #fff;
overflow: hidden;
}
/* orange glow */
.enquiry-content:
before {
content: '';
position: absolute;
width: 450px;
height: 450px;
right: -230px;
bottom: -220px;
border-radius: 50%;
background: rgba(243,103,25,.13);
filter: blur(2px);
}
/* ring */
.enquiry-content:
after {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -260px;
bottom: -250px;
border-radius: 50%;
border: 1px solid rgba(243,103,25,.25);
}
/* ==========================================
LEFT TEXT
========================================== */
.enquiry-top {
position: relative;
z-index: 2;
}
.enquiry-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.enquiry-label:
before {
content: '';
width: 28px;
height: 2px;
background: #f36719;
}
.enquiry-top
h2 {
max-width: 500px;
margin: 25px 0 20px;
color: #fff;
font-size: 55px;
line-height: 1.04;
font-weight: 500;
letter-spacing: -2px;
}
.enquiry-top
h2 span {
display: block;
color: #f36719;
}
.enquiry-top
p {
max-width: 460px;
margin: 0;
color: rgba(255,255,255,.62);
font-size: 14px;
line-height: 1.85;
}
/* ==========================================
CONTACT DETAILS
========================================== */
.enquiry-contact {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 22px;
}
.enquiry-contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.enquiry-contact-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
color: #f36719;
font-size: 13px;
}
.enquiry-contact-item
small {
display: block;
margin-bottom: 3px;
color: rgba(255,255,255,.4);
font-size: 16px;
font-weight: 700;
letter-spacing: 1.5px;
}
.enquiry-contact-item
strong {
display: block;
color: #fff;
font-size: 16px;
font-weight: 500;
}
/* ==========================================
WATERMARK
========================================== */
.enquiry-watermark {
position: absolute;
right: 20px;
top: 50%;
color: rgba(255,255,255,.025);
font-size: 300px;
display: none;
line-height: 1;
font-weight: 800;
transform: translateY(-50%);
pointer-events: none;
}
/* ==========================================
FORM AREA
========================================== */
.enquiry-form-area {
padding: 50px 70px 50px;
overflow-y: auto;
background: #fff;
}
/* ==========================================
FORM HEADER
========================================== */
.enquiry-form-head {
margin-bottom: 38px;
}
.enquiry-form-head
span {
color: #f36719;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.enquiry-form-head
h3 {
margin: 8px 0 0;
color: #101828;
font-size: 34px;
font-weight: 600;
letter-spacing: -1px;
}
/* ==========================================
FORM ROW
========================================== */
.enquiry-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* ==========================================
FIELD
========================================== */
.enquiry-field {
width: 100%;
margin-bottom: 23px;
}
.enquiry-field
label {
display: block;
margin-bottom: 8px;
color: #000000;
font-size: 15px;
font-weight: 500;
}
.enquiry-field
input,
.enquiry-field select,
.enquiry-field textarea {
width: 100%;
box-sizing: border-box;
border: 0;
border-bottom: 1px solid #d0d5dd;
background: transparent;
border-radius: 0;
padding: 11px 0;
color: #101828;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color .3s ease;
}
.enquiry-field
input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus {
border-color: #f36719;
}
.enquiry-field
input::placeholder,
.enquiry-field textarea::placeholder {
color: #98a2b3;
}
.enquiry-field
textarea {
height: 85px;
resize: none;
}
/* ==========================================
SELECT
========================================== */
.enquiry-field
select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #667085 50%),
linear-gradient(135deg, #667085 50%, transparent 50%);
background-position:
calc(100% - 7px) 50%,
calc(100% - 2px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
/* ==========================================
SUBMIT BUTTON
========================================== */
.enquiry-submit {
width: 100%;
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px 8px 24px;
margin-top: 8px;
border: 0;
border-radius: 40px;
background: #f36719;
color: #fff;
font-family: inherit;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all .35s ease;
}
.enquiry-submit
i {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #f36719;
font-style: normal;
font-size: 18px;
transition: transform .35s ease;
}
.enquiry-submit:
hover {
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.enquiry-submit:
hover i {
transform: rotate(45deg);
}
/* ==========================================
DESKTOP ENTRY ANIMATION
========================================== */
.enquiry-overlay.active .enquiry-top {
animation: enquiryFadeUp .7s .35s both;
}
.enquiry-overlay.active .enquiry-contact {
animation: enquiryFadeUp .7s .5s both;
}
.enquiry-overlay.active .enquiry-form-head {
animation: enquiryFadeUp .7s .35s both;
}
.enquiry-overlay.active .premium-enquiry-form {
animation: enquiryFadeUp .7s .5s both;
}
@keyframes enquiryFadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.enquiry-panel {
width: 100%;
}
.enquiry-inner {
grid-template-columns: 1fr;
}
.enquiry-content {
display: none;
}
.enquiry-form-area {
padding: 90px 60px 50px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.enquiry-form-area {
padding: 80px 25px 40px;
}
.enquiry-close {
top: 18px;
right: 18px;
width: 45px;
height: 45px;
}
.enquiry-form-head h3 {
font-size: 29px;
}
.enquiry-row {
grid-template-columns: 1fr;
gap: 0;
}
.enquiry-field {
margin-bottom: 20px;
}
}
/* ==========================================
BODY LOCK
========================================== */
body.enquiry-open {
overflow: hidden;
}/* ==========================================
MORTGAGE HERO
========================================== */
.mortgage-hero {
width: 100%;
float: left;
padding: 65px 0 90px;
background: #fff;
overflow: hidden;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -40px;
}
.mortgage-hero-wrap {
display: grid;
grid-template-columns: 48% 52%;
align-items: center;
gap: 55px;
}
.mortgage-hero-content {
padding: 30px 0;
}
.mortgage-kicker,
.mortgage-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
display: none;
}
.mortgage-kicker:
before,
.mortgage-label:before {
content: "";
width: 28px;
height: 2px;
background: #f36719;
border-radius: 20px;
}
.mortgage-hero
h1 {
width: 100%;
margin: 22px 0 25px;
color: #000000;
font-size: 52px;
line-height: 1.04;
font-weight: 500;
/* letter-spacing: -2.5px; */
}
.mortgage-hero
h1 span {
display: block;
/* color: #f36719; */
}
.mortgage-hero-content >
p {
max-width: 570px;
margin: 0;
color: #667085;
font-size: 15px;
line-height: 1.85;
}
/* HERO BUTTONS */
.mortgage-hero-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.mortgage-primary-btn,
.mortgage-secondary-btn {
text-decoration: none;
transition: all .35s ease;
}
.mortgage-primary-btn {
display: flex;
align-items: center;
gap: 15px;
padding: 7px 15px 7px 30px;
border-radius: 40px;
background: #f36719;
color: #fff;
font-size: 18px;
font-weight: 600;
}
.mortgage-primary-btn
span {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 17px;
}
.mortgage-primary-btn:
hover {
background: #1a2b57;
color: #fff;
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.mortgage-primary-btn:
hover span {}
.mortgage-secondary-btn {
padding: 15px 20px;
color: #344054;
font-size: 18px;
font-weight: 600;
}
.mortgage-secondary-btn:
hover {
color: #f36719;
}
/* HERO NOTE */
.mortgage-hero-note {
display: flex;
align-items: center;
gap: 9px;
margin-top: 25px;
color: #98a2b3;
font-size: 13px;
display: none;
}
.mortgage-hero-note
span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22b573;
}
/* HERO IMAGE */
.mortgage-hero-image {
height: 590px;
position: relative;
overflow: hidden;
border-radius: 28px;
}
.mortgage-hero-image
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease;
}
.mortgage-hero-image:
hover img {
transform: scale(1.04);
}
.mortgage-image-card {
position: absolute;
left: 25px;
bottom: 25px;
width: 235px;
padding: 22px;
background: rgb(26 43 87);
backdrop-filter: blur(10px);
border-radius: 18px;
color: #fff;
}
.mortgage-image-card
span {
display: block;
margin-bottom: 10px;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
}
.mortgage-image-card
strong {
display: block;
font-size: 20px;
line-height: 1.25;
font-weight: 500;
}
.mortgage-image-card
strong b {
color: #f36719;
font-weight: 500;
}
.mortgage-image-card
i {
position: absolute;
right: 18px;
bottom: 18px;
display: none;
font-style: normal;
font-size: 18px;
}
/* ==========================================
INTRO
========================================== */
.mortgage-intro {
width: 100%;
float: left;
padding: 80px 0;
background: #f7f8fa;
}
.mortgage-intro-wrap {
display: grid;
grid-template-columns: 48% 45%;
align-items: center;
gap: 75px;
}
.mortgage-intro-image {
height: 580px;
position: relative;
border-radius: 25px;
overflow: hidden;
}
.mortgage-intro-image
img {
width: 100%;
height: 100%;
object-fit: cover;
}.mortgage-intro-badge
img{
left: 0;
width: 75px !important;
position: absolute;
bottom: 0;
height: 75px !important;
object-fit: contain;
}
.mortgage-intro-badge {
position: absolute;
left: 20px;
bottom: 20px;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
box-sizing: border-box;
background: #1a2b57;
border-radius: 18px;
color: #fff;
}
.mortgage-intro-badge
strong {
font-size: 38px;
line-height: 1;
font-weight: 700;
}
.mortgage-intro-badge
span {
margin-top: -33px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1.4;
/* display: none; */
}
.mortgage-intro-content
h2 {
margin: 20px 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-intro-content
h2 span {
display: block;
}
.mortgage-intro-content >
p {
max-width: 620px;
margin: 0 0 16px;
color: #667085;
font-size: 16px;
line-height: 1.85;
}
/* BENEFITS */
.mortgage-benefits {
margin-top: 35px;
border-top: 1px solid #e4e7ec;
}
.mortgage-benefit {
display: flex;
gap: 18px;
padding: 19px 0;
border-bottom: 1px solid #e4e7ec;
}
.mortgage-benefit >
span {
color: #f36719;
font-size: 15px;
font-weight: 700;
}
.mortgage-benefit
h4 {
margin: 0;
color: #101828;
font-size: 20px;
}
.mortgage-benefit
p {
margin: 4px 0 0;
color: #98a2b3;
font-size: 16px;
}
/* ==========================================
SOLUTIONS
========================================== */
.mortgage-solutions {
width: 100%;
float: left;
padding: 70px 0;
background: #fff;
}
.mortgage-section-head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: end;
margin-bottom: 55px;
}
.mortgage-section-head
h2 {
margin: 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-section-head
h2 span {
display: block;
}
.mortgage-section-head >
p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.8;
}
/* SOLUTION GRID */
.mortgage-solution-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 15px;
}
.mortgage-solution-card {
min-height: 285px;
padding: 28px;
position: relative;
display: flex;
flex-direction: column;
background: #f8f9fb;
border: 1px solid #eaecf0;
border-radius: 22px;
overflow: hidden;
transition: all .4s ease;
}
.solution-number {
color: #1e2e59;
font-size: 18px;
font-weight: 700;
}
.solution-icon {
width: 60px;
height: 60px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff;
color: #f36719;
border: 1px solid #eaecf0;
font-size: 36px;
transition: all .4s ease;
}
.solution-content {
margin-top: auto;
padding-right: 45px;
}
.solution-content
h3 {
margin: 20px 0 8px;
color: #000000;
font-size: 22px;
font-weight: 650;
}
.solution-content
p {
margin: 0;
color: #667085;
font-size: 18px;
line-height: 1.7;
}
.solution-arrow {
position: absolute;
right: 25px;
bottom: 25px;
display: none !important;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dfe3e8;
border-radius: 50%;
color: #667085;
text-decoration: none;
transition: all .4s ease;
}
.mortgage-solution-card:
hover {
background: #fff;
transform: translateY(-7px);
border-color: #f2d3c0;
box-shadow:
0 20px 50px rgba(16,24,40,.08);
}
.mortgage-solution-card:
hover .solution-icon {
background: #f36719;
color: #fff;
border-color: #f36719;
transform: rotate(-5deg);
}
.mortgage-solution-card:
hover .solution-arrow {
background: #1e2e59;
border-color: #1e2e59;
color: #fff;
transform: rotate(8deg);
}
/* ==========================================
WHY CHOOSE US
========================================== */
.mortgage-why {
width: 100%;
float: left;
padding: 115px 0;
background: #1e2e59;
color: #fff;
}
.mortgage-why-wrap {
display: grid;
grid-template-columns: 45% 55%;
gap: 80px;
align-items: center;
}
.mortgage-why-content .mortgage-label {
color: #f36719;
}
.mortgage-why-content
h2 {
margin: 20px 0;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
letter-spacing: -1.5px;
}
.mortgage-why-content
h2 span {
display: block;
}
.mortgage-why-content >
p {
max-width: 500px;
color: rgba(255,255,255,.58);
font-size: 16px;
line-height: 1.85;
}
.mortgage-light-btn:
hover{
background: #1e2e59;
color: #1e2e59;
background: #fff;
animation: 1.5s infinite pulse5;
color: #1e2e59;
}
.mortgage-light-btn:
hover img{
filter: invert(1);
}
.mortgage-light-btn {
display: inline-flex;
align-items: center;
gap: 15px;
margin-top: 25px;
padding: 7px 15px 7px 25px;
border-radius: 40px;
background: #f36719;
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 700;
}
.mortgage-light-btn
span {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
}
/* WHY LIST */
.mortgage-why-list {
border-top: 1px solid rgba(255,255,255,.12);
}
.why-item {
display: grid;
grid-template-columns: 50px 1fr;
gap: 20px;
padding: 27px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.why-item >
span {
color: #f36719;
font-size: 16px;
font-weight: 700;
}
.why-item
h3 {
margin: 0 0 7px;
color: #fff;
font-size: 22px;
font-weight: 600;
}
.why-item
p {
max-width: 500px;
margin: 0;
color: rgba(255,255,255,.45);
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
PROCESS
========================================== */
.mortgage-process {
width: 100%;
float: left;
padding: 70px 0;
background: #f7f8fa;
}
.mortgage-process-head {
max-width: 700px;
margin-bottom: 55px;
}
.mortgage-process-head
h2 {
margin: 20px 0 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-process-head
h2 span {
display: block;
}
.mortgage-process-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.process-card {
min-height: 285px;
padding: 25px 32px;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 20px;
transition: all .4s ease;
}
.process-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.process-top
span {
color: #f36719;
font-size: 18px;
font-weight: 700;
}
.process-top
i {
width: 38px;
display: none !important;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eaecf0;
border-radius: 50%;
color: #98a2b3;
font-style: normal;
}
.process-card
h3 {
margin: 90px 0 10px;
color: #000000;
font-size: 24px;
}
.process-card
p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
.process-card:
hover {
transform: translateY(-7px);
border-color: #f2d3c0;
box-shadow:
0 20px 45px rgba(16,24,40,.07);
}
.process-card:
hover .process-top i {
background: #f36719;
border-color: #f36719;
color: #fff;
}
/* ==========================================
WHO WE HELP
========================================== */
.mortgage-audience {
width: 100%;
float: left;
padding: 70px 0;
background: #fff;
}
.mortgage-audience-head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: end;
margin-bottom: 50px;
}
.mortgage-audience-head
h2 {
margin: 20px 0 0;
color: #101828;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-audience-head
h2 span {
display: block;
color: #f36719;
}
.mortgage-audience-head >
p {
margin: 0;
color: #667085;
font-size: 14px;
line-height: 1.8;
}
/* AUDIENCE */
.audience-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.audience-card {
position: relative;
padding: 15px 15px 25px;
border: 1px solid #eaecf0;
border-radius: 20px;
overflow: hidden;
transition: all .4s ease;
}
.audience-card >
span {
position: absolute;
left: 28px;
top: 28px;
z-index: 2;
color: #fff;
font-size: 11px;
font-weight: 700;
}
.audience-image {
height: 220px;
overflow: hidden;
border-radius: 14px;
}
.audience-image
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.audience-card
h3 {
margin: 22px 10px 8px;
color: #101828;
font-size: 19px;
}
.audience-card
p {
margin: 0 10px;
color: #667085;
font-size: 12px;
line-height: 1.7;
}
.audience-card
a {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 20px 10px 0;
color: #101828;
text-decoration: none;
font-size: 12px;
font-weight: 700;
}
.audience-card
a b {
color: #f36719;
font-size: 16px;
}
.audience-card:
hover {
transform: translateY(-7px);
box-shadow:
0 20px 50px rgba(16,24,40,.08);
}
.audience-card:
hover .audience-image img {
transform: scale(1.06);
}
/* ==========================================
CTA
========================================== */
.mortgage-cta {
width: 100%;
float: left;
padding: 0 0 110px;
background: #fff;
}
.mortgage-cta-box {
min-height: 330px;
padding: 60px 70px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
position: relative;
overflow: hidden;
border-radius: 28px;
background: #f36719;
color: #fff;
}
.cta-watermark {
position: absolute;
right: -30px;
bottom: -70px;
color: rgba(255,255,255,.07);
font-size: 150px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.mortgage-cta-content {
position: relative;
z-index: 2;
}
.mortgage-cta-content .mortgage-label {
color: rgba(255,255,255,.8);
}
.mortgage-cta-content .mortgage-label:
before {
background: #fff;
}
.mortgage-cta-content
h2 {
max-width: 700px;
margin: 18px 0;
color: #fff;
font-size: 45px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-cta-content
h2 span {
display: block;
color: #101828;
}
.mortgage-cta-content
p {
margin: 0;
color: rgba(255,255,255,.75);
font-size: 14px;
}
.mortgage-cta-btn {
min-width: 165px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 7px 8px 7px 20px;
position: relative;
z-index: 2;
border-radius: 40px;
background: #101828;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 600;
}
.mortgage-cta-btn
span {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #f36719;
font-size: 17px;
}
.mortgage-cta-btn:
hover span {
transform: rotate(45deg);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.mortgage-hero h1 {
font-size: 50px;
}
.mortgage-process-grid {
grid-template-columns: repeat(2,1fr);
}
.audience-grid {
grid-template-columns: repeat(2,1fr);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.mortgage-hero,
.mortgage-intro,
.mortgage-solutions,
.mortgage-why,
.mortgage-process,
.mortgage-audience {
padding: 80px 0;
}
.mortgage-hero-wrap,
.mortgage-intro-wrap,
.mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 45px;
}
.mortgage-hero-image {
height: 500px;
order: -1;
}
.mortgage-section-head,
.mortgage-audience-head {
grid-template-columns: 1fr;
gap: 20px;
}
.mortgage-intro-image {
height: 500px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.mortgage-hero,
.mortgage-intro,
.mortgage-solutions,
.mortgage-why,
.mortgage-process,
.mortgage-audience {
padding: 60px 0;
}
.mortgage-hero h1 {
font-size: 38px;
letter-spacing: -1px;
}
.mortgage-hero-image {
height: 400px;
border-radius: 20px;
}
.mortgage-image-card {
left: 15px;
bottom: 15px;
width: 200px;
padding: 18px;
}
.mortgage-hero-buttons {
align-items: flex-start;
flex-direction: column;
}
.mortgage-intro-image {
height: 400px;
border-radius: 20px;
}
.mortgage-intro-content h2,
.mortgage-section-head h2,
.mortgage-why-content h2,
.mortgage-process-head h2,
.mortgage-audience-head h2 {
font-size: 35px;
}
.mortgage-solution-grid {
grid-template-columns: 1fr;
}
.mortgage-process-grid {
grid-template-columns: 1fr;
}
.audience-grid {
grid-template-columns: 1fr;
}
.mortgage-why-wrap {
gap: 40px;
}
.mortgage-cta {
padding-bottom: 60px;
}
.mortgage-cta-box {
min-height: auto;
padding: 40px 25px;
align-items: flex-start;
flex-direction: column;
border-radius: 22px;
}
.mortgage-cta-content h2 {
font-size: 34px;
}
}
.enquiry-submit
img{
width: 24px;
margin-right: 20px;
}
.mortgage-primary-btn
img{
width: 24px;
}
.mortgage-light-btn
img{
width: 24px;
}
/* ==========================================
MOBILE MENU HAMBURGER
========================================== */
.mobile-menu-toggle {
display: none;
}
@media (max-width: 991px) {
.mobile-menu-toggle {width: 48px;
height: 48px;
float: right;
margin-top: 20px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
align-content: normal;
cursor: pointer;
position: relative;
z-index: 10000;
transition: all .35s ease;
background: transparent;
border: 0;}
.mobile-menu-toggle span {
display: block;
width: 28px;
height: 2px;
background: #ffffff;
border-radius: 10px;
transition:
transform .35s ease,
opacity .25s ease,
width .35s ease;
}
/* Hover */
.mobile-menu-toggle:
hover {}
.mobile-menu-toggle:
hover span {
background: #fff;
}
/* ==========================================
ACTIVE / OPEN
========================================== */
body.mobile-menu-open .mobile-menu-toggle {}
body.mobile-menu-open .mobile-menu-toggle span {
background: #fff;
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
opacity: 0;
width: 0;
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}
}
@media(max-width: 991px){
.menus{
display: none;
}
}
@media(min-width: 992px){
.mobile-menu{
display: none;
}
}
/* =========================================================
MOBILE MENU - FORCE CLOSED BY DEFAULT
========================================================= */
@media (max-width: 991px) {
.mobile-menu {
display: block !important;
position: fixed;
left: 0;
top: 0;
width: 380px;
max-width: 83vw;
height: 100vh;
height: 100dvh;
background: #1f2f59;
z-index: 9999;
transform: translate3d(-110%, 0, 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow-x: hidden;
overflow-y: auto;
transition:
transform .5s cubic-bezier(.77, 0, .18, 1),
opacity .3s ease,
visibility .3s ease;
box-shadow: 20px 0 60px rgba(0, 0, 0, .15);
}
/* ==========================================
MENU OPEN
========================================== */
body.mobile-menu-open .mobile-menu {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ==========================================
NAVIGATION HIDDEN INITIALLY
========================================== */
.mobile-menu .mobile-nav {
opacity: 0;
visibility: hidden;
transform: translateX(-20px);
transition:
opacity .3s ease,
transform .4s ease,
visibility .3s ease;
}
/* ==========================================
NAVIGATION VISIBLE AFTER OPEN
========================================== */
body.mobile-menu-open .mobile-menu .mobile-nav {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition-delay: .2s;
}
/* ==========================================
LINKS HIDDEN INITIALLY
========================================== */
.mobile-menu .mobile-nav li {
opacity: 0;
transform: translateX(-25px);
transition:
opacity .4s ease,
transform .4s ease;
list-style: none;
}
/* ==========================================
LINKS ANIMATION AFTER OPEN
========================================== */
body.mobile-menu-open .mobile-menu .mobile-nav li {
opacity: 1;
transform: translateX(0);
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(1) {
transition-delay: .25s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(2) {
transition-delay: .30s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(3) {
transition-delay: .35s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(4) {
transition-delay: .40s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(5) {
transition-delay: .45s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(6) {
transition-delay: .50s;
}
/* ==========================================
OVERLAY CLOSED
========================================== */
.mobile-menu-overlay {
display: block !important;
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: rgba(10, 18, 30, .55);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9998;
transition:
opacity .4s ease,
visibility .4s ease;
}
/* ==========================================
OVERLAY OPEN
========================================== */
body.mobile-menu-open .mobile-menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ==========================================
BODY LOCK
========================================== */
body.mobile-menu-open {
overflow: hidden;
}
}.mobile-menu-logo
img{
width: 70px;
}
.mobile-menu-logo{
width: 30%;
float: left;
margin-top: 10px;
}
@media(min-width: 992px){
.mobile-menu-logo{
display: none;
}
}
.mobile-menu-close {
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid #e5e7eb;
border-radius: 50%;
background: #f8f9fa;
cursor: pointer;
transition:
background .35s ease,
border-color .35s ease,
transform .4s ease;
flex-shrink: 0;
display: none;
}
/* X Lines */
.mobile-menu-close
span {
position: absolute;
width: 18px;
height: 2px;
background: #101828;
border-radius: 10px;
transition:
background .3s ease,
transform .3s ease;
}
/* First line */
.mobile-menu-close
span:first-child {
transform: rotate(45deg);
}
/* Second line */
.mobile-menu-close
span:last-child {
transform: rotate(-45deg);
}
/* Hover */
.mobile-menu-close:
hover {
background: #f36719;
border-color: #f36719;
transform: rotate(90deg);
}
.mobile-menu-close:
hover span {
background: #fff;
}
body.mobile-menu-open .mobile-menu .mobile-nav li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 55px;
padding: 0 5px;
box-sizing: border-box;
color: #ffffff;
background: transparent;
text-decoration: none;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
transition:
color .3s ease,
padding .3s ease,
background .3s ease;
}
@media(max-width: 575px){
.ftr-social {
float: left;
width: 100%;
margin-top: 0;
}
.mortgage-hero-image{
width: 100%;
}
.innerban h1 {
width: 100% !important;
font-size: 36px !important;
}
.innerban .bc {
float: left !important;
margin-top: 10px !important;
}
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
margin-top: 40px;
}
.cta h2 {
font-size: 33px;
color: #ffffff;
font-weight: 700;
line-height: 120%;
position: relative;
z-index: 9;
margin-bottom: 26px;
}
.service-sec h2 {
font-size: 38px;
color: #000;
font-weight: 700;
text-align: center;
margin: 0;
}.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px;
}
.carousel-caption {
left: 8%;
right: auto;
width: 600px;
top: 33%;
bottom: auto;
transform: translateY(-50%);
text-align: left;
z-index: 10;
}.carousel-caption {
left: 8%;
right: auto;
width: 600px;
top: 33%;
bottom: auto;
transform: translateY(-50%);
text-align: left;
z-index: 10;
}.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 45px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.hero-slider {
height: 450px;
}
.max-text-ban{
display: none;
}
.hero-slider img {
width: 100%;
height: 450px;}
.panel1 {
width: 100%;
float: left;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -22px;
position: relative;
z-index: 99;
background: #fff;
}.panel1-left {
width: 100%;
float: left;
padding: 45px 30px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
border-radius: 30px;
}.panel1-left h2 {
font-size: 30px;
color: #000;
font-weight: 500;
}
.panel1-left p
{
margin: 0;
font-size: 16px;
color: #A9A9A9;
padding-top: 5px;
margin: 0;
line-height: 160%;
width: 100%;
}.panel1-right {
width: 100%;
float: left;
padding: 100px 0;
border-right: 0;
}.img2 {
position: absolute;
right: -12px;
top: -97px;
z-index: 0;
}.panel1-right a {
width: 194px;
height: 52px;
border: 1px solid #2F2A27;
float: left;
font-size: 16px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 13px 15px;
border-radius: 30px;
margin-top: 20px;
}.p2-img {
position: absolute;
bottom: 0;
left: 0;
width: 40%;
top: inherit;
}.panel3-right {
float: right;
width: 100%;
padding-top: 0;
}.p3-left1 {
width: 100%;
float: left;
padding: 50px 0px 10px;
border-left: 0;
border-right: 0;
}.p3-left1 h2 {
font-size: 30px;
color: #000;
line-height: 100%;
} .p3-right1 {
width: 100%;
float: left;
padding: 0;
border-right: 0;
}.p3-right1 a {
width: 194px;
height: 52px;
border: 1px solid #2F2A27;
float: left;
font-size: 16px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 13px 18px;
border-radius: 30px;
margin-top: 10px;
}.p3-left2 {
width: 100%;
float: left;
border-left: 0;
border-right: 0;
margin-top: 0;
padding-top: 60px;
}.p3-left-box {
width: 100%;
float: left;
padding: 30px 30px;
transition: .4s;
}.p3-left-box h5 {
font-size: 30px;
}.p3-right2 {
width: 100%;
float: left;
border-right: 0;
}.panel4 {
width: 100%;
background-image: url(../images/bg1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #F8F5F1;
border-radius: 32px;
max-width: 100%;
display: table;
padding: 50px 0;
}.p4-box {
width: 100%;
float: left;
text-align: center;
margin-bottom: 20px;
}.new-sec-box h5{
font-size:30px !important;
}
.new-sec1 h2{
font-size: 30px !important;
line-height: 120%;
}
.panel4 h2 {
text-align: center;
font-size: 30px;
color: #000;
font-weight: 500;
}.p4-box h5 {
font-size: 38px;
color: #000;
}.p4-box h6 {
font-size: 19px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}
.panel5 {
width: 100%;
float: left;
background-image: url(../images/bg2.png);
margin-top: 50px;
background-size: cover;
background-position: 80% 80%;
}
.panel5 h2 {
font-size: 38px;
color: #fff;
width: 100%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 100%;
margin-bottom: 0;
margin-top: 0;
float: left;
}
.panel6 .owl-nav {
position: relative;
width: 100%;
float: left;
text-align: center;
}.panel6 .owl-prev {
position: relative;
top: inherit;
left: inherit;
width: 75px;
height: 50px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
margin-right: 5px;
}.panel6 .owl-next {
position: relative;
top: inherit;
right: inherit;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
width: 75px;
height: 50px;
transform: rotate(180deg);
margin-left: 5px;
} .p6-box {
width: 100%;
float: left;
border-right: dashed 1px #c0c0c0;
padding: 60px 30px 10px;
}.p6-box img {
width: 90px !important;
}.panel6 {
width: 100%;
float: left;
background: #FCFCFC;
padding-bottom: 60px;
}.p7-left {
width: 100%;
float: left;
}.p7-left h2 {
font-size: 30px;
color: #000;
font-weight: 500;
width: 100%;
margin-bottom: 10px;
}.p7-left p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
width: 100%;
margin-bottom: 20px;
}.p7-left a {
background: #F36719;
width: 225px;
height: 52px;
float: left;
font-size: 16px;
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 13px 20px;
border-radius: 30px;
}.p7-left a img {
width: 24px;
float: right;
margin-top: 0;
}.p7-right {
width: 100%;
margin-top: 30px;
float: right;
}.faq-accordion .accordion-button {
background: #fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 30px 30px 30px;
box-shadow: none;
position: relative;
border-top: 0 !important;
}.accordion-body {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 10px 30px;
position: relative;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 100%;
padding: 80px 15px 20px;
border-right: 1px dashed #586999;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 100%;
padding: 0px 15px 50px 15px;
border-left: 1px dashed #586999;
}.quickbox {
width: 100%;
float: left;
margin-bottom: 40px;
}.ftr-right a {
color: #fff;
float: left;
font-size: 14px;
text-decoration: none;
padding: 10px 0;
width: 50%;
}.ftr-social a {
width: 45px;
height: 45px;
}.ftr-copy p {
width: 100%;
float: left;
font-size: 14px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0 0;
}.ftr-copy h6 {
width: 100%;
float: left;
font-size: 14px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 10px 0 30px;
text-align: left;
}.ftr-left h5 {
font-size: 18px;
color: #fff;
margin-top: 20px;
font-weight: 700;
}.panel3-right h2 {
font-size: 36px;
color: #fff;
font-weight: 500;
line-height: 100%;
}
}
@media(min-width: 576px) and (max-width: 767px){
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
margin-top: 40px;
}
.mortgage-hero-content {
padding: 0;
} .mortgage-hero-wrap, .mortgage-intro-wrap, .mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 5px;
}
.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 20px;
}
.team-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 30px;
}
.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 60px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.panel1-left {
width: 56%;
float: left;
padding: 55px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.panel1-left h2 {
font-size: 38px;
color: #000;
font-weight: 500;
}.panel1-right {
width: 44%;
float: left;
padding: 140px 20px 118px 20px;
border-right: dashed 1px #c0c0c0;
}.panel1-right {
width: 44%;
float: left;
padding: 140px 20px 118px 20px;
border-right: dashed 1px #c0c0c0;
}.p2-img {
position: absolute;
top: 0;
left: -100px;
max-width: 73%;
opacity: .5;
}.panel3-right h2 {
font-size: 38px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p3-left1 {
width: 50%;
float: left;
padding: 70px 20px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.p3-left1 h2 {
font-size: 35px;
color: #000;
line-height: 100%;
}.p3-right1 p {
font-size: 14px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
}.p3-right1 {
width: 50%;
float: left;
padding: 70px 30px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-right1 {
width: 50%;
float: left;
padding: 70px 30px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-left-box {
width: 100%;
float: left;
padding: 60px 15px;
transition: .4s;
}.p3-left-box h5 {
font-size: 24px;
color: #000;
font-weight: 500;
float: left;
}.p3-left-box h5 {
font-size: 24px;
color: #000;
font-weight: 500;
float: left;
}.p4-box h6 {
font-size: 15px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}.p4-box h5 {
font-size: 40px;
color: #000;
}
.panel5 h2 {
font-size: 38px;
color: #fff;
width: 100%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 100%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}.panel6 .owl-prev {
position: absolute;
top: -280px;
left: -28px;
width: 70px;
height: 44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next {
position: absolute;
top: -280px;
right: -28px;
width: 70px;
height: 44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.p7-left {
width: 100%;
float: left;
}.p7-left h2 {
font-size: 43px;
color: #000;
font-weight: 500;
width: 80%;
margin-bottom: 10px;
}.p7-right {
width: 100%;
float: right;
margin-top: 30px;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 47%;
padding: 80px 15px 56px;
border-right: 1px dashed #586999;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 53%;
padding: 80px 15px 70px 15px;
}.ftr-right h2 {
font-size: 15px;
color: #fff;
font-weight: 700;
margin-bottom: 20px;
}.ftr-right a {
color: #fff;
width: 100%;
float: left;
font-size: 12px;
text-decoration: none;
padding: 10px 0;
}.ftr-social a {
width: 35px;
padding: 7px;
height: 35px;}.ftr-social a img {
width: 19px;
}.panel4 h2 {
text-align: center;
font-size: 40px;
color: #000;
font-weight: 500;
}
}
@media(min-width: 768px) and (max-width: 991px){
.contact-left .contact-box {
padding: 34px 15px;}
.mortgage-hero-content {
padding: 0;
}.contact-left .contact-box .content h4 {
margin-bottom: 5px;
color: #fff;
font-size: 16px;
}
.mortgage-hero-wrap, .mortgage-intro-wrap, .mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 5px;
}
.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 120px;
}
.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 85px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.panel1-left h2 {
font-size: 46px;
color: #000;
font-weight: 500;
}.img1 {
width: 100%;
height: 125px;
object-fit: cover;
border-radius: 16px;
position: relative;
z-index: 9;
}.panel1-left p {
margin: 0;
font-size: 16px;
color: #A9A9A9;
padding-top: 30px;
margin: 0;
line-height: 160%;
width: 100%;
}.panel3-right h2 {
font-size: 45px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p2-img {
position: absolute;
top: 0;
left: 0;
opacity: .5;
}.p3-left1 {
width: 50%;
float: left;
padding: 120px 35px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.p3-left1 h2 {
font-size: 40px;
color: #000;
line-height: 100%;
}.p3-right1 {
width: 50%;
float: left;
padding: 140px 40px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-left-box {
width: 100%;
float: left;
padding: 30px 30px;
transition: .4s;
}.p3-left-box h5 {
font-size: 30px;
color: #000;
font-weight: 500;
float: left;
}.panel4 h2 {
text-align: center;
font-size: 45px;
color: #000;
font-weight: 500;
}.p4-box h5 {
font-size: 50px;
color: #000;
}.p4-box h6 {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}.panel5 h2 {
font-size: 55px;
color: #fff;
width: 80%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 70%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}.panel6 .owl-prev {
position: absolute;
top: -280px;
left: -36px;
width: 75px;
height: 45px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next {
position: absolute;
top: -280px;
right: -36px;
width: 75px;
height: 45px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.p7-left h2 {
font-size: 45px;
color: #000;
font-weight: 500;
width: 80%;
margin-bottom: 15px;
}.p7-left p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
width: 90%;
margin-bottom: 30px;
}.faq-accordion .accordion-button {
background: #fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 30px 25px 30px;
box-shadow: none;
position: relative;
border-top: 0 !important;
}.accordion-body {
font-size: 18px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 15px 30px;
position: relative;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 53%;
padding: 80px 20px 70px 30px;
}.ftr-social a{
width:50px !important;
}
.ftr-right a {
color: #fff;
width: 100%;
float: left;
font-size: 14px;
text-decoration: none;
padding: 10px 0;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 47%;
padding: 80px 40px 56px;
border-right: 1px dashed #586999;
}
}
@media(min-width: 992px) and (max-width: 1024px){
.header_menu_area > ul > li > a {
position: relative;
float: left;
color: #ffffff;
padding: 1px 8px;}
.mortgage-primary-btn {
display: flex;
align-items: center;
gap: 15px;
padding: 7px 15px 7px 30px;
border-radius: 40px;
background: #f36719;
color: #fff;
font-size: 15px;
font-weight: 600;
}
.panel3-right h2 {
font-size: 51px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p2-img {
width: 42%;
position: absolute;
top: 0;
left: 0;
}.p3-left1 h2 {
font-size: 48px;
color: #000;
line-height: 100%;
}.p4-box h5 {
font-size: 70px;
color: #000;
}
}
@media(min-width: 1025px) and (max-width: 1199px){
.p4-box h5 {
font-size: 85px;
color: #000;
}
}
.innerban
h1{font-size: 40px;
color: #fff;
font-weight: 500;
margin-top: 200px;
float: left;
margin-bottom: 0;}
.innerban .bc{
float: right;
margin-top: 200px;}
.innerban .bc
a{font-size: 18px;
color: #fff;
font-weight: 500;
text-decoration: none;}
.innerban .bc
a:hover{}[
data-aos="fire"].aos-animate {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) blur(0);
}[
data-aos="fire"].aos-animate {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) blur(0);
}[
data-aos="fire"] {
opacity: 0;
transform: scale(0.3) translateY(100px);
filter: brightness(2) blur(1px);
transition-property: transform, opacity, filter;
}
.w-img{
display: none;
width: 57px;
float: right;
border-radius: 10px}
.p3-left-box:
hover .w-img{
display: block;
}
.p3-left-box:
hover .s-img{
display: none;
}
/* =========================================
PREMIUM PRELOADER
========================================= */
/* =========================================================
PREMIUM PRELOADER
========================================================= */
#premium-preloader {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: #05090e;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: 1;
visibility: visible;
transition:
opacity 0.9s ease,
visibility 0.9s ease;
}
/* =========================================================
PRELOADER EXIT
========================================================= */
#premium-preloader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* =========================================================
BACKGROUND
========================================================= */
.loader-bg {
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);
/* background-image: url('../images/innerban.webp'); */
background-size: cover;
background-position: center;
}
/* Large subtle circles */
.loader-bg::
before,
.loader-bg::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 2%);
pointer-events: none;
}
.loader-bg::
before {
width: 480px;
height: 480px;
animation: bgCircle 5s ease-in-out infinite;
}
.loader-bg::
after {
width: 760px;
height: 760px;
animation: bgCircle 7s ease-in-out infinite reverse;
}
@keyframes bgCircle {
0% {
transform: translate(-50%, -50%) scale(.94);
opacity: .35;
}
50% {
transform: translate(-50%, -50%) scale(1.04);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(.94);
opacity: .35;
}
}
/* =========================================================
MAIN LOADER
========================================================= */
.loader-content {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
/* =========================================================
LOGO
========================================================= */
.logo-loader {
position: relative;
width: 190px;
z-index: 5;
animation:
logoIntro 1.3s cubic-bezier(.19,1,.22,1) forwards;
/* IMPORTANT */
overflow: hidden;
}
/* Logo image */
.logo-loader
img {
position: relative;
display: block;
width: 40%;
height: auto;
z-index: 2;
margin: auto;
}
/* =========================================================
LOGO GLOW
========================================================= */
.logo-glow {
position: absolute;
left: 50%;
top: 50%;
width: 130px;
height: 130px;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(55px);
z-index: 1;
animation: logoGlow 2.8s ease-in-out infinite;
}
@keyframes logoGlow {
0% {
opacity: .25;
transform: translate(-50%, -50%) scale(.8);
}
50% {
opacity: .65;
transform: translate(-50%, -50%) scale(1.2);
}
100% {
opacity: .25;
transform: translate(-50%, -50%) scale(.8);
}
}
/* =========================================================
LOGO INTRO
========================================================= */
@keyframes logoIntro {
0% {
opacity: 0;
transform:
translateY(20px)
scale(.82);
filter: blur(8px);
}
60% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
SUBTLE LOGO SHINE
NO EXTRA .shine ELEMENT REQUIRED
========================================================= */
.logo-loader::
after {
/* content: ""; */
position: absolute;
top: -40%;
left: -80%;
width: 18%;
height: 180%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.15) 40%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 60%,
transparent 100%
);
transform: skewX(-20deg);
z-index: 4;
pointer-events: none;
/* animation: logoSweep 3.8s ease-in-out infinite; */
}
@keyframes logoSweep {
0% {
left: -80%;
opacity: 0;
}
15% {
opacity: .8;
}
40% {
left: 150%;
opacity: .8;
}
45%,
100% {
left: 150%;
opacity: 0;
}
}
/* =========================================================
ROTATING RING
========================================================= */
.loader-ring {
position: absolute;
width: 195px;
height: 195px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.07);
z-index: 3;}
/* Inner ring */
.loader-ring::
before {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
border: 1px solid rgba(255,91,20,.10);
}
/* Orange rotating arc */
.loader-ring
span {
position: absolute;
inset: -1px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #ff5b14;
border-left-color: rgba(255,91,20,.25);
animation:
ringRotate 1.8s linear infinite;
}
@keyframes ringRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
SMALL ORANGE ROTATING DOT
========================================================= */
.loader-ring::
after {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
/* background: #ff5b14; */
/* box-shadow:
0 0 8px rgba(255,91,20,.8),
0 0 18px rgba(255,91,20,.4); */
top: -3px;
left: 50%;
transform-origin:
50% 120px;
animation:
ringRotate 1.8s linear infinite;
}
/* =========================================================
LOADING LINE
========================================================= */
.loader-line {
position: absolute;
width: 150px;
display: none;
height: 2px;
bottom: 30px;
background: rgba(255,255,255,.10);
overflow: hidden;
z-index: 8;}
.loader-line
span {
display: block;
width: 40%;
height: 100%;
background: #ff5b14;
box-shadow:
0 0 8px rgba(255,91,20,.8),
0 0 18px rgba(255,91,20,.35);
animation:
loadingLine 1.5s ease-in-out infinite;
}
@keyframes loadingLine {
0% {
transform: translateX(-150%);
}
50% {
transform: translateX(180%);
}
100% {
transform: translateX(400%);
}
}
/* =========================================================
LOADING TEXT
========================================================= */
.loader-text {
position: absolute;
display: none !important;
bottom: 7px;
display: flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 500;
letter-spacing: 4px;
color: rgba(255,255,255,.58);
z-index: 8;}
/* Loading dots */
.loader-text
i {
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ff5b14;
animation:
loadingDots 1.2s infinite;
}
.loader-text
i:nth-child(2) {
animation-delay: .2s;
}
.loader-text
i:nth-child(3) {
animation-delay: .4s;
}
@keyframes loadingDots {
0%,
60%,
100% {
opacity: .2;
transform:
translateY(0);
}
30% {
opacity: 1;
transform:
translateY(-3px);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.loader-content {
width: 250px;
height: 280px;
}
.logo-loader {
width: 165px;
}
.loader-ring {
width: 210px;
height: 210px;
}
.loader-bg::
before {
width: 360px;
height: 360px;
}
.loader-bg::
after {
width: 580px;
height: 580px;
}
}
.new-sec1{
width: 100%;
float: left;
padding: 70px 0 30px;}
.new-sec1
h2{font-size: 60px;
color: #000;
line-height: 100%;}
.new-sec-box{
width: 100%;
float: left;
border: 1px dashed #cecece;
padding: 30px;
border-radius: 10px;
margin-top: 30px;}
.new-sec-box
h5{font-size: 40px;
color: #000;
font-weight: 500;
float: left;}
.new-sec-box
p{
width: 100%;
float: left;
font-size: 16px;
font-weight: 400;
margin: 0;
color: #A9A9A9;
line-height: 160%;
}
.new-sec2{
width: 100%;
float: left;
padding: 70px 0;}
.new-sec2
h2{max-width: 600px;
margin: 0;
color: #000000;
font-size: 46px;
line-height: 130%;
font-weight: 500;}
.new-sec2-box{
width: 100%;
float: left;
padding: 30px;
border: 1px dashed #cecece;
border-radius: 10px;
margin-top: 30px;
transition: .4s;}
.new-sec2-box
h5{font-size: 24px;
color: #000;
font-weight: 600;
margin-bottom: 15px;}
.new-sec2-box
p{margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.7;}
.new-sec2-box:
hover{
background: #1d2d59;
}.new-sec2-box:
hover h5{
color: #fff;
}.new-sec2-box:
hover p{
color: #fff;
};
}
.header-enquire-btn:hover span {
transform: rotate(45deg);
}
/* ==========================================
OVERLAY
========================================== */
.enquiry-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
z-index: 99999;
background: rgba(8, 13, 22, .88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition:
opacity .45s ease,
visibility .45s ease;
}
/* ACTIVE */
.enquiry-overlay.active {
opacity: 1;
visibility: visible;
}
/* ==========================================
PANEL
========================================== */
.enquiry-panel {
position: absolute;
right: 0;
top: 0;
width: min(1200px, 94%);
height: 100%;
background: #fff;
overflow: hidden;
transform: translateX(100%);
transition:
transform .7s cubic-bezier(.77,0,.18,1);
box-shadow:
-30px 0 100px rgba(0,0,0,.18);
}
.enquiry-overlay.active .enquiry-panel {
transform: translateX(0);
}
/* ==========================================
CLOSE BUTTON
========================================== */
.enquiry-close {
position: absolute;
top: 30px;
right: 35px;
width: 52px;
height: 52px;
border: 1px solid rgba(255,255,255,.25);
background: #1c2d58;
border-radius: 50%;
z-index: 20;
cursor: pointer;
transition: all .35s ease;
}
.enquiry-close span {
position: absolute;
left: 15px;
width: 21px;
height: 1px;
background: #fff;
}
.enquiry-close span:first-child {
transform: rotate(45deg);
}
.enquiry-close span:last-child {
transform: rotate(-45deg);
}
.enquiry-close:hover {
background: #f36719;
transform: rotate(90deg);
}
/* ==========================================
INNER
========================================== */
.enquiry-inner {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 44% 56%;
}
/* ==========================================
LEFT CONTENT
========================================== */
.enquiry-content {
position: relative;
padding: 60px 65px 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #1c2d58;
color: #fff;
overflow: hidden;
}
/* orange glow */
.enquiry-content:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
right: -230px;
bottom: -220px;
border-radius: 50%;
background: rgba(243,103,25,.13);
filter: blur(2px);
}
/* ring */
.enquiry-content:after {
content: '';
position: absolute;
width: 500px;
height: 500px;
right: -260px;
bottom: -250px;
border-radius: 50%;
border: 1px solid rgba(243,103,25,.25);
}
/* ==========================================
LEFT TEXT
========================================== */
.enquiry-top {
position: relative;
z-index: 2;
}
.enquiry-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.enquiry-label:before {
content: '';
width: 28px;
height: 2px;
background: #f36719;
}
.enquiry-top h2 {
max-width: 500px;
margin: 25px 0 20px;
color: #fff;
font-size: 55px;
line-height: 1.04;
font-weight: 500;
letter-spacing: -2px;
}
.enquiry-top h2 span {
display: block;
color: #f36719;
}
.enquiry-top p {
max-width: 460px;
margin: 0;
color: rgba(255,255,255,.62);
font-size: 14px;
line-height: 1.85;
}
/* ==========================================
CONTACT DETAILS
========================================== */
.enquiry-contact {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 22px;
}
.enquiry-contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.enquiry-contact-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
color: #f36719;
font-size: 13px;
}
.enquiry-contact-item small {
display: block;
margin-bottom: 3px;
color: rgba(255,255,255,.4);
font-size: 16px;
font-weight: 700;
letter-spacing: 1.5px;
}
.enquiry-contact-item strong {
display: block;
color: #fff;
font-size: 16px;
font-weight: 500;
}
/* ==========================================
WATERMARK
========================================== */
.enquiry-watermark {
position: absolute;
right: 20px;
top: 50%;
color: rgba(255,255,255,.025);
font-size: 300px;
display: none;
line-height: 1;
font-weight: 800;
transform: translateY(-50%);
pointer-events: none;
}
/* ==========================================
FORM AREA
========================================== */
.enquiry-form-area {
padding: 50px 70px 50px;
overflow-y: auto;
background: #fff;
}
/* ==========================================
FORM HEADER
========================================== */
.enquiry-form-head {
margin-bottom: 38px;
}
.enquiry-form-head span {
color: #f36719;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.enquiry-form-head h3 {
margin: 8px 0 0;
color: #101828;
font-size: 34px;
font-weight: 600;
letter-spacing: -1px;
}
/* ==========================================
FORM ROW
========================================== */
.enquiry-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* ==========================================
FIELD
========================================== */
.enquiry-field {
width: 100%;
margin-bottom: 23px;
}
.enquiry-field label {
display: block;
margin-bottom: 8px;
color: #000000;
font-size: 15px;
font-weight: 500;
}
.enquiry-field input,
.enquiry-field select,
.enquiry-field textarea {
width: 100%;
box-sizing: border-box;
border: 0;
border-bottom: 1px solid #d0d5dd;
background: transparent;
border-radius: 0;
padding: 11px 0;
color: #101828;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color .3s ease;
}
.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus {
border-color: #f36719;
}
.enquiry-field input::placeholder,
.enquiry-field textarea::placeholder {
color: #98a2b3;
}
.enquiry-field textarea {
height: 85px;
resize: none;
}
/* ==========================================
SELECT
========================================== */
.enquiry-field select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #667085 50%),
linear-gradient(135deg, #667085 50%, transparent 50%);
background-position:
calc(100% - 7px) 50%,
calc(100% - 2px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
/* ==========================================
SUBMIT BUTTON
========================================== */
.enquiry-submit {
width: 100%;
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px 8px 24px;
margin-top: 8px;
border: 0;
border-radius: 40px;
background: #f36719;
color: #fff;
font-family: inherit;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all .35s ease;
}
.enquiry-submit i {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #f36719;
font-style: normal;
font-size: 18px;
transition: transform .35s ease;
}
.enquiry-submit:hover {
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.enquiry-submit:hover i {
transform: rotate(45deg);
}
/* ==========================================
DESKTOP ENTRY ANIMATION
========================================== */
.enquiry-overlay.active .enquiry-top {
animation: enquiryFadeUp .7s .35s both;
}
.enquiry-overlay.active .enquiry-contact {
animation: enquiryFadeUp .7s .5s both;
}
.enquiry-overlay.active .enquiry-form-head {
animation: enquiryFadeUp .7s .35s both;
}
.enquiry-overlay.active .premium-enquiry-form {
animation: enquiryFadeUp .7s .5s both;
}
@keyframes enquiryFadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.enquiry-panel {
width: 100%;
}
.enquiry-inner {
grid-template-columns: 1fr;
}
.enquiry-content {
display: none;
}
.enquiry-form-area {
padding: 90px 60px 50px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.enquiry-form-area {
padding: 80px 25px 40px;
}
.enquiry-close {
top: 18px;
right: 18px;
width: 45px;
height: 45px;
}
.enquiry-form-head h3 {
font-size: 29px;
}
.enquiry-row {
grid-template-columns: 1fr;
gap: 0;
}
.enquiry-field {
margin-bottom: 20px;
}
}
/* ==========================================
BODY LOCK
========================================== */
body.enquiry-open {
overflow: hidden;
}/* ==========================================
MORTGAGE HERO
========================================== */
.mortgage-hero {
width: 100%;
float: left;
padding: 65px 0 90px;
background: #fff;
overflow: hidden;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -40px;
}
.mortgage-hero-wrap {
display: grid;
grid-template-columns: 48% 48%;
align-items: center;
gap: 70px;
}
.mortgage-hero-content {
padding: 30px 0;
}
.mortgage-kicker,
.mortgage-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f36719;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
display: none;
}
.mortgage-kicker:before,
.mortgage-label:before {
content: "";
width: 28px;
height: 2px;
background: #f36719;
border-radius: 20px;
}
.mortgage-hero h1 {
width: 100%;
margin: 22px 0 25px;
color: #000000;
font-size: 52px;
line-height: 1.04;
font-weight: 500;
/* letter-spacing: -2.5px; */
}
.mortgage-hero h1 span {
display: block;
/* color: #f36719; */
}
.mortgage-hero-content > p {
max-width: 570px;
margin: 0;
color: #667085;
font-size: 15px;
line-height: 1.85;
}
/* HERO BUTTONS */
.mortgage-hero-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.mortgage-primary-btn,
.mortgage-secondary-btn {
text-decoration: none;
transition: all .35s ease;
}
.mortgage-primary-btn {
display: flex;
align-items: center;
gap: 15px;
padding: 7px 15px 7px 30px;
border-radius: 40px;
background: #f36719;
color: #fff;
font-size: 18px;
font-weight: 600;
}
.mortgage-primary-btn span {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 17px;
}
.mortgage-primary-btn:hover {
background: #1a2b57;
color: #fff;
background: #1c2c58;
animation: 1.5s infinite pulse3;
color: #fff;
}
.mortgage-primary-btn:hover span {
}
.mortgage-secondary-btn {
padding: 15px 20px;
color: #344054;
font-size: 18px;
font-weight: 600;
}
.mortgage-secondary-btn:hover {
color: #f36719;
}
/* HERO NOTE */
.mortgage-hero-note {
display: flex;
align-items: center;
gap: 9px;
margin-top: 25px;
color: #98a2b3;
font-size: 13px;
display: none;
}
.mortgage-hero-note span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22b573;
}
/* HERO IMAGE */
.mortgage-hero-image {
height: 430px;
position: relative;
overflow: hidden;
border-radius: 28px;
}
.mortgage-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s ease;
}
.mortgage-hero-image:hover img {
transform: scale(1.04);
}
.mortgage-image-card {
position: absolute;
left: 25px;
bottom: 25px;
width: 235px;
padding: 22px;
background: rgb(26 43 87);
backdrop-filter: blur(10px);
border-radius: 18px;
color: #fff;
}
.mortgage-image-card span {
display: block;
margin-bottom: 10px;
color: #f36719;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
}
.mortgage-image-card strong {
display: block;
font-size: 20px;
line-height: 1.25;
font-weight: 500;
}
.mortgage-image-card strong b {
color: #f36719;
font-weight: 500;
}
.mortgage-image-card i {
position: absolute;
right: 18px;
bottom: 18px;
display: none;
font-style: normal;
font-size: 18px;
}
/* ==========================================
INTRO
========================================== */
.mortgage-intro {
width: 100%;
float: left;
padding: 80px 0;
background: #f7f8fa;
}
.mortgage-intro-wrap {
display: grid;
grid-template-columns: 48% 45%;
align-items: center;
gap: 75px;
}
.mortgage-intro-image {
height: 580px;
position: relative;
border-radius: 25px;
overflow: hidden;
}
.mortgage-intro-image img {
width: 100%;
height: 100%;
object-fit: cover;
}.mortgage-intro-badge img{
left: 0;
width: 75px !important;
position: absolute;
bottom: 0;
height: 75px !important;
object-fit: contain;
}
.mortgage-intro-badge {
position: absolute;
left: 20px;
bottom: 20px;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
box-sizing: border-box;
background: #1a2b57;
border-radius: 18px;
color: #fff;
}
.mortgage-intro-badge strong {
font-size: 38px;
line-height: 1;
font-weight: 700;
}
.mortgage-intro-badge span {
margin-top: -33px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1.4;
/* display: none; */
}
.mortgage-intro-content h2 {
margin: 20px 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-intro-content h2 span {
display: block;
}
.mortgage-intro-content > p {
max-width: 620px;
margin: 0 0 16px;
color: #667085;
font-size: 16px;
line-height: 1.85;
}
/* BENEFITS */
.mortgage-benefits {
margin-top: 35px;
border-top: 1px solid #e4e7ec;
}
.mortgage-benefit {
display: flex;
gap: 18px;
padding: 19px 0;
border-bottom: 1px solid #e4e7ec;
}
.mortgage-benefit > span {
color: #f36719;
font-size: 15px;
font-weight: 700;
}
.mortgage-benefit h4 {
margin: 0;
color: #101828;
font-size: 20px;
}
.mortgage-benefit p {
margin: 4px 0 0;
color: #98a2b3;
font-size: 16px;
}
/* ==========================================
SOLUTIONS
========================================== */
.mortgage-solutions {
width: 100%;
float: left;
padding: 70px 0;
background: #fff;
}
.mortgage-section-head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: end;
margin-bottom: 55px;
}
.mortgage-section-head h2 {
margin: 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-section-head h2 span {
display: block;
}
.mortgage-section-head > p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.8;
}
/* SOLUTION GRID */
.mortgage-solution-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 15px;
}
.mortgage-solution-card {
min-height: 285px;
padding: 28px;
position: relative;
display: flex;
flex-direction: column;
background: #f8f9fb;
border: 1px solid #eaecf0;
border-radius: 22px;
overflow: hidden;
transition: all .4s ease;
}
.solution-number {
color: #1e2e59;
font-size: 18px;
font-weight: 700;
}
.solution-icon {
width: 60px;
height: 60px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff;
color: #f36719;
border: 1px solid #eaecf0;
font-size: 36px;
transition: all .4s ease;
}
.solution-content {
margin-top: auto;
padding-right: 45px;
}
.solution-content h3 {
margin: 20px 0 8px;
color: #000000;
font-size: 22px;
font-weight: 650;
}
.solution-content p {
margin: 0;
color: #667085;
font-size: 18px;
line-height: 1.7;
}
.solution-arrow {
position: absolute;
right: 25px;
bottom: 25px;
display: none !important;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dfe3e8;
border-radius: 50%;
color: #667085;
text-decoration: none;
transition: all .4s ease;
}
.mortgage-solution-card:hover {
background: #fff;
transform: translateY(-7px);
border-color: #f2d3c0;
box-shadow:
0 20px 50px rgba(16,24,40,.08);
}
.mortgage-solution-card:hover .solution-icon {
background: #f36719;
color: #fff;
border-color: #f36719;
transform: rotate(-5deg);
}
.mortgage-solution-card:hover .solution-arrow {
background: #1e2e59;
border-color: #1e2e59;
color: #fff;
transform: rotate(8deg);
}
/* ==========================================
WHY CHOOSE US
========================================== */
.mortgage-why {
width: 100%;
float: left;
padding: 115px 0;
background: #1e2e59;
color: #fff;
}
.mortgage-why-wrap {
display: grid;
grid-template-columns: 45% 55%;
gap: 80px;
align-items: center;
}
.mortgage-why-content .mortgage-label {
color: #f36719;
}
.mortgage-why-content h2 {
margin: 20px 0;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
letter-spacing: -1.5px;
}
.mortgage-why-content h2 span {
display: block;
}
.mortgage-why-content > p {
max-width: 500px;
color: rgba(255,255,255,.58);
font-size: 16px;
line-height: 1.85;
}
.mortgage-light-btn:hover{
background: #1e2e59;
color: #1e2e59;
background: #fff;
animation: 1.5s infinite pulse5;
color: #1e2e59;
}
.mortgage-light-btn:hover img{
filter: invert(1);
}
.mortgage-light-btn {
display: inline-flex;
align-items: center;
gap: 15px;
margin-top: 25px;
padding: 7px 15px 7px 25px;
border-radius: 40px;
background: #f36719;
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 700;
}
.mortgage-light-btn span {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
}
/* WHY LIST */
.mortgage-why-list {
border-top: 1px solid rgba(255,255,255,.12);
}
.why-item {
display: grid;
grid-template-columns: 50px 1fr;
gap: 20px;
padding: 27px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.why-item > span {
color: #f36719;
font-size: 16px;
font-weight: 700;
}
.why-item h3 {
margin: 0 0 7px;
color: #fff;
font-size: 22px;
font-weight: 600;
}
.why-item p {
max-width: 500px;
margin: 0;
color: rgba(255,255,255,.45);
font-size: 16px;
line-height: 1.7;
}
/* ==========================================
PROCESS
========================================== */
.mortgage-process {
width: 100%;
float: left;
padding: 70px 0;
background: #f7f8fa;
}
.mortgage-process-head {
max-width: 700px;
margin-bottom: 55px;
}
.mortgage-process-head h2 {
margin: 20px 0 0;
color: #000000;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-process-head h2 span {
display: block;
}
.mortgage-process-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.process-card {
min-height: 285px;
padding: 25px 32px;
background: #fff;
border: 1px solid #eaecf0;
border-radius: 20px;
transition: all .4s ease;
}
.process-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.process-top span {
color: #f36719;
font-size: 18px;
font-weight: 700;
}
.process-top i {
width: 38px;
display: none !important;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eaecf0;
border-radius: 50%;
color: #98a2b3;
font-style: normal;
}
.process-card h3 {
margin: 90px 0 10px;
color: #000000;
font-size: 24px;
}
.process-card p {
margin: 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}
.process-card:hover {
transform: translateY(-7px);
border-color: #f2d3c0;
box-shadow:
0 20px 45px rgba(16,24,40,.07);
}
.process-card:hover .process-top i {
background: #f36719;
border-color: #f36719;
color: #fff;
}
/* ==========================================
WHO WE HELP
========================================== */
.mortgage-audience {
width: 100%;
float: left;
padding: 70px 0;
background: #fff;
}
.mortgage-audience-head {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: end;
margin-bottom: 50px;
}
.mortgage-audience-head h2 {
margin: 20px 0 0;
color: #101828;
font-size: 48px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-audience-head h2 span {
display: block;
color: #f36719;
}
.mortgage-audience-head > p {
margin: 0;
color: #667085;
font-size: 14px;
line-height: 1.8;
}
/* AUDIENCE */
.audience-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.audience-card {
position: relative;
padding: 15px 15px 25px;
border: 1px solid #eaecf0;
border-radius: 20px;
overflow: hidden;
transition: all .4s ease;
}
.audience-card > span {
position: absolute;
left: 28px;
top: 28px;
z-index: 2;
color: #fff;
font-size: 11px;
font-weight: 700;
}
.audience-image {
height: 220px;
overflow: hidden;
border-radius: 14px;
}
.audience-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.audience-card h3 {
margin: 22px 10px 8px;
color: #101828;
font-size: 19px;
}
.audience-card p {
margin: 0 10px;
color: #667085;
font-size: 12px;
line-height: 1.7;
}
.audience-card a {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 20px 10px 0;
color: #101828;
text-decoration: none;
font-size: 12px;
font-weight: 700;
}
.audience-card a b {
color: #f36719;
font-size: 16px;
}
.audience-card:hover {
transform: translateY(-7px);
box-shadow:
0 20px 50px rgba(16,24,40,.08);
}
.audience-card:hover .audience-image img {
transform: scale(1.06);
}
/* ==========================================
CTA
========================================== */
.mortgage-cta {
width: 100%;
float: left;
padding: 0 0 110px;
background: #fff;
}
.mortgage-cta-box {
min-height: 330px;
padding: 60px 70px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
position: relative;
overflow: hidden;
border-radius: 28px;
background: #f36719;
color: #fff;
}
.cta-watermark {
position: absolute;
right: -30px;
bottom: -70px;
color: rgba(255,255,255,.07);
font-size: 150px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.mortgage-cta-content {
position: relative;
z-index: 2;
}
.mortgage-cta-content .mortgage-label {
color: rgba(255,255,255,.8);
}
.mortgage-cta-content .mortgage-label:before {
background: #fff;
}
.mortgage-cta-content h2 {
max-width: 700px;
margin: 18px 0;
color: #fff;
font-size: 45px;
line-height: 1.08;
font-weight: 500;
}
.mortgage-cta-content h2 span {
display: block;
color: #101828;
}
.mortgage-cta-content p {
margin: 0;
color: rgba(255,255,255,.75);
font-size: 14px;
}
.mortgage-cta-btn {
min-width: 165px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 7px 8px 7px 20px;
position: relative;
z-index: 2;
border-radius: 40px;
background: #101828;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 600;
}
.mortgage-cta-btn span {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #f36719;
font-size: 17px;
}
.mortgage-cta-btn:hover span {
transform: rotate(45deg);
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 1100px) {
.mortgage-hero h1 {
font-size: 50px;
}
.mortgage-process-grid {
grid-template-columns: repeat(2,1fr);
}
.audience-grid {
grid-template-columns: repeat(2,1fr);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.mortgage-hero,
.mortgage-intro,
.mortgage-solutions,
.mortgage-why,
.mortgage-process,
.mortgage-audience {
padding: 80px 0;
}
.mortgage-hero-wrap,
.mortgage-intro-wrap,
.mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 45px;
}
.mortgage-hero-image {
height: 500px;
order: -1;
}
.mortgage-section-head,
.mortgage-audience-head {
grid-template-columns: 1fr;
gap: 20px;
}
.mortgage-intro-image {
height: 500px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.mortgage-hero,
.mortgage-intro,
.mortgage-solutions,
.mortgage-why,
.mortgage-process,
.mortgage-audience {
padding: 60px 0;
}
.mortgage-hero h1 {
font-size: 38px;
letter-spacing: -1px;
}
.mortgage-hero-image {
height: 400px;
border-radius: 20px;
}
.mortgage-image-card {
left: 15px;
bottom: 15px;
width: 200px;
padding: 18px;
}
.mortgage-hero-buttons {
align-items: flex-start;
flex-direction: column;
}
.mortgage-intro-image {
height: 400px;
border-radius: 20px;
}
.mortgage-intro-content h2,
.mortgage-section-head h2,
.mortgage-why-content h2,
.mortgage-process-head h2,
.mortgage-audience-head h2 {
font-size: 35px;
}
.mortgage-solution-grid {
grid-template-columns: 1fr;
}
.mortgage-process-grid {
grid-template-columns: 1fr;
}
.audience-grid {
grid-template-columns: 1fr;
}
.mortgage-why-wrap {
gap: 40px;
}
.mortgage-cta {
padding-bottom: 60px;
}
.mortgage-cta-box {
min-height: auto;
padding: 40px 25px;
align-items: flex-start;
flex-direction: column;
border-radius: 22px;
}
.mortgage-cta-content h2 {
font-size: 34px;
}
}
.enquiry-submit img{
width: 24px;
margin-right: 20px;
}
.mortgage-primary-btn img{
width: 24px;
}
.mortgage-light-btn img{
width: 24px;
}
/* ==========================================
MOBILE MENU HAMBURGER
========================================== */
.mobile-menu-toggle {
display: none;
}
@media (max-width: 991px) {
.mobile-menu-toggle {width: 48px;height: 48px;float: right;margin-top: 20px;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 5px;align-content: normal;cursor: pointer;position: relative;z-index: 10000;transition: all .35s ease;background: transparent;border: 0;}
.mobile-menu-toggle span {
display: block;
width: 28px;
height: 2px;
background: #ffffff;
border-radius: 10px;
transition:
transform .35s ease,
opacity .25s ease,
width .35s ease;
}
/* Hover */
.mobile-menu-toggle:hover {}
.mobile-menu-toggle:hover span {
background: #fff;
}
/* ==========================================
ACTIVE / OPEN
========================================== */
body.mobile-menu-open .mobile-menu-toggle {}
body.mobile-menu-open .mobile-menu-toggle span {
background: #fff;
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
opacity: 0;
width: 0;
}
body.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}
}
@media(max-width: 991px){
.menus{
display: none;
}
}
@media(min-width: 992px){
.mobile-menu{
display: none;
}
}
/* =========================================================
MOBILE MENU - FORCE CLOSED BY DEFAULT
========================================================= */
@media (max-width: 991px) {
.mobile-menu {
display: block !important;
position: fixed;
left: 0;
top: 0;
width: 380px;
max-width: 83vw;
height: 100vh;
height: 100dvh;
background: #1f2f59;
z-index: 9999;
transform: translate3d(-110%, 0, 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow-x: hidden;
overflow-y: auto;
transition:
transform .5s cubic-bezier(.77, 0, .18, 1),
opacity .3s ease,
visibility .3s ease;
box-shadow: 20px 0 60px rgba(0, 0, 0, .15);
}
/* ==========================================
MENU OPEN
========================================== */
body.mobile-menu-open .mobile-menu {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ==========================================
NAVIGATION HIDDEN INITIALLY
========================================== */
.mobile-menu .mobile-nav {
opacity: 0;
visibility: hidden;
transform: translateX(-20px);
transition:
opacity .3s ease,
transform .4s ease,
visibility .3s ease;
}
/* ==========================================
NAVIGATION VISIBLE AFTER OPEN
========================================== */
body.mobile-menu-open .mobile-menu .mobile-nav {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition-delay: .2s;
}
/* ==========================================
LINKS HIDDEN INITIALLY
========================================== */
.mobile-menu .mobile-nav li {
opacity: 0;
transform: translateX(-25px);
transition:
opacity .4s ease,
transform .4s ease;
list-style: none;
}
/* ==========================================
LINKS ANIMATION AFTER OPEN
========================================== */
body.mobile-menu-open .mobile-menu .mobile-nav li {
opacity: 1;
transform: translateX(0);
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(1) {
transition-delay: .25s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(2) {
transition-delay: .30s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(3) {
transition-delay: .35s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(4) {
transition-delay: .40s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(5) {
transition-delay: .45s;
}
body.mobile-menu-open .mobile-menu .mobile-nav li:nth-child(6) {
transition-delay: .50s;
}
/* ==========================================
OVERLAY CLOSED
========================================== */
.mobile-menu-overlay {
display: block !important;
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: rgba(10, 18, 30, .55);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9998;
transition:
opacity .4s ease,
visibility .4s ease;
}
/* ==========================================
OVERLAY OPEN
========================================== */
body.mobile-menu-open .mobile-menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ==========================================
BODY LOCK
========================================== */
body.mobile-menu-open {
overflow: hidden;
}
}.mobile-menu-logo img{
width: 70px;
}
.mobile-menu-logo{
width: 30%;
float: left;
margin-top: 10px;
}
@media(min-width: 992px){
.mobile-menu-logo{
display: none;
}
}
.mobile-menu-close {
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid #e5e7eb;
border-radius: 50%;
background: #f8f9fa;
cursor: pointer;
transition:
background .35s ease,
border-color .35s ease,
transform .4s ease;
flex-shrink: 0;
display: none;
}
/* X Lines */
.mobile-menu-close span {
position: absolute;
width: 18px;
height: 2px;
background: #101828;
border-radius: 10px;
transition:
background .3s ease,
transform .3s ease;
}
/* First line */
.mobile-menu-close span:first-child {
transform: rotate(45deg);
}
/* Second line */
.mobile-menu-close span:last-child {
transform: rotate(-45deg);
}
/* Hover */
.mobile-menu-close:hover {
background: #f36719;
border-color: #f36719;
transform: rotate(90deg);
}
.mobile-menu-close:hover span {
background: #fff;
}body.mobile-menu-open .mobile-menu .mobile-nav li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 55px;
padding: 0 5px;
box-sizing: border-box;
color: #ffffff;
background: transparent;
text-decoration: none;
font-size: 17px;
font-weight: 600;
line-height: 1.4;
transition:
color .3s ease,
padding .3s ease,
background .3s ease;
}
@media(max-width: 575px){
.ftr-social {
float: left;
width: 100%;
margin-top: 0;
}
.mortgage-hero-image{
width: 100%;
}
.innerban h1 {
width: 100% !important;
font-size: 36px !important;
}
.innerban .bc {
float: left !important;
margin-top: 10px !important;
}
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
margin-top: 40px;
}
.cta h2 {
font-size: 33px;
color: #ffffff;
font-weight: 700;
line-height: 120%;
position: relative;
z-index: 9;
margin-bottom: 26px;
}
.service-sec h2 {
font-size: 38px;
color: #000;
font-weight: 700;
text-align: center;
margin: 0;
}.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px;
}
.carousel-caption {
left: 8%;
right: auto;
width: 600px;
top: 33%;
bottom: auto;
transform: translateY(-50%);
text-align: left;
z-index: 10;
}.carousel-caption {
left: 8%;
right: auto;
width: 600px;
top: 33%;
bottom: auto;
transform: translateY(-50%);
text-align: left;
z-index: 10;
}.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 45px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.hero-slider {
height: 450px;
}
.max-text-ban{
display: none;
}
.hero-slider img {
width: 100%;
height: 450px;}
.panel1 {
width: 100%;
float: left;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-top: -22px;
position: relative;
z-index: 99;
background: #fff;
}.panel1-left {
width: 100%;
float: left;
padding: 45px 30px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
border-radius: 30px;
}.panel1-left h2 {
font-size: 30px;
color: #000;
font-weight: 500;
}
.panel1-left p
{
margin: 0;
font-size: 16px;
color: #A9A9A9;
padding-top: 5px;
margin: 0;
line-height: 160%;
width: 100%;
}.panel1-right {
width: 100%;
float: left;
padding: 100px 0;
border-right: 0;
}.img2 {
position: absolute;
right: -12px;
top: -97px;
z-index: 0;
}.panel1-right a {
width: 194px;
height: 52px;
border: 1px solid #2F2A27;
float: left;
font-size: 16px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 13px 15px;
border-radius: 30px;
margin-top: 20px;
}.p2-img {
position: absolute;
bottom: 0;
left: 0;
width: 40%;
top: inherit;
}.panel3-right {
float: right;
width: 100%;
padding-top: 0;
}.p3-left1 {
width: 100%;
float: left;
padding: 50px 0px 10px;
border-left: 0;
border-right: 0;
}.p3-left1 h2 {
font-size: 30px;
color: #000;
line-height: 100%;
} .p3-right1 {
width: 100%;
float: left;
padding: 0;
border-right: 0;
}.p3-right1 a {
width: 194px;
height: 52px;
border: 1px solid #2F2A27;
float: left;
font-size: 16px;
color: #2F2A27;
font-weight: 700;
text-decoration: none;
padding: 13px 18px;
border-radius: 30px;
margin-top: 10px;
}.p3-left2 {
width: 100%;
float: left;
border-left: 0;
border-right: 0;
margin-top: 0;
padding-top: 60px;
}.p3-left-box {
width: 100%;
float: left;
padding: 30px 30px;
transition: .4s;
}.p3-left-box h5 {
font-size: 30px;
}.p3-right2 {
width: 100%;
float: left;
border-right: 0;
}.panel4 {
width: 100%;
background-image: url(../images/bg1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #F8F5F1;
border-radius: 32px;
max-width: 100%;
display: table;
padding: 50px 0;
}.p4-box {
width: 100%;
float: left;
text-align: center;
margin-bottom: 20px;
}.new-sec-box h5{
font-size:30px !important;
}
.new-sec1 h2{
font-size: 30px !important;
line-height: 120%;
}
.panel4 h2 {
text-align: center;
font-size: 30px;
color: #000;
font-weight: 500;
}.p4-box h5 {
font-size: 38px;
color: #000;
}.p4-box h6 {
font-size: 19px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}
.panel5 {
width: 100%;
float: left;
background-image: url(../images/bg2.png);
margin-top: 50px;
background-size: cover;
background-position: 80% 80%;
}
.panel5 h2 {
font-size: 38px;
color: #fff;
width: 100%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 100%;
margin-bottom: 0;
margin-top: 0;
float: left;
}
.panel6 .owl-nav {
position: relative;
width: 100%;
float: left;
text-align: center;
}.panel6 .owl-prev {
position: relative;
top: inherit;
left: inherit;
width: 75px;
height: 50px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
margin-right: 5px;
}.panel6 .owl-next {
position: relative;
top: inherit;
right: inherit;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
width: 75px;
height: 50px;
transform: rotate(180deg);
margin-left: 5px;
} .p6-box {
width: 100%;
float: left;
border-right: dashed 1px #c0c0c0;
padding: 60px 30px 10px;
}.p6-box img {
width: 90px !important;
}.panel6 {
width: 100%;
float: left;
background: #FCFCFC;
padding-bottom: 60px;
}.p7-left {
width: 100%;
float: left;
}.p7-left h2 {
font-size: 30px;
color: #000;
font-weight: 500;
width: 100%;
margin-bottom: 10px;
}.p7-left p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
width: 100%;
margin-bottom: 20px;
}.p7-left a {
background: #F36719;
width: 225px;
height: 52px;
float: left;
font-size: 16px;
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 13px 20px;
border-radius: 30px;
}.p7-left a img {
width: 24px;
float: right;
margin-top: 0;
}.p7-right {
width: 100%;
margin-top: 30px;
float: right;
}.faq-accordion .accordion-button {
background: #fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 30px 30px 30px;
box-shadow: none;
position: relative;
border-top: 0 !important;
}.accordion-body {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 10px 30px;
position: relative;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 100%;
padding: 80px 15px 20px;
border-right: 1px dashed #586999;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 100%;
padding: 0px 15px 50px 15px;
border-left: 1px dashed #586999;
}.quickbox {
width: 100%;
float: left;
margin-bottom: 40px;
}.ftr-right a {
color: #fff;
float: left;
font-size: 14px;
text-decoration: none;
padding: 10px 0;
width: 50%;
}.ftr-social a {
width: 45px;
height: 45px;
}.ftr-copy p {
width: 100%;
float: left;
font-size: 14px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 30px 0 0;
}.ftr-copy h6 {
width: 100%;
float: left;
font-size: 14px;
margin: 0;
font-weight: 400;
color: #fff;
padding: 10px 0 30px;
text-align: left;
}.ftr-left h5 {
font-size: 18px;
color: #fff;
margin-top: 20px;
font-weight: 700;
}.panel3-right h2 {
font-size: 36px;
color: #fff;
font-weight: 500;
line-height: 100%;
}
}
@media(min-width: 576px) and (max-width: 767px){
.contact-right-box {
padding: 40px;
border-radius: 12px;
background-color: #f7f7f7;
margin-top: 40px;
}
.mortgage-hero-content {
padding: 0;
} .mortgage-hero-wrap, .mortgage-intro-wrap, .mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 5px;
}
.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 20px;
}
.team-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 30px;
}
.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 60px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.panel1-left {
width: 56%;
float: left;
padding: 55px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.panel1-left h2 {
font-size: 38px;
color: #000;
font-weight: 500;
}.panel1-right {
width: 44%;
float: left;
padding: 140px 20px 118px 20px;
border-right: dashed 1px #c0c0c0;
}.panel1-right {
width: 44%;
float: left;
padding: 140px 20px 118px 20px;
border-right: dashed 1px #c0c0c0;
}.p2-img {
position: absolute;
top: 0;
left: -100px;
max-width: 73%;
opacity: .5;
}.panel3-right h2 {
font-size: 38px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p3-left1 {
width: 50%;
float: left;
padding: 70px 20px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.p3-left1 h2 {
font-size: 35px;
color: #000;
line-height: 100%;
}.p3-right1 p {
font-size: 14px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
}.p3-right1 {
width: 50%;
float: left;
padding: 70px 30px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-right1 {
width: 50%;
float: left;
padding: 70px 30px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-left-box {
width: 100%;
float: left;
padding: 60px 15px;
transition: .4s;
}.p3-left-box h5 {
font-size: 24px;
color: #000;
font-weight: 500;
float: left;
}.p3-left-box h5 {
font-size: 24px;
color: #000;
font-weight: 500;
float: left;
}.p4-box h6 {
font-size: 15px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}.p4-box h5 {
font-size: 40px;
color: #000;
}
.panel5 h2 {
font-size: 38px;
color: #fff;
width: 100%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 100%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}.panel6 .owl-prev {
position: absolute;
top: -280px;
left: -28px;
width: 70px;
height: 44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next {
position: absolute;
top: -280px;
right: -28px;
width: 70px;
height: 44px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.p7-left {
width: 100%;
float: left;
}.p7-left h2 {
font-size: 43px;
color: #000;
font-weight: 500;
width: 80%;
margin-bottom: 10px;
}.p7-right {
width: 100%;
float: right;
margin-top: 30px;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 47%;
padding: 80px 15px 56px;
border-right: 1px dashed #586999;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 53%;
padding: 80px 15px 70px 15px;
}.ftr-right h2 {
font-size: 15px;
color: #fff;
font-weight: 700;
margin-bottom: 20px;
}.ftr-right a {
color: #fff;
width: 100%;
float: left;
font-size: 12px;
text-decoration: none;
padding: 10px 0;
}.ftr-social a {
width: 35px; padding: 7px;
height: 35px;}.ftr-social a img {
width: 19px;
}.panel4 h2 {
text-align: center;
font-size: 40px;
color: #000;
font-weight: 500;
}
}
@media(min-width: 768px) and (max-width: 991px){
.contact-left .contact-box {
padding: 34px 15px;}
.mortgage-hero-content {
padding: 0;
}.contact-left .contact-box .content h4 {
margin-bottom: 5px;
color: #fff;
font-size: 16px;
}
.mortgage-hero-wrap, .mortgage-intro-wrap, .mortgage-why-wrap {
grid-template-columns: 1fr;
gap: 5px;
}
.service-p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 160%;
text-align: center;
padding: 10px 120px;
}
.hero-title {
animation: blurReveal 1s ease forwards;
font-size: 85px;
color: #fff;
line-height: 104%;
font-weight: 500;
}.panel1-left h2 {
font-size: 46px;
color: #000;
font-weight: 500;
}.img1 {
width: 100%;
height: 125px;
object-fit: cover;
border-radius: 16px;
position: relative;
z-index: 9;
}.panel1-left p {
margin: 0;
font-size: 16px;
color: #A9A9A9;
padding-top: 30px;
margin: 0;
line-height: 160%;
width: 100%;
}.panel3-right h2 {
font-size: 45px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p2-img {
position: absolute;
top: 0;
left: 0;
opacity: .5;
}.p3-left1 {
width: 50%;
float: left;
padding: 120px 35px 20px;
border-left: dashed 1px #c0c0c0;
border-right: dashed 1px #c0c0c0;
}.p3-left1 h2 {
font-size: 40px;
color: #000;
line-height: 100%;
}.p3-right1 {
width: 50%;
float: left;
padding: 140px 40px 5px;
border-right: dashed 1px #c0c0c0;
}.p3-left-box {
width: 100%;
float: left;
padding: 30px 30px;
transition: .4s;
}.p3-left-box h5 {
font-size: 30px;
color: #000;
font-weight: 500;
float: left;
}.panel4 h2 {
text-align: center;
font-size: 45px;
color: #000;
font-weight: 500;
}.p4-box h5 {
font-size: 50px;
color: #000;
}.p4-box h6 {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
line-height: 120%;
}.panel5 h2 {
font-size: 55px;
color: #fff;
width: 80%;
}.panel5 p {
font-size: 16px;
color: #A9A9A9;
width: 70%;
margin-bottom: 0;
margin-top: 10px;
float: left;
}.panel6 .owl-prev {
position: absolute;
top: -280px;
left: -36px;
width: 75px;
height: 45px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.panel6 .owl-next {
position: absolute;
top: -280px;
right: -36px;
width: 75px;
height: 45px;
border: 1px solid #3C2D25 !important;
border-radius: 30px;
background-color: #fff !important;
}.p7-left h2 {
font-size: 45px;
color: #000;
font-weight: 500;
width: 80%;
margin-bottom: 15px;
}.p7-left p {
font-size: 16px;
color: #A9A9A9;
font-weight: 400;
width: 90%;
margin-bottom: 30px;
}.faq-accordion .accordion-button {
background: #fff;
color: #000;
font-size: 24px;
font-weight: 500;
padding: 22px 30px 25px 30px;
box-shadow: none;
position: relative;
border-top: 0 !important;
}.accordion-body {
font-size: 18px;
color: #A9A9A9;
font-weight: 400;
margin-top: -30px;
padding: 15px 30px;
position: relative;
}.ftr-right {
border-right: 1px dashed #586999;
float: left;
width: 53%;
padding: 80px 20px 70px 30px;
}.ftr-social a{
width:50px !important;
}
.ftr-right a {
color: #fff;
width: 100%;
float: left;
font-size: 14px;
text-decoration: none;
padding: 10px 0;
}.ftr-left {
border-left: 1px dashed #586999;
float: left;
width: 47%;
padding: 80px 40px 56px;
border-right: 1px dashed #586999;
}
}
@media(min-width: 992px) and (max-width: 1024px){
.header_menu_area > ul > li > a {
position: relative;
float: left;
color: #ffffff;
padding: 1px 8px;}
.mortgage-primary-btn {
display: flex;
align-items: center;
gap: 15px;
padding: 7px 15px 7px 30px;
border-radius: 40px;
background: #f36719;
color: #fff;
font-size: 15px;
font-weight: 600;
}
.panel3-right h2 {
font-size: 51px;
color: #fff;
font-weight: 500;
line-height: 100%;
}.p2-img {
width: 42%;
position: absolute;
top: 0;
left: 0;
}.p3-left1 h2 {
font-size: 48px;
color: #000;
line-height: 100%;
}.p4-box h5 {
font-size: 70px;
color: #000;
}
}
@media(min-width: 1025px) and (max-width: 1199px){
.p4-box h5 {
font-size: 85px;
color: #000;
}
}
.innerban h1{font-size: 40px;color: #fff;font-weight: 500;margin-top: 200px;float: left;margin-bottom: 0;}
.innerban .bc{float: right;margin-top: 200px;}
.innerban .bc a{font-size: 18px;color: #fff;font-weight: 500;text-decoration: none;}
.innerban .bc a:hover{
}[data-aos="fire"].aos-animate {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) blur(0);
}[data-aos="fire"].aos-animate {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) blur(0);
}[data-aos="fire"] {
opacity: 0;
transform: scale(0.3) translateY(100px);
filter: brightness(2) blur(1px);
transition-property: transform, opacity, filter;
}
.w-img{
display: none; width: 57px;
float: right;
border-radius: 10px
}
.p3-left-box:hover .w-img{
display: block;
}
.p3-left-box:hover .s-img{
display: none;
}
/* =========================================
PREMIUM PRELOADER
========================================= */
/* =========================================================
PREMIUM PRELOADER
========================================================= */
#premium-preloader {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: #05090e;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: 1;
visibility: visible;
transition:
opacity 0.9s ease,
visibility 0.9s ease;
}
/* =========================================================
PRELOADER EXIT
========================================================= */
#premium-preloader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* =========================================================
BACKGROUND
========================================================= */
.loader-bg {
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(120deg, rgba(35, 50, 91, 1) 7%, rgba(20, 38, 85, 1) 88%);
/* background-image: url('../images/innerban.webp'); */
background-size: cover;
background-position: center;
}
/* Large subtle circles */
.loader-bg::before,
.loader-bg::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 2%);
pointer-events: none;
}
.loader-bg::before {
width: 480px;
height: 480px;
animation: bgCircle 5s ease-in-out infinite;
}
.loader-bg::after {
width: 760px;
height: 760px;
animation: bgCircle 7s ease-in-out infinite reverse;
}
@keyframes bgCircle {
0% {
transform: translate(-50%, -50%) scale(.94);
opacity: .35;
}
50% {
transform: translate(-50%, -50%) scale(1.04);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(.94);
opacity: .35;
}
}
/* =========================================================
MAIN LOADER
========================================================= */
.loader-content {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
/* =========================================================
LOGO
========================================================= */
.logo-loader {
position: relative;
width: 190px;
z-index: 5;
animation:
logoIntro 1.3s cubic-bezier(.19,1,.22,1) forwards;
/* IMPORTANT */
overflow: hidden;
}
/* Logo image */
.logo-loader img {
position: relative;
display: block;
width: 40%;
height: auto;
z-index: 2;
margin: auto;
}
/* =========================================================
LOGO GLOW
========================================================= */
.logo-glow {
position: absolute;
left: 50%;
top: 50%;
width: 130px;
height: 130px;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(55px);
z-index: 1;
animation: logoGlow 2.8s ease-in-out infinite;
}
@keyframes logoGlow {
0% {
opacity: .25;
transform: translate(-50%, -50%) scale(.8);
}
50% {
opacity: .65;
transform: translate(-50%, -50%) scale(1.2);
}
100% {
opacity: .25;
transform: translate(-50%, -50%) scale(.8);
}
}
/* =========================================================
LOGO INTRO
========================================================= */
@keyframes logoIntro {
0% {
opacity: 0;
transform:
translateY(20px)
scale(.82);
filter: blur(8px);
}
60% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
SUBTLE LOGO SHINE
NO EXTRA .shine ELEMENT REQUIRED
========================================================= */
.logo-loader::after {
/* content: ""; */
position: absolute;
top: -40%;
left: -80%;
width: 18%;
height: 180%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.15) 40%,
rgba(255,255,255,.45) 50%,
rgba(255,255,255,.15) 60%,
transparent 100%
);
transform: skewX(-20deg);
z-index: 4;
pointer-events: none;
/* animation: logoSweep 3.8s ease-in-out infinite; */
}
@keyframes logoSweep {
0% {
left: -80%;
opacity: 0;
}
15% {
opacity: .8;
}
40% {
left: 150%;
opacity: .8;
}
45%,
100% {
left: 150%;
opacity: 0;
}
}
/* =========================================================
ROTATING RING
========================================================= */
.loader-ring {position: absolute;width: 195px;height: 195px;border-radius: 50%;border: 1px solid rgba(255,255,255,.07);z-index: 3;}
/* Inner ring */
.loader-ring::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
border: 1px solid rgba(255,91,20,.10);
}
/* Orange rotating arc */
.loader-ring span {
position: absolute;
inset: -1px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #ff5b14;
border-left-color: rgba(255,91,20,.25);
animation:
ringRotate 1.8s linear infinite;
}
@keyframes ringRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
SMALL ORANGE ROTATING DOT
========================================================= */
.loader-ring::after {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
/* background: #ff5b14; */
/* box-shadow:
0 0 8px rgba(255,91,20,.8),
0 0 18px rgba(255,91,20,.4); */
top: -3px;
left: 50%;
transform-origin:
50% 120px;
animation:
ringRotate 1.8s linear infinite;
}
/* =========================================================
LOADING LINE
========================================================= */
.loader-line {position: absolute;width: 150px;display: none;height: 2px;bottom: 30px;background: rgba(255,255,255,.10);overflow: hidden;z-index: 8;}
.loader-line span {
display: block;
width: 40%;
height: 100%;
background: #ff5b14;
box-shadow:
0 0 8px rgba(255,91,20,.8),
0 0 18px rgba(255,91,20,.35);
animation:
loadingLine 1.5s ease-in-out infinite;
}
@keyframes loadingLine {
0% {
transform: translateX(-150%);
}
50% {
transform: translateX(180%);
}
100% {
transform: translateX(400%);
}
}
/* =========================================================
LOADING TEXT
========================================================= */
.loader-text {position: absolute;display: none !important;bottom: 7px;display: flex;align-items: center;gap: 5px;font-size: 9px;font-weight: 500;letter-spacing: 4px;color: rgba(255,255,255,.58);z-index: 8;}
/* Loading dots */
.loader-text i {
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ff5b14;
animation:
loadingDots 1.2s infinite;
}
.loader-text i:nth-child(2) {
animation-delay: .2s;
}
.loader-text i:nth-child(3) {
animation-delay: .4s;
}
@keyframes loadingDots {
0%,
60%,
100% {
opacity: .2;
transform:
translateY(0);
}
30% {
opacity: 1;
transform:
translateY(-3px);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.loader-content {
width: 250px;
height: 280px;
}
.logo-loader {
width: 165px;
}
.loader-ring {
width: 210px;
height: 210px;
}
.loader-bg::before {
width: 360px;
height: 360px;
}
.loader-bg::after {
width: 580px;
height: 580px;
}
}
.new-sec-box img{
width: 45px;
float: left;
clear: both;
}.new-sec-box:hover{
background: #ffefe6;
}
.new-sec1{width: 100%;float: left;padding: 70px 0 30px;}
.new-sec1 h2{font-size: 60px;color: #000;line-height: 100%;}
.new-sec-box{width: 100%;float: left;border: 1px dashed #cecece;padding: 30px;border-radius: 10px;margin-top: 30px;transition: .4s;}
.new-sec-box h5{font-size: 35px;color: #000;font-weight: 500;float: left;width: 100%;margin-top: 20px;}
.new-sec-box p{
width: 100%;
float: left;
font-size: 16px;
font-weight: 400;
margin: 0;
color: #A9A9A9;
line-height: 160%;
}
.new-sec2{width: 100%;float: left;padding: 70px 0;}
.new-sec2 h2{max-width: 600px;margin: 0;color: #000000;font-size: 46px;line-height: 130%;font-weight: 500;}
.new-sec2-box{width: 100%;float: left;padding: 30px;border: 1px dashed #cecece;border-radius: 10px;margin-top: 30px;transition: .4s;}
.new-sec2-box h5{font-size: 24px;color: #000;font-weight: 600;margin-bottom: 15px;}
.new-sec2-box p{margin: 0;color: #667085;font-size: 16px;line-height: 1.7;}
.new-sec2-box:hover{
background: #1d2d59;
}.new-sec2-box:hover h5{
color: #fff;
}.new-sec2-box:hover p{
color: #fff;
}
.hidden-input-field {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
.moving-item h5 {
margin: 0;
font-size: 40px;
font-weight: 400;
background: linear-gradient(110deg, #f26719 0%, #fbede5 25%, #ffbf9b 45%, #ffffff 50%, #ffc8a5 55%, #fdfcfd 75%, #ea4b01 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: textShine 14s ease-in-out infinite;
}
@keyframes textShine {
0% {
background-position: 100% center;
}
50% {
background-position: 0% center;
}
100% {
background-position: -100% center;
}
}
@media(max-width:575px){
.moving-item h5 {
margin: 0;
font-size: 28px!important;
}.moving-item:after{
top:4px !important
}
}
/***********************calculator******************/
.mort-full{
width: 100%;
float: left;
background:#F8F5F1;
padding: 70px 0;
}
.mort-left{
width: 100%;
float: left;
}
.mort-left h6{
font-size: 20px;
color: #f36617;
font-weight: 400;
}
.mort-left h1{
font-size: 45px;
color: #213059;
font-weight: 400;
}
.mort-left h1 span{
width: 100%;
float: left;
font-weight: 700;
}
.mort-left p{
width: 86%;
float: left;
font-size: 16px;
color: #213059;
padding: 21px 0 20px;
font-weight: 400;
line-height: 190%;
margin-bottom:3px;
}
.calc-box:hover{
/* background-color: #213059 !important; */!i;!;
}
.mort-left h5{
width: 100%;
float: left;
font-size: 17px;
color: #213059;
font-weight: 400;
}
.mort-left h5 span{
font-weight: 600;
color: #000;
}
.calculate-mort{
width: 100%;
float: left;
border-top: 1px solid rgb(206 206 206 / 57%);
margin-top: 25px;
padding: 20px 0;
border-bottom: 1px solid rgb(206 206 206 / 57%);
padding-top: 30px;
}
.calc-box:hover h4{
/* color: #fff; */
}.calc-box:hover h4 span{
/* color: #fff; */
}
.calc-box{width: 100%;float: left; padding: 64px 15px;background-color: #fff !important;!i;!;text-align: center;border-radius: 10px;transition: all ease-in-out .5s;-webkit-transition: all ease-in-out .5s;}
.calc-box h4{
width: 100%;
float: left;
font-size: 22px;
color: #ff5c00;
font-weight: 700;
margin: 0;
}
.calc-box h4 span{
width: 100%;
float: left;
font-size: 14px;
color: #000;
font-weight: 400;
}
.calc-end{
}.calc-end h4:after{
position:absolute;
content:'';
background-image: url('../images/q1.png');
width: 40px;
height: 36px;
background-size: contain;
left: 0;
top: -20px;
}
.calc-end h4{width: 100%;float: left;font-size: 17px;color: #213059;font-weight: 400;line-height: 180%;margin-top: 60px;position: relative;padding-left: 8%;}
.calc-end h3{float: left;width: 100%;font-size: 20px;color: #09236b;font-weight: 700;padding-left: 8%;margin-top: 15px;}
.calc-end h3 span{width: 100%;float: left;font-size: 16px;color: #000;font-weight: 400;margin-top: 10px;}
.calc-end h3 img{
width: 22px;
margin-left: 10px;
}
.prop-price-count{
width: 100%;
float: left;
border: 1px solid #cecece;
background: #f9f9f9;
clear: both;
padding: 15px;
border-radius: 5px;
}
#field1{
}
#field1 span{
font-weight: 600;
color: #000;
margin-right:9px;
float: right;
margin-top: 4px;
}
#field1 .sub{
float: left;
border: 1px solid #f36617;
width: 30px;
/* height: 35px; */
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
margin-right: 8px;
font-size: 19px;
font-weight: 700;
/* position: relative;
line-height: 0px; */
}
#field1 .add{
float: right;
border: 1px solid #f36617;
width: 30px;
height: 30px;
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
}
#field1 .sub1{
float: left;
border: 1px solid #f36617;
width: 30px;
/* height: 35px; */
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
margin-right: 8px;
font-size: 19px;
font-weight: 700;
}
#field1 .add1{
float: right;
border: 1px solid #f36617;
width: 30px;
height: 30px;
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
}
#field1 input{
width: 50%;
background: transparent;
border: 0;
font-size: 18px;
color: #000;
font-weight: 400;
}
.mort-right{
width: 100%;
float: left;
background: #fff;
padding: 30px 30px 0 30px;
border-radius: 10px;
}
.mort-right h5{
font-size: 17px;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 600;
}
.view,
.breakup {
width: 100%;
}
.details input {
width: 100%;
}
.detail {
display: flex;
justify-content: space-between;
float: left;
width: 100%;
/* margin-bottom: 20px; */
margin-bottom: 12px;
}
.detail p{
font-size: 17px;
color: #000;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}#loan-period-text {
font-size: 15px;
color: #000;
font-weight: 500;
text-transform: uppercase;
}
#loan-period-text{
font-size: 15px;
color: #000;
font-weight: 500;
text-transform: uppercase;
}
#interest-rate-text{
font-size: 15px;
color: #000;
font-weight: 500;
text-transform: uppercase;
}
.footer {
/* display: flex; */
/* justify-content: space-between; */
}
/*----- Styling the sliders ----*/
input[type="range"] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
background: #9E9E9E;
border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
border: 5px solid #213059;
height: 20px;
width: 20px;
border-radius: 50%;
background: #213059;
cursor: pointer;
margin-top: -6px;
-webkit-appearance: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #213059;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #213059;
border-color: transparent;
border-width: 16px 0;
color: transparent;
border-radius: 10px;
}
input[type="range"]::-moz-range-thumb {
box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
border: 5px solid #ffffff;
height: 20px;
width: 20px;
border-radius: 50%;
background: #213059;
cursor: pointer;
margin-top: -6px;
}
input[type="range"]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #213059;
border-color: transparent;
border-width: 16px 0;
color: transparent;
border-radius: 10px;
}
input[type="range"]::-ms-fill-lower {
background: #213059;
border-radius: 5px;
}
input[type="range"]::-ms-fill-upper {
background: #213059;
border-radius: 5px;
}
input[type="range"]::-ms-thumb {
box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
border: 5px solid #ffffff;
height: 20px;
width: 20px;
border-radius: 50%;
background: #213059;
cursor: pointer;
margin-top: -6px;
}
input[type="range"]:focus::-ms-fill-lower {
background: #213059;
}
input[type="range"]:focus::-ms-fill-upper {
background: #213059;
}
/*-------------------------------------*/
#price {
color: #130f31;
font-size: 25px;
}
.loan-details {
width: 90%;
display: flex;
justify-content: space-between;
gap: 30px;
}
#price-container {
color: #213059;
margin-top: 50px;
}
#price-container::before {
content: "Monthly Payable:";
font-size: 12px;
display: block;
}
.prop-loan
{
width: 100%;
float: left;
padding: 30px 0 0;
}
.prop-loan h5{
font-size: 18px;
color: #000;
font-weight: 500;
text-transform: uppercase;
margin: 15px 0 10px;
}
.prop-loan h5 span{
}
.p-cl{
font-size: 13px;
line-height: 170%;
color: #56585b;
font-weight: 500;
margin-top: 10px;
float: left;
width: 100%;
}
.mort-right .tab-blue{
background: #e9efff;
margin: 0 -30px;
border: 0 !important;
border-radius: 0 !important;
padding: 35px 30px;
float: left;
margin-top: 20px;
border-bottom-left-radius: 10px !important;!i;!;
border-bottom-right-radius: 10px !important;!i;!;
}.mort-right .tab-content{
padding: 0px !important;!i;!;
border: 0 !important;!i;!;
}
.tab-blue h6{
font-size: 20px;
color: #f35801;
font-weight: 700;
}
.tab-blue h6 span{
font-size: 40px;
color: #213059;
}
.tab-blue p{
font-size: 14px;
color: #213059;
line-height: 20px;
font-weight: 500;
}
.tab-blue a{
background: #213059;
font-size: 15px;
color: #fff;
text-decoration: none;
padding: 15px 30px;
margin-top: 5px;
float: left;
border-radius: 10px;
}
.tab-blue a:hover{
}
.calc-box.active{
background-color: #213059 !important;
}.calc-box.active h4, .calc-box.active span{
color:#fff !important;
}
article{
background: #ccc;
height: 200px;
display: none;
}
article.on{
display: block;
}
.listing-ban nav{
border-bottom: 1px solid #cecece73;
padding-top: 0;
position: relative;
}
.listing-ban{
width: 100%;
float: left;
background-image: url('../images/in-ban.png');
padding: 0 0 40px 0;
}
/* Hide the radio buttons */
.listing-ban input[type="radio"] {
/* display: none; */
}
.la-enq-ex a {
width: 100%;
float: left;
background: transparent !important;
font-size: 18px !important;
color: #213059 !important;
text-decoration: none;
padding: 0 !important;
margin-top: 5px !important;
float: left;
border-radius: unset !important;
text-align: left;
border: unset;
height: unset;
margin-bottom: 10px;
font-weight: 500;
}.invisible-checkboxes input[type=radio]:checked + .checkbox-alias {
background-color: #213059 !important;
color: #fff;
}.checkbox-alias {
background-color: #ffffff;
display: inline-block;
width: 100%;
/* padding: 30px; */
height: 159px;
z-index: 1;
position: relative;
transition: all 250ms ease-out;
cursor: pointer;
border-radius: 10px;
margin-bottom: 20px;
font-size: 15px;
line-height: 28px;
}.invisible-checkboxes input[type=radio] {
display: none;
}.mortgage-full
{
width: 100%;
float: left;padding: 70px 0;
text-align: center;
}.mortgage-full h1{
font-size: 30px;
font-weight: 700;
}
.mortgage-full h1 span{
}
.mortgage-full p{
}
.mortgage-full a{
background: #f36617;
padding: 14px 30px;
border-radius: 10px;
color: #fff;
}.mortgage-full a:after{
position: absolute;
content: '';
}.mortgage-full a:hover::after{
}.mortgage-full p {
font-size: 15px;
line-height: 190%;
padding: 10px 20%;
}
.mort-step2{
width: 100%;
padding: 80px 0;
float: left;
}.progress-bar {
background-color: #f36617 !important;
}
.show-tick button{
width: 100% !important;
float: left;
border:solid 1px rgb(0 0 0 / 14%);
padding: 10px 20px;
font-size: 15px;
font-weight: 400;
color: #000 !important;
background:#ffffff;
clear: both;
}
.step-est {
}
.step-est input{
border: 1px solid #cecece;
width: 80%;
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 10px;
font-size: 15px;
}
.step-est label{
font-size: 15px;
color: #000;
margin-bottom: 10px;
}
.mort-box2{
width: 100%;
/* float: left; */
text-align: center;
background: #ffede2;
border: 1px solid #f9f9f9;
max-width: 900px;
display: block;
margin: auto;
padding: 40px 30px 60px;
border-radius: 10px;
}
.mort-box2 h2 {
font-size: 18px;
color: #000;
margin-bottom: 40px;
font-weight: 500;
}
.mort-box2 a{
background: #f36617;
padding: 18px 30px;
font-size: 15px;
color: #fff;
border-radius: 10px;
}
.mort-box2 a:hover{
}
.step-est [type="radio"]:checked,
.step-est [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.step-est [type="radio"]:checked + label,
.step-est [type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
.step-est [type="radio"]:checked + label:before,
.step-est [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
.step-est [type="radio"]:checked + label:after,
.step-est [type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: #f57d3a;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.step-est [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.step-est [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.confirm-step{
background: #f57d3a;
border: 0;
padding: 15px 50px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.step-form-box input[type="text"]{
width: 100%;
border: 1px solid #cecece;
padding: 13px;
border-radius: 10px;
font-size: 15px;
color: #000;
margin-top: 10px;
}.step-form {
margin-bottom: 20px;
width: 100%;
}.step-form-step.active {
display: block;
}
.step-form-step {
display: none;
}.step-form .card {
border: 1px solid rgb(0 0 0 / 5%) !important;
background: rgb(252 245 241);
}.step-form-box {
width: 100%;
float: left;
padding: 20px;
text-align: center;
}.step-form-box h2 {
font-size: 16px;
color: #000;
margin-bottom: 25px;
}.next-step {
background-color: #f36617 !important;
border: 0;
padding: 14px 30px !important; float: right;
font-size: 16px !important;
color: #fff !important;
font-weight: 400 !important;
}.prev-step {
background-color: #213059 !important;
border: 0;
padding: 14px 30px !important;
font-size: 16px !important;
color: #fff !important;
font-weight: 400 !important;
float: left !important;
}.step-form-step2.active {
display: block;
}
.step-form-step2 {
display: none;
}.next-step2 {
background-color: #f36617 !important;
border: 0;
padding: 14px 30px !important;
font-size: 16px !important;
color: #fff !important;float:right;
font-weight: 400 !important;
}.prev-step2 {
background-color: #213059 !important;
border: 0;
padding: 14px 30px !important;
font-size: 16px !important;
color: #fff !important;
font-weight: 400 !important;
float: left !important;
}.progress-bar2 {
background-color: #f36617 !important;
border-radius: 20px;
color: #fff;
}
.progress-bar2 {
background-color: #f36617 !important;
}#refinance .close_form {
display: block !important;
position: absolute;
width: 20px;
height: 20px;
border: 0;
right: 10px;
top: 10px;
background: url(../images/close.svg);
/* z-index: 999000; */
filter: invert(1);
background-size: contain;
}.step-form2 {
margin-bottom: 20px;
width: 100%;
}#new-property .close_form {
display: block !important;
position: absolute;
width: 20px;
height: 20px;
border: 0;
right: 10px;
top: 10px;
background: url(../images/close.svg);
/* z-index: 999000; */
filter: invert(1);
background-size: contain;
}.btn_choose_sent input:after {
position: absolute;
content: '';
width: 15rem;
left: 0;
right: 0;
/* background: red; */
/* z-index: -1; */
height: 40px;
top: -10px;
}.btn_choose_sent input:checked {
background-position: 0 0;
}
.btn_choose_sent input:checked {
-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1), -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
.btn_choose_sent input {
position: absolute;
left: 0;
right: 0;
z-index: 99;
top: 2px;
}
.btn_choose_sent input, .btn_choose_sent input:active {
background-position: 0 24px;
}
.btn_choose_sent input {
-webkit-appearance: none;
display: block;
margin: 10px;
width: 18px;
height: 18px;
border-radius: 12px;
cursor: pointer;
vertical-align: middle;
box-shadow: hsla(0, 0%, 100%, .15) 0 1px 1px, inset hsla(0, 0%, 0%, .5) 0 0 0 1px;
/* background-color: hsla(0, 0%, 0%, .2); */
background-image: -webkit-radial-gradient(#fff 0%, #fff 15%, #f36617 28%, #fff 70%);
background-repeat: no-repeat;
-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1), -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
outline: none;
}.btn_choose_sent {
/* background: #EF2D56; */
background-color: white !important;
color: #000 !important;
/* box-shadow: 0 10px 20px rgba(125, 147, 178, .3); */
border: none;
border-radius: 15px;
font-size: 14px;
line-height: 10px;
padding: 16px 20px 16px 38px;
text-align: center;
display: inline-block;
text-decoration: none;
margin-right: 30px;
transition: all .3s;
height: auto;
cursor: pointer;
position: relative;
outline: none;
margin-bottom: 15px;
border: solid 1px rgb(0 0 0 / 14%) !important;
}.clacu-ext {
width: 100%;
float: left;
}.clacu-ext h2 {
font-size: 35px;
color: #213059;
font-weight: 400;
text-align: center;
padding-bottom: 18px;
}.clacu-ext h3 {
padding: 4px 0;
width: 100%;
float: left;
text-align: center;
font-size: 17px;
color: #000;
font-weight: 600;
}.ret-ext {
width: 100%;
float: left;
}.ret-ext h5 {
font-size: 17px;
margin-bottom: 14px;
font-weight: 600;
padding-top: 20px;
text-align: center;
}.prop-price-count {
width: 100%;
float: left;
border: 1px solid #cecece;
background: #f9f9f9;
clear: both;
padding: 15px;
border-radius: 5px;
}
.price-count-ex {
float: none !important;
margin: auto;
display: block;
width: 60% !important;
}#field1 .sub1 {
float: left;
border: 1px solid #f36617;
width: 30px;
/* height: 35px; */
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
margin-right: 8px;
font-size: 19px;
font-weight: 700;
}#field1 input {
width: 50%;
background: transparent;
border: 0;
font-size: 18px;
color: #000;
font-weight: 400;
}#field1 .add1 {
float: right;
border: 1px solid #f36617;
width: 30px;
height: 30px;
border-radius: 100%;
color: #f36617;
padding: 0;
font-size: 18px;
background: #f9f9f9;
}#field1 span {
font-weight: 600;
color: #000;
margin-right: 9px;
float: right;
margin-top: 4px;
}.tab-blue-ex h6 {
padding-bottom: 5px;
padding-top: 16px;
font-size: 20px;
color: #f35801;
font-weight: 700;
text-align: center;
}.tab-blue-ex h6 span {
font-size: 40px;
color: #213059;
}.tab-blue-ex p {
font-size: 14px;
color: #213059; padding: 0 35px;
line-height: 20px;
font-weight: 500;
text-align: center;
}.close_form {
display: block !important;
position: absolute;
width: 40px;
height: 40px;
right: -50px;
top: 0px;
background: transparent url(../images/close.svg) no-repeat center center;
background-size: 20px 20px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: none;
cursor: pointer;
}@media(max-width:575px){
.mort-left h1 {
font-size: 30px;} .mort-box2 a {
margin-bottom: 10px;display: block;
}
}