/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",
"Anek Telugu";

--font-primary: "Jost", sans-serif;
--font-secondary: "Poppins", sans-serif;
--font-intro: "UltraLight", sans-serif; /* Kanit */

--font-title: "", sans-serif;
--font-subtitle: "", sans-serif; /* Kanit */
--font-body: "", sans-serif;
--font-icon: "", sans-serif;

}

/* Colors */
:root {

--color-default: #;
--color-primary: #; /* #811900; */
--color-secondary: #;
--color-tertiary: #;

--color-title: #;
--color-subtitle: #; /* #811900; */
--color-body: #;
--color-icon: #;

--color-article: #222d57;
--color-scarlet: #da1a32;
--color-lighter-background: #f8f8f9;
--color-white: #fff;
--color-peach: #e0daf1;
--color-brown: #f4ede4; /* #f8fafc */
--color-darkgray: #d0d0d0;
--color-gray: #f8f8f9;
--color-seablue: #f2f8ff;
--color-yellow: #ffdb70;
--color-lightyellow: #ffdb70;
--color-dark-violet: #10041a;
--color-dark: #10041a;

--color-hover-link: #0088e4;
--color-text: #0088e4;
--color-topic: #0088e4;
--color-icons: #0088e4;
--color-tag: #ffdb70;

}



#style_me {
font-style: Sarabun !important;
font-size: 1.1rem;
font-weight: 500;
color: #2e3192;
}






/* Smooth scroll behavior */
:root {
scroll-behavior: smooth;
}

body {
overflow-x: hidden !important; /* Disables horizontal scroll */
color: var(--color-primary);
}









/* ------------------------------------------------------------------
Intro Video
------------------------------------------------------------------ */


.thumbnail {
width: 100%;
display: block;
border-radius: 10px;
position: relative;
}


.play-button {
position: absolute;
top: 72%;
left: 75%;
border: 3px solid white;
box-shadow: rgba(38, 57, 77, 0.85) 0px 20px 30px -10px;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background-color:rgb(225, 5, 5);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
}

.play-button::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(54, 71, 227, 0.3);
animation: pulse 1.5s infinite ease-in-out;
z-index: -1;
}

.close-btn:hover {
color: yellow;
}

.play-button:hover {
background: var(--color-primary);
}

.play-button svg {
fill: white;
width: 24px;
height: 24px;
}

@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* Prevent background scroll when popup is open */
body.popup-open {
overflow: hidden;
}

@media (max-width: 768px) {
.play-button {
top: 88%;
left: 47%;
}

#about video {
width: 95% !important;
justify-content: center;
}

}


.close-btn {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
font-weight: bold;
}





@media screen and (max-width: 1300px) and (min-width: 1030px) {
.play-button::before, .play-button {
margin-top: -7rem;
}
}

/* ------------------------------------------------------------------
This div is to maintain consistence across the pages
------------------------------------------------------------------ */
#space-div {
height: 3rem !important;
}

@media (max-width: 768px) {
#space-div {
height: 2rem !important;
}
}
/* ------------------------------------------------------------------
animate country flags
------------------------------------------------------------------ */

.hidden-right {
opacity: 0;
filter: blur(5px);
transform: translate(30%);
transition: all 1s;
}

.hidden-left {
opacity: 0;
filter: blur(5px);
transform: translate(-100%);
transition: all 1s;
}

.show {
opacity: 1;
filter: blur(0);
transform: translate(0);
}

/* Remove .hidden class styling since it's already applied inline */
.icon-ctry,
.fade-object {
display: flex;
}

.icon-ctry:nth-child(2),
.fade-object:nth-child(2) {
transition-delay: 200ms;
}

.icon-ctry:nth-child(3),
.fade-object:nth-child(3) {
transition-delay: 300ms;
}

.icon-ctry:nth-child(4),
.fade-object:nth-child(4) {
transition-delay: 400ms;
}

.icon-ctry:nth-child(5),
.fade-object:nth-child(5) {
transition-delay: 500ms;
}

.icon-ctry:nth-child(6),
.fade-object:nth-child(6) {
transition-delay: 600ms;
}

.icon-ctry:nth-child(7),
.fade-object:nth-child(7) {
transition-delay: 700ms;
}

.icon-ctry:nth-child(8),
.fade-object:nth-child(8) {
transition-delay: 800ms;
}

.icon-ctry:nth-child(9),
.fade-object:nth-child(9) {
transition-delay: 900ms;
}

.icon-ctry:nth-child(10),
.fade-object:nth-child(10) {
transition-delay: 1000ms;
}

.icon-ctry:nth-child(11),
.fade-object:nth-child(11) {
transition-delay: 1100ms;
}

.icon-ctry:nth-child(12),
.fade-object:nth-child(12) {
transition-delay: 1200ms;
}

@media (prefers-reduced-motion) {
.hidden-left {
transition: none;
}
.hidden-right {
transition: none;
}
}

/* ------------------------------------------------------------------
scroll progress bar
------------------------------------------------------------------ */

@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}

#progress {
position: fixed;
width: 100%;
height: 0.1rem;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
z-index: 999;
}

@media (max-width: 768px) {
#progress {
margin-top: -8px;
}
}
/*--------------------------------------------------------------
# map
--------------------------------------------------------------*/
#map {
width: 100%;
height: 500px;
}



/*--------------------------------------------------------------
# iframe
--------------------------------------------------------------*/
/* Add a CSS class for mobile responsiveness */
/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
iframe {
width: 600px;
height: 315px;
}
}

@media (max-width: 768px) {
iframe {
/* height: 197px !important; */
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
iframe {
width: 540px;
height: 315px;
}

#gallery iframe {
width: 540px;
height: 300px;
border-radius:12px;
}

}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#gallery iframe {
width: 540px;
height: 218px;
border-radius:12px;
}

}

@media screen and (max-width: 1300px) {
#gallery iframe {
width: 540px;
height: 300px;
border-radius:12px;
}


}

/*--------------------------------------------------------------
# whatsapp us
--------------------------------------------------------------*/

.whatsapp_float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
left: 40px; /* Change 'right' to 'left' */
background-color: var(--color-primary);
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px rgba(#000000, 0.26);
z-index: 100;
}

.whatsapp-icon {
margin-top: 16px;
}

.whatsapp-icon:hover,
.whatsapp_float:hover {
color: #f8f991 !important;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.whatsapp-icon {
margin-top: 10px;
}
.whatsapp_float {
width: 40px;
height: 40px;
bottom: 20px;
left: 10px; /* Change 'right' to 'left' */
font-size: 22px;
}
}

/*--------------------------------------------------------------
# Tawk API
--------------------------------------------------------------*/
.tawk-button-large {
margin-bottom: 10rem;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: var(--color-primary);
width: 40px;
height: 40px;
border-radius: 50px;
transition: all 0.4s;
}

.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}

.back-to-top:hover {
background: #4bd680;
color: #fff;
}

.back-to-top.active {
visibility: visible;
opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #fff;
}

#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #f2f2f2;
border-top: 6px solid var(--color-primary);
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/*--------------------------------------------------------------
# tracking-search
--------------------------------------------------------------*/
.tracking-search {
background-color: white;
padding: 10px;
margin: 10px;
border-radius: 50px;
}
.tracking-search .track-search {
border: none;
outline: none;
-webkit-box-shadow: none;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.tracking-search input {
font-size: 12px;
}
}

@media (max-width: 1511px) {
.search-container {
margin-right: 1.4rem;
}
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}

button[type="submit"] {
background: var(--color-primary);
border: 0;
border-radius: 5px !important;
padding: 8px 30px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
}

button[type="submit"]:hover {
background: var(--color-tertiary);
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

background: #1c1c1c;
padding: 10px 0;
font-size: 14px;
color: #9b9b9b;
}

#topbar .contact-info i {
font-style: normal;
color: var(--color-icons);
}

#topbar .contact-info i a,
#topbar .contact-info i span {
padding-left: 5px;
color: #fff;
}

#topbar .contact-info i a {
line-height: 0;
transition: 0.3s;
}

#topbar .contact-info i a:hover {
color: var(--color-hover-link);
}

#topbar .social-links a {
color: #9b9b9b;
line-height: 0;
transition: 0.3s;
margin-left: 10px;
}

#topbar .social-links a:hover {
color: var(--color-hover-link);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

/* #hero h1,
#hero span {
background-color: #ffffff3e;
border-radius: 3px;
text-align: left;
padding: 20px;
} */

/* hero container */
#hero .hero-container h1 {
align-self: first baseline !important;
margin-left: 26rem;
text-align: right;
font-weight: 600;
font-size: 6rem;
line-height: 1.2;
}

#hero .license-container {
align-self: self-start;
margin-top: 43rem;
margin-left: 7rem;
}


#hero .bifa-logo {
width: 80px;
height: 80px;
align-self: self-start;
}

#hero .google-ratings {
width: 180px;
height: 80px;
margin-left: 4rem;
align-self: self-start;
}

#hero .hero-container span {
font-weight: 500;
text-align: start;
align-self: self-end;
font-size: 2.5rem;
margin-left: 40rem !important;
margin-right: 3.5rem !important;
margin-top: 10px;
color: var(--color-white);
}

#hero video.background-clip {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -999;
}

#hero .hyperlink-container {

border-radius: 10px !important;
max-width: 320px;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
background: #f1f1f1;
padding: 10px;
border-radius: 5px;
display: none;

transition: All 0.2s ease;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15) !important;

}

#hero img {
width: 300px;
height: auto;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#hero video.background-clip {
margin-top: 25px;
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

#hero .hyperlink {
display:none;
}
}

#hero:before {
content: "";
min-height: 100%;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}

#hero {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
position: relative;
}

#hero .hero-container {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 0 15px;
}

#hero h1 {
overflow: hidden;
font-family: "Kanit", sans-serif;
border-right: 0.15em solid rgba(255, 166, 0, 0); /* Adjust color and size as needed */
white-space: nowrap;
color: #34bcdb;
margin: 0;
font-size: 5rem;
letter-spacing: 0rem; /* Adjust as needed */
animation: typing 4s steps(80);
}

#hero h2 {
color: #eee;
font-size: 3.2rem;
}

#hero .btn-get-started {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 2px solid var(--color-primary);
color: #fff;
}

#hero .btn-get-started:hover {
background: var(--color-primary);
}


/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#hero .hero-container {
margin-top: -7rem;
}

#hero .license-container {
align-self: self-start;
margin-bottom: 5rem;
margin-left: 5rem;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#hero .license-container {
align-self: self-start;
margin-top: 32rem;
margin-left: 5rem;
}
#hero .bifa-logo {
margin-left: -80px;
margin-top: 20px;
width: 50px;
height: auto;
}
#hero .google-ratings {
margin-top: 20px;
width: 90px;
height: auto;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#hero .hero-container {
margin-top: -12rem;
}

#hero .hero-container span {
margin-left: 27rem;
}
#hero .hero-container h1 {
font-size: 5rem !important;
align-self: flex-end !important;
margin-right: 3rem;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#hero {
background-attachment: fixed;
}

#hero .hero-container {
margin-top: -5rem;
}

#hero .license-container {
align-self: self-start;
margin-bottom: 12rem;
margin-right: 5rem;
}

#hero .hero-container h1 {
font-size: 4rem;
margin-right: 3rem;
align-self: flex-end !important;
}

.hero-waves {
margin-bottom: 14rem;
z-index: 999;
}
}

/* @media (min-width: 1600px) {
#hero {
background-attachment: fixed;
}

.hero-waves {
margin-bottom: 0rem;
}
} */

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#hero {
margin-top: 70px;
}
#hero .hero-container h1 {
margin-left: 0rem;
margin-top: 70px;
line-height: 2rem;
}
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#hero {
height: 30vh;
}

#hero h1 {
color: #eee;
font-size: 1.5rem;
}

#hero h2 {
font-size: 1.2rem !important;
margin-bottom: 0rem !important;
}

#hero:before {
content: "";
background: rgba(0, 0, 0, 0);
}

#hero .hero-container h1 {
margin-top: 20px;
margin-left: 2rem;
font-size: 1.8rem;
line-height: 2rem;
align-self: auto;
}

#hero h2 {
font-size: 10px;
line-height: 24px;
margin-bottom: 30px;
}

#hero .hero-container span {
font-size: 25px;
line-height: 24px;
margin-left: 0rem;
margin-right: 5rem;
}

.explore {
margin-bottom: 10rem;
z-index: 999;
}

.hero-waves {
visibility: hidden;
}
}

.hero-waves {
display: block;
margin-top: 35rem;
width: 100%;
height: 60px;
z-index: 5;
position: relative;
z-index: 999;
}

