@import "https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap"; @import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"; @import "https://cdn.materialdesignicons.com/3.2.89/css/materialdesignicons.min.css";
@import "https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"; @font-face { font-family: "helvetica"; src: url("../font/helvetica-200.ttf"); font-weight: 200; } @font-face { font-family: "helvetica"; src: url("../font/helvetica-400.ttf");
font-weight: 400; } @font-face { font-family: "helvetica"; src: url("../font/helvetica-600.ttf"); font-weight: 600; } h1, h2, h3, h4, h5, h6, p, a, span, b, small, strong, body, button, input, optgroup, select, textarea { font-family: Montserrat !important;
} body { overflow-x: hidden !important; } a, i, .btn, div { text-decoration: none !important; transition: all 0.3s ease-in-out !important; } textarea { outline: 2px solid rgba(0, 0, 0, 0) !important; box-shadow: none !important; } input, .navbar-toggler,
button, input { outline: 2px solid rgba(0, 0, 0, 0) !important; box-shadow: none !important; } body { scroll-behavior: smooth; } html { --scrollbarBG: #cfd8dc; --thumbBG: #90a4ae; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track
{ background: #fbfbfb; } ::-webkit-scrollbar-thumb { background: #054477; } .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; } @keyframes up-down { 0% { transform: translateY(10px); } 100% { transform: translateY(-10px);
} } .btn-primary { height: 52px; width: -moz-fit-content; width: fit-content; padding: 15px 45px; background: #32a5a5; border-radius: 28px; font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 17px; border: none;
color: #fff; } .btn-primary:hover { background: #054477 !important; } .btn-light { height: 52px; width: -moz-fit-content; width: fit-content; padding: 18px 45px; background: #fff; border-radius: 28px; font-family: "Montserrat"; font-style: normal; font-weight:
600; font-size: 14px; line-height: 17px; border: none; color: #000; } .btn-light:hover { background: #32a5a5 !important; color: #fff !important; } .lg-container { width: 100%; max-width: 1280px; padding-left: 15px; padding-right: 15px; margin: auto; }
.md-container { width: 100%; max-width: 1140px; padding-left: 15px; padding-right: 15px; margin: auto; } .hero-section { width: 100%; min-height: 100vh; background-image: url(../images/hero.png); background-size: cover; background-position: center; }
.header { width: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: 999999; } .header .navbar { padding: 35px 0px 20px; border-bottom: 2px solid #fff; } .header .navbar .nav-link { padding: 10px 18px !important; font-family: "Montserrat"; font-style:
normal; font-weight: 500; font-size: 14px; line-height: 17px; color: #fff; } .header .navbar .nav-link:hover { color: #32a5a5; } .header .navbar-brand .logo { height: 28px; } .hero-section { padding: 200px 0px 120px; } .hero-section .hero-content { width:
100%; max-width: 860px; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .hero-section .hero-content .hire-us { position: absolute; right: 0; bottom: 0; z-index: 999; } .hero-section
.hero-content h1 { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-size: 85px; line-height: 104px; text-align: center; color: #fff; margin-bottom: 20px; } .hero-section .hero-content p { font-family: "Montserrat"; font-style: normal;
font-weight: 500; font-size: 16px; line-height: 20px; text-align: center; max-width: 700px; color: #fff; margin-bottom: 40px; } .hero-section .hero-content .logos { gap: 30px; display: flex; align-items: center; margin-bottom: 15px; } .hero-section .hero-content
.stars { gap: 25px; display: flex; align-items: center; margin-bottom: 15px; } .hero-section .hero-content .stars img { height: 42px; } .hero-section .hero-content h4 { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 24px;
line-height: 29px; color: #fff; margin-bottom: 25px; } @keyframes smooth-bounce { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(-10px); animation-timing-function: cubic-bezier(0,0,0.2,1);
} 100% { transform: translateY(0); } } .smooth-bounce { animation: smooth-bounce 1.2s infinite; } .hero-section .hero-content .scroll-down { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; } .hero-section
.hero-content .scroll-down span { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #fff; } .hire-us { height: 162px; width: 162px; background-image: url(../images/hire-us.svg); background-size:
100%; display: flex; justify-content: center; align-items: center; animation: rotateCircle 20s linear infinite; } .hire-us i { font-size: 20px; color: #fff; transform: rotate(-360deg); animation: counterRotate 20s linear infinite; } @keyframes rotateCircle
{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes counterRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .form-card { width: 100%; min-height: 195px; background: #fff; box-shadow: 0px 4px
15px -2px rgba(0, 0, 0, 0.25); border-radius: 19px; margin-top: -100px; z-index: 999; position: relative; padding: 36px; } .form-card h4 { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 24px; line-height: 29px; color: #000;
margin-bottom: 15px; } .form-card .form-control { height: 70px; border: none; background: #f0f0f0; border-radius: 9px; padding: 22px; } .form-card .form-control::-moz-placeholder { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size:
16px; line-height: 20px; color: #747474; } .form-card .form-control::placeholder { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; color: #747474; } .btn-get-audit { border-radius: 9px !important; font-size:
16px !important; height: 70px !important; width: 100% !important; } .center-heading { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 50px; } .center-heading h2 { font-family: "Montserrat";
font-style: normal; font-weight: 700; font-size: 44px; line-height: 54px; text-align: center; max-width: 618px; color: #000; } .center-heading h2 span { color: #054477; } .left-heading { width: 100%; margin-bottom: 50px; display: flex; align-items: flex-end;
justify-content: space-between; } .left-heading h2 { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-size: 44px; line-height: 54px; max-width: 618px; color: #000; width: 370px; } .left-heading h2 span { color: #054477; } .left-heading
p { width: calc(100% - 500px); font-family: "Montserrat"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; color: #000; } .about-section { padding: 80px 0px; } .about-section .banner { position: relative; } .about-section .banner
.hire-us { position: absolute; right: -10px; top: 20px; z-index: 999; } .about-section .banner .main-img { width: 100%; } .about-section .content { padding-left: 40px; } .about-section .content p { max-width: 555px; font-family: "Montserrat"; font-style:
normal; font-weight: 400; font-size: 16px; line-height: 20px; color: #000; margin-bottom: 35px; } .about-section .content h6 { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; margin-bottom: 18px; color:
#054477; } .about-section .content .progressbar { width: 100%; background: #e7e7e7; border-radius: 70px; height: 10px; margin-bottom: 25px; } .about-section .content .progressbar .fill { background: #054477; border-radius: 70px; position: relative; height:
10px; width: 0% !important; transition: width 1.5s ease-in-out; } .about-section .content .progressbar .fill.animate { width: var(--target-width) !important; } .about-section .content .progressbar .fill .dot { height: 22px; width: 22px; border-radius:
100px; background-image: url(../images/dot.svg); position: absolute; right: -6px; top: -6px; z-index: 9999; } .countdown-section { padding: 60px 0px; background: #fbfbfb; } .countdown-section .c-card-list { width: 100%; display: flex; justify-content:
space-evenly; align-items: center; } .countdown-section .c-card-list .c-card { width: 25%; border-right: 1px solid #737373; display: flex; flex-direction: column; justify-content: center; align-items: center; } .countdown-section .c-card-list .c-card
h1 { font-family: "Abhaya Libre", serif !important; font-style: normal; font-weight: 500; font-size: 96px; text-align: center; color: #054477; margin-bottom: 30px; } .countdown-section .c-card-list .c-card p { font-family: "Montserrat"; font-style: normal;
font-weight: 500; font-size: 20px; line-height: 24px; text-align: center; max-width: 200px; color: #054477; } .countdown-section .c-card-list .c-card:last-child { border: none; } .tagline { width: 100%; background: #054477; padding: 65px 0px; position:
relative; overflow: hidden; } .tagline .bg-vector { position: absolute; right: 8%; top: -25%; } .tagline .content { display: flex; flex-direction: column; justify-content: center; align-items: center; } .tagline .content h2 { max-width: 500px; font-family:
"Montserrat"; font-style: normal; font-weight: 700; font-size: 44px; line-height: 54px; text-align: center; color: #fff; margin-bottom: 15px; } .tagline .content p { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 16px; line-height:
20px; color: #fff; } .why-us-section { padding: 80px 0px; } .why-us-section .banner { position: relative; } .why-us-section .banner .hire-us { position: absolute; right: 26%; bottom: 8%; z-index: 999; } .why-us-section .banner .main-img { width: 100%;
} .why-us-section .content-card { width: 100%; height: auto; display: flex; justify-content: space-evenly; flex-wrap: wrap; border-radius: 25px; overflow: hidden; } .why-us-section .content-card .inner-card { background: #054477; width: 50%; min-height:
230px; padding: 44px 38px; color: #fff; } .why-us-section .content-card .inner-card img { margin-bottom: 25px; height: 44px; width: auto; } .why-us-section .content-card .inner-card h5 { font-family: "Montserrat"; font-style: normal; font-weight: 600;
font-size: 16px; line-height: 20px; color: #fff; margin-bottom: 5px; } .why-us-section .content-card .inner-card p { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #fff; } .why-us-section .content-card
.inner-card:nth-child(2), .why-us-section .content-card .inner-card:nth-child(3) { background: #024e8c; } .step-by-step { background: #fbfbfb; padding: 80px 0px; } .step-by-step .step-card { width: 100%; min-height: 325px; padding: 38px; display: flex;
flex-direction: column; justify-content: center; position: relative; background: #fff; box-shadow: 0px 4px 15px -2px rgba(0, 0, 0, 0.25); border-radius: 25px; overflow: hidden; } .step-by-step .step-card h6 { font-family: "Montserrat"; font-style: normal;
font-weight: 600; font-size: 20px; line-height: 24px; color: #000; margin-bottom: 5px; } .step-by-step .step-card p { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-size: 16px; line-height: 20px; color: #000; } .step-by-step .step-card
.number { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 105px; line-height: 128px; color: #f6f6f6; position: absolute; top: 0px; right: 10px; } .step-by-step .step-card .bottom { height: 70px; width: 100%; background: #054477;
position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; padding: 20px 38px; display: flex; justify-content: space-between; align-items: center; } .step-by-step .step-card .bottom h5 { font-family: "Montserrat"; font-style: normal; font-weight:
600; font-size: 20px; line-height: 24px; color: #fff; margin-bottom: 0px; } .step-by-step .step-card .bottom span { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; color: #bcf43c; } .tagline2 { padding:
80px 0px; background-image: url(../images/tagline-bg.png); background-position: center; background-size: cover; } .tagline2 .content { width: 100%; display: flex; align-items: center; justify-content: space-between; } .tagline2 .content .text { width:
100%; max-width: 400px; } .tagline2 .content .text h1 { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-size: 44px; line-height: 54px; color: #fff; margin-bottom: 0px; } .tagline2 .content .text p { font-family: "Montserrat"; font-style:
normal; font-weight: 500; margin-bottom: 0px; font-size: 16px; line-height: 20px; color: #fff; } .services-section { padding: 80px 0px; } .services-section .services-row { width: 100%;padding-top:25px; display: flex; align-items: center; justify-content:
space-between; } .services-section .services-row .serv-card { width: 100%; max-width: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .services-section .services-row .serv-card img { height: 120px; margin-bottom:
30px; } .services-section .services-row .serv-card h5 { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 24px; line-height: 29px; margin-bottom: 28px; color: #000; } .services-section .services-row .serv-card p { font-family:
"Montserrat"; font-style: normal; font-weight: 500; font-size: 16px; line-height: 20px; text-align: center; color: #000; margin-bottom: 20px; } .best-company { padding: 80px 0px; background: #fbfbfb; } .best-company .content { width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: center; } .best-company .content h2 { font-family: "Montserrat"; font-style: normal; margin-bottom: 25px; font-weight: 700; font-size: 44px; line-height: 54px; color: #000; } .best-company .content
h2 span { color: #054477; } .best-company .content p { margin-bottom: 20px; font-family: "Montserrat"; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; color: #000; max-width: 560px; } .best-company .content img { width: 100%;
} .footer { padding: 115px 0px 75px; background: #054477; color: #fff; } .footer .f-about .logo { height: 39px; margin-bottom: 40px; } .footer .f-about p { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-size: 12px; line-height:
15px; margin-bottom: 35px; color: #fff; max-width: 355px; } .footer .f-about .social-links { display: flex; align-items: center; gap: 35px; } .footer .footer-nav h4 { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 20px; line-height:
24px; color: #fff; margin-bottom: 12px; } .footer .footer-nav ul { list-style: none; padding-left: 0px; } .footer .footer-nav ul .nav-link { font-family: "Montserrat"; font-style: normal; margin-bottom: 12px; font-weight: 400; font-size: 16px; line-height:
20px; color: #fff; } .footer .footer-nav ul .nav-link:hover { color: #32a5a5; } .bottom { background: #054477; border-top: 1px solid #fff; padding: 32px 0px; } .bottom .bottom-row { width: 100%; display: flex; justify-content: space-between; align-items:
center; } .bottom .bottom-row span, .bottom .bottom-row a { text-decoration: none; font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 17px; text-align: center; color: #fff; } .bottom .bottom-row a:hover { color:
#32a5a5; } .pl-lg-20 { padding-left: 20px; } .navbar-toggler { border-radius: 0px; } .container { height: 100vh; } .seo-section { position: relative; } .seo-wrapper { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items:
center; justify-content: space-between; background: #fff; } .numbers { background: red; display: flex; flex-direction: column; gap: 20px; } .step { font-size: 2.5rem; color: #ccc; font-weight: 600; transition: color 0.3s ease; } .step.active { color:
#036; } .slides-container { height: 500vh; } .slides { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slide { position: absolute; width: 100%; height: auto; min-height: 60vh; top: 50%; transform:
translateY(-50%); opacity: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #fff; padding: 40px; transition: opacity 0.5s ease; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); scale: 0.5; }
.slide.active { opacity: 1; scale: 1; } .next-section { height: 100vh; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .slide-container { position: sticky; top: 0; width: 100%; height: 100vh; display:
flex; align-items: center; justify-content: center; padding: 0 5%; z-index: 100; transition: all 0.3s ease; will-change: transform; } /* Black Diagonal Line Animation */ .diagonal-line { position: absolute; left: 50%; bottom: 50%; width: 2px; height:
100vh; background: #000; transform: translateX(-50%) rotate(234deg); transform-origin: center bottom; align-items: center; justify-content: center; display: flex; z-index: 1000; opacity: 0; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity
0.1s cubic-bezier(0.4, 0, 0.2, 1); } .diagonal-line.animate { opacity: 1; height: 0; } .line-dot { position: absolute; bottom: -8px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top:
16px solid #000; opacity: 0; transition: opacity 0.2s ease 0.4s; /* Appears quickly after line animation */ } .line-dot.show { opacity: 1; transition: opacity 0.2s ease; } /* Left Side Navigation */ .slide-navigation { position: absolute; left: 5%; top:
45%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 10; } .slide-number { font-family: "Montserrat", sans-serif; font-size: 64px; font-weight: 600; color: #DEDEDE; cursor: pointer; transition: all 0.3s ease; opacity:
0.3; } .slide-number.active { font-family: "Montserrat", sans-serif; font-weight: 600; color: #000; opacity: 1; } /* Central Circular Image */ .circular-image-container { position: absolute; width: 600px; height: 600px; object-fit: cover; z-index: 5;
left: 20%; } .circular-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 1; } .image-wrapper { position: relative; width: 100%; height: 100%; border-radius: 50%; } .image-wrapper img { width: 100%; height:
100%; object-fit: cover; /* filter: brightness(0.7) contrast(1.2); */ /* opacity: 0.5; */ } .pie-image { width: 600px; height: 600px; object-fit: cover; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*
.pie-image.active { filter: brightness(0.7) contrast(1.2); opacity: 1; } */ .spotlight { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: #000; border-radius: 50%; box-shadow: 0 0 50px 30px rgba(255,
255, 255, 0.8); z-index: 2; } .nav-arrow { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); cursor: pointer; transition: all 0.3s ease; } .nav-arrow:hover { transform: translateX(-50%) translateY(-2px); } /* Right Side Content
*/ .villa-content { position: absolute; top: 25%; transform: translateY(-50%); z-index: 10; right: 5%; width: 35%; } .villa-info { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; position: absolute; top: 0; left: 0; } .villa-info.active
{ opacity: 1; transform: translateY(0); } /* Desktop Bottom Button */ .desktop-bottom-button { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 15; display: none; /* Hidden by default */ } /* Show button only on desktop
screens */ @media screen and (min-width: 1026px) { .desktop-bottom-button { display: block; } } .desktop-bottom-button .btn { padding: 15px 30px; font-size: 16px; font-weight: 600; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 4px 15px
rgba(0, 0, 0, 0.1); } .desktop-bottom-button .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .villa-title { font-family: "Montserrat", sans-serif; font-size: 44px; font-weight: 700; color: #000; margin-bottom: 10px;
line-height: 1.2; } .villa-title span { color: #054477; } .villa-location { font-family: "Montserrat", sans-serif; font-size: 16px; color: #000; font-weight: 400; } /* Bottom Elements */ .bottom-elements { position: absolute; bottom: 15%; left: 50%; transform:
translateX(-50%); display: flex; align-items: center; gap: 40px; z-index: 10; } .gps-coordinates { font-family: "Montserrat", sans-serif; font-size: 14px; color: #000; font-weight: 600; } .book-villa-btn { background: #000; color: #fff; border: none;
padding: 15px 30px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; opacity: 0; transform: translateY(20px); } .book-villa-btn:hover { background: #333; transform:
translateY(18px); } .book-villa-btn.active { opacity: 1; transform: translateY(0); } /* Enhanced Step Card Animations */ .step-card-animated { transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .step-card-animated:hover { transform:
scale(1.05) translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .step-card-animated.aos-animate { transform: scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .step-card-animated.aos-animate:hover { transform: scale(1.08) translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } .contact-section { display: flex; justify-content: space-between; align-items: center; background-color: #FBFBFB; width: 100%; padding: 80px 75px; /* spacing from all sides */ box-sizing: border-box; } .contact-form
{ flex: 1; } .contact-form small { display: flex; align-items: center; font-size: 14px; margin-bottom: 10px; color: #222; } .contact-form small::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71;
margin-right: 8px; } .contact-form h2 { font-size: 24px; font-weight: bold; line-height: 1.4; margin-bottom: 30px; max-width: 420px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 12px; font-weight: bold; margin-bottom:
6px; text-transform: uppercase; color: #555; } .form-group input, .form-group textarea { width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; resize: none; } .form-group textarea { height:
120px; } .btn-submit { display: inline-block; background: #003366; color: #fff; padding: 12px 28px; border: none; border-radius: 25px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 10px; } .btn-submit:hover { background: #002244; }
.contact-image { flex: 1; display: flex; justify-content: center; align-items: center; } .contact-image img { max-width: 100%; border-radius: 12px; object-fit: cover; } .seo-hero {height: fit-content !important; background-size: cover; background-position:
center; position: relative; display: flex; flex-direction: column; } .seo-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); /* overlay color & opacity */ z-index: 1; } .seo-hero
.cta-button { background: white; color: #333; padding: 12px 28px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .seo-hero .cta-button:hover { transform:
translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } /* SEO Hero Content */ .seo-hero .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 50px; max-width:
1000px; margin: 0 auto; } .seo-hero .hero-title { font-size: 64px; font-weight: 700; color: white; line-height: 1.1; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .seo-hero .seo-highlight { color: #9AFF00; text-shadow: 2px 2px 4px
rgba(0, 0, 0, 0.5); } .seo-hero .hero-subtitle { font-size: 18px; color: white; line-height: 1.6; margin-bottom: 40px; opacity: 0.95; max-width: 700px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .seo-hero .hero-cta { background: #9AFF00; color: #333;
padding: 16px 40px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 18px; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(154, 255, 0, 0.3); text-transform: uppercase; letter-spacing: 1px; } .seo-hero .hero-cta:hover {
transform: translateY(-3px); box-shadow: 0 8px 25px rgba(154, 255, 0, 0.4); background: #8AE000; } .seo-section {margin: 20px auto; padding: 60px 20px; background-color: #fff; } .seo-section .content-wrapper { display: grid; grid-template-columns: 1fr
1fr; gap: 60px; align-items: center; } .seo-section .images-container { display: flex; gap: 20px; height: 500px; } .seo-section .image-card { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.3s
ease, box-shadow 0.3s ease; } .seo-section .image-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .seo-section .image-card { background-color: #fff; display: flex; align-items: center; justify-content: center;
color: #6b7280; font-size: 14px; text-align: center; } .seo-section .image-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .seo-section .image-card.tall { grid-row: span 2; } .seo-section .text-content { padding-left: 20px;
} .seo-section .main-heading { font-size: 44px; font-weight: 700; color: #054477; margin-bottom: 40px; line-height: 1.3; letter-spacing: -0.02em; } .seo-section .main-heading span{ color: #000; } .seo-section .paragraph { font-size: 1rem; line-height:
1.7; color: #000; margin-bottom: 24px; } .seo-section .paragraph:last-child { margin-bottom: 0; } /* Section background */ .seo-audit-section { background: #074578; /* dark blue background */ padding: 60px 20px; text-align: center; } /* Container */ .seo-audit-container
{ max-width: 1200px; margin: 0 auto; } /* Title */ .seo-audit-title { line-height:1.3; font-family:font-size: 20px; text-align: left; font-weight: 500; color: #fff; margin-bottom: 30px; } /* Form layout */ .seo-audit-form { display: flex; justify-content:
center; flex-wrap: wrap; gap: 20px; } /* Inputs */ .seo-audit-input { height: 60px; padding: 0 20px; border: none; border-radius: 8px; background: #f5f5f5; font-size: 16px; font-family: "Montserrat", sans-serif; min-width: 220px; flex: 1; } .seo-audit-input::placeholder
{ color: #7a7a7a; font-weight: 500; } /* Button */ .seo-audit-btn { background: #c4ff1a; /* neon green */ color: #000; font-weight: 600; font-size: 16px; font-family: "Montserrat", sans-serif; border: none; border-radius: 8px; padding: 0 30px; height:
60px; cursor: pointer; transition: 0.3s; } .seo-audit-btn:hover { background: #b0e617; } /*benefits section*/ .benefits-section { margin: 0 auto; padding: 60px 20px; background-color: #fff ; } .benefits-section .section-header { display: flex; justify-content:
space-between; align-items: flex-start; margin-bottom: 50px; gap: 40px; } .benefits-section .section-title { flex: 1; max-width: 500px; } .benefits-section .section-title h2 { font-size: 39px; font-weight: 700; line-height: 1.3; color: #1a202c; margin:
0; } .benefits-section .section-title .highlight { color: #054477; } .benefits-section .section-description { flex: 1; max-width: 400px; margin-top: 20px; } .benefits-section .section-description p { font-size: 16px; color: #000; line-height: 1.6; margin:
0; } .benefits-section .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .benefits-section .benefit-card { border-radius: 16px; padding: 15px 28px; border: 1px solid #A4A4A4; transition: all 0.3s ease; } .benefits-section
.benefit-icon { width: 64px; height: 64px; background: #054477; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .benefits-section .benefit-icon svg { width: 28px; height: 28px; color: white; stroke-width:
1.5; } .benefits-section .benefit-card h3 { font-size: 20px; font-weight: 600; color: #1a202c; margin-bottom: 16px; line-height: 1.3; } .benefits-section .benefit-card p { font-size: 15px; color: #4a5568; line-height: 1.6; margin: 0; } /*logo slider*/
.logo-slider-section { width: 100%; padding: 80px 0; background-color: #ffffff; } .logo-slider-section .container { height: fit-content; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Swiper Container */ .logo-slider-section .logo-swiper { width:
100%; height: 120px; overflow: visible; } /* Swiper Wrapper */ .swiper-wrapper { align-items: center; } /* Individual Swiper Slides */ .swiper-slide { text-align: center; font-size: 18px; background: transparent; display: flex; justify-content: center;
align-items: center; width: auto; } .logo-item { width: 120px; /* adjust to your logo size */ display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.3s ease; } .logo-item:hover { opacity: 1; transform: scale(1.05);
} .logo-text { font-size: 36px; font-weight: 700; color: #1a202c; letter-spacing: -0.02em; white-space: nowrap; user-select: none; } /* Hide default Swiper navigation and pagination */ .swiper-button-next, .swiper-button-prev, .swiper-pagination { display:
none !important; } /* Custom fade effect on edges */ .logo-slider-section { position: relative; } .logo-slider-section::before, .logo-slider-section::after { content: ''; position: absolute; top: 0; width: 80px; height: 100%; z-index: 10; pointer-events:
none; } .logo-slider-section::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); } .logo-slider-section::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
} /* Responsive Design */ @media (max-width: 768px) { .logo-slider-section { padding: 60px 0; } .logo-swiper { height: 100px; } .logo-item { height: 60px; padding: 0 40px; } .logo-text { font-size: 28px; } } @media (max-width: 480px) { .logo-slider-section
{ padding: 40px 0; } .logo-swiper { height: 80px; } .logo-item { height: 50px; padding: 0 30px; } .logo-text { font-size: 22px; } .logo-slider-section::before, .logo-slider-section::after { width: 40px; } } .seo-business-needs-section { width: 100%; padding:60px
0px; background-color: #ffffff; } .seo-business-needs-section .seo-bn-container { margin: 0 auto; } .seo-business-needs-section .seo-bn-content-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .seo-business-needs-section
.seo-bn-text-content { max-width: 520px; } .seo-business-needs-section .seo-bn-section-title { font-size: 44px; font-weight: 700; line-height: 1.3; color: #1a202c; margin-bottom: 40px; letter-spacing: -0.02em; } .seo-business-needs-section .seo-bn-section-title
.seo-bn-highlight { color: #054477; } .seo-business-needs-section .seo-bn-description-text { font-size: 16px; color: #000; line-height: 1.7; margin-bottom: 32px; } .seo-business-needs-section .seo-bn-description-text + .seo-bn-description-text { margin-top:
24px; } .seo-business-needs-section .seo-bn-cta-button { display: inline-block; background: #32A5A5; color: white; font-size: 16px; font-weight: 600; padding: 16px 32px; border: none; border-radius: 50px; text-decoration: none; cursor: pointer; transition:
all 0.3s ease; margin-top: 8px; } .seo-business-needs-section .seo-bn-cta-button:hover { background: #32A5A5; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(8, 145, 178, 0.3); } .seo-business-needs-section .seo-bn-image-content { position: relative;
} .seo-business-needs-section .seo-bn-main-image { width: 100%; height: auto; border-radius: 20px; overflow: hidden; position: relative; } .seo-business-needs-section .seo-bn-team-silhouette { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
width: 70%; height: 40%; background: linear-gradient(45deg, rgba(26, 32, 44, 0.3), rgba(26, 32, 44, 0.5)); border-radius: 20px 20px 0 0; display: flex; align-items: flex-end; justify-content: center; padding: 20px; } .seo-business-needs-section .seo-bn-person
{ width: 60px; height: 80px; background: linear-gradient(180deg, rgba(139, 90, 60, 0.8), rgba(139, 90, 60, 0.6)); border-radius: 30px 30px 0 0; margin: 0 5px; position: relative; } .seo-business-needs-section .seo-bn-person:nth-child(1) { height: 90px;
background: linear-gradient(180deg, rgba(74, 85, 104, 0.8), rgba(74, 85, 104, 0.6)); } .seo-business-needs-section .seo-bn-person:nth-child(2) { height: 85px; background: linear-gradient(180deg, rgba(160, 132, 92, 0.8), rgba(160, 132, 92, 0.6)); } .seo-business-needs-section
.seo-bn-person:nth-child(3) { height: 75px; } /* Laptop/device overlay */ .seo-business-needs-section .seo-bn-device-overlay { position: absolute; bottom: 25%; left: 30%; width: 80px; height: 50px; background: rgba(55, 65, 81, 0.8); border-radius: 4px;
border: 2px solid rgba(156, 163, 175, 0.6); } .seo-business-needs-section .seo-bn-device-overlay::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 8px; background: linear-gradient(135deg, #3b82f6, #1e40af); border-radius:
2px; } .seo-benefits-slider-section { width: 100%; background:#054477; padding: 80px 0 120px 0; position: relative; overflow: hidden; } .seo-benefits-slider-section .sbs-container { margin: 0 auto; position: relative; } .seo-benefits-slider-section .sbs-header
{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 60px; gap: 40px; } .seo-benefits-slider-section .sbs-title-content { flex: 1; max-width: 500px; } .seo-benefits-slider-section .sbs-main-title { font-size: 40px;
font-weight: 700; line-height: 1.3; color: #ffffff; margin: 0; letter-spacing: -0.02em; } .seo-benefits-slider-section .sbs-description { flex: 1; max-width: 400px; margin-top: 20px; } .seo-benefits-slider-section .sbs-description p { font-size: 16px;
color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin: 0; } .seo-benefits-slider-section .sbs-navigation { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .seo-benefits-slider-section .sbs-nav-arrow { width: 48px; height: 48px;
background: #BCF43C; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; border: none; color: white; } .seo-benefits-slider-section .sbs-nav-arrow:hover { background:#BCF43C ; transform:
scale(1.05); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); } .seo-benefits-slider-section .sbs-nav-arrow svg { color:#000; width: 20px; height: 20px; stroke-width: 2; } .seo-benefits-slider-section .sbs-nav-arrow.swiper-button-disabled { opacity: 0.5;
cursor: not-allowed; } .seo-benefits-slider-section .sbs-nav-arrow.swiper-button-disabled:hover { background: #22c55e; transform: none; box-shadow: none; } /* Swiper Container */ .seo-benefits-slider-section .sbs-logos-swiper { width: 100%; overflow:
visible; margin-bottom: 60px; } .seo-benefits-slider-section .swiper-wrapper { align-items: center; } .seo-benefits-slider-section .swiper-slide { height: auto; display: flex; justify-content: center; } .seo-benefits-slider-section .sbs-logo-card {margin:0
auto; background: #F3F3F3; border-radius: 20px; padding: 60px 40px; display: flex; align-items: center; justify-content: center; min-height: 200px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; width: 100%; max-width: 280px; }
.seo-benefits-slider-section .sbs-logo-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .seo-benefits-slider-section .sbs-logo-placeholder { width: 100%; height: 80px; background: #f8f9fa; border: 2px dashed #d1d5db;
border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; font-weight: 500; text-align: center; transition: all 0.3s ease; } .seo-benefits-slider-section .sbs-logo-placeholder:hover { border-color:
#6b7280; color: #6b7280; background: #f3f4f6; } /* View All Button */ .seo-benefits-slider-section .sbs-view-all { text-align: center; } .seo-benefits-slider-section .sbs-logo-card img{ height: 210px; width: 100%; object-fit: contain; } .seo-benefits-slider-section
.sbs-view-all-btn { display: inline-block; background: #32A5A5; color: white; font-size: 16px; font-weight: 600; padding: 16px 60px; border: none; border-radius: 50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } .seo-benefits-slider-section
.sbs-view-all-btn:hover { background: #0e7490; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(8, 145, 178, 0.3); } /* Hide default Swiper navigation */ .seo-benefits-slider-section .swiper-button-next, .seo-benefits-slider-section .swiper-button-prev,
.seo-benefits-slider-section .swiper-pagination { display: none !important; } /*trust the process*/ .trust-section-container {background-color: #fff; margin: 0 auto; padding: 80px 20px; } .trust-section-container .header-content { display: flex; justify-content:
space-between; align-items: flex-start; margin-bottom: 60px; gap: 40px; } .trust-section-container .main-title { flex: 1; max-width: 600px; } .trust-section-container .main-title h1 { font-size: 42px; font-weight: 700; color: #000; line-height: 1.3; margin-bottom:
0; } .trust-section-container .main-title .highlight { color: #054477; } .trust-section-container .description { flex: 1; max-width: 400px; } .trust-section-container .description p { font-size: 1.1rem; color: #000; line-height: 1.7; } .trust-section-container
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .trust-section-container .process-item { background: white; padding: 40px 30px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .trust-section-container
.process-item::before { content: ""; position: absolute; left: 0; top: 20px; /* distance from top */ height: 80%; /* control the height */ width: 4px; /* border thickness */ background-color: #32A5A5; } .trust-section-container .step-number { width: 60px;
height: 60px; background: #054477; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(43, 108, 176, 0.3); } .trust-section-container
.process-title { font-size: 1.4rem; font-weight: 700; color: #1a365d; margin-bottom: 15px; } .trust-section-container .process-description { font-size: 1rem; color: #4a5568; line-height: 1.6; } /* Responsive Design */ @media (max-width: 1024px) { .trust-section-container
{ padding: 60px 20px; } .trust-section-container .main-title h1 { font-size: 3rem; } .trust-section-container .process-grid { gap: 25px; } .trust-section-container .process-item { padding: 35px 25px; } } @media (max-width: 768px) { .trust-section-container
.header-content { flex-direction: column; gap: 30px; text-align: center; } .trust-section-container .main-title, .description { max-width: 100%; } .trust-section-container .main-title h1 { font-size: 2.5rem; } .trust-section-container .process-grid {
grid-template-columns: repeat(2, 1fr); gap: 20px; } .trust-section-container .process-item { padding: 30px 20px; } .trust-section-container .step-number { width: 50px; height: 50px; font-size: 1.3rem; } .trust-section-container .process-title { font-size:
1.2rem; } } @media (max-width: 576px) { .trust-section-container { padding: 40px 15px; } .trust-section-container .main-title h1 { font-size: 2rem; } .trust-section-container .description p { font-size: 1rem; } .trust-section-container .process-grid {
grid-template-columns: 1fr; gap: 20px; } .trust-section-container .process-item { padding: 25px 20px; } .trust-section-container .step-number { width: 45px; height: 45px; font-size: 1.2rem; margin-bottom: 20px; } .trust-section-container .process-title
{ font-size: 1.1rem; margin-bottom: 12px; } .trust-section-container .process-description { font-size: 0.95rem; } } @media (max-width: 480px) { .trust-section-container .main-title h1 { font-size: 1.8rem; } .trust-section-container .header-content { margin-bottom:
40px; } } .wpcf7-submit{ padding: 15px 45px; background: #32a5a5; border-radius: 28px; font-family: "Montserrat"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 17px; border: none; color: #fff; border-radius: 9px !important; font-size:
16px !important; height: 70px !important; width: 100% !important; } .footer .footer-menu { list-style: none; padding: 0; margin: 0; } .footer .footer-menu li { margin-bottom: 8px; } .footer .footer-menu li a { color: #fff !important; /* or your footer
link color */ text-decoration: none !important; display: block !important; font-size: 14px !important; } .footer .footer-menu li a:hover { color: #ccc; } /* SEO Page Hero - matches provided screenshot */ .seo-hero, .website-design-hero { position: relative;
width: 100%; min-height: 86vh; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 160px 0 80px; } .seo-hero::before, .website-design-hero::before { /* subtle dark overlay for text legibility */ content: ""; position:
absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .seo-hero .lg-container, .website-design-hero .lg-container { position: relative; z-index: 1; } .seo-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; align-items: center; } .seo-hero-grid
h4{ color: #fff; padding: 15px 0px; } /* Left side */ .seo-hero-title { color: #fff; font-weight: 800; font-size: 48px; line-height: 1.2; margin: 0 0 16px 0; } .seo-hero-highlight { color:#BDF343 ; } .seo-hero-logos { display: flex; align-items: center;
gap: 28px; color: #fff; font-weight: 600; margin: 16px 0 10px; } .seo-hero-logos img { height: 28px; object-fit: contain; filter: brightness(0) invert(1); /* keep white on dark bg */ opacity: 0.95; } .seo-hero-stars { display: flex; align-items: center;
gap: 10px; } .seo-hero-stars .star { color: #A8D33F; font-size: 26px; } .seo-hero-stars .review-copy { color: #fff; font-weight: 700; margin-left: 12px; } /* Right side form card */ .seo-contact-card { width: 100%; max-width: 440px; margin-left: auto;
background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); padding: 24px; } .seo-contact-card .form-title { color: #054477; font-weight: 800; font-size: 28px; margin-bottom: 12px; } .seo-contact-card .form-group { margin-bottom:
12px; } .seo-contact-card .form-input, .seo-contact-card .form-textarea { width: 100%; background: #F3F5F6; border: none; border-radius: 10px; padding: 14px 16px; font-weight: 600; color: #0b0b0b; } .seo-contact-card .form-textarea { min-height: 110px;
resize: vertical; } .seo-contact-card .submit-btn { width: 30%; height: 48px; border: none; border-radius: 10px; font-weight: 400; color: #fff; background: #32A5A5; } .seo-hero .seo-hero-grid .logos, .website-design-hero .seo-hero-grid .logos { gap: 30px;
display: flex; align-items: center; flex-direction: row; margin-bottom: 15px; } .seo-contact-card .submit-btn:hover { background: #238b8b; } /* Responsive */ @media (max-width: 1200px) { .seo-hero { padding: 140px 0 70px; } } @media (max-width: 992px)
{ .seo-hero-grid { grid-template-columns: 1fr; } .seo-contact-card { margin: 18px 0 0; } } @media (max-width: 576px) { .seo-hero { padding: 120px 0 60px; } .seo-hero-logos img { height: 24px; } .seo-hero-stars .star { font-size: 22px; } } /*seo second
section*/ .testimonial-slider-section { padding: 80px 0; background-color: #f8f9fa; overflow: visible; } .testimonial-slider-section swiper-container{overflow:visible !important;} .testimonial-slider-section .testimonial-swiper-el { width: 100%; height:
auto; padding: 20px 0; } .testimonial-slider-section .testimonial-item {transition: transform 0.3s ease; height: auto; background: white; border-radius: 16px; padding: 30px 25px 25px; box-shadow: 0px 4px 15px -2px #00000040; border: 1px solid #e9ecef;
transition: all 0.3s ease; position: relative; min-height: 300px; display: flex; flex-direction: column; } .testimonial-slider-section .testimonial-item:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); background-color:#1e3f73;
} .testimonial-slider-section .testimonial-item:hover .testimonial-text{ color: #fff; } .testimonial-slider-section .testimonial-item:hover .author-name { color: #fff; } .testimonial-slider-section .testimonial-item:hover .author-title{ color: #fff; }.testimonial-slider-section
.testimonial-text { font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 25px; flex-grow: 1; font-weight: 400; } .testimonial-slider-section .testimonial-item.featured .testimonial-text { color: rgba(255, 255, 255, 0.95); } .testimonial-slider-section
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; border-top: 1px solid #eee; padding-top: 10px; } .testimonial-slider-section .author-image { width: 75px; height: 50px; border-radius: 20%; object-fit: cover; } .testimonial-slider-section
.testimonial-item.featured .author-image { border:none; } .testimonial-slider-section .author-info { flex: 1; } .testimonial-slider-section .author-name { font-weight: 600; font-size: 15px; color: #2c5aa0; margin-bottom: 2px; } .testimonial-slider-section
.testimonial-item.featured .author-name { color: white; } .testimonial-slider-section .author-title { font-size: 13px; color: #666; font-weight: 400; } .testimonial-slider-section .testimonial-item.featured .author-title { color: rgba(255, 255, 255, 0.8);
} .testimonial-slider-section .quote-icon { position: absolute; top: 20px; right: 25px; font-size: 24px; color: #e9ecef; opacity: 0.6; } .testimonial-slider-section .testimonial-item.featured .quote-icon { color: rgba(255, 255, 255, 0.3); } .testimonial-slider-section
.section-title { text-align: center; margin-bottom: 50px; } .testimonial-slider-section .section-title h2 { font-size: 2.5rem; font-weight: 700; color: #2c5aa0; margin-bottom: 15px; } .testimonial-slider-section .section-title p { font-size: 1.2rem; color:
#666; max-width: 600px; margin: 0 auto; line-height: 1.6; } @media(min-width:1024px){.testimonial-slider-section .testimonial-swiper-el::part(container) {padding-bottom: 220px; }} .testimonial-slider-section .testimonial-swiper-el::part(button-next),
.testimonial-slider-section .testimonial-swiper-el::part(button-prev) { background: #ffffff; border: 1px solid #e0e0e0; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,0.12); color: #054477; } .testimonial-slider-section
.testimonial-swiper-el::part(button-next):hover, .testimonial-slider-section .testimonial-swiper-el::part(button-prev):hover { background: #054477; color: #fff; } .testimonial-slider-section .testimonial-swiper-el::part(button-next) { right: -10px; }
.testimonial-slider-section .testimonial-swiper-el::part(button-prev) { left: -10px; } .testimonial-slider-section swiper-slide{overflow:visible !important;} .testimonial-slider-section swiper-slide:nth-child(odd) .testimonial-item { transform: translateY(200px);}
@media (max-width: 768px) { .testimonial-slider-section swiper-slide:nth-child(odd) .testimonial-item{transform:none !important;} .seo-hero-title{ font-size:32px; } .seo-hero .seo-hero-grid .logos{ display: flex; flex-direction: row; align-items: start;
} .testimonial-slider-section { padding: 60px 0; } .testimonial-slider-section .container { padding: 0 15px; } .testimonial-slider-section .testimonial-item { padding: 25px 20px 20px; min-height: 280px; } .testimonial-slider-section .testimonial-text
{ font-size: 15px; margin-bottom: 20px; } .testimonial-slider-section .author-image { width: 45px; height: 45px; } .testimonial-slider-section .author-name { font-size: 14px; } .testimonial-slider-section .author-title { font-size: 12px; } .testimonial-slider-section
.section-title h2 { font-size: 2rem; } .testimonial-slider-section .section-title p { font-size: 1.1rem; } } @media (max-width: 480px) { .testimonial-slider-section swiper-slide:nth-child(odd) .testimonial-item, .testimonial-slider-section swiper-slide:nth-child(even)
.testimonial-item { margin-top: 0; min-height: 260px; } .testimonial-slider-section .testimonial-item { padding: 20px 18px; } .testimonial-slider-section .testimonial-text { font-size: 14px; } .testimonial-slider-section .section-title h2 { font-size:
1.8rem; } .testimonial-slider-section .section-title p { font-size: 1rem; } } .website-design-hero { overflow: hidden; } .website-design-hero .lg-container { position: relative; } /* Card look to match screenshot */ .website-design-hero .row .col-lg-6
{ background: #ffffff; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); border: 1px solid rgba(0,0,0,0.06); padding: 18px 18px 14px; width: 360px; /* visual width from screenshot */ max-width: 34vw; /* keep responsive on smaller desktops
*/ position: absolute; /* place as a staggered grid on the right */ } /* Text + author row inside the card */ .website-design-hero .row .col-lg-6 .testimonial-text { font-size: 14px; line-height: 1.6; color: #2a2a2a; margin-bottom: 14px; } .website-design-hero
.row .col-lg-6 .testimonial-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e9ecef; padding-top: 10px; } .website-design-hero .row .col-lg-6 .author-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
} .website-design-hero .row .col-lg-6 .author-name { margin: 0; font-weight: 600; font-size: 14px; color: #2c5aa0; } .website-design-hero .row .col-lg-6 .author-title { margin: 0; font-weight: 400; font-size: 12px; color: #6b6b6b; } /* Place the four
existing cards to mimic the 3-column staggered layout Column widths ~360px with ~28px gaps */ /* 1st visual row (the first .row after .seo-hero-grid), 1st col -> column 1 */ .website-design-hero .lg-container > div.row:nth-of-type(2) .col-lg-6:nth-child(1)
{ right: 420px; /* col 1 (from right) */ top: 44px; } /* 1st visual row, 2nd col -> column 3 */ .website-design-hero .lg-container > div.row:nth-of-type(2) .col-lg-6:nth-child(2) { right: 24px; /* col 3 (rightmost) */ top: 0px; } /* 2nd visual row (the
second .row after .seo-hero-grid), 1st col -> column 2 */ .website-design-hero .lg-container > div.row:nth-of-type(3) .col-lg-6:nth-child(1) { right: 222px; /* col 2 */ top: 210px; } /* 2nd visual row, 2nd col -> column 3, lower */ .website-design-hero
.lg-container > div.row:nth-of-type(3) .col-lg-6:nth-child(2) { right: 24px; /* col 3 */ top: 340px; } /* Ensure hero text column remains on left half */ .website-design-hero .seo-hero-grid { grid-template-columns: 1.2fr 1.05fr; } /* Responsive tweaks
*/ @media (max-width: 1200px) { .website-design-hero .row .col-lg-6 { width: 320px; } .website-design-hero .lg-container > .row:nth-of-type(1) .col-lg-6:nth-child(1) { right: 380px; top: 36px; } .website-design-hero .lg-container > .row:nth-of-type(1)
.col-lg-6:nth-child(2) { right: 16px; top: 0; } .website-design-hero .lg-container > .row:nth-of-type(2) .col-lg-6:nth-child(1) { right: 200px; top: 190px; } .website-design-hero .lg-container > .row:nth-of-type(2) .col-lg-6:nth-child(2) { right: 16px;
top: 310px; } } @media (max-width: 992px) { /* Stack cards under the hero text */ .website-design-hero { padding-bottom: 120px; } .website-design-hero .row .col-lg-6 { position: static; width: 100%; max-width: 100%; margin: 12px 0; } } /*hire agency section*/
.hire-agency-section{ padding: 80px 0px; } .hire-agency-section .container { height: auto; } .hire-agency-section .container .section-wrapper { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; padding: 60px 0; max-width:
1200px; margin: 0 auto; } .hire-agency-section .section-title h2 { font-size: 39px; font-weight: 700; line-height: 1.1; color: #1a202c; margin: 0; margin-bottom: 30px; } .hire-agency-section .section-title .highlight { color: #054477; } .hire-agency-section
.features-list { width: 100%; } .hire-agency-section .feature-item { padding: 20px 0; display: flex; align-items: center; gap: 40px; } .hire-agency-section .feature-item:not(:last-child) { border-bottom: 1px solid #CDCDCD; } .hire-agency-section .feature-number-container
{ flex-shrink: 0; } .hire-agency-section .feature-number { font-size: 48px; color: #054477; font-weight: 600; line-height: 1; margin-top: 2px; /* Adjust vertical alignment */ } .hire-agency-section .feature-content { flex-grow: 1; } .hire-agency-section
.feature-title { font-size: 30px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; color: #1a202c; } .hire-agency-section .feature-description { font-size: 16px; font-weight: 500; line-height: 1.6; margin-top: 0; color: #4a5568; } .hire-agency-section
.feature-highlight { font-size: 16px; font-weight: 600; line-height: 1.6; margin-top: 8px; color: #2d3748; } .hire-agency-section .content-right { flex: 0 0 40%; /* Approx 40% width for image */ } .hire-agency-section .hire-agency-image { width: 100%;
height: auto; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } @media (max-width: 1024px) { .hire-agency-section .container .section-wrapper { flex-direction: column; align-items: center; padding: 40px 0; } .hire-agency-section .content-right
{ flex: 0 0 50%; /* Adjust image width on tablet */ margin-top: 20px; } .hire-agency-section .feature-title { font-size: 26px; } .hire-agency-section .feature-description, .hire-agency-section .feature-highlight { font-size: 14px; } } @media (max-width:
768px) { .seo-hero{ height: auto; } .hire-agency-section{ padding: 40px 15px; } .hire-agency-section .container .section-wrapper { padding: 30px 0; } .hire-agency-section .section-title h2 { font-size: 28px; } .hire-agency-section .content-right { flex:
0 0 70%; /* Larger image on mobile */ margin-top: 20px; } .hire-agency-section .feature-item { flex-direction: column; align-items: flex-start; } .hire-agency-section .feature-number { font-size: 36px; margin-top: 0; } .hire-agency-section .feature-title
{ font-size: 22px; } .hire-agency-section .feature-description, .hire-agency-section .feature-highlight { font-size: 13px; } } .seo-services .lg-container{ max-width: 1350px; } .seo-services .step-card h6{ padding-top: 30px; } /*seo sauce section*/ .seo-sauce
{ max-width: 1250px; margin: 0 auto; padding: 60px 20px; text-align: center; } .seo-sauce h2 { font-size: 44pxs; font-weight: bold; margin-bottom: 10px; } .seo-sauce h2 span { color: #054477; /* Blue highlight */ } .seo-sauce .seo-grid { display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; } .seo-sauce .seo-card { background: #fff; border-radius: 25px; padding: 25px; text-align: left; box-shadow: 0px 4px 15px -2px #00000040; display: flex; flex-direction:
column; justify-content: space-between; } .seo-sauce .seo-card h3 { display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis;white-space: normal;line-height: 1.4; font-size: 20px; font-weight: 600;
color: #054477; padding-top: 20px; margin-bottom: 12px; } .seo-sauce .seo-card p { font-size: 14px; line-height: 1.6; margin-bottom: 15px; color: #000; } .seo-sauce .seo-card img { width: 100%; border-radius: 8px; margin-top: auto; } /*AI search section*/
.ai-search { background: #054477; /* dark blue background */ color: #fff; padding: 80px 20px; text-align: center; } .ai-search h2 { font-size: 44px; font-weight: 700; margin-bottom: 20px; } .ai-search p { font-size: 16px; line-height: 1.6; max-width:
750px; margin: 0 auto 20px auto; color: #fff; text-align: left; } .ai-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 90px; margin-top: 40px; } .ai-logos img { max-height: 40px; width: auto; object-fit: contain;
} /* Responsive adjustments */ @media (max-width: 768px) { .explore-section {padding: 0px 15px !important;} .ai-search { padding: 60px 30px; } .ai-search h2 { font-size: 26px; } .ai-search p { font-size: 15px; } .ai-logos { gap: 24px; } } @media (max-width:
480px) { .ai-search h2 { font-size: 22px; } .ai-logos { flex-direction: row; gap: 20px; } } /*blogs section*/ .blogs-swiper { position: relative; padding: 10px 0; overflow: visible; /* let cards & arrows fully show */ } .blogs-section .swiper { overflow:
visible; /* same fix for web component */ } .blogs-section { padding: 60px 20px; text-align: center; } .blogs-title { font-size: 44px; font-weight: 700; margin-bottom: 30px; } .blogs-swiper { position: relative; padding: 10px 0; } .blog-card { display:
flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; padding: 30px 20px; gap: 20px; text-align: left; } .blog-content { flex: 1; } .blog-content
h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color:#000; } .blog-content p {display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis;-webkit-box-orient:vertical; font-size: 16px; line-height: 1.6; color: #000;
} .blog-image { flex: 0 0 180px; } .blog-image img { width: 100%; border-radius: 12px; object-fit: cover; } .blogs-section .swiper{ overflow: visible !important; } /* Swiper Navigation Arrows */ /* Swiper Navigation Arrows */ .blogs-section swiper-container::part(container),
.blogs-section swiper-container::part(wrapper),.blogs-section swiper-slide{overflow:visible !important;} .blogs-section swiper-container::part(button-prev), .blogs-section swiper-container::part(button-next) { position: absolute; top: 50%; z-index:50;
transform: translateY(-50%); width: 25px; height: 28px; display: flex; align-items: center; color: #000; justify-content: center; z-index: 10; cursor: pointer; } /* Move outside */ .blogs-section swiper-container::part(button-prev) { left: -55px; } .blogs-section
swiper-container::part(button-next) { right: -55px; } .blogs-section swiper-container::part(button-prev):after, .blogs-section swiper-container::part(button-next):after { font-size: 18px; font-weight: bold; color: #000; } swiper-container::part(button-prev):after,
swiper-container::part(button-next):after { font-size: 16px; font-weight: bold; } @media (max-width: 768px) { .blog-card { padding: 15px; flex-direction: column; text-align: center; } .blog-image { flex: 0 0 auto; width: 100%; } .blog-content { text-align:
center; } } /*explore section*/.explore-section{padding: 60px 0px;} .explore-section .lg-container { height: auto; padding: 20px 15px; } .explore-section .section-title { text-align: center; margin-bottom: 50px; } .explore-section .section-title h2 {
font-size: 40px; font-weight: 700; line-height: 1.2; color: #1a202c; margin: 0; } .explore-section .section-title .highlight { color: #054477; } .explore-section .explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50px;
/* Set a small base row height */ gap: 30px; max-width: 1200px; margin: 0 auto; } .explore-section .post-card:nth-child(1) { grid-row: span 5; } .explore-section .post-card:nth-child(2) { grid-row: span 3; } .explore-section .post-card:nth-child(3) {
grid-row: span 5; } .explore-section .post-card:nth-child(4) { grid-row: span 3; } .explore-section .post-card:nth-child(5) { grid-row: span 5; } .explore-section .post-card:nth-child(6) { grid-row: span 4; } .explore-section .post-card { background:
#fff; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .explore-section .post-card:hover { transform: translateY(-5px); box-shadow:
0 6px 16px rgba(0, 0, 0, 0.15); } .explore-section .post-card img {padding: 14px; border-radius: 25px; width: 100%; height: 200px; object-fit: cover; } .explore-section .post-content { padding: 20px; flex-grow: 1; }.explore-section .post-title{line-height:
22px;} .explore-section .post-title a{ font-size: 18px; font-weight: 600; color: #1a202c; margin: 0 0 10px; } .explore-section .post-date { font-size: 12px; font-weight: 400; color: #4a5568; margin: 0 0 10px; } .explore-section .post-excerpt { font-size:
14px; font-weight: 400; color: #666; line-height: 1.5; margin: 0; } .explore-section .post-card.alternate { flex-direction: row; align-items: center; } .explore-section .post-card.alternate .post-content { flex: 1; padding: 15px; } .explore-section .post-card.alternate
img { width: 46%; height: 150px; object-fit: cover; flex-shrink: 0; } @media (max-width: 1024px) { .explore-section .container { padding: 60px 15px; } .explore-section .section-title { margin-bottom: 40px; } .explore-section .section-title h2 { font-size:
32px; } .explore-section .explore-grid { grid-template-columns: repeat(2, 1fr); } /* Reset grid row spans for tablets */ .explore-section .post-card:nth-child(1), .explore-section .post-card:nth-child(2), .explore-section .post-card:nth-child(3), .explore-section
.post-card:nth-child(4), .explore-section .post-card:nth-child(5), .explore-section .post-card:nth-child(6) { grid-row: span 1; } .explore-section .post-card img { height: auto; } .explore-section .post-card.alternate { flex-direction: column; } .explore-section
.post-card.alternate img { width: 100%; height: auto; } .explore-section .post-title { font-size: 18px; } .explore-section .post-date { font-size: 11px; } .explore-section .post-excerpt { font-size: 13px; } } @media (max-width: 768px) { .explore-section
.container { padding: 40px 10px; } .explore-section .section-title { margin-bottom: 30px; } .explore-section .section-title h2 { font-size: 30pxs; } .explore-section .explore-grid { display: flex; /* Change from grid to flexbox */ flex-direction: column;
/* Stack cards vertically */ gap: 20px; /* Reduce gap for mobile */ max-width: 1200px; margin: 0 auto; padding: 15px; } /* Remove all grid-related properties for mobile */ .explore-section .post-card:nth-child(1), .explore-section .post-card:nth-child(2),
.explore-section .post-card:nth-child(3), .explore-section .post-card:nth-child(4), .explore-section .post-card:nth-child(5), .explore-section .post-card:nth-child(6) { grid-row: unset; } .explore-section .post-card img { height: auto; } .explore-section
.post-card.alternate { flex-direction: column; /* Keep alternate cards as column layout on mobile */ } .explore-section .post-card.alternate img { width: 100%; height: auto; } .explore-section .post-title { font-size: 16px; } .explore-section .post-date
{ font-size: 10px; } .explore-section .post-excerpt { font-size: 12px; } } @media (max-width: 480px) { .explore-section .container { padding: 30px 5px; } .explore-section .section-title h2 { font-size: 24px; } .explore-section .explore-grid { gap: 15px;
/* Further reduce gap */ padding: 15px; } .explore-section .post-card img { height: auto; } .explore-section .post-card.alternate img { width: 100%; height: auto; } .explore-section .post-title { font-size: 14px; } .explore-section .post-date { font-size:
9px; } .explore-section .post-excerpt { font-size: 11px; } } /*website design hero section*/ .seo-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } /* testimonial grid */ .website-design-hero .testimonial-grid
{column-count:2; column-gap:20px; } /* testimonial card */ .website-design-hero .testimonial-card { display:inline-block; width:100%; margin-bottom:20px; background-color: #fff; color: #000; border-radius: 10px; padding: 25px; box-shadow: 0 4px 15px rgba(0,
0, 0, 0.1);vertical-align:top;} .website-design-hero .testimonial-text { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; } .website-design-hero .testimonial-author { display: flex; align-items: center; gap: 15px; margin-top: auto; border-top:
1px solid #D1D1D1; padding-top: 10px; } .website-design-hero .author-avatar{ width: 60px; height: 45px; border-radius: 20%; background: #ddd; object-fit: cover; } .website-design-hero .author-info { display: flex; flex-direction: column; } .website-design-hero
.author-name { font-size: 1rem; font-weight: 600; margin: 0; color:#000; } .website-design-hero .author-role { font-size: 0.85rem; color: var(--secondary-text-color); margin: 0; } /* Responsive design */ @media (max-width: 992px) { .seo-hero-grid { grid-template-columns:
1fr; /* stack left and right */ } .testimonial-grid { grid-template-columns: 1fr; /* single column on tablet/mobile */ } } /*web design company section*/ .web-design-company { margin:0 auto; padding: 80px 15px; } /* Top text row */ .web-design-company-header
{ display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 30px; flex-wrap: wrap; } .web-design-company-header h2 { font-size: 44px; font-weight: 700; margin: 0; flex: 1; line-height:1.3; } .web-design-company-header
p { flex: 1; font-size: 1rem; line-height: 1.6; margin: 0; } /* Main image */ .web-design-company-image img { height: 250px; width: 100%; object-fit: cover; border-radius: 31px; margin-bottom: 40px; display: block; } /* Feature grid */ .company-features-grid
{ display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px 20px; } .company-feature-card { display: flex; align-items: flex-start; gap: 15px; border-bottom: 1px solid #ccc; padding: 20px; } .company-feature-icon { flex-shrink:
0; background: #054477; color: #fff; border-radius: 50%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; } .company-feature-text h3 { margin: 0 0 8px; font-size: 24px; font-weight: 600; } .company-feature-text p
{ margin: 0; font-size: 16px; line-height: 1.5; color: #000; font-weight: 500; } /* Responsive tweaks */ @media (max-width: 768px) { .web-design-company-header { flex-direction: column; gap: 20px; } .website-design-hero .testimonial-grid{ column-count:1;
} .website-design-hero .seo-hero-grid{ grid-template-columns:auto; } .website-design-hero .seo-hero-grid .logos{ gap:18px; } .web-design-company-header h2{ font-size: 30px; } .company-features-grid{ grid-template-columns: auto; } } /*explore more section*/
.explore-more-section { padding: 60px 0; text-align: center; background-color: #FBFBFB; } .explore-more-section .section-header h2 { font-size: 44px; font-weight: 700; margin-bottom: 15px; } .explore-more-section .section-header p { max-width: 700px;
margin: 0 auto 40px; color: #000; line-height: 1.6; } .explore-more-card { border-radius: 15px; overflow: hidden; background: #fff; margin: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; transition: transform 0.3s
ease; } .explore-more-card:hover { transform: translateY(-5px); } .explore-more-card img { width: 100%; height: 280px; object-fit: cover; } .explore-more-card .card-footer { background: #003366; color: #fff; padding: 15px; display: flex; justify-content:
space-between; align-items: center; font-weight: 500; } .explore-more-card .card-footer span{ font-size: 16px; padding: 13px; } .explore-more-card .arrow { font-size: 1.2rem; } @media(max-width: 768px) { .seo-results-title h2{ font-size: 30px !important;
} .explore-more-section .section-header h2 { font-size: 32px; } .explore-more-card img { height: 220px; } }.explore-more-section .swiper-button-next{right: -60px;} .explore-more-section .swiper-button-prev{ left: -60px !important;} @media (max-width:
1024px) { .explore-more-section .swiper-button-next, .explore-more-section .swiper-button-prev {color: #003366; background: #fff;border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center;justify-content: center; box-shadow: 0 4px
10px rgba(0,0,0,0.15);z-index: 10;}} /*explore more section*/ /*why you love section*/ .why-you-love{ background: #054477; padding: 80px 20px; background-repeat: no-repeat; background-position: right center; } .why-you-love .header-section { display:
flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px; gap: 60px; } .why-you-love .main-title { color: white; font-size: 44px; font-weight: 700; line-height: 1.2; max-width: 600px; letter-spacing: -1px; } .why-you-love .subtitle
{ color: #fff; font-size: 18px; font-weight: 400; line-height: 1.5; max-width: 500px; } .why-you-love .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 80px; margin-bottom: 60px; } .why-you-love .feature-item { display: flex; align-items:
flex-start; gap: 20px; } .why-you-love .feature-icon { width: 70px; height: 70px; background: #BCF43C; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; } .why-you-love .feature-content
{ flex: 1; padding-top: 5px; } .why-you-love .feature-title { color: white; font-size: 26px; font-weight: 600; margin-bottom: 12px; line-height: 1.2; } .why-you-love .feature-description { color: #fff; font-size: 16px; font-weight: 400; line-height: 1.6;
} .why-you-love .cta-section { display: flex; justify-content: center; margin-top: 60px; } .why-you-love .cta-button { background: #32A5A5; color: white; padding: 16px 50px; border-radius: 50px; text-decoration: none; font-size: 18px; font-weight: 600;
transition: all 0.3s ease; } .why-you-love .cta-button:hover { background: #45b8b0; transform: translateY(-2px); } @media (max-width: 1024px) { .why-you-love .header-section { flex-direction: column; gap: 30px; margin-bottom: 60px; } .why-you-love .main-title
{ font-size: 48px; } .why-you-love .features-grid { gap: 40px 60px; } .why-you-love .feature-title { font-size: 24px; } } @media (max-width: 768px) { .why-you-love .main-title { font-size: 36px; } .why-you-love .features-grid { grid-template-columns:
1fr; gap: 40px; } .why-you-love .feature-item { gap: 15px; } .why-you-love .feature-icon { width: 60px; height: 60px; } .why-you-love .feature-icon::before { width: 28px; height: 28px; } .why-you-love .feature-title { font-size: 22px; } .why-you-love
.feature-description { font-size: 15px; } .why-you-love .cta-button { padding: 14px 32px; font-size: 16px; } } @media (max-width: 480px) { .why-you-love .main-title { font-size: 28px; } .why-you-love .subtitle { font-size: 16px; } .why-you-love .features-grid
{ gap: 30px; } } /*markets we serve section*/ .markets-we-serve * { margin: 0; padding: 0; box-sizing: border-box; } .markets-we-serve { font-family: 'Inter', sans-serif; background: #fff; padding: 100px 0 50px; min-height: 100vh; } .markets-we-serve
.lg-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .markets-we-serve .header-section { text-align: center; margin-bottom: 80px; } .markets-we-serve .main-title { color: #1a1a1a; font-size: 44px; font-weight: 700; line-height: 1.1; margin-bottom:
24px; letter-spacing: -1px; } .markets-we-serve .subtitle { color: #000; font-size: 16px; font-weight: 400; line-height: 1.6; max-width: 600px; margin: 0 auto; } .markets-we-serve .markets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:
24px; margin-bottom: 60px; } .markets-we-serve .market-card { background: white; border-radius: 16px; padding: 32px 28px; box-shadow: 0px 4px 15px -2px #00000040; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content:
space-between; border: 1px solid rgba(0, 0, 0, 0.05); } .markets-we-serve .market-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); border-color: rgba(59, 130, 246, 0.2); } .markets-we-serve .market-img img{ height:
22px; } .markets-we-serve .market-arrow { color: #054477; font-size: 24px; font-weight: 600; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 20px; } .markets-we-serve .market-card:hover .market-arrow { transform: translateX(4px); } .markets-we-serve
.cta-section { display: flex; justify-content: center; margin-top: 60px; } .markets-we-serve .cta-button { background: #054477; color: white; padding: 12px 50px; border-radius: 50px; text-decoration: none; font-size: 18px; font-weight: 600; transition:
all 0.3s ease; box-shadow: 0 4px 20px rgba(30, 58, 138, 0.25); } .markets-we-serve .cta-button:hover { background: #1e40af; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(30, 58, 138, 0.35); } /* Responsive Design */ @media (max-width: 1024px)
{ .markets-we-serve .container { padding: 0 30px; } .markets-we-serve .main-title { font-size: 48px; } .markets-we-serve .markets-grid { gap: 20px; } .markets-we-serve .market-card { padding: 28px 24px; } } @media (max-width: 768px) { .markets-we-serve
{ padding: 80px 0; } .markets-we-serve .container { padding: 0 20px; } .markets-we-serve .header-section { margin-bottom: 60px; } .markets-we-serve .main-title { font-size: 36px; margin-bottom: 20px; } .markets-we-serve .subtitle { font-size: 16px; }
.markets-we-serve .markets-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 50px; } .markets-we-serve .market-card { padding: 24px 20px; } .markets-we-serve .market-arrow { font-size: 20px; margin-left: 15px; } .markets-we-serve
.cta-button { padding: 14px 32px; font-size: 16px; } } @media (max-width: 480px) { .markets-we-serve { padding: 60px 0; } .markets-we-serve .main-title { font-size: 28px; line-height: 1.2; } .markets-we-serve .subtitle { font-size: 15px; } .markets-we-serve
.markets-grid { grid-template-columns: 1fr; gap: 12px; } .markets-we-serve .market-card { padding: 20px 18px; } .markets-we-serve .market-arrow { font-size: 18px; margin-left: 12px; } .markets-we-serve .cta-section { margin-top: 40px; } .markets-we-serve
.cta-button { padding: 12px 28px; font-size: 15px; } } @media (max-width: 320px) { .markets-we-serve .container { padding: 0 15px; } .markets-we-serve .main-title { font-size: 24px; } .markets-we-serve .market-card { padding: 18px 16px; } } /*markets
we serve section*/ /*conversion focused section*/ .conversion-focus, .want-more-leads { background: #ffffff; padding: 100px 0; } .conversion-focus .lg-container, .want-more-leads .lg-container { margin: 0 auto; } .conversion-focus .content-wrapper, .want-more-leads
.content-wrapper { display: flex; align-items: center; gap: 80px; justify-content: space-between; } .conversion-focus .left-content, .want-more-leads .left-content { flex: 1; max-width: 550px; } .conversion-focus .main-title, .want-more-leads .main-title
{ color: #1a1a1a; font-size: 44px; font-weight: 700; line-height: 1.3; margin-bottom: 32px; letter-spacing: -1px; } .conversion-focus .description, .want-more-leads .description { color: #4a5568; font-size: 18px; font-weight: 400; line-height: 1.7; }
.conversion-focus .right-content, .want-more-leads .right-content { flex: 1; position: relative; max-width: 550px; } .conversion-focus .main-image, .want-more-leads .main-image { width: 100%; max-width: 100%; /* prevents overflow */ height: auto; /* keeps
natural ratio */ border-radius: 20px; object-fit: cover; } .conversion-focus .description, .want-more-leads .description { color: #000; } /* Responsive Design */ @media (max-width: 1024px) { .conversion-focus .lg-container, .want-more-leads .lg-container
{ padding: 0 30px; } .conversion-focus .content-wrapper, .want-more-leads .content-wrapper { gap: 60px; } .conversion-focus .main-title, .want-more-leads .main-title { font-size: 48px; } } @media (max-width: 768px) { .conversion-focus, .want-more-leads
{ padding: 80px 0; } .conversion-focus .lg-container, .want-more-leads .lg-container { padding: 0 20px; } .conversion-focus .content-wrapper, .want-more-leads .content-wrapper { flex-direction: column; gap: 50px; text-align: center; } .conversion-focus
.left-content, .want-more-leads .left-content { max-width: 100%; } .conversion-focus .main-title, .want-more-leads .main-title { font-size: 36px; margin-bottom: 24px; } .conversion-focus .description, .want-more-leads .description { font-size: 16px; text-align:
left; } .conversion-focus .right-content, .want-more-leads .right-content { max-width: 100%; } .conversion-focus .main-image, .want-more-leads .main-image { height: 300px; } } @media (max-width: 480px) { .conversion-focus, .want-more-leads { padding:
60px 0; } .conversion-focus .main-title, .want-more-leads .main-title { font-size: 28px; line-height: 1.2; } .conversion-focus .description, .want-more-leads .description { font-size: 15px; } .conversion-focus .main-image, .want-more-leads .main-image
{ height: 250px; border-radius: 16px; } } @media (max-width: 320px) { .conversion-focus .lg-container, .want-more-leads .lg-container { padding: 0 15px; } .conversion-focus .main-title, .want-more-leads .main-title { font-size: 24px; } } /*what we specialize
in section*/ .what-we-specialize-section { padding: 80px 20px; text-align: center; } .what-we-specialize-section .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .what-we-specialize-section .section-title { font-size: 44px; font-weight:
700; color: #000; margin-bottom: 20px; } .what-we-specialize-section .section-description { font-size: 1rem; max-width: 800px; margin: 0 auto 60px auto; color: #000; line-height: 1.8; } .what-we-specialize-section .service-cards-grid { display: grid;
grid-template-columns: repeat(2, 1fr); gap: 30px; justify-content: center; } .what-we-specialize-section .service-card { background-color: #054477; color: #fff; border-radius: 25px; padding: 30px; text-align: left; display: flex; flex-direction: column;
justify-content: space-between; box-shadow: 0px 4px 15px -2px #00000040; } .what-we-specialize-section .service-card:hover { transform: translateY(-5px); } .what-we-specialize-section .card-header { display: flex; justify-content: space-between; align-items:
flex-start; margin-bottom: 20px; } .what-we-specialize-section .card-title { font-size: 28px; font-weight: 600; margin: 0; line-height: 1.3; } .what-we-specialize-section .card-icon { font-size: 1.2rem; color: var(--light-text-color); opacity: 0.7; transform:
rotate(-45deg); } .what-we-specialize-section .card-description { font-size: 0.95rem; line-height: 1.7; margin: 0; color: rgba(255, 255, 255, 0.85); } /* Responsive Design */ @media (max-width: 992px) { .what-we-specialize-section .section-title { font-size:
2rem; } .what-we-specialize-section .section-description { font-size: 0.9rem; } .what-we-specialize-section .service-cards-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; } } @media (max-width: 576px) { .what-we-specialize-section
{ padding: 50px 15px; } .what-we-specialize-section .section-title { font-size: 1.8rem; } .what-we-specialize-section .section-description { margin-bottom: 40px; } .what-we-specialize-section .service-card { padding: 25px; } .what-we-specialize-section
.card-title { font-size: 1.3rem; } .what-we-specialize-section .card-description { font-size: 0.85rem; } } /*what we specialize in section*/ /*success stories hero*/ .success-stories-hero { position: relative; width: 100%; height: 500px; /* Adjust height
as needed */ background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .success-stories-hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height:
100%; background-color: rgba(0, 0, 0, 0.5); /* dark overlay */ z-index: 0; } .success-stories-hero .hero-content { position: relative; z-index: 1; /* Ensures content is above the overlay */ padding: 20px; } .success-stories-hero .hero-title { font-size:
3.5rem; font-weight: 700; margin: 0 0 10px 0; line-height: 1.2; } .success-stories-hero .hero-subtitle { font-size: 1.2rem; color: #fff; font-weight: 400; margin: 0; opacity: 0.9; } /* Responsive Design */ @media (max-width: 768px) { .success-stories-hero
{ height: 300px; /* Smaller height for mobile */ } .success-stories-hero .hero-title { font-size: 2.5rem; } .success-stories-hero .hero-subtitle { font-size: 1rem; } } @media (max-width: 480px) { .success-stories-hero { height: 250px; } .success-stories-hero
.hero-title { font-size: 2rem; } .success-stories-hero .hero-subtitle { font-size: 0.9rem; } } /*success stories grid*/ .success-stories-grid-section{ padding:100px 0px; } .success-stories-grid-section .header-section{ box-shadow: 0px 4px 15px -2px #00000040;
border-radius: 20px; padding: 20px; } .success-stories-grid-section .header-section h1{font-size:24px;font-weight:700;} .success-stories-grid-section .nav-button { background-color: #054477; border: none; color: white; padding: 12px 24px; border-radius:
8px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-block; transition: all 0.3s ease; } .success-stories-grid-section .nav-button:hover { background-color: #1e3a8a; color: white; transform: translateY(-1px); } .success-stories-grid-section
.main-title a{ font-size: 40px; font-weight: 700; line-height: 1; color: #1a1a1a; } .success-stories-grid-section .description { color: #000; font-size: 16px; line-height: 1.6; } .success-stories-grid-section .header-image { border-radius: 12px; box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1); } .success-stories-grid-section .story-card { background: white; border-radius: 18px; box-shadow: 0px 4px 15px -2px #00000040; overflow: hidden; border: none; height: auto !important; } .success-stories-grid-section .story-card:hover
{ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .success-stories-grid-section .story-card .card-body{ padding: 30px; } /* Default for all cards */ .success-stories-grid-section .card-img-top { height: 200px; object-fit: cover;
width: 100%; } /* Full-height image for tall cards (h-100 parent) */ .success-stories-grid-section .story-card.h-100 .card-img-top { height: 100%; object-fit: cover; } .success-stories-grid-section .nav-button.active { background-color: #1462a1; color:
#fff; } .success-stories-grid-section .card-title a{ font-size: 24px; font-weight: 700; color: #1a1a1a; } .success-stories-grid-section .card-text { color: #000; font-size: 14px; line-height: 1.6; } .success-stories-grid-section .card-link { color: #3b82f6;
text-decoration: none; font-weight: 600; font-size: 14px; transition: color 0.3s ease; } .success-stories-grid-section .card-link:hover { color: #1e40af; } .success-stories-grid-section .card-link::after { content: ' →'; transition: transform 0.3s ease;
} .success-stories-grid-section .card-link:hover::after { transform: translateX(2px); } @media (max-width: 768px) { .success-stories-grid-section .main-title { font-size: 36px; } } @media (max-width: 480px) { .success-stories-grid-section { padding: 60px
0; } .success-stories-grid-section .main-title { font-size: 28px; } } .success-stories-grid-section .story-card .card-title{font-size:24px; font-weight:700; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow:
ellipsis; white-space: normal;} .contact-page .contact-image img{ display: block; width: 100%; height: 600px; border-radius: 12px; object-fit: cover; } .contact-page { gap:90px; } .contact-info .contact-card { background: #fff; padding: 50px 30px; /*
more vertical padding */ border-radius: 10px; box-shadow: 0px 4px 15px -2px #00000040; transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: 320px; /* makes cards taller */ display: flex; flex-direction: column; justify-content: center; }
.contact-info .contact-card:hover { transform: translateY(-5px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .contact-info .icon-wrap { width: 80px; height: 80px; margin: 0 auto 25px; background-color: #0A4C85; color: #fff; border-radius: 50%; display:
flex; align-items: center; justify-content: center; font-size: 32px; } .contact-info .contact-title { font-weight: 700; color: #0A4C85; margin-bottom: 12px; } .contact-info .contact-text { font-size: 0.95rem; color: #000; margin: 0; line-height: 1.6;
} @media(max-width:768px){ .contact-page .contact-image img{ height: auto; } } /* Image inside story cards */ .success-stories-grid-section .story-card .card-img-top { display: block; width: calc(100% - 40px); /* leave horizontal space */ margin: 20px
auto 0 auto; /* top + left/right spacing */ border-radius: 12px; /* rounded corners */ object-fit: cover; height: 200px; /* keep your set height */ } /* For tall full-height cards */ .success-stories-grid-section .story-card.h-100 .card-img-top { width:
calc(100% - 40px); margin: 20px auto 0 auto; border-radius: 12px; height: 450px; /* optional limit */ object-fit: cover; } /* Results Section */ .seo-results-section .seo-results-title { font-size: 2.5rem; line-height: 1.2; color: #000; } .seo-results-section
.seo-results-subtitle { font-size: 1.1rem; color: #333; } .seo-results-section .seo-results-text { font-size: 1rem; color: #555; line-height: 1.6; } .seo-results-section .seo-results-btn { background: #21b296; color: #fff; border-radius: 30px; padding:
12px 28px; font-weight: 600; transition: background 0.3s ease; } .seo-results-section .seo-results-btn:hover { background: #199e84; color: #fff; } .seo-results-title h2{font-size:44px;font-weight: 700;line-height:1.3;} .seo-results-section{padding:100px
20px;} .national-hero .navbar, .national-hero .hero-content{ position: relative; z-index: 2; } .seo-hero .navbar, .seo-hero .hero-content{ position: relative; z-index: 2; } .national-hero { height: 100vh; background-size: cover; background-position: center;
position: relative; display: flex; flex-direction: column; } .seo-hero{ height: 100vh; background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; } .national-hero::before, .seo-hero::before { content:
""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); /* overlay color & opacity */ z-index: 1; } .national-hero .cta-button, .seo-hero .cta-button { background: white; color: #333; padding: 12px 28px; border-radius:
30px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .national-hero .cta-button:hover, .seo-hero .cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px
rgba(0, 0, 0, 0.15); } /* SEO Hero Content */ .national-hero .hero-content, .seo-hero .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 50px; max-width: 1000px;
margin: 0 auto; } .national-hero .hero-title, .seo-hero .hero-title { font-size: 64px; font-weight: 700; color: white; line-height: 1.1; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .national-hero .seo-highlight, .seo-hero .seo-highlight
{ color: #9AFF00; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .national-hero .hero-subtitle, .seo-hero .hero-subtitle { font-size: 18px; color: white; line-height: 1.6; margin-bottom: 40px; opacity: 0.95; max-width: 700px; text-shadow: 1px 1px 2px
rgba(0, 0, 0, 0.3); } .national-hero .hero-cta, .seo-hero .hero-cta { background: #9AFF00; color: #333; padding: 16px 40px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 18px; transition: all 0.3s ease; box-shadow: 0 6px 20px
rgba(154, 255, 0, 0.3); text-transform: uppercase; letter-spacing: 1px; } .national-hero .hero-cta:hover, .seo-hero .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(154, 255, 0, 0.4); background: #8AE000; } .about-best-company
{ background: #fff; } .about-best-company-title { font-size: 44px; font-weight: 700; line-height: 1.3; max-width: 600px; margin: 0 auto; } .about-best-company-text { font-size: 16px; color: #333; line-height: 1.7; } .about-best-company-image img { border-radius:
12px; max-width: 100%; height: auto; object-fit: cover; } /* Responsive */ @media (max-width: 991px) { .about-best-company-title { font-size: 1.8rem; } } @media (max-width: 575px) { .about-best-company-title, .about-best-company-text { text-align: center;
} .about-best-company-image { text-align: center; margin-bottom: 20px; } .about-best-company-image img { max-width: 90%; } } .about-nominations { background: #fff; } .about-nominations-title { font-size: 44px; max-width: 900px; margin: 0 auto; font-weight:
700; line-height: 1.4; color: #000; } .about-nominations-card { background: #0a3d78; /* dark blue */ color: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); height: 100%; display: flex; align-items: center; } .about-nominations-card
p { margin: 0; font-size: 1rem; line-height: 1.6; padding: 22px; } /* Wrapper for max width */ .about-nominations-cards { max-width: 1100px; margin: 0 auto; } /* Responsive Tweaks */ @media (max-width: 991px) { .about-nominations-title { font-size: 1.7rem;
} } @media (max-width: 767px) { .about-nominations-title { font-size: 1.5rem; line-height: 1.3; } } @media (max-width: 575px) { .about-nominations-title { font-size: 1.3rem; } .about-nominations-card { padding: 1.2rem; text-align: center; } } .about-future
{ background: #054477; /* Dark blue background */ color: #fff; position: relative; overflow: hidden; padding: 90px 0px; } .about-future-year img { max-width: 270px; opacity: 1; /* faded effect */ position: absolute; top: 30px; left: 40px; z-index: 1;
} .about-future-main-img { position: relative; z-index: 2; } .about-future-main-img img { max-width: 100%; border-radius: 12px; display: block; margin: 0 auto; } /* Right Column BG */ .about-future-content { position: relative; z-index: 2; } .about-future-bg
{background-size: contain; padding: 20px; } .about-future-title { font-size: 44px; font-weight: 700; margin-bottom: 1rem; line-height:1.2; } .about-future-text { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; } /* Responsive */ @media (max-width: 991px) { .about-future-title
{ font-size: 1.6rem; } .about-future-year img { max-width: 150px; } .about-future-bg { background-position: top center; background-size: cover; padding: 15px; } } @media (max-width: 575px) { .about-future-title { font-size: 1.4rem; } .about-future-year
img { max-width: 120px; top: 10px; } } @media(max-width:768px){.national-hero .hero-subtitle, .seo-hero .hero-subtitle{font-size:16px;} .national-hero .hero-title, .seo-hero .hero-title{font-size:35px;}} .hire-agency-section .section-wrapper{ display:
flex;align-items: start; justify-content: space-between;gap: 4rem;} .hire-agency-section .content-left, .hire-agency-section .content-right { flex: 1;} @media (max-width: 768px){.hire-agency-section .section-wrapper {flex-direction: column;} .success-stories-grid-section
.main-title a{font-size:30px;}} .success-stories-grid-section .hidden {display: none !important; } /* Blog Single Hero Section */ .blog-single-hero { position: relative; width: 100%; overflow: hidden; } .blog-single-hero .hero-wrapper { position: relative;
width: 100%; height: 500px; /* adjust as needed */ } .blog-single-hero .hero-image { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-single-hero .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); /* dark
overlay */ } .blog-single-hero .hero-content { position: absolute; bottom: 25px; left: 130px; color: #fff; max-width: 70%; } .blog-single-hero .hero-title { font-size: 48px; font-weight: 700; margin: 0; line-height: 1.3; } /* ---- Blog Content ---- */
.blog-single-content { padding: 80px 0px; } .single .blog-single-content .content-wrapper h1, h2, h3, h4, h5, h6 { font-size: 24px; font-weight: 700; line-height: 2.3; } .blog-single-content .content-wrapper p { font-size: 16px; line-height: 1.7; } /*
---- Related Posts ---- */ .related-posts .blogs-section { padding: 30px 0px; background-color: #FBFBFB; } .related-posts-header { display: flex; justify-content: space-between; gap: 80px; align-items: start; padding: 30px 0px; } .related-posts-header
h2 { font-size: 39px; font-weight: 700; margin: 0; flex: 1; text-align: left; } .related-posts-header p { flex: 1; font-size: 24px; line-height: 1.2; margin: 0; text-align: left; } /* ---- Media Queries ---- */ @media (max-width: 768px) { .blog-single-hero
.hero-content { bottom: 90px; left: 30px; max-width: 70%; } .blog-single-hero .hero-title { font-size: 22px; } .blog-single-content { padding: 40px 10px; /* ✅ now this will apply */ } .blog-single-content .content-wrapper h1 { font-size: 20px; font-weight:
700; line-height: 1.6; padding: 10px 15px; } .blog-single-content .content-wrapper p { font-size: 16px; line-height: 1.7; padding: 10px 10px; } .related-posts-header { gap: 20px; flex-direction: column; padding: 30px 0px; } .related-posts-header h2 {
font-size: 25px; text-align: center; } .related-posts-header p { font-size: 18px; line-height: 1.5; text-align: center; } } .related-posts .blog-content h3{ font-size: 18px; font-weight: 600; margin-bottom: 10px; color: #000; line-height: 1.6; } @media(max-width:768px){
.blogs-swiper{ overflow:hidden; } .blog-single-content .content-wrapper h1, h2, h3, h4, h5, h6{line-height:1.3;}} .industry-single-hero { position: relative; width: 100%; overflow: hidden; } .industry-single-hero .hero-wrapper { position: relative; width:
100%; height: 100vh; } .industry-single-hero .hero-image { width: 100%; height: 100%; object-fit: cover; display: block; } .industry-single-hero .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); /* dark overlay */ } .industry-single-hero
.hero-content { position: absolute; bottom: 25px; left: 130px; color: #fff; max-width: 70%; } .industry-single-hero .hero-title { font-size: 48px; font-weight: 700; margin: 0; line-height: 1.3; } .industry-single-hero .hero-description { font-size: 16px;
line-height: 1.6; margin-top: 15px; color: #fff; } .industry-btn { background-color: #BCF43C; } .single-industry-content{ padding: 40px 0px; } .single-industry-content h1 { font-size: 36px; font-weight: 700; line-height: 1.6; } .single-industry-content
p { font-size: 16px; font-weight: 500; } .single-industry-content .industry-detail{ line-height: 1.6; padding: 20px 0px; } @media (max-width:768px){ .industry-single-hero .hero-title{ font-size: 35px; } .industry-single-hero .hero-content{ left: 30px;
} .industry-single-hero .hero-content{ max-width: 100%; } .single-industry-content h1{ font-size: 30px; line-height: 1.3; } .single-industry-content{ padding: 10px; } } @media(min-width:1025px){ .single-industry .conversion-focus .main-image{ height:600px;
} }