/*custom styles*/
body, html { overflow-x: hidden; }

.bg-navy { background-color: #013A4B !important; }
.bg-teal { background-color: #00A1BD !important; }
.bg-yellow { background-color: #EDC21B !important; }
.bg-sky { background-color: #AEE1FA !important;}

.text-xs { font-size: 16px; line-height: 26px; }
.text-sm { font-size: 18px; line-height: 28px; }
.text-navy { color: #013A4B !important; }
.text-teal { color: #00A1BD !important; }
.text-dark-teal { color: #015E78 !important; }
.text-yellow { color: #EDC21B !important; }
.text-sky { color: #AEE1FA !important; }
.text-normal { text-transform: none !important; }
.font-l { font-weight: 300; }
.font-r { font-weight: 400; }
.font-m { font-weight: 500; }
.font-s { font-weight: 600; }
.font-b { font-weight: 700; }
h1, h2, h3 { font-family: 'Special Gothic Expanded One', sans-serif !important; font-weight: 400; font-style: normal; text-transform: uppercase; }
h2 { font-size: 40px; line-height: 54px; }
.font-special, #mainHead .hfe-menu-item, .elementor-button { font-family: 'Special Gothic Expanded One' !important; }
.font-man { font-family: 'Manrope' !important; }

.cta { border-radius: 50px; letter-spacing: 2px; }
.cta:hover { background-color: #AEE1FA !important; }
#mainHead li:last-child .hfe-menu-item { color: #EDC21B; }
#mainHead .sub-menu { padding-top: 8px; padding-bottom: 8px; }

.different:after { content: ""; position: absolute; background-color: #EFEFEF; height: 100%; width: 1000px; left: 100%; top: 0; }
.line {width: 100px; height: 30px; border-bottom: 1px dashed #ffffff; left: -140px; top: 50%; transform: translateY(-50%); z-index: 99; }
.line .dot { height: 30px; width: 30px; border-radius: 15px; right: 85px; top: 15px; background: #EDC21B; }
.services .service { position: relative; }
.services .service:after { content: ""; background: rgba(237,194,27,.60); height: 80px; width: 80px; border-radius: 70px; position: absolute; top: -40px; right: -30px; mix-blend-mode: multiply; display: inline-block; z-index: 4; }
.latest-posts .latest-post-item { margin-bottom: 40px; border-radius: 15px; overflow: hidden; min-height: 400px; }
.latest-posts .latest-post-item h3 { font-family: 'Manrope' !important; text-transform: none; font-size: 22px; line-height: 32px; }
.latest-posts .latest-post-item:before { content: ""; background: rgba(1, 58, 75, 0.7); height: 100%; width: 100%; position: absolute; left: 0; top: 0; }
.latest-posts .latest-post-item .latest-post-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.hero:before { content: ""; background: rgba(1, 58, 75, 0.65); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.hero.interior h1 { font-size: 54px; line-height: 60px !important; }
.multiply { mix-blend-mode: multiply; }
a, .elementor-button span { text-decoration: none !important; }

.anim { position: relative; transition: 2s all ease; }
.anim.appear { opacity: 0 }
.anim.slideUp { transform: translateY(150px); }
.anim.slideRight { transform: translateX( -100%) }
.anim.slideLeft { transform: translateX( 100%) }
.anim.zoom { background-size: 130% !important; transition: 2s all ease-in-out 2s; }
.anim.appear.active { opacity: 1 }
.anim.slideUp.active { transform: translateY(0); }
.anim.slideRight.active { transform: translateX(0) }
.anim.slideLeft.active { transform: translateX(0) }
.anim.zoom.active { background-size: 100% !important; }
.td-1 { transition-delay: 250ms !important; }
.td-2 { transition-delay: 500ms !important; }

.anim.active .dot.travel {
    transition: 2s all ease;
    transform: translateX(100px);
}

@keyframes fade-in {
  0% { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0);  }
}

.reveal {
  animation-name: fade-in;
  animation-duration: 1s; /* Adjust duration as needed */
  animation-timing-function: ease-in-out; /* Optional: smooth animation */
  animation-fill-mode: forwards; /* Optional: element stays in final state */
}

#homeLatest .anim { opacity: 0; transform: translateY(150px); }
#homeLatest .anim.active { opacity: 1; transform: translateY(0); }
.dashed .dot { height: 30px; width: 30px; border-radius: 15px; top: 15px; left: 0; }

@media screen and (max-width: 767px) {
	.areYou { position: static !important; }
	.why { z-index: 11; }
	.read-more { font-size: 16px; }
	.dashed { display: none; }
}

@media screen and (max-width: 1024px) {
	.areYou .line { display: none !important; }
}

@media screen and (min-width: 768px) {
	.split { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
	.dashed { width: 200px; border-bottom: 1px dashed #015E78; height: 30px; top: -124px; right: -90px; z-index: 9; }
	.anim.active .dashed .dot {  transition: 3s all ease; transform: translateX(200px); }
}

@media screen and (min-width: 1024px) {
	.hfe-menu-toggle.sub-arrow { display: none; }
	.services .service:after { top: -20px; left: -30px; right: auto; }
	.latest-posts { display: flex; gap: 40px; }
	.latest-posts .latest-post-item { flex: 1; min-width: 0; }
	.split.three { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
	.dashed { top: -80px; }
}

@media screen and (min-width: 1200px) {
	.latest-posts { gap: 50px; }
	.latest-posts .latest-post-item { min-height: 500px;  }
	.latest-posts .latest-post-item h3 { font-size: 28px; line-height: 40px; }
	.dashed { width: 430px; }
	.anim.active .dashed .dot {  transform: translateX(430px); }
}

@media screen and (min-width: 1366px) {
	h2 { font-size: 50px; line-height: 62px; }
	.dashed { width: 350px; }
	.anim.active .dashed .dot {  transform: translateX(350px); }
}

@media screen and (min-width: 1600px) {
	.services .service:after { height: 120px; width: 120px; top: -40px; left: -55px; right: auto; }
}

@media screen and (min-width: 1780px) {
	.container { max-width: 1600px; }
	.dashed { width: 430px; top: -90px; right: -90px; }
	.anim.active .dashed .dot {  transform: translateX(430px); }
}