.wave1 use {
animation: move-forever1 10s linear infinite;
animation-delay: -2s;
}

.wave2 use {
animation: move-forever2 8s linear infinite;
animation-delay: -2s;
}

.wave3 use {
animation: move-forever3 6s linear infinite;
animation-delay: -2s;
}

@keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}

100% {
transform: translate(-90px, 0%);
}
}

@keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}

100% {
transform: translate(85px, 0%);
}
}

@keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}

100% {
transform: translate(85px, 0%);
}
}

/*--------------------------------------------------------------
# Mock3 Section
--------------------------------------------------------------*/
.mock3 #typing-text {
font-size: 30px;
color: var(--color-white);
font-family: var(--font-intro);
}

.mock3 .servicer-container1 {
background-color: var(--color-primary);
padding: 10px;
color: #fff;
}

.mock3 .servicer-container2 {
background-color: var(--color-primary);
padding: 10px;
color: #fff;
}

.mock3 span {
font-size: 20px;
font-family: var(--font-title);
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.mock3 span {
font-size: 15px;
}
.mock3 .tracker-container {
display: none !important;
}
.mock3 #typing-text {
font-size: 1rem;
margin-top: 14rem;
}
.mock3 .servicer {
margin-top: -1rem;
z-index: 999;
}
}

.servicer-container1 a,
.servicer-container2 a {
text-decoration: none;
color: var(--color-white);
}
.servicer-container1 a:hover,
.servicer-container2 a:hover {
color: var(--color-white);
}

.servicer-container1:hover {
border: 5px solid var(--color-white);
padding: 5px;
}

.servicer-container2:hover {
border: 5px solid var(--color-primary);
padding: 5px;
}

.servicer-container1:hover img,
.servicer-container2:hover img {
transform: scale(1.1); /* Adjust the scale factor as needed */
transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.mock3 .servicer-container img {
width: 170px;
align-items: center;
}

/*--------------------------------------------------------------
# tracking Section
--------------------------------------------------------------*/

#tracking {
margin-top: 7rem;
width: 100%;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url("../img/track.jpg");
background-repeat: round;
position: relative;
}

#tracking:before {
content: "";
min-height: 100%;
background: rgba(0, 0, 0, 0.51);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}

#tracking .tracking-container {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 0 15px;
}

#tracking h1 {
margin: 0 0 10px 0;
font-size: 48px;
font-weight: 700;
line-height: 56px;
color: #fff;
}

#tracking h2 {
color: #eee;
margin-bottom: 50px;
font-size: 24px;
}

#tracking .btn-get-started {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 2px solid var(--color-primary);
color: #fff;
}

#tracking .btn-get-started:hover {
background: var(--color-primary);
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#tracking {
background-attachment: fixed;
}
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#tracking {
height: 45vh;
}

#tracking h1 {
margin-top: 50px;
font-size: 18px;
line-height: 16px;
}

#tracking h2 {
font-size: 10px;
line-height: 24px;
margin-bottom: 30px;
}
}

/*--------------------------------------------------------------
# Input form Section
--------------------------------------------------------------*/

/* CSS to remove border-radius from all input fields */
body .form-control {
border-radius: 4px;
border: solid #a1a1a1 1px;
}

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/

.about .content h1 {
font-family: var(--font-title);
color: var(--color-primary);
font-size: 2.3rem;
font-weight: 600;
}

.about .about-article {
font-family: var(--font-body);
}

.about .content h4 {
font-weight: 600;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--color-primary) !important;
}

.about .content ul {
list-style: none;
padding: 0;
}

.about .content ul li {
display: flex;
align-items: flex-start;
margin-top: 40px;
}

.about .content ul i {
flex-shrink: 0;
font-size: 48px;
color: var(--color-primary);
margin-right: 20px;
line-height: 0;
}

.about .about-article {
font-size: 1.2rem;
color: var(--color-body);
}

.about .content ul h5 {
font-size: 18px;
font-weight: 700;
color: var(--color-secondary);
}

.about .content ul p {
font-size: 15px;
}

.about .content p:last-child {
font-size: 18px;
font-family: Sarabun !important;
margin-bottom: 0;
}

.about img {
border-radius: 50px;
margin-top: 20px;
padding: 12px 12px 12px 12px !important;
background-image: linear-gradient(180deg, #FFFFFF 51%, #566af06e 100%) !important
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {

#about {
margin-top: .5rem;
}

.about {
margin-top: 6rem;
}
.about .content .overview_title {
margin-top: 4rem !important;
}

.about .about-article {
font-size: 0.9rem;
}

.about .content h3 {
margin-top: 25px;
}

.about #last-overview-image {
margin-top: 7rem !important;
}

.about img {
margin-top: 15px !important;
}
.about .content h1 {
font-size: 1.5rem;
margin-top: 1rem !important;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.about .content h1 {
font-size: 2.1rem;
margin-top: 0rem;
}
}

#about video {
width: 98%;
height: 75%;
margin-top: 3rem;
padding: 0 !important;
outline: none;
background: none;
padding: 13px 12px 12px 12px !important;
border-radius: 50px !important;
background: linear-gradient(
180deg,
#ffffff00 40%,
#ffffff00 65%,
#566af06e 100%
) !important;
}


#about video source {
border-radius: 25px !important;
border: 1rem solid red !important;
padding: 0 !important!important;
margin: 0 !important!important;
outline: none !important;
}

#about .row {
margin-bottom: 5rem;
}



#about .cta-card {
text-align: center;
position: relative;
padding: 40px 20px;
background-image: linear-gradient(to right, #ff6200, #c30303);
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
border-radius: 30px;
max-width: 100%;
margin-top: 50px;
margin-bottom: -80px;
}

#about .cta-card h4 {
font-weight: 700;
font-family: Sarabun !important;
font-size: 3.5rem;
margin-bottom: 15px;
color: var(--color-light);
text-align: center;
}

#about .cta-card p {
font-family: Manrope !important;
color: var(--color-light) !important;
text-align: center;
margin-bottom: 25px;
padding: 0 160px 0 160px;
}

#about .cta-btn {
background-color: var(--color-primary);
color: white;
border: none;
padding: 10px 25px;
border-radius: 50px;
font-size: 1.5rem;
font-weight: 500;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
transition: all 0.3s ease;
}

#about .cta-btn:hover {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}


#about .cta-btn a {
font-family: Sarabun !important;
text-decoration: none;
color: white;
}


/* For medium screens (tablets) */

@media screen and (max-width: 768px) {


#about .cta-card {
margin-bottom: -35px;
}

#about .cta-card h4
{
color: var(--color-light);
text-align: center !important;
font-size: 2.5rem;
margin-bottom: 25px !important;
padding: 0 !important;
}

#about .cta-card p {
padding: 5px;
}

#contact {
margin-bottom: -1rem !important;
}
}



/*--------------------------------------------------------------
# quote Section
--------------------------------------------------------------*/
.quote {
background-color: var(--color-white);
padding-bottom: 3rem;
z-index: 9999;
}

.quote .content h1 {
margin-top: 100px;
font-weight: 700;
font-size: 2.5rem;
font-family: var(--font-intro);
color: var(--color-default);
}

.quote .content h2 {
font-weight: 700;
font-size: 2.5rem;
font-family: var(--font-intro);
color: var(--color-default);
}

.quote .content h4 {
margin-top: 100px;
font-weight: 300;
font-family: var(--font-intro);
color: var(--color-primary);
}

.quote .content ul {
list-style: none;
padding: 0;
}

.quote .content ul li {
display: flex;
align-items: flex-start;
margin-top: 40px;
}

.quote .content ul i {
flex-shrink: 0;
font-size: 48px;
color: var(--color-primary);
margin-right: 20px;
line-height: 0;
}

.quote .content ul h5 {
font-size: 18px;
font-weight: 700;
color: var(--color-secondary);
}

.quote .content ul p {
font-size: 15px;
}

.quote .content p:last-child {
margin-bottom: 0;
}

.quote img {
margin-top: 100px;
border-radius: 5px;
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.quote .content h3 {
margin-top: 25px;
}
.quote img {
margin-top: 15px;
}
}

/*--------------------------------------------------------------
# bulletings Us Section
--------------------------------------------------------------*/

#bulletings {
background-color: var(--color-seablue);
margin-top: -3rem;
}

.bulletings .content h4 {
color: var(--color-primary);
font-family: var(--font-title);
}

.bulletings .content p {
color: var(--color-primary);
font-family: var(--font-body);
font-size: 1.3rem;
}

.bulletings .content h3 {
margin-top: 100px;
font-weight: 700;
font-size: 32px;
font-family: var(--font-secondary);
color: var(--color-default);
}

.bulletings .content ul {
list-style: none;
padding: 0;
}

.bulletings .content ul li {
display: flex;
align-items: flex-start;
margin-top: 40px;
}

.bulletings .content ul i {
flex-shrink: 0;
font-size: 48px;
color: var(--color-primary);
margin-right: 20px;
line-height: 0;
}

.bulletings .content ul h5 {
font-size: 18px;
font-weight: 700;
color: var(--color-secondary);
}

.bulletings .content ul p {
font-size: 15px;
}

.bulletings .content p:last-child {
margin-bottom: 0;
}

.bulletings img {
border-radius: 5px;
}

@media (max-width: 768px) {
#bulletings {
margin-top: 0rem;
}

.bulletings .content h3 {
margin-top: 25px;
}

.bulletings img {
margin-top: 15px;
}

.bulletings .swiper-slide,
.bulletings .slide-container {
margin-top: 0px !important;
padding-top: 0px;
}

.bulletings .section-header {
margin-bottom: 0px !important;
}

.bulletings .content p {
font-size: 1rem;
}
}

/*--------------------------------------------------------------
# Promo Featured Products
--------------------------------------------------------------*/

#featured {
background-color: var(--color-lighter-background);
}

#featured .promo-banner {
border-radius: 10px;
background-image: linear-gradient(
rgba(255, 0, 0, 0.647),
rgba(239, 0, 8, 0.559)
),
url("/assets/img/ecom/banner.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

#featured .product-cover {
padding-left: 30px;
}

#featured .content h1 {
font-family: var(--font-intro);
font-size: 2.5rem;
font-weight: 700;
}

#featured .product-item {
background-color: #fff;
margin-right: 30px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 10px;
width: 30%;
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#featured .product-item {
margin-right: 30px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 10px;
width: 100%;
}
}

#featured .promo-banner h3 {
color: white;
font-weight: bolder;
}
#featured a {
text-decoration: none;
}

#featured .promo-banner p {
color: white;
}

#featured .promo-header,
#featured .promo-description,
#featured .promo-button {
bottom: 0;
margin-left: 20px;
margin-bottom: 40px;
padding: 0px;
}

#featured .button {
background-color: white;
color: black;
border: 1px solid #edb30b;
}

#featured .button:hover {
background-color: #000000;
color: #fff;
}

#featured .ratings {
font-size: 20px;
color: var(--color-tag);
}

#featured .tag {
font-size: 14px;
background: var(--color-tag);
padding: 7px 14px;
color: #fff;
margin: 0;
}

#featured .product-name {
font-size: 22px;
color: #000000;
}

#featured .description {
font-size: 16px;
color: #000000;
}

#featured .price {
margin: 0;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

/*--------------------------------------------------------------
# Store Products
--------------------------------------------------------------*/

#store {
background-color: #fff;
}

#store .promo-banner {
border-radius: 10px;
background-image: linear-gradient(
rgba(255, 0, 0, 0.647),
rgba(239, 0, 8, 0.559)
),
url("/assets/img/ecom/Slider-1.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

#store .product-cover {
padding-left: 30px;
}

#store .form-inputs {
position: relative;
}
#store .form-inputs .form-control {
height: 45px;
margin: 0;
}
#store .form-inputs input {
padding: 25px;
height: 45px;
font-size: 20px;
}
#store .form-inputs .form-control:focus {
box-shadow: none;
border: 1px solid #000;
}

#store .form-inputs i {
position: absolute;
right: 10px;
top: 15px;
}

#store .content h1 {
font-family: var(--font-intro);
font-size: 2.5rem;
font-weight: 700;
}

#store .product-item {
background-color: #fff;
margin-right: 18px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 10px;
width: 15%;
}

#store .product-item h3 {
font-size: 1rem;
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#store .product-item {
margin-right: 30px;
margin-bottom: 10px;
text-decoration: none;
border-radius: 10px;
width: 100%;
}
}

#store .promo-banner h3 {
color: white;
font-weight: bolder;
}
#store a {
text-decoration: none;
}

#store .promo-banner p {
color: white;
}

