html,
body {
margin: 0;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
}
#scrollToTopBtn {
position: fixed;
bottom: 180px;
right: 20px;
background: linear-gradient(to right, #276ea2, #5f9d39);
color: white;
border: none;
padding: 12px 15px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
}
#scrollToTopBtn:hover {
background: #276ea2
}
html {
scroll-behavior: smooth;
}
@media (max-width: 480px) {
#scrollToTopBtn {
position: fixed;
bottom: 214px;
right: 11px;
background: #276ea2;
color: white;
border: none;
padding: 12px 15px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s ease-in-out;
}
}
@media (max-width: 768px) {
#scrollToTopBtn {
display: none;
}
}
.cursor {
position: fixed;
width: 10px;
height: 10px;
background: linear-gradient(to right, #276ea2, #5f9d39);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out;
z-index: 9999;
}
.top-header {
background-color: black;
color: white;
display: flex;
height: 45px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.icons {
color: #fff;
letter-spacing: .5px;
font-weight: 500;
}
.announcement {
margin-left: 33px;
letter-spacing: .5px;
font-weight: 500;
font-size: 16px;
}
.contact-info-index {
display: flex;
margin-left: 450px;
letter-spacing: .5px;
font-weight: 500;
gap: 15px;
}
.whatsapp-btn {
background: #5f9d39;
color: white;
margin-right: 70px;
padding: 7px 12px;
text-decoration: none;
letter-spacing: .5px;
font-weight: 500;
font-weight: bold;
}
.whatsapp-btn:hover {
background-color: #2a7b98;
}
@media (max-width: 768px) {
.top-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.contact-info-index {
flex-direction: row;
margin-top: 12px;
margin-left: -60px;
gap: 5px;
}
.whatsapp-btn {
margin-right: -86px;
margin-top: 7px;
width: 24%;
text-align: center;
}
.announcement {
display: none;
}
}
@media (max-width: 480px) {
.announcement {
display: none;
}
.whatsapp-btn {
width: 40%;
margin-left: -130px;
margin-top: 6px;
text-align: center;
}
.contact-info-index {
flex-direction: row;
margin-top: 14px;
gap: 14px;
margin-left: -36px;
}
}
.contact-info-index a {
text-decoration: none;
color: white;
font-size: 16px;
margin-left: 5px;
}
@media (max-width: 768px) {
.contact-info-index a {
font-size: 0;
display: inline-block;
}
.contact-info-index i {
font-size: 18px;
margin-right: 5px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--dark-grey: #333333;
--medium-grey: #636363;
--light-grey: #eeeeee;
--ash: #f4f4f4;
--primary-color: #2b72fb;
--white: white;
--border: 1px solid var(--light-grey);
--shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
body {
font-family: inherit;
background-color: var(--white);
color: var(--dark-grey);
letter-spacing: -0.4px;
}
.menu-bar {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
letter-spacing: .5px;
font-weight: 500;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
color: inherit;
letter-spacing: .5px;
font-weight: 500;
}
.btn {
display: block;
background-color: var(--primary-color);
color: var(--white);
text-align: center;
padding: 0.6rem 1.4rem;
font-size: 1rem;
border-radius: 5px;
letter-spacing: .5px;
font-weight: 500;
}
.icon {
padding: 0.5rem;
border-radius: 10px;
}
.logo {
margin-left: 60px;
margin-right: 1.5rem;
}
#nav-menu {
border-bottom: var(--border);
position: relative;
z-index: 1001;
}
.container-nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1600px;
margin: 0 auto;
margin-left: -72px;
column-gap: 2rem;
height: 90px;
padding: 1.2rem 3rem;
}
.menu {
position: relative;
display: grid;
margin-left: 70px;
background: var(--white);
}
.menu-bar li:first-child .dropdown {
flex-direction: initial;
min-width: 480px;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: var(--border);
}
.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
border-bottom: var(--border);
}
.menu-bar .dropdown-link-title {
letter-spacing: .5px;
font-weight: 500;
}
.menu-bar .nav-link {
font-size: 1rem;
font-weight: 500;
padding: 0.3rem;
letter-spacing: .5px;
min-width: 60px;
margin: 0 0.6rem;
}
.menu-bar .nav-link:hover,
.dropdown-link:hover {
color: var(--primary-color);
}
.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
display: flex;
align-items: center;
}
.dropdown {
display: flex;
flex-direction: column;
min-width: 230px;
background-color: var(--white);
border-radius: 10px;
position: absolute;
top: 36px;
z-index: 1;
visibility: hidden;
opacity: 0;
transform: scale(0.97) translateX(-5px);
transition: 0.1s ease-in-out;
box-shadow: var(--shadow);
}
.dropdown.active {
visibility: visible;
opacity: 1;
transform: scale(1) translateX(5px);
}
/* .dropdown ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.2rem;
letter-spacing: .5px;
font-weight: 500;
font-size: 0.95rem;
} */
.dropdown ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem 1.5rem;
padding: 1.2rem;
letter-spacing: .5px;
font-weight: 500;
font-size: 0.9em;
width: 100%;
min-width: 664px;
}
@media (max-width: 480px) {
.dropdown ul {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.5rem 1.5rem;
padding: 1.2rem;
letter-spacing: .5px;
font-weight: 500;
font-size: 0.95rem;
width: 100%;
min-width: 730px;
}
}
.dropdown-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.15rem;
}
.dropdown-link {
display: flex;
gap: 0.5rem;
padding: 0.5rem 0;
border-radius: 7px;
transition: 0.1s ease-in-out;
}
.dropdown-link p {
font-size: 0.8rem;
color: var(--medium-grey);
}
.right-container-nav {
display: flex;
align-items: center;
column-gap: 1rem;
}
.right-container-nav .search {
position: relative;
margin-left: -11px;
}
.right-container-nav img {
border-radius: 50%;
}
.search input {
background-color: var(--ash);
border: none;
border-radius: 6px;
padding: 0.7rem;
padding-left: 2.4rem;
font-size: 16px;
width: 100%;
border: var(--border);
}
.search .bx-search {
position: absolute;
left: 10px;
top: 50%;
font-size: 1.3rem;
transform: translateY(-50%);
opacity: 0.6;
}
#hamburger {
display: none;
padding: 0.1rem;
margin-left: 1rem;
font-size: 1.9rem;
}
@media (max-width: 1100px) {
#hamburger {
display: block;
}
.container {
padding: 1.2rem;
}
.menu {
display: none;
position: absolute;
top: 87px;
left: 0;
min-height: 100vh;
width: 100vw;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: none;
border-bottom: var(--border);
}
.dropdown {
display: none;
min-width: 100%;
border: none !important;
border-radius: 5px;
position: static;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
}
.menu.show,
.dropdown.active {
display: block;
margin-top: -3px;
margin-left: -2px;
}
.dropdown ul {
padding-left: 0.3rem;
}
.menu-bar {
display: flex;
flex-direction: column;
align-items: stretch;
row-gap: 1rem;
padding: 1rem;
}
.menu-bar .nav-link {
display: flex;
justify-content: space-between;
width: 100%;
font-weight: 600;
font-size: 1.2rem;
margin: 0;
}
.menu-bar li:first-child .dropdown {
min-width: 100%;
}
.menu-bar>li:not(:last-child) {
padding-bottom: 0.5rem;
border-bottom: var(--border);
}
}
@media (max-width: 600px) {
.right-container {
display: none;
}
.search input {
background-color: var(--ash);
border: none;
border-radius: 6px;
padding: 0.7rem;
padding-left: 60px;
font-size: 16px;
width: 100%;
border: var(--border);
}
}
.navbar-short {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-short {
width: 100%;
max-width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
.nav-links-short {
list-style: none;
display: flex;
}
.nav-links-short li {
margin: 0 15px;
}
.nav-links-short a {
text-decoration: none;
color: #333;
font-size: .8em;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.nav-links-short {
display: none;
flex-direction: column;
background: #f8f8f8;
width: 100%;
position: absolute;
top: 50px;
left: 0;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.nav-links-short.active {
display: flex;
}
}
.slider-container {
position: relative;
width: 100%;
height: 400px;
max-width: 100%;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.slider-container {
position: relative;
z-index: 1000;
}
.slider {
display: flex;
width: 100%;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide {
width: 100%;
flex-shrink: 0;
}
.slide img {
width: 100%;
height: 400px;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 24px;
border-radius: 50%;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 850px) {
.slider-container {
width: 100%;
}
}
@media (max-width: 768px) {
.slider-container {
width: 100%;
height: 290px;
}
.slide img {
width: 100%;
height: 290px;
}
}
@media (max-width: 480px) {
.slide img {
width: 100%;
height: 143px;
}
.slider-container {
width: 100%;
height: 142px;
}
}
.features-section {
background-color: #d3f07d;
padding: 15px 20px;
text-align: center;
}
.features-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
list-style: none;
margin: 0;
padding: 0;
}
.features-list li {
font-size: .9em;
color: black;
display: flex;
align-items: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
gap: 5px;
}
.features-list li::before {
content: "✱";
color: black;
font-size: 16px;
}
@media (max-width: 480px) {
.features-list li {
font-size: 14px;
}
.features-section {
background-color: #d3f07d;
padding: 15px 20px;
text-align: center;
}
}
.about-section {
margin-top: 43px;
}
.heading {
text-align: center;
margin-bottom: 40px;
}
.heading h1 {
font-size: 1.9em;
color: #333;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
.heading h1 span {
color: #2a7b98;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 480px) {
.heading h1 {
font-size: 1.3em;
color: #333;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
.heading p {
font-size: 1em;
color: #666;
margin-top: 10px;
text-align: justify;
margin-left: 25px;
margin-right: 25px;
}
}
.heading p {
font-size: .9em;
color: #666;
margin-top: 10px;
line-height: 1.6;
letter-spacing: .5px;
margin-left: 165px;
margin-right: 165px;
font-weight: 400;
}
.side {
margin-top: 200px;
}
.about-content {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.text-content {
flex: 1;
min-width: 300px;
max-width: 600px;
}
.text-content h2 {
font-size: 1.5em;
color: #333;
letter-spacing: .5px;
font-weight: 500;
margin-bottom: 10px;
}
.text-content h4 {
font-size: 1em;
color: #5f9d39;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.text-content p {
font-size: .9em;
color: #666;
text-align: justify;
margin-bottom: 15px;
line-height: 1.6;
letter-spacing: .5px;
font-weight: 500;
}
.highlight-box {
flex: 1;
min-width: 300px;
max-width: 400px;
color: #fff;
border-radius: 0px 50px 50px 0px;
padding: 20px;
}
.about {
width: 78%;
height: auto;
margin-left: 22px;
margin-top: -20px;
}
.highlight-box h4 {
font-size: 1.3em;
margin-bottom: 10px;
color: #ffffff;
letter-spacing: .5px;
font-weight: 500;
}
.highlight-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.highlight-box ul li {
font-size: 1em;
margin-bottom: 10px;
line-height: 1.6;
color: #fff;
letter-spacing: .5px;
font-weight: 500;
}
.highlight-box ul li:before {
content: "•";
color: #fff;
font-weight: bold;
margin-right: 8px;
}
@media (max-width: 768px) {
.about-content {
flex-direction: column;
align-items: center;
}
.text-content,
.highlight-box {
max-width: 100%;
}
.text-content p {
margin-left: 25px;
margin-right: 50px;
}
.heading p {
font-size: 1em;
color: #666;
margin-top: 10px;
text-align: justify;
margin-left: 25px;
margin-right: 25px;
}
.about {
width: 43%;
height: auto;
margin-left: 165px;
margin-top: 10px;
}
.highlight-box {
flex: 1;
background-color: #2a7b98;
color: #fff;
width: 80%;
margin-left: -140px;
border-radius: 0px 50px 50px 0px;
padding: 20px;
}
.text-content h2 {
font-size: 1.5em;
color: #333;
margin-left: 25px;
margin-bottom: 10px;
}
.text-content h4 {
font-size: 1em;
color: #5f9d39;
margin-left: 24px;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
}
@media (max-width: 480px) {
.about {
width: 68%;
height: auto;
margin-left: 29px;
margin-top: -3px;
}
.highlight-box {
flex: 1;
background-color: #2a7b98;
color: #fff;
width: 89%;
margin-left: -44px;
border-radius: 0px 50px 50px 0px;
padding: 20px;
}
.text-content p {
margin-left: 25px;
text-align: justify;
margin-right: 25px;
}
}
.services {
text-align: center;
padding: 50 px 20px;
background-color: #ffffff;
}
.services h2 {
font-size: 2em;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
.service-para {
font-size: 1em;
margin-bottom: 20px;
text-align: center;
margin-right: 140px;
margin-left: 140px;
letter-spacing: .5px;
font-weight: 500;
color: #666;
}
.service-container {
display: flex;
flex-wrap: wrap;
margin-top: 55px;
justify-content: center;
gap: 20px;
}
.ser {
color: #074799;
}
.service-item {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
height: 340px;
border-bottom-color: #2c8d46;
width: 400px;
text-align: center;
transition: transform 0.3s ease;
}
.service-item:hover {
transform: scale(1.05);
}
.service-item .icon img {
max-width: 100%;
height: auto;
width: 20%;
margin-bottom: 10px;
}
.service-item h3 {
font-size: 1.2em;
margin-bottom: 10px;
color: #333;
letter-spacing: .5px;
font-weight: 500;
}
.service-item p {
font-size: 0.9em;
color: #666;
margin-bottom: 20px;
letter-spacing: .5px;
text-align: justify;
font-weight: 500;
}
.service-item .btn {
display: none;
position: absolute;
bottom: 13px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: linear-gradient(to right, #276ea2, #5f9d39);
color: #fff;
text-decoration: none;
border-radius: 24px;
transition: background-color 0.3s ease;
}
.service-item:hover .btn {
display: block;
}
.service-item:hover {
background-color: #f4f4f4;
}
.service-item .btn:hover {
background-color: #074799;
}
.ser {
color: #074799;
}
.para {
margin-left: 50px;
}
@media (max-width: 768px) {
.service-container {
align-items: center;
}
.service-container {
display: flex;
flex-wrap: wrap;
width: 110%;
margin-top: 55px;
justify-content: center;
gap: 40px;
}
.service-container-3 {
margin-top: 38px;
margin-left: 450px;
cursor: pointer;
}
.services h2 {
font-size: 2em;
margin-top: 65px;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 29px;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
.service-para {
font-size: 1em;
margin-bottom: 20px;
text-align: justify;
margin-right: 30px;
margin-left: 30px;
letter-spacing: .5px;
font-weight: 500;
color: #666;
}
.service-item {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
height: 438px;
border-bottom-color: #2c8d46;
width: 39%;
margin-left: -30px;
text-align: center;
margin-right: 41px;
transition: transform 0.3sease;
}
}
@media (max-width: 480px) {
.service-container {
flex-direction: column;
align-items: center;
margin-left: -6px;
}
.services {
text-align: center;
padding: 50px 20px;
margin-top: -70px;
background-color: #ffffff;
}
.service-line {
text-align: justify;
color: #222;
}
.service-container-3 {
margin-top: 38px;
margin-left: 585px;
cursor: pointer;
}
.service-item {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 85%;
height: 390px;
margin-left: 15px;
text-align: center;
transition: transform 0.1s ease;
}
.service-item p {
font-size: 0.9em;
color: #666;
text-align: justify;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
}
.services {
text-align: center;
padding: 50px 20px;
margin-top: -22px;
background-color: #ffffff;
}
.service-para {
font-size: 1em;
margin-bottom: 20px;
text-align: justify;
margin-right: 0px;
margin-left: 0px;
letter-spacing: .5px;
font-weight: 500;
color: #666;
}
.services h2 {
font-size: 1.3em;
margin-right: -21px;
margin-left: -21px;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
}
.container-testi {
max-width: 1100px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.testimonial-section {
padding: 50px 20px;
background: #fff;
border-radius: 10px;
}
.testimonial-header h3 {
font-size: 1.9em;
color: #074799;
letter-spacing: .5px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 10px;
}
.testimonial-header h2 {
font-size: 1.2rem;
margin-bottom: 20px;
color: black;
letter-spacing: .5px;
font-weight: 500;
}
.testimonial-slider {
position: relative;
}
.avatar-list {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.avatar-list img {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 10px;
opacity: 0.6;
transition: 0.1s;
}
.avatar-list img.active {
opacity: 1;
border: 2px solid #a3e635;
}
.testimonial-content p {
font-size: 1rem;
margin: 20px 0;
color: #666;
letter-spacing: .5px;
font-weight: 500;
}
.testimonial-content h4 {
font-size: 1.5rem;
margin-top: 10px;
letter-spacing: .5px;
font-weight: 500;
color: #2a7b98;
}
.testimonial-content span {
font-size: 1rem;
color: grey;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.slider-controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
.prev-btn,
.next-btn {
background: #333333;
color: #ffffff;
border: none;
padding: 10px 15px;
margin: 0 10px;
cursor: pointer;
border-radius: 50%;
font-size: 1.5rem;
opacity: 0.8;
transition: 0.3s;
}
.prev-btn:hover,
.next-btn:hover {
opacity: 1;
}
@media (max-width: 768px) {
.testimonial-header h2 {
font-size: 1.5rem;
}
.testimonial-content p {
font-size: 1rem;
}
.testimonial-content h4 {
font-size: 1.2rem;
}
}
.why-choose {
max-width: 1200px;
margin: auto;
margin-top: 24px;
margin-bottom: 0px;
padding: 20px;
}
.why-choose h2 {
text-align: center;
font-size: 1.7em;
letter-spacing: .5px;
color: #2a7b98;
font-weight: 500;
}
.why-choose p {
color: #666;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1em;
line-height: 20px;
margin-right: 70px;
margin-left: 70px;
letter-spacing: .5px;
font-weight: 500;
}
.grid-why {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 50px;
}
.box-why {
padding: 15px;
background: #f8f9fa;
border-left: 5px solid #5f9d39;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: .5px;
font-weight: 500;
}
.box-why strong {
color: #2a7b98;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.grid-why {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.why-choose p {
color: #666;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1em;
line-height: 20px;
margin-right: 4px;
text-align: justify;
margin-left: 3px;
letter-spacing: .5px;
font-weight: 500;
}
.why-choose h2 {
text-align: left;
font-size: 1.3em;
letter-spacing: .5px;
color: #2a7b98;
font-weight: 500;
}
}
.work-process-color {
color: #5f9d39;
}
.ranking {
display: flex;
flex-direction: column;
align-items: center;
height: 280px;
justify-content: center;
background: #eef7ff;
padding: 40px 20px;
text-align: center;
}
.ranking h3 {
font-size: 2em;
color: #333;
margin-left: 106px;
letter-spacing: .5px;
font-weight: 500;
}
.ranking h3 span {
color: #5f9d39;
font-weight: bold;
letter-spacing: .5px;
font-weight: 500;
}
.ranking-para {
font-size: 1.1em;
margin-left: 100px;
color: black;
margin-top: 15px;
letter-spacing: .5px;
font-weight: 500;
}
.ranking p span {
color: #2a7b98;
font-weight: bold;
}
.input-group {
margin-top: 20px;
display: flex;
width: 100%;
margin-left: 100px;
max-width: 490px;
border-radius: 25px;
overflow: hidden;
background: white;
border: 1px solid #ccc;
}
.input-group input {
flex: 1;
padding: 10px;
border: none;
letter-spacing: .5px;
font-weight: 500;
outline: none;
}
.input-group button {
background: #5f9d39;
color: white;
padding: 10px 20px;
border: none;
border-radius: 24px;
cursor: pointer;
width: 35%;
letter-spacing: .5px;
font-weight: 500;
}
.illustration {
margin-top: 20px;
width: 47%;
margin-left: 50px;
margin-right: 90px;
max-width: 270px;
}
@media (min-width: 768px) {
.ranking {
flex-direction: row;
text-align: left;
padding: 60px 40px;
}
.text-content-ranking {
flex: 1;
}
.illustration {
margin-top: 20px;
width: 34%;
margin-left: 122px;
max-width: 270px;
}
}
@media (max-width: 480px) {
.ranking {
display: flex;
flex-direction: column;
align-items: center;
height: 260px;
justify-content: center;
background: #eef7ff;
padding: 40px 20px;
text-align: center;
}
.illustration {
display: none;
}
.ranking h3 {
font-size: 1em;
color: #333;
margin-left: 10px;
text-align: center;
letter-spacing: .5px;
font-weight: 400;
}
.ranking-para {
font-size: 1em;
margin-left: 7px;
color: black;
text-align: center;
letter-spacing: .5px;
font-weight: 400;
}
.input-group {
height: 50px;
margin-top: 20px;
display: flex;
width: 93%;
margin-left: 20px;
max-width: 480px;
border-radius: 25px;
overflow: hidden;
background: white;
border: 1px solid #ccc;
}
}
.container-blog {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blogs,
.latest-news {
width: 48%;
margin-right: 25px;
}
.blogs h3 {
margin-bottom: 15px;
color: #5f9d39;
font-size: 1.7em;
text-align: center;
margin-top: 45px;
letter-spacing: .5px;
font-weight: 500;
}
.latest-news h3 {
margin-bottom: 15px;
color: #5f9d39;
font-size: 1.7em;
text-align: center;
margin-top: 45px;
letter-spacing: .5px;
font-weight: 500;
}
.blog-item {
display: flex;
align-items: center;
background: #fff;
margin-bottom: 10px;
padding: 10px;
margin-left: 40px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.blog-item img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.blog-content {
display: flex;
align-items: center;
}
.blog-content .icon {
font-size: 20px;
margin-right: 5px;
}
.blog-content a {
text-decoration: none;
color: #2a7b98;
font-weight: bold;
letter-spacing: .5px;
font-weight: 500;
}
.latest-news .news-item {
background: #4caf50;
color: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.news-item .date {
display: block;
font-size: 12px;
margin-top: 5px;
}
@media (max-width: 768px) {
.container-blog {
flex-direction: column;
}
.blogs,
.latest-news {
width: 92%;
margin-left: 20px;
}
}
@media (max-width: 480px) {
.blogs,
.latest-news {
margin-left: -22px;
margin-right: 49px;
}
.latest-news {
display: none;
}
}
.latest-work {
text-align: center;
padding: 40px 20px;
}
.latest-work h3 {
color: #2a7b98;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1.9em;
line-height: 20px;
letter-spacing: .5px;
font-weight: 500;
}
.para-work {
color: #666;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1em;
line-height: 20px;
margin-right: 70px;
margin-left: 70px;
letter-spacing: .5px;
font-weight: 500;
}
.work-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1280px;
margin: 0 auto;
}
.work-item {
position: relative;
width: 30%;
height: 220px;
overflow: hidden;
border: 1px solid #fff;
border-radius: 0px;
}
.work-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
}
.work-item:hover img {
filter: grayscale(0%);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 1.2em;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.work-item:hover .overlay {
opacity: 1;
}
@media (max-width: 768px) {
.work-container {
flex-direction: column;
align-items: center;
}
.work-item {
width: 100%;
}
}
@media (max-width: 480px) {
.para-work {
color: #666;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1em;
line-height: 20px;
margin-right: -5px;
margin-left: -5px;
text-align: justify;
letter-spacing: .5px;
font-weight: 500;
}
.latest-work h3 {
text-align: left;
color: #2a7b98;
margin-bottom: 45px;
margin-top: 15px;
font-size: 1.3em;
line-height: 20px;
letter-spacing: .5px;
font-weight: 500;
}
}
.contact-section-contact {
background: url(/assets/image/hand.avif) no-repeat center center / cover;
padding: 28px 0;
color: white;
position: relative;
}
.contact-section-contact::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.contact-info-contact {
position: relative;
z-index: 2;
margin-left: 90px;
width: 50%;
padding: 20px;
}
.contact-info-contact h2 {
font-size: 1.7em;
letter-spacing: .5px;
font-weight: 500;
}
.contact-info-contact p {
margin-bottom: 17px;
letter-spacing: .5px;
margin-left: -2px;
MARGIN-TOP: 28px;
font-weight: 500;
}
.contact-form-contact {
background: rgba(0, 0, 0, 0.6);
padding: 30px;
width: 440px;
margin-left: 800px;
margin-top: -428px;
border-radius: 10px;
position: relative;
letter-spacing: .5px;
font-weight: 500;
z-index: 2;
}
.contact-form-contact h2 {
font-weight: 600;
color: white;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
}
.contact-form-contact .form-control,
.contact-form .form-select {
border-radius: 5px;
box-shadow: none;
width: 100%;
}
.contact-form-contact .btn-success {
border: none;
padding: 10px;
font-weight: bold;
letter-spacing: .5px;
font-weight: 500;
transition: 0.3s;
}
.social-icons-contact-us a {
font-size: 1.8em;
transition: 0.3s;
letter-spacing: 9.5px;
font-weight: 500;
color: white;
}
.social-icons-contact-us a:hover {
color: white;
font-size: 2em;
}
.select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 9px;
font-size: 16px;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.contact-section-contact {
padding: 50px 0;
}
.contact-form-contact {
background: rgba(0, 0, 0, 0.6);
padding: 30px;
width: 718px;
margin-left: 1px;
margin-top: -10px;
border-radius: 10px;
position: relative;
letter-spacing: .5px;
font-weight: 500;
z-index: 2;
}
}
@media (max-width: 480px) {
.contact-form-contact {
background: rgba(0, 0, 0, 0.6);
padding: 30px;
width: 107%;
margin-bottom: -25px;
margin-left: -13px;
margin-top: -6px;
border-radius: 10px;
position: relative;
letter-spacing: .5px;
font-weight: 500;
z-index: 2;
}
.contact-info-contact {
position: relative;
z-index: 2;
margin-left: 5px;
width: 100%;
padding: 15px;
}
.contact-info-contact p {
margin-bottom: 17px;
letter-spacing: .5px;
margin-left: -2px;
MARGIN-TOP: 14px;
font-weight: 500;
}
}
.chat-container {
position: fixed;
bottom: 85px;
right: -22px;
display: flex;
flex-direction: column;
align-items: center;
}
.chat-image {
width: 103px;
height: auto;
margin-right: 26px;
margin-bottom: -40px;
}
.chat-button {
width: 60px;
height: 60px;
background-color: #25D366;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chat-button i {
font-size: 30px;
color: white;
}
.chat-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.chat-image {
display: none;
}
.chat-button {
width: 56px;
height: 50px;
margin-right: -345px;
margin-bottom: 14px;
}
.chat-button i {
font-size: 24px;
}
}
@media (max-width: 480px) {
.chat-container {
position: fixed;
bottom: 88px;
left: 525px;
display: flex;
flex-direction: column;
align-items: center;
}
.chat-image {
width: 93px;
height: auto;
margin-bottom: -30px;
}
}
.top-banner {
background: linear-gradient(to right, #2a7b98, #2c8d46);
color: white;
text-align: center;
padding: 15px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.banner-text-last {
font-size: 18px;
font-weight: 500;
margin-left: 100px;
margin-bottom: 0px;
line-height: 20px;
letter-spacing: .5px;
}
.quote-btn {
color: #fff;
border: 1px solid #fff;
margin-right: 370px;
line-height: 20px;
padding: 10px 20px;
letter-spacing: .5px;
font-size: .9em;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
transition: 0.1s ease;
}
.quote-btn:hover {
background: #fff;
line-height: 20px;
letter-spacing: .5px;
color: black;
}
.close-btn {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: white;
cursor: pointer;
font-size: 18px;
transition: 0.3s ease;
}
@media (max-width: 768px) {
.top-banner {
flex-direction: column;
text-align: center;
padding: 10px;
}
.quote-btn {
color: #fff;
border: 1px solid #fff;
margin-right: 0px;
line-height: 20px;
padding: 10px 20px;
letter-spacing: .5px;
font-size: .9em;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
transition: 0.1s ease;
}
.close-btn {
left: auto;
right: 10px;
}
}
@media (max-width: 480px) {
.banner-text-last {
font-size: 1em;
font-weight: 500;
margin-left: 0px;
margin-bottom: 0px;
line-height: 20px;
letter-spacing: .5px;
}
.quote-btn {
color: #fff;
border: 1px solid #fff;
margin-right: 15px;
line-height: 20px;
padding: 5px 23px;
letter-spacing: .5px;
margin-top: 10px;
font-size: .9em;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
transition: 0.1s ease;
}
.close-btn {
position: absolute;
left: 15px;
margin-right: 89%;
top: 72%;
transform: translateY(-50%);
color: white;
cursor: pointer;
font-size: 18px;
transition: 0.3s ease;
}
}
.banner-container-about {
position: relative;
width: 100%;
height: 50vh;
overflow: hidden;
}
.banner-container-about img {
width: 100%;
height: 100%;
object-fit: cover;
}
.navbar-short {
background-color: white;
padding: 10px 20px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
}
.nav-links-short {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
}
.nav-links-short li {
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.nav-links-short li a {
color: black;
font-size: 1em;
letter-spacing: .5px;
font-weight: 500;
}
.nav-links-short li a:hover {
color: #276ea2;
}
.nav-links-short i {
font-size: 23px;
color: #5f9d39;
}
@media (max-width: 768px) {
.navbar-short {
display: none;
}
.nav-links-short {
display: none;
}
.banner-container-about {
position: relative;
width: 100%;
height: 16vh;
overflow: hidden;
}
}
@media (max-width: 480px) {
.navbar-short {
display: none;
}
.banner-container-about {
position: relative;
width: 112%;
height: 15vh;
overflow: hidden;
}
}
.about-company {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 50px auto;
margin-top: 0px;
padding: 20px;
border-radius: 8px;
}
.text-content {
flex: 1;
padding-right: 20px;
}
.who {
font-size: 1.5rem;
letter-spacing: .5px;
font-weight: 500;
color: #333;
}
.divider {
width: 60px;
height: 4px;
background-color: #5f9d39;
margin: 20px 0;
}
.description,
.details,
.extra {
font-size: 1.1rem;
margin-bottom: 15px;
}
.image-content {
flex: 1;
text-align: center;
}
.image-content img {
max-width: 90%;
height: auto;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.about-company {
flex-direction: column;
text-align: center;
}
.text-content {
padding-right: 0;
}
.image-content {
margin-top: 20px;
}
.image-content img {
max-width: 70%;
height: auto;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.divider {
display: none;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5rem;
}
.description,
.details,
.extra {
font-size: 0.9rem;
}
.divider {
display: none;
}
}
.section {
background: #1a2a39;
color: white;
padding: 50px 20px;
background-image: url(/assets/image/About-Best-Background-Image.webp);
height: 380px;
text-align: center;
}
.section h2 {
font-size: 1.5em;
margin-top: 90px;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.section p {
font-size: .9em;
margin-bottom: 30px;
margin-left: 300px;
text-align: justify;
margin-right: 300px;
letter-spacing: .5px;
font-weight: 500;
}
.cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: -115px;
}
.card {
background: white;
color: #333;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
max-width: 250px;
flex: 1;
}
.card img {
max-width: 60px;
margin-bottom: 15px;
}
.card:hover {
background-color: rgb(192, 245, 190);
}
.card h3 {
font-size: 0.9em;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.card p {
font-size: .8em;
line-height: 1.6;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.cards {
flex-direction: column;
gap: 20px;
}
.section {
background: #1a2a39;
color: white;
padding: 50px 20px;
background-image: url(/assets/image/About-Best-Background-Image.webp);
height: 285px;
text-align: center;
}
.card {
margin-left: 35px;
max-width: 84%;
}
.section h2 {
font-size: 1.5em;
margin-top: 22px;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.section p {
font-size: .9em;
margin-bottom: 30px;
text-align: center;
margin-left: 20px;
letter-spacing: .5px;
margin-right: 20px;
font-weight: 500;
}
}
@media (max-width: 480px) {
.section h2 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.section p {
font-size: .9em;
margin-bottom: 20px;
margin-left: 40px;
text-align: justify;
margin-top: 25px;
margin-right: 42px;
letter-spacing: .5px;
font-weight: 500;
}
.section {
background: #1a2a39;
color: white;
padding: 50px 20px;
background-image: url(/assets/image/About-Best-Background-Image.webp);
width: 100%;
height: 380px;
text-align: center;
}
}
.container-goals {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.image-section-goals {
flex: 1 1 45%;
text-align: center;
padding: 20px;
}
.image-section-goals img {
max-width: 100%;
height: auto;
}
.text-section-goals {
flex: 1 1 50%;
padding: 20px;
}
.text-section-goals h2 {
font-size: 1.4em;
color: black;
margin-bottom: 10px;
letter-spacing: .5px;
font-weight: 500;
}
.text-section-goals h1 {
font-size: 1rem;
color: #222;
letter-spacing: .5px;
font-weight: 500;
margin-bottom: 20px;
}
.text-section-goals p {
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
color: #555;
}
.bullet-points {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.bullet {
flex: 1 1 45%;
background-color: #f4f4f4;
padding: 15px;
border-left: 5px solid #5f9d39;
border-radius: 5px;
}
.bullet h4 {
margin-bottom: 10px;
font-size: 1em;
color: #222;
letter-spacing: .5px;
font-weight: 500;
}
.bullet p {
font-size: 0.9rem;
color: #555;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.container-goals {
flex-direction: column;
text-align: center;
}
.text-section,
.image-section-goals {
display: none;
}
.bullet {
flex: 1 1 100%;
}
}
.process h2 {
text-align: center;
color: #333;
letter-spacing: .5px;
font-weight: 500;
}
.icon {
font-size: 50px;
color: #3498db;
transition: transform 0.3s ease-in-out;
}
.icon:hover {
transform: rotate(360deg);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spin-animation {
animation: spin 2s linear infinite;
}
.process-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 50px;
padding: 50px 20px;
}
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
width: 135px;
position: relative;
}
.process-step::after {
content: "";
position: absolute;
width: 92px;
height: 3px;
background-color: #5f9d39;
top: 40%;
left: 84%;
}
.process-step:last-child::after {
display: none;
}
.step-icon {
background: #276ea2;
color: white;
font-size: 20px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 10px;
}
.step-title {
font-weight: bold;
color: black;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.process-container {
gap: 30px;
}
.process-step::after {
display: none;
}
}
.team-section {
text-align: center;
padding: 50px;
background-color: #f9f9f9;
}
.team-section h2 {
font-size: 1em;
letter-spacing: .5px;
font-weight: 500;
margin-bottom: 10px;
}
.team-section p {
color: #666;
letter-spacing: .5px;
font-weight: 500;
margin-bottom: 30px;
}
.team-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.team-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(25% - 20px);
min-width: 200px;
text-align: center;
padding: 20px;
transition: transform 0.1s ease;
}
.team-card:hover {
transform: translateY(-10px);
}
.team-card img {
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
margin-bottom: 15px;
}
.team-card h3 {
font-size: 1.2em;
margin-bottom: 5px;
letter-spacing: .5px;
font-weight: 500;
}
.team-card span {
display: block;
font-size: 0.9em;
color: #888;
margin-bottom: 15px;
letter-spacing: .5px;
font-weight: 500;
}
.team-card .social-icons {
display: flex;
justify-content: center;
gap: 10px;
}
.team-card .social-icons a {
color: #555;
text-decoration: none;
font-size: 1.2em;
transition: color 0.3s ease;
letter-spacing: .5px;
font-weight: 500;
}
.team-card .social-icons a:hover {
color: #007BFF;
}
@media (max-width: 1024px) {
.team-card {
width: calc(33.33% - 20px);
}
}
@media (max-width: 768px) {
.team-card {
width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.team-card {
width: 100%;
}
}
.last-div {
background: linear-gradient(to right, #276ea2, #5f9d39);
color: white;
text-align: center;
padding: 20px;
width: 100%;
}
.last-div h2 {
margin: 0;
font-size: 24px;
letter-spacing: .5px;
font-weight: 500;
}
.last-div p {
margin: 5px 0 0;
font-size: 16px;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.last-div h2 {
font-size: 20px;
}
.last-div p {
font-size: 14px;
}
}
.banner-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner-container video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
@media (max-width: 480px) {
.banner-text {
font-size: 1em;
}
.banner-container video {
position: absolute;
top: 21%;
left: 50%;
transform: translate(-50%, -50%);
min-width: -1%;
min-height: 20%;
object-fit: cover;
}
video {
object-fit: cover;
width: 100%;
height: 39%;
position: absolute;
top: 0;
left: 0;
}
}
.social-icons-fixed {
position: fixed;
top: 65%;
bottom: -46%;
left: 10px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.social-icons-fixed a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 20px;
text-decoration: none;
transition: all 0.3s ease-in-out;
color: #fff;
}
.social-icons-fixed a:nth-child(1) {
background: #1877F2;
}
.social-icons-fixed a:nth-child(2) {
background: #E4405F;
}
.social-icons-fixed a:nth-child(3) {
background: #0077B5;
}
.social-icons-fixed a:hover {
transform: scale(1.2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.banner-text p {
margin-left: 30px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #276ea2, #5f9d39);
border-radius: 15px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.testimonial-slider {
position: relative;
overflow: hidden;
}
.testimonial {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.testimonial img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
}
.testimonial-section h3 {
text-align: center;
font-size: 2em;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 55px;
color: #2a7b98;
}
@media (max-width: 480px) {
.testimonial-section h3 {
text-align: center;
font-size: 1.3em;
margin-bottom: 20px;
letter-spacing: .5px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 55px;
color: #2a7b98;
}
}
.testimonial p {
font-size: 16px;
color: #555;
font-style: italic;
margin-bottom: 10px;
}
.swiper-horizontal {
touch-action: pan-y;
width: 85%;
}
.stars {
color: gold;
font-size: 18px;
margin-bottom: 10px;
}
h4 {
font-size: 18px;
color: #222;
margin: 5px 0;
}
.swiper-button-next,
.swiper-button-prev {
color: #276ea2 !important;
}
.swiper-pagination-bullet {
background: #276ea2 !important;
}
.responsive-section-2 {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 20px;
align-items: center;
justify-content: center;
}
.content-2 {
flex: 1 1 45%;
margin-top: 40px;
margin-left: 60px;
max-width: 600px;
}
.illustration-2 {
flex: 1 1 45%;
text-align: center;
}
.illustration-2 img {
max-width: 100%;
width: 55%;
margin-top: 30px;
height: auto;
}
.hub {
color: #2a7b98;
letter-spacing: .5px;
font-weight: 500;
font-size: 1.5em;
margin-bottom: 10px;
}
.accordion-2 {
margin-top: 20px;
width: 650px;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 768px) {
.accordion-2 {
margin-top: 20px;
width: 90%;
letter-spacing: .5px;
font-weight: 500;
}
}
.accordion-item-2 {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.accordion-button-2 {
width: 100%;
background: #f7f7f7;
border: none;
padding: 10px;
color: black;
font-size: 16px;
text-align: left;
cursor: pointer;
outline: none;
letter-spacing: .5px;
font-weight: 500;
}
.accordion-content-2 {
display: none;
padding: 10px;
background: #fff;
border-top: 1px solid #ddd;
letter-spacing: .5px;
font-weight: 500;
}
@media (max-width: 480px) {
.responsive-section-2 {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 20px;
margin-left: -5px;
align-items: center;
justify-content: center;
}
.hub {
color: #2a7b98;
letter-spacing: .5px;
font-weight: 500;
font-size: 1em;
margin-left: 107px;
margin-bottom: 10px;
}
.faq-paragraph {
margin-left: 101px;
font-size: .9em;
width: 50%;
}
.accordion-2 {
margin-top: 20px;
width: 507px;
margin-left: 93px;
letter-spacing: .5px;
font-weight: 500;
}
.accordion-item-2 {
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
width: 65%;
}
.illustration-2 img {
max-width: 100%;
width: 88%;
margin-top: -10px;
height: auto;
}
}
.ranking {
display: flex;
align-items: center;
}
.text-content-ranking {
margin-right: 20px;
}
.input-group {
display: flex;
}
.input-group input {
padding: 10px;
font-size: .9em;
}
.input-group button {
padding: 10px 24px;
font-size: 1em;
cursor: pointer;
margin-top: 0px;
margin-right: 0px;
}
.seo-section {
max-width: 90%;
margin: auto;
padding: 28px;
flex-wrap: wrap;
}
.seo-section h3 {
font-size: 1.2em;
margin-bottom: 15px;
font-weight: 400;
color: #222;
}
.seo-section .intro {
font-weight: 400;
font-size: .9em;
line-height: 1.6;
margin-bottom: 25px;
color: #444;
}
@media (max-width: 480px) {
.seo-section .intro {
font-weight: 400;
font-size: .9em;
text-align: justify;
line-height: 1.6;
margin-bottom: 25px;
color: #444;
}
.seo-box p {
font-weight: 400;
margin: 0;
text-align: justify;
font-size: .9em;
line-height: 1.6;
color: #555;
}
.input-group button {
padding: 10px 24px;
font-size: 1em;
cursor: pointer;
margin-top: 0px;
margin-right: 5px;
}
}
.seo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.seo-box {
display: flex;
align-items: flex-start;
gap: 10px;
}
.check {
color: #2a7b98;
font-size: 18px;
margin-top: 4px;
}
.seo-box p {
font-weight: 400;
margin: 0;
font-size: .9em;
line-height: 1.6;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
.seo-grid {
grid-template-columns: 1fr;
}
}
.service-section-link {
padding: 21px 21px;
background: linear-gradient(to right, #bbddf7, #c8ecb1);
margin: 28px 51px;
border-radius: 12px;
border: 1px solid #e0e0e0;
max-width: 90%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.service-container-link h3 {
font-size: 1em;
font-weight: 400;
color: #222;
margin-bottom: 12px;
position: relative;
}
.service-container-link h3::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 40px;
height: 3px;
background: #0073e6;
border-radius: 3px;
}
.service-container-link p {
font-size: 16px;
line-height: 1.6;
color: #555;
}
.service-container-link strong {
color: #000;
font-weight: 400;
}
.service-container-link a {
color: #0073e6;
font-weight: 400;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px dashed #0073e6;
padding-bottom: 2px;
}
.service-container-link a:hover {
color: #005bb5;
border-bottom: 1px solid #005bb5;
}
@media (max-width: 480px) {
.service-section-link {
padding: 21px 21px;
background: linear-gradient(to right, #bbddf7, #c8ecb1);
margin: 28px 17px;
border-radius: 12px;
border: 1px solid #e0e0e0;
max-width: 90%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
}
.about-h {
position: relative;
background: url('/assets/image/port.webp') no-repeat center center/cover;
height: 300px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.about-h h1 {
font-size: 2rem;
margin: 3px;
margin-left: 663px;
text-align: left;
color: white;
letter-spacing: .5px;
font-weight: 400;
}
.about-h p {
font-size: .9em;
margin: 10px 0;
max-width: 600px;
text-align: justify;
margin-right: -615px;
line-height: 1.5;
letter-spacing: .5px;
font-weight: 400;
}
.about-h button {
background-color: white;
color: black;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
margin-top: 9px;
margin-left: 95px;
border-radius: 24px;
letter-spacing: .5px;
font-weight: 500;
transition: background-color 0.3s;
}
.about-h button:hover {
background: linear-gradient(to right, #276ea2, #5f9d39);
color: #f7f7f7;
}
@media screen and (max-width: 768px) {
.about-h h1 {
font-size: 2rem;
margin-left: 310px;
}
.about-h p {
display: none;
}
.about-h button {
font-size: 0.9rem;
margin-left: -624px;
padding: 8px 15px;
}
}
@media screen and (max-width: 480px) {
.about-h {
position: relative;
height: 145px;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.about-h p {
display: none;
letter-spacing: .5px;
font-weight: 500;
}
.about-h h1 {
font-size: 1.3em;
margin-left: 132px;
margin-top: 15px;
letter-spacing: .5px;
font-weight: 500;
}
.about-h button {
font-size: 0.9rem;
margin-left: 135px;
padding: 8px 15px;
letter-spacing: .5px;
font-weight: 500;
}
}
.swiper-pagination {
bottom: 15px !important;
}
.swiper-pagination-bullet {
width: 14px;
height: 14px;
background: #aaa;
opacity: 1;
margin: 0 10px !important;
position: relative;
}
.swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.swiper-pagination-bullet-active {
background: #0086f8;
}