#store .promo-header,
#store .promo-description,
#store .promo-button {
bottom: 0;
margin-left: 20px;
margin-bottom: 40px;
padding: 0px;
}

#store .button {
background-color: white;
color: black;
border: 1px solid #edb30b;
}

#store .button:hover {
background-color: #000000;
color: #fff;
}

#store .ratings {
font-size: 20px;
color: var(--color-tag);
}

#store .tag {
font-size: 14px;
background: var(--color-tag);
padding: 7px 14px;
color: #fff;
margin: 0;
}

#store .product-name {
font-size: 22px;
color: #000000;
}

#store .description {
font-size: 16px;
color: #000000;
}

#store .price {
margin-bottom: 10px;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

/*--------------------------------------------------------------
# workdays
--------------------------------------------------------------*/

#workdays {
border-top: 1px solid rgb(255, 0, 0);
}

#workdays .img-fluid {
max-width: 80%;
height: auto;
}

#workdays .workdays {
padding: 10px;
background-color: aliceblue;
border-radius: 10px;
margin: 0;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

#workdays .time-table span {
font-size: 20px;
margin-top: 10px;
}

#workdays .time-table {
border-radius: 15px;
padding: 20px;
background-color: rgba(209, 232, 249, 0.52);
border-color: #fff;
border: 1px solid #fff;
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#workdays .time-table {
margin-top: 10px;
}

#workdays .time-table span {
font-size: 15px;
}

#workdays .image {
display: none;
}
}

/*--------------------------------------------------------------
# get in touch
--------------------------------------------------------------*/

.get-in-touch h1 {
margin-top: 3rem;
font-family: "Jost", sans-serif !important;
font-weight: 600;
font-size: 3.5rem;
color: var(--color-white);
}

.get-in-touch input,
.get-in-touch textarea {
border-radius: 2px;
color: var(--color-primary);
}

.get-in-touch {
background-color: var(--color-primary) !important ;
}

.get-in-touch button {
background-color: var(--color-primary) !important;
border-radius: 50px;
color: var(--color-white);
padding: 10px;
width: 100%;
}

.get-in-touch button:hover {
background-color: var(--color-primary) !important;
color: #fff;
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.get-in-touch h1 {
width: 300px !important;
font-size: 1.5rem !important;
margin-top: 6rem;
margin-bottom:0rem !important;
}
}

/*--------------------------------------------------------------
# call-to-action
--------------------------------------------------------------*/

#action .content h1 {
font-family: var(--font-intro);
font-weight: 700;
font-size: 2.5rem;
}

.action input,
.action textarea {
font-family: var(--font-intro);
border-radius: 0;
border-color: white;
font-size: 1.1rem;
}

#action {
/* background-attachment: fixed; */
background-color: var(--color-primary);
background-image: url("/assets/img/others/hero-bg.png");
background-size: cover;
background-position: center;
position: relative;

/* background-color: var(--color-primary); */
max-width: 100%;
min-width: 100%;
color: white;
/* clip-path: ellipse(85% 100% at center top); */
/* z-index: 9999; */
}

#action button:hover {
background: var(--color-primary);
}

#action .action {
padding: 10px;
background-color: aliceblue;
border-radius: 10px;
margin: 0;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

#action .time-table span {
font-size: 20px;
margin-top: 10px;
}

#action .time-table {
border-radius: 15px;
padding: 20px;
background-color: rgba(209, 232, 249, 0.52);
border-color: #fff;
border: 1px solid #fff;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#action .time-table {
margin-top: 10px;
}

#action .content h1 {
color: #fff;
font-size: 1.6rem;
}

#action .content .call-button {
margin-left: -20px;
}

#action .content a button {
font-family: var(--font-intro);
font-size: 1rem;
width: 100%;
}

#action .time-table span {
font-size: 15px;
}

#action .image {
display: none;
}

#action {
clip-path: none;
margin-bottom: 0;
padding-bottom: 0;
}
}

/*--------------------------------------------------------------
# tab-img
--------------------------------------------------------------*/

.tab-img .icon-box {
text-align: center;
background: #fff;
padding: 40px 30px;
width: 100%;
height: 100%;
border: 1px solid rgba(55, 55, 63, 0.1);
transition: 0.3s;
border-style: groove;
border-color: var(--color-primary);
}

.tab-img .icon-box i {
color: #fff;
margin-bottom: 30px;
font-size: 32px;
margin-bottom: 30px;
background: var(--color-tertiary);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}

.tab-img .icon-box h4 {
font-size: 20px;
font-weight: 400;
margin: 0 0 30px 0;
font-family: var(--font-secondary);
}

.tab-img .icon-box p {
font-size: 13px;
color: #6c757d;
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.tab-img .icon-box:hover {
transform: scale(1.05);
}
}

/*--------------------------------------------------------------
# Marquee Section
--------------------------------------------------------------*/
#marquee {
height: 2.8% !important;
width: 100%;
position: fixed;
color: #fff;
background-image: linear-gradient(
var(--color-primary),
var(--color-primary)
),
url("/assets/img/slides/slide2.jpg");
z-index: 999;
}

@media (max-width: 1511px) {
#marquee {
height: 4% !important;
}
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#marquee {
padding: 10px;
margin-top: 15px;
background-color: var(--color-primary) !important;
height: 30px !important;
}
#marquee marquee {
font-family: 8px;
margin-top: -4px;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#marquee marquee {
height: 28px;
background-image: linear-gradient(
var(--color-primary),
var(--color-primary)
),
url("/assets/img/slides/slide2.jpg");
}
}

/*--------------------------------------------------------------
# explore-services Section
--------------------------------------------------------------*/
.explore-services2 {
padding: 30px;
background-position: -0.5rem -0.1rem;
color: #fff;
z-index: 0;

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-primary);

}
.explore-services {
padding: 30px;
background-position: -0.5rem -0.1rem;
color: #fff;
z-index: 0;

background-size: cover;
background-repeat: no-repeat;
background-position: center;
<!-- background-image: linear-gradient(#be0119c4, var(--color-primary)), url("/assets/img/others/pship1.png"); -->

}

.explore-services .service-container,
.explore-services2 .service-container {
margin-bottom: 3rem;
z-index: 99;
}

.explore-services .card-except,
.explore-services2 .card-except {
background: var(--color-primary);
}

.explore-services a,
.explore-services2 a {
text-decoration: none;
color: black;
}
.explore-services h5,
.explore-services2 h5 {
font-weight: 700 !important;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}

.explore-services .title2 h1,
.explore-services2 .title2 h1 {
color: var(--color-white) !important;
font-weight: 700;
font-size: 2.5rem;
}

.explore-services h3,
.explore-services2 h3 {
font-family: var(--font-intro);
font-weight: 700;
font-size: 2.5rem;
}

.explore-services .why-box h3,
.explore-services2 .why-box h3 {
font-weight: 700;
font-size: 34px;
margin-bottom: 30px;
}

.explore-services h4,
.explore-services2 h4 {
font-family: var(--font-body);
color: var(--color-default);
font-size: 1.5rem;
}

.explore-services .content h4,
.explore-services2 .content h4 {
color: var(--color-default);
font-size: 21px;
}

.explore-services .why-box p,
.explore-services2 .why-box p {
margin-bottom: 30px;
}

.explore-services .why-box .more-btn,
.explore-services2 .why-box .more-btn {
display: inline-block;
background: rgba(255, 255, 255, 0.3);
padding: 6px 30px 8px 30px;
color: #fff;
border-radius: 50px;
transition: all ease-in-out 0.4s;
}

.explore-services .why-box .more-btn i,
.explore-services2 .why-box .more-btn i {
font-size: 14px;
}

.explore-services .why-box .more-btn:hover,
.explore-services2 .why-box .more-btn:hover {
color: var(--color-primary);
background: #fff;
}

.explore-services .icon-box {
height: 350px !important;
border-radius: 20px;
color: var(--color-default);
text-align: center;
background: var(--color-seablue);
padding: 40px 30px;
width: 100%;
height: 100%;
border: 5px solid rgb(255, 255, 255);
transition: 0.3s;
border-style: none;
box-shadow: 1px 3px 10px #0023;
}


.explore-services2 .icon-box {
height: 355px !important;
border-radius: 20px;
color: #f6f0f0;
text-align: center;
background: var(--color-seablue);
padding: 40px 30px;
width: 100%;
height: 100%;
border: 2px solid rgb(255, 255, 255);
transition: 0.3s;
/* border-style: none; */
box-shadow: 1px 3px 10px #0023;
}

.explore-services .icon-box:hover,
.explore-services2 .icon-box:hover {
background: var(--color-yellow);
}

.explore-services .icon-box i,
.explore-services2 .icon-box i {
color: #fff;
margin-top: 5rem !important;
font-size: 40px;
background: var(--color-tertiary);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
}

.explore-services .icon-box h4,
.explore-services2 .icon-box h4 {
font-size: 20px;
font-weight: 400;
margin: 0 0 30px 0;
font-family: var(--font-secondary);
}

.explore-services .icon-box p,
.explore-services2 .icon-box p {
font-size: 15px;
color: #6c757d;
}

.explore-services .icon-box i,
.explore-services2 .icon-box i {
background: #fff !important;
}

.explore-services .icon-box,
.explore-services2 .icon-box {
padding: 0px 00px !important;
}

.explore-services .display-6,
.explore-services2 .display-6 {
font-size: 1.1rem;
}

.explore-services .icon-box:hover,
.explore-services2 .icon-box:hover {
background-image: url("/assets/img/others/blur.png") !important;
}

.explore-services .subtitle {
font-family: Sarabun !important;
font-size: 2rem;
color: var(--color-white);
font-weight: 500;
background-color: #042d7ae3;
border-radius: 0 0px 18px 18px;
margin-top: 73px !important;
width: 100%;
padding: 20px !important;
bottom: 0;
}

.explore-services2 .subtitle {
font-size: 2rem;
color: var(--color-white);
font-weight: 500;
background-color: #042d7ae3;
border-radius: 0 0px 18px 18px;
margin-top: 5px !important;
width: 100%;
padding: 20px !important;
bottom: 0;
}


/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.explore-services .service-container h5,
.explore-services2 .service-container h5 {
font-size: 1rem;
}
.explore-services,
.explore-services2 {
padding: 9px;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.explore-services h4,
.explore-services2 h4 {
width: 100%;
font-size: 29px;
text-wrap: b;
}
}



/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.explore-services h4,
.explore-services2 h4 {
font-size: 1rem;
}
.explore-services,
.explore-services2 {
padding: 9px;
margin-top: 0px !important;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.explore-services .icon-box:hover,
.explore-services2 .icon-box:hover {
transform: scale(1.02);
transition: all 1s;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.explore-services .icon-box,
.explore-services2 .icon-box {
border-radius: 5px;
}
.explore-services .service-container,
.explore-services2 .service-container {
margin-top: 0rem;
z-index: 99;

}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.explore-services .icon-box,
.explore-services2 .icon-box {
height: 94px !important;
}
.explore-services .icon-box i,
.explore-services2 .icon-box i {
margin-top: 0.5rem !important;
margin-left:0rem;
z-index: 999;
}

.explore-services h6,
.explore-services2 h6 {
font-size: 0.60rem !important;
margin-bottom: -3rem;
}

.explore-services .subtitle,
.explore-services2 .subtitle {
background-color: #e90000e3;
margin-bottom: -5rem !important;
z-index: -2;
padding: 0;
}

.explore-services .service-container,
.explore-services2 .service-container {
margin-bottom: 3rem;
}

.explore-services,
.explore-services2 {
padding-right: 0;
margin-top: 35px;
}

.explore-services span,
.explore-services2 span {
font-size: 13px !important;
word-wrap: break-word;
line-height: 18px !important;
display: block;
}

.explore-services .mobile-intro,
.explore-services2 .mobile-intro {
font-size: 10px;
text-align: center;
margin-left: -12px;
}

.explore-services .icon-box i,
.explore-services2 .icon-box i {
margin-bottom: 10px;
width: 50px;
height: 50px;
}

.explore-services .icon-box h5,
.explore-services2 .icon-box h5 {
font-size: 10px;
}

.explore-services .icon-box,
.explore-services2 .icon-box {
padding: 17px 7px;
width: 100%;
height: 90%;
}
}

/*--------------------------------------------------------------
# services-counter Section
--------------------------------------------------------------*/
#services-counter {
padding-top: 0;
}
#services-counter .quotation-mark {
padding-top: 0px;
font-size: 150px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
color: orange;
z-index: -999;
margin-bottom: -6rem;
}

#services-counter p {
font-size: 20px;
color: var(--color-primary);
font-family: var(--font-body);
text-transform: uppercase;
font-weight: 700;
text-align: center;
}


/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#services-counter p {
font-size: 20px;
margin-bottom: 4rem;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#services-counter p {
font-size: 20px;
margin-bottom: 1rem;
}

#services-counter .title1 h1 {
font-size: 3rem !important;
}
#services-counter .title4 h1 {
text-align: center;
}
#services-counter .quotation-mark {
text-align: center;
}
}

/*--------------------------------------------------------------
# sailing Schedule Section
--------------------------------------------------------------*/

#sailing .wrapper-search {
justify-content: center;
align-items: center;
}

#sailing .wrapper {
justify-content: center;
align-items: center;
}

#sailing .search_box {
background: var(--color-primary);
position: relative;
padding: 10px;
font-family: "Montserrat", sans-serif;
border-radius: 50px;
display: flex;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#sailing .info_body {
background: var(--color-peach);
position: relative;
padding: 10px;
font-family: "Montserrat", sans-serif;
border-radius: 50px;
display: flex;
}

#sailing .search_box .search_btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: #7e889900;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin-right: 5px;
cursor: pointer;
}

#sailing .search_box .input_search {
outline: none;
border: 0;
background: #0143bda0;
border-radius: 50px;
padding: 15px 20px;
width: 100%;
height: 50px;
color: #fff;
}

::placeholder {
color: #fff;
}

::-webkit-input-placeholder {
color: #fff;
}

:-ms-input-placeholder {
color: #fff;
}

/* sailing table */

#sailing {
color: var(--color-primary);
}

#sailing .container th h1 {
font-weight: bold;
font-size: 1em;
text-align: left;
color: var(--color-white);
}

#sailing .container td {
color: var(--color-white);
}
#sailing .container tr:hover {
background-color: orange;
}

#sailing .calendar {
background-color: var(--color-secondary);
border-radius: 20px;
}
@media (max-width: 768px) {

#sailing .search_box .input_search {
font-size: 0.7rem !important;
}

#sailing .search_box {
padding: 4px;
}

#sailing .info_body {
padding: 0;
background: none;
font-weight: 0;
}

#sailing .info_body > .row {
margin: 3px !important;
}

.sail_title {
margin-top: 5.5rem !important;
}

#sailing .wrapper-search {
margin-bottom: 8px !important;
}

#sailing .calendar {
margin-bottom: 16px;
padding: 11px;
width: 100%;
margin-right: -67px;
}

#sailing li {
font-size: 13px;
}

.table > :not(caption) > * > * {
padding: 0.2rem 0.5rem !important;
}
}

/*--------------------------------------------------------------
# services-intro Section
--------------------------------------------------------------*/

#services-intro h5 {
color: var(--color-primary);
}

#services-intro .wrapper {
position: relative;
}

#services-intro wrapper .carousel .cardi,
#services-intro wrapper .carousel2 .cardi {
text-decoration: none !important;
}

#services-intro .cardi > div {
margin-left: 2.5rem;
}

/* #services-intro .carousel2 li.cardi { */
/* margin-left: 0rem !important; */
/* padding-left: 0rem !important; */
/* } */

/* 14 inch screen */

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#services-intro .cardi > div {
margin-left: 1.5rem;
}
}

#services-intro .wrapper i {
top: 50%;
height: 50px;
width: 50px;
cursor: pointer;
font-size: 1.3rem;
position: absolute;
z-index: 999;
text-align: center;
line-height: 50px;
color: var(--color-seablue);
background-color: var(--color-hover-link);
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
transform: translateY(-50%);
transition: transform 0.1s linear;
}

#services-intro .wrapper i:active {
transform: translateY(-50%) scale(0.85);
}
#services-intro .wrapper i:first-child {
left: -22px;
}
#services-intro .wrapper i:last-child {
right: -22px;
}

/* slide show of the description of the servcies in home page */
#services-intro .wrapper .carousel {
min-width: 3000px !important;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% / 3) - 12px);
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1px;
scroll-behavior: smooth;
scrollbar-width: none;
}

#services-intro .wrapper .carousel2 {
min-width: 3000px !important;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% / 2) - 401px);
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1px;
scroll-behavior: smooth;
scrollbar-width: none;
}

#services-intro .carousel::-webkit-scrollbar,
#services-intro .carousel2::-webkit-scrollbar {
display: none;
}

#services-intro .carousel.no-transition,
#services-intro .carousel2.no-transition {
scroll-behavior: auto;
}
#services-intro .carousel.dragging,
#services-intro .carousel2.dragging {
scroll-snap-type: none;
scroll-behavior: auto;
}
#services-intro .carousel.dragging .cardi,
#services-intro .carousel2.dragging .cardi {
cursor: grab;
user-select: none;
}

#services-intro .carousel .cardi,
#services-intro .carousel2 .cardi {
scroll-snap-align: start;
flex-direction: column;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#services-intro .wrapper .carousel,
#services-intro .wrapper .carousel2 {
grid-auto-columns: calc((100% / 1) - 9px);
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#services-intro .wrapper .carousel,
#services-intro .wrapper .carousel2 {
grid-auto-columns: 100%;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#services-intro {
/* display: none; */
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#services-intro .carousel .cardi,
#services-intro .carousel2 .cardi {
margin-left: -3rem;
}
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.wif-info .why-box {
padding: 30px;
background: var(--color-primary);
color: #fff;
}

.wif-info .hero-pic {
/* background-image: url("/assets/img/others/map2.png"); */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.wif-info .card-except {
background: var(--color-primary);
}

.wif-info a {
text-decoration: none;
color: black;
}

.wif-info h3 {
font-family: var(--font-intro);
font-weight: 700;
font-size: 2.5rem;
}

.wif-info .why-box h3 {
font-weight: 700;
font-size: 34px;
margin-bottom: 30px;
}

.wif-info .content h4 {
font-family: var(--font-intro);
color: var(--color-primary);
font-size: 21px;
}

.wif-info .why-box p {
margin-bottom: 30px;
}

.wif-info .why-box .more-btn {
display: inline-block;
background: rgba(255, 255, 255, 0.3);
padding: 6px 30px 8px 30px;
color: #fff;
border-radius: 50px;
transition: all ease-in-out 0.4s;
}

.wif-info .why-box .more-btn i {
font-size: 14px;
}

.wif-info .why-box .more-btn:hover {
color: var(--color-primary);
background: #fff;
}

.wif-info .icon-box {
/* border-radius: 20px; */
text-align: center;
background: var(--color-white);
padding: 40px 30px;
width: 100%;
height: 100%;
border: 1px solid rgba(55, 55, 63, 0.1);
transition: 0.3s;
border-style: groove;
box-shadow: 1px 1px 10px #0023;
/* border-color: var(--color-primary); */
border-bottom: 5px solid var(--color-primary);
}

.wif-info .icon-box i {
color: #fff;
margin-bottom: 30px;
font-size: 32px;
margin-bottom: 30px;
background: var(--color-tertiary);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}

.wif-info .icon-box h4 {
font-size: 20px;
font-weight: 400;
margin: 0 0 30px 0;
font-family: var(--font-secondary);
}

.wif-info .icon-box p {
font-size: 15px;
color: #6c757d;
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.wif-info .icon-box:hover {
transform: scale(1.02);
}

.wif-info .content h4 {
font-size: 1.1rem;
}
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.wif-info .content h4 {
font-size: 1rem;
}
}

/*--------------------------------------------------------------
# Section Header
--------------------------------------------------------------*/

.section-header {
text-align: center;
padding-bottom: 30px;
}

.section-header h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 400;
margin: 0;
padding: 0;
color: #7f7f90;
text-transform: uppercase;
font-family: var(--font-default);
}

.section-header p {
margin: 0;
font-size: 48px;
font-weight: 400;
font-family: var(--font-primary);
}

.section-header p span {
color: var(--color-primary);
}

/*--------------------------------------------------------------
# blog
--------------------------------------------------------------*/
.blog {
margin-bottom: 1rem;
}

.blog .blog-item {
border-radius: 10px;
border: 1px solid #eef0ef;
}

.blog a {
text-decoration: none;
color: black;
}

.blog .blog-content {
padding: 15px;
}

.blog .blog-content h3 {
font-weight: 700;
font-size: 20px;
}

.blog .blog-content h3 a {
color: #var(--color-default);
transition: 0.3s;
}

.blog .blog-content h3 a:hover {
color: var(--color-tertiary);
}

.blog .blog-content p {
font-size: 14px;
font-family: var(--font-body);
color: #777777;
}

.blog .blog-content h4 {
font-size: 14px;
background: var(--color-tertiary);
padding: 7px 14px;
color: #fff;
margin: 0;
}

.blog .blog-content .price {
margin: 0;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

.blog .trainer {
padding-top: 15px;
border-top: 1px solid #eef0ef;
}

.blog .trainer .trainer-profile img {
max-width: 50px;
border-radius: 50px;
}

.blog .trainer .trainer-profile span {
padding-left: 10px;
font-weight: 600;
font-size: 16px;
color: #5a6c60;
}

.blog .trainer .trainer-rank {
font-size: 18px;
color: #657a6d;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#popular-blog {
margin-top: 3rem !important;
}
#popular-blog #title1 {
margin-top: 0px !important;
}
#popular-blog #title1 .blog_head {
margin-top: 3rem !important;
}
}

/*--------------------------------------------------------------
# E-shop
--------------------------------------------------------------*/
.eshop .eshop-item {
border-radius: 10px;
border: 2px solid #eef0ef;
}

.eshop .eshop-content {
padding: 15px;
}

.eshop .eshop-content h3 {
font-weight: 700;
font-size: 20px;
}

.eshop .eshop-content h3 a {
color: #var(--color-default);
transition: 0.3s;
}

.eshop .eshop-content h3 a:hover {
color: var(--color-tertiary);
}

.eshop .eshop-content p {
font-size: 14px;
color: #777777;
}

.eshop .eshop-content h4 {
border-radius: 15px;
font-size: 14px;
background: var(--color-tertiary);
padding: 7px 14px;
color: #fff;
margin: 0;
}

.eshop .eshop-content .price {
margin: 0;
font-weight: 700;
font-size: 18px;
color: #37423b;
}

.eshop .trainer {
padding-top: 15px;
border-top: 1px solid #eef0ef;
}

.eshop .eshop-item .img-fluid {
max-width: 100%;
max-height: 50%;
}
.eshop .trainer .trainer-profile img {
max-width: 50px;
border-radius: 50px;
}

.eshop .trainer .trainer-profile span {
padding-left: 10px;
font-weight: 600;
font-size: 16px;
color: #5a6c60;
}

.eshop .trainer .trainer-rank {
font-size: 18px;
color: #657a6d;
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events .container-fluid {
padding: 0;
}

.events .event-item {
background-size: cover;
background-position: center;
min-height: 350px;
padding: 30px;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.events .event-item {
min-height: 500px;
}
}

.events .event-item:before {
content: "";
background: rgba(0, 0, 0, 0.3);
position: absolute;
inset: 0;
}

.events .event-item h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
color: #fff;
position: relative;
}

.events .event-item .price {
color: #fff;
border-bottom: 2px solid var(--color-primary);
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
position: relative;
}

.events .event-item .description {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.9);
position: relative;
}


/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.events .swiper-slide-active + .swiper-slide {
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
z-index: 1;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.slides-3 .swiper-slide {
max-height: 150px;
}
}

.events .swiper-pagination {
margin-top: 20px;
position: relative;
}

.events .swiper-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #d1d1d7;
opacity: 1;
}

.events .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--color-primary);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
width: 100%;
background: #fff;
}

.contact span b {
font-size: 2rem;
margin-top: -10px !important;
}

.contact .booking-img {
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

}

.call-txt {
font-family: Sarabun !important;
font-size: 18px !important;
}


#contact .title2 h1{
font-family: Sarabun !important;
font-size: 2.4rem;
color: var(--color-primary) !important;
}

.contact .content .tel {
font-size: 28px;
color: #2e3192 !important;
font-family: Sarabun !important;
font-weight: 700;
}

.contact .info i {
font-size: 20px;
color: var(--color-primary);
float: left;
width: 44px;
height: 44px;
background: #f3f8ec;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}

.contact .content h1 {
font-size: 1.7rem;
font-family: Sarabun !important;
margin-top: 1rem;
}

.contact .info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #353535;
}

.contact p {
font-size: 1.5rem;
text-align: justify;
color: var(--color-article) !important;
font-family: var(--font-body);
}

.contact .info .email,
.contact .info .phone {
margin-top: 40px;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
background: var(--color-primary);
color: #fff;
}

.contact .php-email-form {
width: 100%;
background: #fff;
}

.contact .php-email-form .form-group {
padding-bottom: 8px;
}

.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}

.contact .php-email-form .error-message br + br {
margin-top: 25px;
}

.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: var(--color-primary);
text-align: center;
padding: 15px;
font-weight: 600;
}

.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}

.contact .php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--color-primary);
border-top-color: #eee;
animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
}

.contact .php-email-form input {
height: 44px;
}

.contact .php-email-form textarea {
padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
background: var(--color-primary);
border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
background: var(--color-primary);
}

@keyframes animate-loading {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.about .content h1 {
font-size: 23px;
}
.about .content h4 {
font-size: 20px;
font-weight: 500;
}
.contact p {
font-size: 17px;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.contact .content h1 {
font-size: 2.3rem;
margin-top: 20px !important;
font-weight: 600;
}
#contact .first-video {
margin-top: 4rem !important;
}
#contact .title2 h1{
font-size: 2.05rem;
margin-top: 10px !important;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
#contact .first-video {
margin-top: 3rem !important;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#contact .first-video {
margin-top: 4rem !important;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.contact .content h1 {
font-size: 1.4rem;
}

#contact {
margin-top: 3rem;
}
.contact .content .mt-5 {
margin-top: 3rem !important;
}
#contact .first-video {
margin-top: 1rem !important;
}
}

/*--------------------------------------------------------------
# The Operational Process (Card)
--------------------------------------------------------------*/

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.card-box-a,
.card-box-d {
margin-bottom: 2.5rem;
}
}

.card-box-a span,
.card-box-d span {
line-height: 0;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.grid .card-box-a,
.grid .card-box-d {
margin-bottom: 2.5rem;
}
}

.card-box-a,
.card-box-d {
border-radius: 10px;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.card-box-a .img-a {
transition: 0.8s all ease-in-out;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-a:hover .img-a {
transform: scale(1.2);
/* filter: blur(8px); */
}
}

.card-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.card-shadow {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.card-shadow:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 27%,
rgba(0, 0, 0, 0.65) 90%
);
}

/*======================================
//--//--> PROPERTY - CARD-A
======================================*/
/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-a:hover .card-overlay-a-content {
bottom: 0px;
margin-bottom: 0rem;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-a:hover .card-overlay-a-content {
bottom: 60px;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-a:hover .card-overlay-a-content {
bottom: 64px;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-a:hover .card-body-a {
padding-bottom: 1rem;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.card-box-a .card-overlay-a-content {
bottom: 65px;
}

.card-box-a .card-body-a {
padding-bottom: 1rem;
padding-left: 2rem !important;
}
}

/* .card-overlay-a-content {
transition: all 0.5s ease-in;
position: absolute;
width: 100%;
bottom: 0px;
z-index: 2;
} */

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-overlay-a-content {
bottom: -20px;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-overlay-a-content {
bottom: 0px;
}
}


.card-header-a {
padding: 0 1rem;
list-style: none;
position: relative; /* Ensure the parent is positioned */
left: 0; /* Position at the left */
}

.card-header-a .card-title-a {
color: #ffffff;
margin-bottom: 0;
padding-bottom: 0.7rem;
}

.card-header-a .card-title-a span {
color: #ff4400;
font-size: 1.5rem;
padding-bottom: 0.7rem;
}

.card-box-a span,
.card-box-d span {
font-family: var(--font-body) !important;
font-weight: 500;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-header-a .card-title-a {
font-size: 1.3rem;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-header-a .card-title-a {
font-size: 1.8rem;
}
}

.card-header-a .card-title-a a {
color: var(--color-primary);
font-weight: 800;
text-decoration: none;
}

.card-body-a {
z-index: 2;
transition: all 0.5s ease-in;
padding: 0rem 1rem 2rem 1rem;
}

.card-body-a .price-box {
padding-bottom: 0.5rem;
}

/* background of card text footer/bottom */
.card-footer-a {
width: 100%;
padding-bottom: 1rem;
padding-top: 0.5rem;
position: absolute;
bottom: 0;
z-index: 2;

background-color: rgba(239, 0, 8, 0.559);
/* backdrop-filter: blur(2px); */

/* background-color: #0d0d0d21;
backdrop-filter: blur(2px); */
}

.card-info {
list-style: none;
margin-bottom: 0;
padding-left: 0.8rem;
padding-right: 0.5rem;
/* padding: 0.5rem 0; TLBR */
}

/* step */
.card-info .card-info-title {
font-size: 1.4rem;
font-weight: 700;
color: #ffffff;
}

/* steps descriptions */
.card-info li span {
font-size: 1.1rem !important;
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.owl-carousel2 br {
display: none;
}
}

/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.owl-carousel2 br {
display: block;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.card-info li span {
font-size: 0.8rem !important;
}

/* step */
.card-info .card-info-title {
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
}

.card-footer-a {
margin-top: -1.5rem;
}

.owl-carousel2 br {
display: none;
}

.card-header-a .card-title-a {
padding-bottom: 0.5rem;
font-size: 1rem;
}

.card-title-a span {
display: none;
}
}

@media (min-width: 768px) {
.card-info .card-info-title {
font-size: 0.9rem;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-info .card-info-title {
font-size: 1rem;
}
}

.card-info li span {
color: #ffffff;
font-size: 0.9rem;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-info li span {
font-size: 0.8rem;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-info li span {
font-size: 1rem;
}
}

/*======================================
//--//--> AGENTS - CARD-D
======================================*/
.card-box-d .card-overlay-hover {
transition: all 0.2s ease-in-out;
padding: 15px 40px 15px 35px;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .card-overlay-hover {
padding: 5px 15px 5px 10px;
cursor: grab;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .card-overlay-hover {
padding: 5px 40px 5px 35px;
}
}
/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.card-box-d .card-overlay-hover {
padding: 15px 40px 5px 35px;
}
}

.card-box-d .title-d {
transition: 0.3s ease-in-out;
font-size: 2rem;
font-weight: 600;
margin: 1rem 0;
transform: translateY(-20px);
opacity: 0;
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .title-d {
font-size: 1.1rem;
margin: 0.5rem 0;
}
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .title-d {
font-size: 1.5rem;
margin: 1rem 0;
}
}


/* For large screens (desktops and laptops) */
@media screen and (min-width: 1200px) {
.card-box-d .title-d {
font-size: 2rem;
margin: 1rem 0;
}
}

.card-box-d .content-d {
opacity: 0;
transition: 0.5s ease-in-out;
transform: translateY(-40px);
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .content-d {
font-size: 0.8rem;
margin: 0.5rem 0;
}
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .card-body-d p {
margin-bottom: 8px;
font-size: 0.8rem;
}
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.card-box-d .card-body-d p {
margin-bottom: 12px;
font-size: 1rem;
}
}

.card-box-d .info-agents {
opacity: 0;
transition: 0.5s ease-in-out;
}

.card-box-d .card-footer-d {
transition: 0.5s ease-in-out;
transform: translateY(40px);
opacity: 0;
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
}

.card-box-d .list-inline-item:not(:last-child) {
margin-right: 25px;
}

.card-box-d:hover .card-overlay-hover {
background-color: var(--color-lighter-background);
opacity: 0.9;
}

.card-box-d:hover .title-d,
.card-box-d:hover .content-d,
.card-box-d:hover .info-agents,
.card-box-d:hover .card-footer-d {
opacity: 1;
transform: translateY(0);
}

/*------/ List a /------*/
.list-a {
text-decoration: none;
display: inline-block;
line-height: 2;
padding: 0;
list-style: none;
}

.list-a li {
position: relative;
width: 50%;
float: left;
padding-left: 25px;
padding-right: 5px;
}


/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.list-a li {
width: 33.333%;
}
}

.list-a li:before {
content: "";
width: 10px;
height: 2px;
position: absolute;
background-color: #313131;
top: 15px;
left: 0;
}

.ul-resect ul,
.box-comments ul,
.list-a ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}

/*------/ Agent Single /------*/
.agent-info-box .socials-footer {
margin-top: 2rem;
}

.agent-info-box .socials-footer li {
margin-right: 1.5rem;
}

.card-overlay,
.title-d,
.link-two,
.link-one {
text-decoration: none;
color: var(--color-default);
}

/* pagination for image slider */

.carousel-pagination {
margin-top: 10px;
text-align: center;
}

.carousel-pagination .swiper-pagination-bullet {
width: 18px;
height: 10px;
background-color: #555;
margin: 0 4px;
border-radius: 0;
opacity: 1;
transition: 0.3s;
}

.carousel-pagination .swiper-pagination-bullet-active {
background-color: var(--color-primary);
width: 36px;
}

/*--------------------------------------------------------------
# Intro Single
--------------------------------------------------------------*/

.intro-single {
padding: 12rem 0 3rem;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.intro-single {
padding-top: 9rem;
}
}

.intro-single .title-single-box {
padding: 1rem 0 1rem 2rem;
}

.intro-single .title-single-box {
border-left: 3px solid var(--color-primary);
}

.intro-single .title-single-box .title-single {
font-weight: 600;
font-size: 2.2rem;
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.intro-single .title-single-box .title-single {
font-size: 2.1rem;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.intro-single .title-single-box .title-single {
font-size: 2.5rem;
}
}

.intro-single .breadcrumb-box {
padding: 1rem 0 0 0.5rem;
}

.intro-single .breadcrumb {
background-color: transparent;
padding-right: 0;
padding-left: 0;
}

.item-details {
width: 100%;
height: 50%;
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
<!-- position: relative; -->
<!-- height: 150%; -->
<!-- margin-bottom: 20px; -->
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.purecounter {
font-size: 40px;
font-weight: 500;
}
}

.purecounter {
font-size: 60px;
font-weight: 600;
color: var(--color-primary);
}

/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/
#team iframe {
width: 98%;
height: 600px;
border-radius: 20px;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#team iframe {
margin-right: 15px;
}
}

#team .HzV7m-b7CEbf .i4ewOd-pzNkMb-tJHJj {
display: none !important;
}

/*--------------------------------------------------------------
# track Order list
--------------------------------------------------------------*/
.track .track-title {
font-size: 26px;
font-weight: 400;
margin-top: 20px;
margin-bottom: 20px;
color: #222222;
}

.track .track-item {
padding: 0 0 20px 20px;
margin-top: -2px;
border-left: 2px solid var(--color-primary);
position: relative;
}

.track .track-item h4 {
line-height: 18px;
font-size: 18px;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: var(--color-primary);
margin-bottom: 10px;
}

.track .track-item h5 {
font-size: 16px;
background: #effbf9;
padding: 5px 15px;
display: inline-block;
font-weight: 600;
margin-bottom: 10px;
color: var(--color-primary);
}

.track .track-item ul {
padding-left: 20px;
}

.track .track-item ul li {
padding-bottom: 10px;
}

.track .track-item:last-child {
padding-bottom: 0;
}

.track .track-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50px;
left: -9px;
top: 0;
background: #fff;
border: 2px solid var(--color-primary);
}

@media (max-width: 992px) {
.track .track-side-img {
display: none;
}
}

/*--------------------------------------------------------------
# Countries Gallery Section
--------------------------------------------------------------*/
.countries {
overflow: hidden;
}

.countries .swiper-pagination {
margin-top: 20px;
position: relative;
}

.countries .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #d1d1d7;
opacity: 1;
}

.countries .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--color-primary);
}

.countries .swiper-slide-active {
text-align: center;
}

@media (min-width: 992px) {
.countries .swiper-wrapper {
padding: 40px 0;
}

.countries .swiper-slide-active {
border: 6px solid var(--color-primary);
padding: 4px;
background: #fff;
z-index: 1;
transform: scale(1.2);
}
}

/*--------------------------------------------------------------
# Radio Button Switches
--------------------------------------------------------------*/
.btn-group label {
background-color: transparent;
border: 1px solid #555555;
color: #000;
border-radius: 0; /* Remove border radius for the radio buttons */
}

.btn-group label.active {
background-color: #ff0000;
color: #fff;
border-color: #ff0000;
}

.btn-group label:hover {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}

/*--------------------------------------------------------------
# Frequently Asked Questions Section
--------------------------------------------------------------*/

.faq .accordion-item {
border: 0;
margin-bottom: 10px;
}

.faq .accordion-collapse {
border: 0;
}

.faq .accordion-button {
font-family: var(--font-intro);
padding: 15px 30px 20px 60px;
font-weight: 600;
border: 0;
font-size: 20px;
color: var(--color-primary);
text-align: left;
background: var(--color-gray);
border-radius: 5px;
}

.faq .accordion-button:focus {
box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
color: var(--color-primary);
border-bottom: 0;
box-shadow: none;
}

.faq .question-icon {
position: absolute;
top: 14px;
left: 25px;
font-size: 20px;
color: var(--color-primary);
}

.faq .accordion-button:after {
position: absolute;
right: 15px;
top: 15px;
}

.faq .accordion-body {
color: var(--color-primary);
font-size: 20px;
font-family: var(--font-intro);
padding: 10 30px 25px 60px;
border: 0;
background: var(--color-white);
border-radius: 5px;
}

/*--------------------------------------------------------------
# Store Slider Banner
--------------------------------------------------------------*/

.store-slider {
width: 100%;
max-width: 100vw;
height: 700px;
margin: auto;
position: relative;
overflow: hidden;
background-color: black;
}

.item {
flex: 0 0 100%;
}

img {
width: 100%;
height: auto;
}

.store-slider .list {
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}
.store-slider .list img {
width: 100%;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.store-slider .buttons {
position: absolute;
top: 45%;
left: 5%;
width: 90%;
display: flex;
justify-content: space-between;
}

.store-slider h2 {
line-height: 5rem;
margin-left: 50rem;
margin-top: -30rem;
text-align: left;
transform: translate(-50%, -50%);
font-size: 5rem; /* Adjust the font size as needed */
font-weight: 700;
color: #fff; /* Set the text color as needed */
text-align: center;
}

.store-slider .buttons button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
}
.store-slider .dots {
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.store-slider .dots li {
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
}
.store-slider .dots li.active {
width: 30px;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.store-slider {
height: 400px;
}
}

/*--------------------------------------------------------------
# fill button animation
--------------------------------------------------------------*/

.fill-button .btn {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 15px 30px;
display: inline-block;
margin: 15px 5px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.fill-button .btn {
border: 3px solid rgb(9, 9, 9);
color: rgb(0, 0, 0);
}
.fill-button .btn:hover {
color: #fff;
}
.fill-button .btn::after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.fill-button .btn:after {
width: 0%;
height: 100%;
top: 0;
border-radius: 2px;
left: 0;
background: rgb(11, 11, 11);
}
.fill-button .btn:hover:after,
.fill-button .btn:active:after {
width: 100%;
}

/*--------------------------------------------------------------
# iframe
--------------------------------------------------------------*/

.first-video {
margin-top: 4rem;
border-radius: 20px;
}

@media screen and (max-width: 1511px) {
.first-video {
margin-top: 0rem;
}
}

.tab-video {
border-radius: 20px;
}

/*--------------------------------------------------------------
# Shopping Cart
--------------------------------------------------------------*/
/* Style the cart items */

#cart {
margin-top: 5rem;
}

#cart .container {
background: var(--color-lighter-background);
padding: 50px;
border-radius: 10px;
}

#cart .cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}

/* Style the item image */
#cart .cart-item-image {
width: 80px;
height: 80px;
margin-right: 10px;
}

/* Style the delete button */
#cart .delete-button {
cursor: pointer;
}


#cart .cart-img-wrapper {
width: 60px; /* fixed width for uniformity */
height: 60px; /* fixed height for uniformity */
overflow: hidden; /* ensures image doesn't overflow */
display: flex;
align-items: center;
justify-content: center;
}

#cart .cart-img {
width: 100%;
height: 100%;
object-fit: cover; /* makes image fill the box nicely */
object-position: center; /* centers image crop */
border-radius: 8px; /* optional — matches Bootstrap rounding */
}



.cart-img-wrapper {
width: 70px;
height: 70px;
border-radius: 8px;
overflow: hidden;
}

.cart-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.cart-item-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 576px) {
.cart-item-name {
max-width: 150px;
}
.btn-group .btn {
padding: 0.25rem 0.5rem;
}
}



/*--------------------------------------------------------------
# Newsletter
--------------------------------------------------------------*/

#newsletter {
background-color: var(--color-primary);
/*
background-image: linear-gradient(
#042d7af0,
#042d7aef
),
url("/assets/img/others/port.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
}

#newsletter h1 {
color: #fff;
}

#newsletter .py-5 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}

#newsletter button {
color: #fff;
border: aliceblue 2px solid;
font-family: "Courier New", Courier, monospace !important;
}
#newsletter button:hover {
border: solid 2px yellow;
background: transparent;
}

#newsletter input {
border-radius: 5px;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#newsletter .outer br {
display: none;
}
}


/*--------------------------------------------------------------
# Gallery Selection
--------------------------------------------------------------*/

/* Gallery styles */
#gallery .gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 20px;
}


/* New CSS for background blur */
#gallery .overlay {
display: none; /* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Dark background */
backdrop-filter: blur(10px); /* Blur effect */
z-index: 9998; /* Below the modal */
}


.grid-item {
border-radius: 20px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
overflow: hidden; /* Ensure content doesn't overflow its container */
position: relative; /* Establish a positioning context for absolutely positioned children */
}

.grid-item img {
/* Set initial scale to 1 (normal size) */
transform: scale(1);
transition: transform 0.3s ease; /* Add a smooth transition effect */
transform-origin: center center; /* Set the transform origin to the center of the image */
display: block; /* Remove extra spacing beneath the image */
}

.grid-item:hover img {
/* Increase the scale on hover to zoom in */
transform: scale(1.2);
}

#gallery .grid-item iframe {
margin-top: 0rem;
width: 100%;
}

#gallery .grid-item img {
height: auto;
cursor: pointer;
}

/* Modal styles */
#gallery .modal {
<!-- margin-top: 5.7rem; -->
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0 0 0 / 50%);
}

#gallery .modal-content {
margin-top: 7.5rem;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
display: block;
width: 80%;
max-width: 700px;
max-height: 80%;
display: flex;
}

#gallery .close {
margin-right: 2.2rem;
margin-top: 0.5rem;
color: #fff;
float: right;
font-size: 50px;
font-weight: bold;
cursor: pointer;
padding: 10px;
}

#gallery .close:hover,
#gallery .close:focus {
color: #ccc;
text-decoration: none;
cursor: pointer;
}






#gallery .video-thumbnail {
position: relative;
cursor: pointer;
}

#gallery .video-thumbnail img {
height: 14rem;
width: 100%;
display: block;
}

#gallery .play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
background: url('/assets/img/icons/you1.png') no-repeat center;
background-size: contain;
pointer-events: none;
}

#gallery .video-wrapper iframe {
display: block;
margin: 8rem auto 0 auto;
/* top: 3rem, left/right: auto (center), bottom: 0 */
width: 50%;
height: 500px !important;
}





/* For small screens (smartphones) */
@media screen and (max-width: 767px) {

#gallery .video-wrapper iframe {
display: block;
margin: 8rem auto 0 auto;
width: 90%;
height: 300px !important;
}


#gallery .modal-content {
margin-top: 6rem;
}


#gallery .close {
font-size: 40px;
font-weight: bolder;
padding: 10px;
margin-right: 2.2rem;
margin-top: 0.5rem;
}


#title1 {
margin-top: 50px;
}
#gallery .grid-item iframe {
margin-top: 0rem;
width: 100%;
height: auto;
}

#gallery {
margin-top: 5rem;
}
}

#image-track {
display: flex;
margin-top: 2rem;
gap: 4vmin;
position: relative;
left: 50%;
top: 100%;
transform: translate(0%, -50%);
user-select: none; /* -- Prevent image highlighting -- */
}

#image-track > .image {
width: 40vmin;
height: 56vmin;
object-fit: cover;
object-position: 100% center;
}

/*--------------------------------------------------------------
# packaging and removal services
--------------------------------------------------------------*/

.slide-container {
max-width: 1120px;
width: 100%;
padding: 40px 0;
}
.slide-content {
margin: 0 40px;
overflow: hidden;
border-radius: 25px;
}

#contact .card {
border: solid;
border-radius: 25px;
background-color: #fff;
}

#contact .make-enquire,
#contact form {
background-color: var(--color-primary);
border-radius: 5px;
}

#contact button {
background-color: var(--color-primary);
}

#contact .tel {
color: #2e3192;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* 15 inch screen */
@media screen and (max-width: 768px) {
#contact {
margin-top: 3rem;
}
#contact .tel {
font-size: 1.2rem;
}
}

.card .swiper-slide {
border-radius: 25px;
background-color: #fff;
border-bottom: thick double #32a1ce;
}

.image-content,
.card-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 14px;
}
.image-content {
position: relative;
row-gap: 5px;
padding: 25px 0;
}
.overlay::after {
border-radius: 0 25px 0 0;
background-color: #fff;
}

.card-image {
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background: #fff;
padding: 3px;
}
.card-image .card-img {
margin: 0;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 4px solid var(--color-primary);
}
.name {
font-size: 18px;
font-weight: 900;
color: #333;
}
.description {
font-size: 14px;
color: #040404;
text-align: center;
}

/* for the mini-points card under the bulleting of each major point */

.mini-point .image-content {
position: relative;
row-gap: 0px;
padding: 0;
}

.mini-point .card-image {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: #fff;
padding: 0px;
}

.mini-point .swiper-slide {
border-radius: 5px !important;
}

.mini-point .name {
font-size: 18px;
text-align: center;
font-weight: 900;
color: #333;
}
.mini-point .description {
font-size: 14px;
color: #040404;
text-align: left;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.slide-content {
margin: 0 10px;
}
.swiper-navBtn {
display: none;
}
}

/*--------------------------------------------------------------
# Inter-Services
--------------------------------------------------------------*/

#interservice .custom-dropdown {
position: relative;
width: 200px;
}
#interservice .tabs a {
font-weight: 500;
color: #000;
}

#interservice .selected-item {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

#interservice .dropdown-list {
display: none;
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
background-color: #fff;
width: 199px;
z-index: 999;
}

#interservice .video-tutorial .text-center {
color: var(--color-primary);
font-family: var(--font-title);
}

#interservice .dropdown-list li {
padding: 8px;
display: flex;
align-items: center;
}

#interservice .dropdown-list li:hover {
background-color: #f0f0f0;
}

#interservice .dropdown-list li img {
width: 24px; /* Adjust size as needed */
height: auto;
margin-right: 8px;
}

#interservice .selected-item img {
width: 24px; /* Adjust the width as needed */
height: auto; /* Maintain aspect ratio */
margin-right: 8px;
}

/* Show dropdown list on hover */
#interservice .show-dropdown .dropdown-list {
display: block;
}


/* For high-resolution displays (Retina, HiDPI) */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#interservice .item-description {
font-size: 15px;
}
}

/* For medium screens (tablets) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
#interservice .item-description {
font-size: 13px;
}
#interservice .video-tutorial iframe {
padding-right: 30px;
}
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#interservice .tabs a {
width: 150px !important;
font-size: 12px;
}

#interservice .video-tutorial {
margin-top: 0rem !important;
}

#interservice .video-tutorial .text-center {
font-size: 25px !important;
margin-bottom: 1rem !important;
}

#interservice strong {
font-size: 0.7rem !important;
}

#interservice .video-tutorial iframe {
width: 363px !important;
}

#interservice .tabs {
font-size: 10px;
margin-top: 32px;
}
#interservice h5 b {
font-size: 14px;
}

#interservice h2 {
margin-top: 5px !important;
}
#interservice .fill-button {
margin-top: 5px;
margin-bottom: 20px;
}

#interservice .text-start {
font-size: 14px;
font-weight: 500;
}

#interservice .displayed-item {
margin-left: -20rem;
margin-top: 3rem;
width: 100px; /* Adjust the width as needed */
height: auto; /* Maintain aspect ratio */
}

#interservice .item-description {
font-size: 13px;
}
}

/*--------------------------------------------------------------
# van-container Icon
--------------------------------------------------------------*/
#van-container {
position: relative; /* Add this to establish a positioning context */
height: 50px;
width: 50px;
float: inline-end;
margin-top: -5rem;
}

#van-container .van-icon {
position: relative; /* Add this to establish a positioning context */
z-index: 1;
}

#van-container .van-badge,
#van-container .van-badge2 {
position: absolute; /* Position the badge absolutely */
background-color: var(--color-scarlet);
color: var(--color-white);
border-radius: 10%;
font-size: 15px;
padding: 1px 7px 1px 7px;
top: -10px; /* Adjust the top position */
right: -10px; /* Adjust the right position */
z-index: 2; /* Ensure the badge is above the icon */
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.packaging-form #van-container {
margin-top: -4rem;
margin-right: 1rem;
}
}
/*--------------------------------------------------------------
# Section for the calendar
--------------------------------------------------------------*/

#services-intro .google-calendar {
font-family: Arial, sans-serif;
width: 1200px;
height: 900px;
}


/* For high-resolution displays (Retina, HiDPI) */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#services-intro .container {
background-color: rgba(0, 0, 0, 0);
}
}

/*--------------------------------------------------------------
# agents
--------------------------------------------------------------*/



#agents .countries-list {
width: 30%;
background-color: var(--color-secondary);
color: white;
padding: 10px;
border-radius: 10px 0px 0px 10px;
}

#agents .countries-list img {
width: 60px;
height: 40px;
border: 3px solid white;
}

#agents .countries-list span {
font-family: var(--font-title);
font-size: 1.2rem;
margin-left: 30px;
}

#agents .countries-list i {
float: right;
}

#agents .countries-list ul {
list-style: none;
padding: 0;
}

#agents .countries-list li {
cursor: pointer;
margin-bottom: 2px;
margin-top: -10px !important;
padding: 5px;
}

#agents .country-details {
background-color: var(--color-white);
border: 9px solid var(--color-secondary);
flex: 1;
padding: 20px;
border-radius: 0px 50px 50px 0px;
}

#agents .country-content {
display: none;
}

#agents #usa-content {
display: block;
/* Show USA content by default */
}

#agents .contents {
background: rgb(241, 241, 241);
color: rgba(0, 0, 0, 0.8);
padding: 20px;
margin: 0;
}

#agents .country {
border-radius: 5px;
width: 283px;
height: 140px;
}

#agents .country:hover,
#agents .country:active {
padding: 10px;
border-radius: 5px;
border: 3px solid #ffc800;
background: #f2f2f2 !important;
background-color: #fff !important;
}

#agents .country:hover {
cursor: pointer;
}

#agents p {
padding: 5px;
}

#agents h4 {
font-weight: 700;
}

#agents .country:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

#agents .slide-up,
.slide-down {
overflow: hidden;
}
#agents .slide-up > div,
.slide-down > div {
margin-top: -96%;
transition: margin-top 0.4s ease-in-out;
}
#agents .slide-down > div {
margin-top: 0;
border-radius: 5px 10px 10px 5px;
color: var(--color-white);
background: var(--color-primary);
}

@media screen and (max-width: 768px) {

#agents .country-details {
border-radius: 0px;
}

#agents .countries-list {
border-radius: 0px;
}


#agents {
margin-top: 3rem;
}

#agents p {
font-size: 14px;
}

#agents .countries-list {
width: 100% !important;
}

.countries-list li:nth-child(n + 5) {
display: none;
}
}

/*--------------------------------------------------------------
# Section Partnering Countries
--------------------------------------------------------------*/

#partners {
background-color: #fff;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#partners .news-carousel {
padding: 10px;
}
#partners .section-header {
padding-bottom: 0;
}
}
/*--------------------------------------------------------------
# Section packaging-form
--------------------------------------------------------------*/

#packaging-form {
background-color: var(--color-primary);
flex-direction: column;
align-items: center;
padding-right: 5rem;
padding-left: 5rem;
}

#packaging-form .price-review {
-webkit-text-stroke-width: thin;
}

#packaging-form .form-row .showlink {
display: none;
}

#packaging-form h2 {
padding: 20px;
}

#packaging-form label {
font-weight: 400;
}

/* Card styles */
#packaging-form .cardy {
background-color: #f0f0f0;
/* border-radius: 5px;*/
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 20px;
}

#packaging-form .card-header {
padding: 5px;
color: #fff;
text-align: left;
border-bottom: none;
background-color: #00000000;
color: var(--color-default);
}

#packaging-form .card-header h2 {
font-size: 20px;
}

#packaging-form .price-review h5 {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

#packaging-form .price-review h3,
#packaging-form .price-review h2 {
font-weight: 100;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#packaging-form .card-body {
padding: 10px;
}

#packaging-form .card-footer {
border-top: none;
padding: 10px 20px;
background-color: #00000000;
text-align: center;
}


#packaging-form .second-address-container {
display: none; /* Hide initially */
}

#packaging-form .profile-container {
display: none; /* Hide initially */
}

.card-footer button span {
font-weight: 100 !important;

}

#packaging-form .btn:hover {
background-color: #ae0003;
border:none;
}

@media (max-width: 768px) {

#packaging-form .price-review {
margin-bottom: 1.3rem;
}

#packaging-form .alert-primary {
margin : 1rem;
padding : 10px;
}

#packaging-form .price-view-mbl {
margin-top : 1rem;
}

#packaging-form .card-footer {
margin-bottom: 0.7rem;
}

#packaging-form .cardy {
padding: 2px !important;
}

.delivery-container {
margin-top: 5rem !important;
}

.form-group {
margin-bottom: 0px !important;
}
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {

#packaging-form .card-body {
padding: 0px;
}
#packaging-form {
padding: 0rem;
}
}

/*--------------------------------------------------------------
# Section intro
--------------------------------------------------------------*/
.section-expect {
background: var(--color-seablue);
}

.explore-services .mobile-intro,
.explore-services2 .mobile-intro {
display: none;
}

.section-expect .pic1-animate {
margin-top: 4rem !important;
margin-left: -1rem;
z-index: 999;
}

.section-expect .pic2-animate {
position: absolute;
width: 150px;
height: auto;
margin-left: 3rem;
margin-bottom: -30rem;
}

.section-expect .pic3-animate {
position: absolute;
width: 500px;
height: auto;
margin-bottom: 5rem;
margin-left: 10rem;
}

.section-expect .pic4-animate {
position: absolute;
width: 150px;
height: auto;
margin-left: 15rem;
margin-bottom: -30rem;
}

.section-expect .pic5-animate {
position: absolute;
width: 120px;
height: auto;
margin-left: 29rem;
margin-bottom: -23rem;
}

.section-expect .pic6-animate {
position: absolute;
width: 130px;
height: auto;
margin-left: 1rem;
margin-bottom: -45rem;
}

.section-expect .pic7-animate {
position: absolute;
width: 120px;
height: auto;
margin-left: 8rem;
margin-bottom: -45rem;
}

.section-expect .pic8-animate {
position: absolute;
width: 130px;
height: auto;
margin-left: 23rem;
margin-bottom: -45rem;
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.section-expect .flag-container {
padding-left: 10px;
padding-right: 20px;
}
.section-expect .position-relative {
padding-left: 10px;
padding-right: 20px;
}
}

#title1 h1 {
font-weight: 700;
font-size: 3.125rem;
color: var(--color-primary);
text-transform: capitalize;
font-family: Sarabun !important;
letter-spacing: 0;
display: block;
text-shadow: 0 0 80px rgb(255 255 255 / 50%);


}

#title2 h1 {
font-weight: 700;
font-size: 2.5rem;
color: var(--color-title) !important;
font-family: Sarabun !important;
/* text-transform: ; */
}

#title-wht h1 {
font-weight: 700;
font-size: 3.125rem;
color: var(--color-white);
font-family: var(--font-title);
text-transform: capitalize;
}

#title3 h1 {
font-weight: 700;
font-size: 3.125rem;
color: var(--color-primary);
font-family: var(--font-title);
text-transform: capitalize;
}
#title4 h1 {
font-weight: 700;
font-size: 2.1rem;
color: var(--color-primary);
font-family: var(--font-title);
/* text-transform: ; */
}

@keyframes bartextanim {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
#title1 h1,
#title2 h1,
#title3 h1,
#title-wht h1,
#title4 h1 {
font-weight: 700;
font-size: 1.35rem;
color: var(--color-primary);
font-family: Sarabun !important;
text-transform: capitalize;
}

.section-expect .pic2-animate,
.section-expect .pic3-animate,
.section-expect .pic4-animate,
.section-expect .pic5-animate,
.section-expect .pic5-animate,
.section-expect .pic6-animate,
.section-expect .pic7-animate,
.section-expect .pic8-animate {
display: none;
}

.section-expect .space-div2 {
display: block;
}

.explore-services #space-div,
.explore-services2 #space-div {
display: none;
}

.explore-services .mobile-intro,
.explore-services2 .mobile-intro {
display: block;
font-size: 30px;
margin-bottom: 15px;
}

#hero span {
display: none;
}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer {
background-color: var(--color-primary) !important;\
z-index: -999 !important;
}
.section-expect h4 {
color: var(--color-primary);
}
.section-footer .top-footer {
margin-top:-2rem;
}

.section-footer {
position: relative; /* or absolute/fixed, depending on layout */
z-index: -2;
padding-top: 30px;
background-color: #2e3192;
z-index: 2 !important;

/* If you want to use the background image, uncomment this */
/* background-image: url("/assets/img/others/footer.svg"),
linear-gradient(to right, #2e3192, #2e3192); */
}


.footer-img {
top: 50%;
transform: translateY(-50%);
width: 100px; /* Adjust as needed */
height: auto; /* Maintain aspect ratio */
}

.footer-bg .left,
.footer-bg .right {
z-index: 999;
margin-top: -21.3rem;
}

.section-footer .left {
left: 0 !important;
bottom: 0 !important;
width: 1000px;
}

.section-footer .right {
right: 0;
bottom: 0 !important;
width: 1000px;
}

.section-footer ul {
line-height: 2;
}

.section-footer .item-list-a i {
font-size: 18px;
color: var(--color-white);
}

.section-footer .widget-a .w-title-a {
font-family: Sarabun !important;
color:rgb(255, 255, 255);
margin-bottom: 1rem;
}
.section-footer p,
.section-footer ul,
footer .credits,
footer div p {
color: var(--color-white);
font-family: Sarabun !important;
}

.section-footer a {
font-family: Sarabun !important;
color: var(--color-white);
text-decoration: none;
}

.section-footer a:hover {
color:rgb(255, 248, 45) !important;
}


.section-footer .socials-a {
padding-left: 2rem;
width: auto;
font-size: 2rem;
}

.section-footer .logo .img-fluid {
width: 12rem;
height: auto;
}

footer {
background: var(--color-white);
text-align: center;
padding: 30px 0;
}

footer .copyright-footer {
border-top: 1px solid #ddd;
padding-top: 20px;
}

footer .credits {
font-size: 16px;
font-family: Manrope !important;

}


/* For small screens (smartphones) */
@media screen and (max-width: 767px) {
.section-footer {
margin-top: 0rem;
}

.section-footer .item-list-a i {
font-size: 9px;
}

.section-footer a {
font-family: Manrope !important;
font-size: 12px !important;
}

.section-footer .logo .img-fluid {
width: 9rem;
height: auto;
}

.section-footer .list-inline-item a {
width: 0.5rem;
}


.section-footer .color-text-a {
font-size: 16px;
}
.section-footer .list-unstyled li span {
font-size: 12px;
}
.section-footer .w-header-a .logo {
width: 170px;
height: 10% !important;
}


.section-footer .top-footer {
margin-top: -2rem;
}


.tawk-min-container {
margin-left: -20rem;
}
.section-footer #space-div {
display: none;
}
}

#importDetails .card {
background-image: url(/assets/img/others/waves2.svg), linear-gradient(to right, #ffffff, #f2f8ff);
color: black;
max-width: 100%;
margin: 0 auto;
padding: 5px;
margin-top: 0.5rem;

}

#importDetails button{
font-size: 1.3rem;
color: black;

font-family: var(--font-title);
}



#agent-details section h2 {
margin-bottom: 20px;
}

#agent-details .card-header button {
width: 100%;
text-align: left;
text-decoration: none;
color: black;
font-size: 20px;
}

#agent-details section h2 {
margin-bottom: 20px;
}

#agent-details .card-header button {
width: 100%;
text-align: left;
}

#agent-details .img-fluid {
max-width: 100%;
height: auto;
}

#agent-details h5 {
margin-top: 10px;
font-family: Work Sans, "Sans";
}

#agent-details a.country-link {
text-decoration: none;
color: inherit;
position: relative;
display: block;
}

#agent-details a.country-link img {
display: block;
}

#agent-details a.country-link h5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
border-radius: 5px;
margin: 0;
width: 100%;
text-align: center;
}

#agent-details .wide-section {
width: 100%;
padding: 0 15px;
}

#agent-details .wide-section h2 {
text-align: center;
margin-bottom: 30px;
}


#agent-details table {
width: 100%;
border-collapse: collapse;
}

#agent-details th,
#agent-details td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}

#agent-details th {
background-color: #f2f2f2;
}

#agent-details .pagination {
margin: 10px 0;
text-align: center;
}

#agent-details .pagination button {
padding: 5px 10px;
margin: 0 2px;
border: 1px solid #000;
background-color: #fff;
}

#agent-details .pagination button.active {
background-color: #ddd;
}

#agent-details .search-container {
text-align: right;
margin-bottom: 10px;
}

#agent-details .search-container input {
padding: 5px;
width: 200px;
border: 1px solid #000;
}

#agent-details h2 {
color: navy;
}

#agent-details ul {
margin: 20px;
}



@media screen and (max-width: 767px) {

#importDetails p {
font-size: 14px;
}
#agent-details section h2 {
font-size: 1.3rem;
}

#agents .country-link h5 {
margin-left: 1rem !important;
margin-top: 2rem !important;
font-size: 1rem !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: black;
}

}




#agents section h2 {
margin-bottom: 20px;
}

#agents .row .col-md-4 {
border-radius: 50px !important;
}

#agents .card-header button {
width: 100%;
text-align: left;
}

#agents .img-fluid {
max-width: 100%;
height: auto;
}

#agents h5 {
margin-top: 10px;
}

#agents a.country-link {
text-decoration: none;
color: inherit;
position: relative;
display: block;
}

#agents a.country-link img {
display: block;
}

#agents .country-link h5 {
position: absolute;
font-size: 2rem;
margin-left: 2.5rem;
margin-top: 4rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: black;
padding: 5px 10px;
border-radius: 5px;
width: 100%;
text-align: center;
}


#agents img {
transition: transform 0.3s ease; /* Adjust the duration and easing as needed */
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#agents img:hover {
transform: scale(1.05); /* Zooms in the image by 5% */
}

#mapModal {
margin-top: 6rem;
}


#mapModal button {
border: none;
background: transparent;
font-size: xx-large;
}
#mapModal .modal-body {
padding: 0;
}
#mapModal #mapFrame {
width: 100% !important;
}


/* #agent-details {
background: url('/assets/img/others/hero-bg.png') no-repeat center center;
background-color: #d8d8d8;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} */

#agentx a {
text-decoration: none;
color: black;
font-weight: 400;
font-size: smaller;
}


#agentx .card:hover {
background: rgb(237,0,57);
background: linear-gradient(90deg, rgba(237,0,57,1) 0%, rgba(253,29,29,1) 10%, rgba(253,70,40,1) 37%, rgba(255,76,0,1) 100%);
border: 2px solid white;
cursor: pointer;
color: white;
}

#agentx #useful-links a {
font-family: Sarabun !important;
font-size: 20px;
}

#agentx .card a:hover {
color: white;
}

#agentx #useful-links {
max-height: 308px !important;
padding-left: 30px;
}

#agentx .card {
background: ##feffff;
border: 1px solid;
box-shadow: 3px 2px 5px rgb(179 179 179 / 37%);
}

#agentx .view-map {
background: green;
color: white;
margin-top: 15px !important;
border-radius: 2px;
padding: 4px;
}








.ship-row {
margin-top: 1rem !important;
}

#shippingClock {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

#shippingClock .nav-buttons {
position: relative;
margin-bottom: 10px;
}


#shippingClock .nav-buttons button {
position: absolute;
top: 3rem;
z-index: 2;
background: rgba(255, 255, 255, 0.8);
border: none;
color: var(--color-secondary);
font-weight: bold;
font-size: 1rem;
cursor: pointer;
padding: 8px 12px;
border-radius: 5px;
transition: 0.3s ease;
}


#shippingClock .nav-buttons #prevBtn {
left: -80px; /* Adjust as needed */
color: var(--color-secondary);
background: transparent;
font-size: 5rem;
margin-top: 5.5rem;

}

#shippingClock .nav-buttons #nextBtn {
right: -80px; /* Adjust as needed */
color: var(--color-secondary);
background: transparent;
font-size: 5rem;
margin-top: 5.5rem;
}


#shippingClock .nav-buttons #prevBtn:hover,
#shippingClock .nav-buttons #nextBtn:hover {
color: var(--color-primary);
}

@media (max-width: 768px) {

#shippingClock .nav-buttons{
text-align: center !important;
margin-top: 2rem;
}


#shippingClock .nav-buttons #prevBtn,
#shippingClock .nav-buttons #nextBtn {
left: 0;
right: 0;
position: static;
display: inline-block;
margin: 10px auto;
}
}

.country-container {
position: relative;
}







#shippingClock .CLockSearch {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
}

#shippingClock .search-bar {
flex: 1;
position: relative;
}

#shippingClock .search-bar input {
width: 30%;
padding: 10px;
border: none;
border-bottom: 1px solid gray;
font-size: 16px;
background-color: transparent;
}

#shippingClock .search-bar input:focus {
outline: none;
/* Remove the default focus outline */
border-bottom-color: #000;
/* Change the underline color on focus */
}


#shippingClock .filter {
margin-left: 20px;
}

#shippingClock .filter select {
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
}

#shippingClock .country-grid {
display: grid;
background: transparent !important;
grid-template-columns: repeat(4, 1fr);/* set the number of columns in a row */
padding: 50px;
border-radius: 30px;
gap: 9px;
margin-top: 5px;
}

#shippingClock .country-card {
background-color: var(--color-primary);
border-radius: 10px;
text-align: center;
<!-- box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
margin: 10px; -->

}

#shippingClock .country-card img {
max-width: 100%;
border-radius: 10px 10px 0 0;
padding-top: 1.2rem;
}

#shippingClock .country-card h3 {
color: white;
margin: 15px 0 5px;
font-size: 1rem;
}

#shippingClock .country-card p {
margin: 5px 0;
font-size: 14px;
}

#shippingClock .pagination {
margin-top: 20px;
text-align: center;
}

#shippingClock .pagination button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #555;
color: white;
cursor: pointer;
}

#shippingClock .pagination button:disabled {
background-color: #f2f2f2;
cursor: not-allowed;
}

#shippingClock b {
color: var(--color-primary);
font-family: var(--font-topic);
}

#shippingClock .pagination button {
background: transparent;
border: none;
color: var(--color-primary);
}

#shippingClock span {
font-size: 2.5rem;
font-weight: 500;
font-family: var(--font-title);
color: var(--color-primary);
}


#shippingClock .right-img {
box-shadow: -7px 4px 22px -21px rgba(66, 68, 90, 1);
}

#shippingClock a {
font-family: Manrope !important;
text-decoration: none;
color: yellow;
font-size: 1rem;
}

#shippingClock a:hover {
color: white;
}

#shippingClock .country-card b {
font-family: Sarabun !important;
font-size: 1.2rem;
padding: 20px 20px 20px 0px;
color: white;
text-align: center !important;
}


#intro-herox .text-article {
text-align: justify !important;
}

#intro-herox h2 {
font-size: 3.2rem !important;
font-weight: bold;
text-wrap: balance !important;
width: 100% !important;
transform: none !important;
text-align: center !important;
word-break: break-word !important;
margin-top: 1rem !important;
margin-bottom: -5rem;
font-family: "Jost", sans-serif;
color: var(--color-primary);
}


#intro-herox p {
font-size: 1.05rem;
font-weight: normal;
}


@media screen and (max-width: 768px) {

#intro-herox {
padding-bottom: 0rem !important;
}

#intro-herox h2 {
font-size: 2.3rem !important;
margin-bottom: -5rem;
}


#shippingClock .country-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: -5rem !important;
}


#agentx #useful-links {
margin: 10px !important;
padding-left: 30px;
padding-right: 30px;
}

#agentx #useful-links a {
font-size: 15px;
}

#agentx a {
font-size: 12px;
}

#shippingClock b {
font-size: 12px !important;
line-height: -2rem !important;
padding-left: 10px;
text-align: left;
}

#shippingClock .search-bar input {
width: 100%;
}

#shippingClock .country-card h3 {
margin: 15px 0 5px;
font-size: 0.6rem;
}

#shippingClock span {
font-size: 1.6rem;
position: relative;
text-align: center;
}

#shippingClock .right-img {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

#intro-herox .right-img {
display: none;
}

.ship-row {
margin-bottom: 15px !important;
margin-top: 0rem !important;
background: transparent !important;
border-radius: 50px !important;
}

#shippingClock a {
font-family: Manrope !important;
font-size: 0.6rem;
}

}



#sailing .input_search[list="countries-list"]::-webkit-calendar-picker-indicator {
display: none;
/* Remove default arrow if you want */
}

#sailing th {
color: yellow;
font-weight: 400;

}

#sailing input[list="countries-list"]+datalist {
max-height: 150px;
overflow-y: auto;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#sailing input[list="countries-list"]+datalist option {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #eee;
}

#sailing #pagination button {
padding: 5px 10px;
margin: 0 5px;
background-color: #52515100;
border: 1px solid #fff;
cursor: pointer;
color: #fff;
}


#sailing #pagination button:hover {
background-color: var(--color-primary);
}

#sailing .table-responsive {
overflow-x: auto;
}



#ticker-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
background-color: #000;
color: #fff;
padding: 0px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
}

#ticker-container .title {
margin:0 !important;
color:fff;
background: #000;
z-index: 999;
padding: 5px;
}

#ticker-container .title b {
padding-left: 20px;
background: #000;
color:fff;
}

#ticker-content {
padding: 5px;
text-transform:uppercase;
display: inline-block;
animation: scroll-left 150s linear infinite;
/* Adjust timing for slow scroll */
animation-play-state: running;
/* Ensure it starts running */
will-change: transform;
/* Improves animation performance */
}

@keyframes scroll-left {
0% {
transform: translateX(0);
/* Start immediately visible */
}

100% {
transform: translateX(-100%);
/* Scroll off the left side */
}
}

/* Pause the ticker animation when hovered */
#ticker-container:hover #ticker-content {
animation-play-state: paused;
}

/* Pause the ticker when pressed down on mobile */
#ticker-container:active #ticker-content {
animation-play-state: paused;
}




@media screen and (max-width: 768px) {
#ticker-content {
font-size: 12px;
}
#ticker-container .title {

}

#ticker-container .title {
color:fff;
background: red;
}

#ticker-container .title b {
background: red;
}

#agent-details header {
background-color: red;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: -5px;
height: 0.1rem;
}

#x-countries video,
#x-countries img {
height: auto;
width: 320px !important;
margin-left: 20px;
margin-bottom: 20px;
border-radius: 30px;
}


}



#x-countries video {
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
height: auto;
width: 1320px;
border-radius: 30px;
}

#x-countries img {
border: 2px solid var(--color-secondary);
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
height: auto;
width: 1320px;
background-size: cover;
border-radius: 30px;
}



/* Importation Details styling */

#personalEffects,
#motorVehicles,
#returningResidents,
#photography
{
padding-bottom: 15px;
border-bottom: none !important;
}

#personalEffects,
#motorVehicles,
#returningResidents,
#photography {
position: relative; /* Required for proper alignment of children */
background-image: url("/assets/img/icons/arrow-down4.png");
background-size: contain; /* Adjusts the size of the background */
background-repeat: no-repeat; /* Ensures no repetition */
background-position: right center; /* Positions the background image */
padding-right: 10px; /* Adjust for spacing if necessary */
}

#personalEffects img,
#motorVehicles img,
#returningResidents img,
#photography img {
width: auto;
height: 200px !important;
margin-top: -40px;
display: block;
margin-left: auto;
margin-right: 0;
}

/* Container for partner icons */
.partner-icons,
#ticker-content {
gap: 10px;
display: flex; /* Enables horizontal alignment */
justify-content: flex-start; /* Aligns images to the left */
align-items: center; /* Vertically aligns items */
flex-wrap: nowrap; /* Prevent wrapping */
overflow-x: none; /* Adds horizontal scrolling for overflow */
padding: 10px; /* Optional: Adds some padding around */
}

.partner-icons img {
width: 250px;
}




.blog-post-title {
color: var(--color-primary);
font-weight: 600;
text-align: center !important;
justify-content: center;
transform: uppercase !important;
}


/* ------------------------------------------------
Enables horizontal alignment
---------------------------------------------------*/
.serve-slider {
position: relative;
overflow: hidden;
}

.serve {
display: none;
transition: opacity 0.4s ease-in-out;
}

.serve.active {
display: block;
}


.serve-controls {
display: flex;
gap: 10px !important;
margin-top: -40px;
margin-right: 20px !important;
}

.serve-controls button {
font-family: Sarabun !important;
z-index: 999 !important;
background: var(--color-primary);
color: #fff;
padding: 1px 20px 10px 20px;
/* TRBL */
font-size: 1.5rem;
border: none;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
border-radius: 5px;
}

.serve-controls button:hover {
background-color: rgb(0, 0, 0);
}

.serve-controls button,
.serve-controls button * {
cursor: pointer;
}

/* For small screens (smartphones) */
@media screen and (max-width: 767px) {

.serve-controls {
margin-right: 67px !important;
margin-top: 2px !important;
}

}