:root {
--ita-primary: #1A2B48;
--ita-body: #5B6B84;
--ita-meta: #66758C;
--ita-white: #FFFFFF;
--ita-bg: #FEFEFA;
--ita-green: #1A2B48;
--ita-green-light: #176B57
}
* {
box-sizing: border-box
}
::selection {
background: var(--ita-primary);
color: #fff
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
padding: 0;
background: var(--ita-bg);
color: var(--ita-body);
font-family: "Manrope", sans-serif;
overflow-x: hidden
}
body.scroll-off {
overflow: hidden
}
a {
text-decoration: none
}
img {
max-width: 100%;
height: auto
}
button {
font-family: "Manrope", sans-serif
}
.ita-container {
width: calc(100% - 40px);
max-width: 1650px;
margin: 0 auto
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
z-index: 1000;
background: #ffffff7d;
transition: transform .35s ease, background .3s ease, box-shadow .3s ease;
transform: translateY(0);
}
#header.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: #ffffffe3;
}
#header.is-hidden {
transform: translateY(-100%);
}
#header.awake {
box-shadow: 0 5px 25px rgba(26, 43, 72, .12);
}
.ita-header-inner {
width: 100%;
height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 28px;
}
.ita-logo {
display: flex;
align-items: center;
flex: 0 0 auto
}
.ita-logo img {
display: block;
width: auto;
max-width: 155px;
max-height: 64px;
object-fit: contain
}
.ita-main-nav {
display: flex;
align-items: center;
justify-content: start;
gap: 46px;
flex: 1;
margin-left: auto
}
.ita-nav-item {
position: static
}
.ita-nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
color: var(--ita-primary);
font-size: 16px;
font-weight: 700;
white-space: nowrap;
transition: color .25s ease;
border: 0;
background: transparent;
padding: 0;
}
.ita-nav-link:hover {
color: var(--ita-primary)
}
.ita-nav-link svg {
width: 12px;
height: 12px;
transition: transform .25s ease
}
.ita-mega-trigger.active .ita-nav-link svg {
transform: rotate(180deg)
}
.ita-header-actions {
display: flex;
align-items: center;
gap: 11px;
flex: 0 0 auto
}
.ita-all-destination {
border: 1px solid #fff;
color: #fff;
font-size: 16px;
padding: 13px 22px;
display: inline-block;
margin-top: 18px;
border-radius: 7px;
}
.ita-destination-more {
position: relative;
flex: 0 0 105px;
height: 105px;
overflow: hidden;
border-radius: 8px;
background: transparent;
border: 2px solid #fff;
font-size: 15px;
color: #fff;
display: flex;
align-items: end;
padding: 7px;
}
.ita-email-button,
.ita-group-button {
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition: all .25s ease
}
.ita-email-button {
padding: 0 18px;
color: #fff;
background: var(--ita-primary);
border: 1px solid var(--ita-primary)
}
.ita-email-button:hover {
color: #fff;
background: #132039;
border-color: #132039
}
.ita-group-wrap {
position: relative
}
.ita-group-button {
padding: 0 17px;
color: var(--ita-primary);
background: #fff;
border: 1px solid #dce3eb
}
.ita-group-button:hover,
.ita-group-wrap.active .ita-group-button {
border-color: var(--ita-primary)
}
.ita-group-button svg {
transition: transform .25s ease
}
.ita-group-wrap.active .ita-chevron {
transform: rotate(180deg)
}
.ita-group-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 205px;
padding: 7px;
background: #fff;
border: 1px solid #e6ebf0;
border-radius: 8px;
box-shadow: 0 15px 35px rgba(26, 43, 72, .16);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all .25s ease;
z-index: 1200
}
.ita-group-wrap.active .ita-group-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.ita-group-dropdown a {
display: flex;
align-items: center;
min-height: 42px;
padding: 0 12px;
color: var(--ita-primary);
font-size: 13px;
font-weight: 700;
border-radius: 5px
}
.ita-group-dropdown a:hover {
color: #fff;
background: var(--ita-primary)
}
.ita-mega-menu {
position: absolute;
top: 100%;
left: 50%;
width: min(calc(100% - 32px), 1650px);
padding: 18px 20px 25px;
background: var(--ita-green);
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 45px rgba(0, 0, 0, .2);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -10px);
transition: all .25s ease;
z-index: 1100
}
.ita-mega-menu.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0)
}
.ita-category-nav {
display: flex;
align-items: center;
width: 100%;
min-height: 56px;
padding: 0 15px;
background: rgba(255, 255, 255, .08);
overflow-x: auto;
scrollbar-width: none
}
.ita-category-nav::-webkit-scrollbar {
display: none
}
.ita-category {
position: relative;
flex: 0 0 auto;
min-height: 56px;
padding: 0 16px;
display: flex;
align-items: center;
color: #fff;
background: transparent;
border: 0;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
cursor: pointer
}
.ita-category:after {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: 7px;
height: 2px;
background: #fff;
transform: scaleX(0);
transition: transform .25s ease
}
.ita-category:hover:after,
.ita-category.active:after {
transform: scaleX(1)
}
.ita-mega-content {
padding-top: 23px
}
.ita-mega-title {
margin: 0 0 17px;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 800;
line-height: 1.2
}
.ita-destination-row {
display: flex;
align-items: stretch;
gap: 15px;
overflow-x: auto;
scrollbar-width: none
}
.ita-destination-row::-webkit-scrollbar {
display: none
}
.ita-destination-card {
position: relative;
flex: 0 0 105px;
height: 105px;
overflow: hidden;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(255, 255, 255, .2)
}
.ita-destination-card:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .03) 72%);
z-index: 1
}
.ita-destination-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .35s ease
}
.ita-destination-card:hover img {
transform: scale(1.07)
}
.ita-destination-card span {
position: absolute;
left: 8px;
right: 5px;
bottom: 8px;
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1.1;
z-index: 2
}
.ita-where-card {
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: 2px solid #fff !important
}
.ita-where-card:after {
display: none
}
.ita-where-card span {
position: static;
text-align: center;
font-size: 14px
}
.ita-mega-footer {
margin-top: 22px
}
.ita-view-all {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 22px;
color: #fff;
background: transparent;
border: 1px solid #fff;
border-radius: 7px;
font-size: 14px;
font-weight: 800;
transition: all .25s ease
}
.ita-view-all:hover {
color: var(--ita-primary);
background: #fff
}
.ita-view-all svg {
width: 15px;
height: 15px
}
.ita-mobile-toggle {
display: none;
position: relative;
width: 42px;
height: 42px;
margin-left: auto;
padding: 0;
background: transparent;
border: 0;
align-items: center;
justify-content: center;
z-index: 1200
}
.ita-mobile-toggle span,
.ita-mobile-toggle:before,
.ita-mobile-toggle:after {
position: absolute;
width: 23px;
height: 2px;
background: var(--ita-primary);
border-radius: 2px;
content: "";
transition: all .3s ease
}
.ita-mobile-toggle:before {
transform: translateY(-7px)
}
.ita-mobile-toggle:after {
transform: translateY(7px)
}
.ita-mobile-toggle.active:before {
transform: rotate(45deg)
}
.ita-mobile-toggle.active:after {
transform: rotate(-45deg)
}
.ita-mobile-toggle.active span {
opacity: 0
}
.ita-mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 15px 35px rgba(26, 43, 72, .14);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all .25s ease;
z-index: 1100
}
.ita-mobile-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.ita-mobile-menu-inner {
padding: 12px 15px 20px
}
.ita-mobile-link,
.ita-mobile-india {
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
color: var(--ita-primary);
background: transparent;
border: 0;
border-bottom: 1px solid #e7ebef;
font-size: 15px;
font-weight: 700;
text-align: left
}
.ita-mobile-india svg {
transition: transform .25s ease
}
.ita-mobile-india.active svg {
transform: rotate(180deg)
}
.ita-mobile-mega {
display: none;
padding: 14px 0 16px
}
.ita-mobile-mega.active {
display: block
}
.ita-mobile-category {
display: flex;
gap: 8px;
margin-bottom: 14px;
overflow-x: auto;
scrollbar-width: none
}
.ita-mobile-category::-webkit-scrollbar {
display: none
}
.ita-mobile-category button {
flex: 0 0 auto;
padding: 8px 14px;
color: var(--ita-primary);
background: #fff;
border: 1px solid #dfe5e9;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
white-space: nowrap
}
.ita-mobile-category button.active {
color: #fff;
background: var(--ita-green);
border-color: var(--ita-green)
}
.ita-mobile-destinations {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px
}
.ita-mobile-destination {
position: relative;
height: 95px;
display: block;
overflow: hidden;
border-radius: 8px
}
.ita-mobile-destination:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 65%)
}
.ita-mobile-destination img {
width: 100%;
height: 100%;
display: block;
object-fit: cover
}
.ita-mobile-destination span {
position: absolute;
left: 7px;
bottom: 7px;
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1.1;
z-index: 2
}
.ita-mobile-all {
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
color: #fff;
background: var(--ita-primary);
border-radius: 7px;
font-size: 13px;
font-weight: 700
}
.ita-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 450px;
overflow: hidden;
background: #17243a
}
.ita-hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover
}
.ita-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.037) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, 0.068) 100%)
}
.ita-hero-content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 20px 125px
}
.ita-hero-content-inner {
position: relative;
width: min(100%, 600px);
margin-top: 25px;
z-index: 1;
}
.ita-hero-content-inner::before {
position: absolute;
content: '';
left: 50%;
top: 40%;
width: 340px;
height: 200px;
background: #000000;
filter: blur(70px);
opacity: 0.8;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
.ita-hero-title {
margin: 0;
color: #fff;
font-family: "DM Serif Display", serif;
font-size: 76px;
font-weight: 400;
line-height: 1;
letter-spacing: -2px;
}
.ita-hero-title span {
font-style: italic;
/* color: #204B94 */
}
.ita-hero-description {
max-width: 760px;
margin: 20px auto 0;
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}
.ita-hero-search {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 620px;
margin: 28px auto 0
}
.ita-hero-search input {
width: 100%;
height: 52px;
padding: 0 18px;
color: var(--ita-primary);
background: #fff;
border: 0;
border-radius: 6px;
outline: 0;
font-family: "Manrope", sans-serif;
font-size: 14px
}
.ita-hero-search button {
height: 52px;
padding: 0 24px;
color: #fff;
background: var(--ita-primary);
border: 0;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
white-space: nowrap
}
.ita-hero-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 52px;
z-index: 5;
background: #FCF7F1;
display: flex;
align-items: center;
justify-content: center;
}
.ita-rating-box {
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
height: 100%
}
.ita-rating-item {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
}
.ita-rating-item+.ita-rating-item {
padding-left: 26px;
border-left: 1px solid #d8d8d8
}
.ita-rating-logo {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
border-radius: 50%;
overflow: hidden
}
.ita-rating-logo img {
width: 100%;
height: 100%;
object-fit: contain
}
.ita-stars {
display: flex;
align-items: center;
gap: 3px;
color: #F1A314;
}
.ita-stars.green {
color: #00b88a
}
.ita-rating-number {
color: #222;
font-size: 15px;
padding-left: 3px;
font-weight: 700
}
.ita-section {
position: relative;
min-height: 100vh;
padding: 80px 0
}
.ita-section-title {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 48px;
font-weight: 400;
line-height: 1.1
}
.ita-section-description {
max-width: 760px;
margin: 15px 0 0;
color: var(--ita-body);
font-size: 16px;
line-height: 1.7
}
.loader-wrapper {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999
}
.loader {
display: flex;
align-items: center;
justify-content: center
}
.loader img {
width: 150px;
max-width: 60%;
height: auto
}
/* scroll to top */
.scroll-to-top {
position: fixed;
right: 45px;
bottom: 21%;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
border-radius: 50%;
background-color: #fff;
z-index: 99;
opacity: 0;
padding: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.scroll-to-top--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top::after {
position: absolute;
content: "\f062";
font-family: "Font Awesome 5 Free";
font-weight: 700;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #1A2B48;
left: 0;
top: 0;
height: 100%;
width: 100%;
cursor: pointer;
display: block;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.scroll-to-top::before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: '';
border: 2px solid rgb(var(--travhub-base-rgb), 0.3);
z-index: -1;
border-radius: 50%;
}
.scroll-to-top path {
stroke: #1A2B48;
stroke-width: 4;
fill: none;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
/* Top Destination */
.ita-top-destination {
width: 100%;
background: #FEFEFA;
display: flex;
align-items: center;
padding: 75px 0
}
.ita-top-destination-inner {
width: 100%;
display: grid;
grid-template-columns: 31% 69%;
align-items: center
}
.ita-top-destination-intro {
padding-right: 45px
}
.ita-top-destination-title {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 60px;
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.0px;
}
.ita-top-destination-description {
max-width: 325px;
margin: 12px 0 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.55;
}
.ita-top-destination-features {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.ita-top-destination-feature {
padding: 0 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
border-left: 1px solid #D7E0E8;
height: 100%;
}
.ita-top-destination-feature:last-child {
padding-right: 0
}
.ita-top-destination-icon {
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
background: #EAF0F6;
border-radius: 50%;
padding: 14px;
}
.ita-top-destination-feature-content h3 {
margin: 0;
color: #000;
font-family: "DM Serif Display", serif;
font-size: 22px;
font-weight: 400;
line-height: 1.08
}
.ita-top-destination-feature-content strong {
display: block;
margin-top: 15px;
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.35
}
.ita-top-destination-feature-content p {
margin: 9px 0 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5
}
/* Our Category */
.ita-category-section {
width: 100%;
padding: 70px 0;
background: #FEFEFA;
display: flex;
align-items: center;
overflow: hidden
}
.ita-category-heading {
text-align: center;
margin-bottom: 15px
}
.ita-category-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 54px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -1.1px
}
.ita-category-heading p {
margin: 18px auto 0;
color: #3c495d;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5
}
.ita-category-slider-wrap {
position: relative;
padding: 0 21px
}
.ita-category-swiper {
width: 100%;
overflow: hidden
}
.ita-category-swiper .swiper-wrapper {
align-items: stretch;
padding: 30px 0;
}
.ita-category-swiper .swiper-slide {
height: auto
}
.ita-category-card {
display: block;
height: 100%;
overflow: hidden;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(26, 43, 72, .08);
transition: transform .3s ease, box-shadow .3s ease
}
.ita-category-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(26, 43, 72, .14)
}
.ita-category-image {
width: 100%;
height: 240px;
overflow: hidden
}
.ita-category-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease
}
.ita-category-card:hover .ita-category-image img {
transform: scale(1.05)
}
.ita-category-card-bottom {
height: 55px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between
}
.ita-category-card-bottom h3 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 20px;
font-weight: 400;
line-height: 1
}
.ita-category-card-bottom span {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ita-primary);
background: #DDE8F5;
border-radius: 50%
}
.ita-category-card-bottom span svg {
width: 15px;
height: 15px
}
.ita-category-prev,
.ita-category-next {
position: absolute;
top: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--ita-primary);
background: #fff;
border: 0;
border-radius: 50%;
box-shadow: 0 5px 16px rgba(26, 43, 72, .12);
transform: translateY(-50%);
z-index: 5;
cursor: pointer;
transition: all .25s ease
}
.ita-category-prev {
left: 0
}
.ita-category-next {
right: 0
}
.ita-category-prev:hover,
.ita-category-next:hover {
color: #fff;
background: var(--ita-primary)
}
.ita-category-prev.swiper-button-disabled,
.ita-category-next.swiper-button-disabled {
opacity: 1;
color: var(--ita-primary);
background: #fff
}
/* How we works */
.ita-how-work-section {
width: 100%;
padding: 80px 0;
min-height: 100dvh;
display: flex;
align-items: center;
background: center/cover no-repeat;
background-attachment: fixed;
overflow: hidden
}
.ita-how-work-heading {
text-align: center;
margin-bottom: 32px;
position: relative;
}
.ita-how-work-heading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 520px;
height: 83px;
background: #ffffff;
transform: translate(-50%, -50%);
filter: blur(25px);
opacity: 0.7;
z-index: 0;
}
.ita-how-work-heading h2 {
position: relative;
z-index: 1;
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 80px;
font-weight: 400;
line-height: 1.4;
letter-spacing: -1.5px;
}
.ita-how-work-slider {
position: relative;
max-width: 1050px;
margin: 0 auto
}
.ita-how-work-swiper {
width: 100%;
height: 480px;
border-radius: 12px;
overflow: hidden
}
.ita-how-work-card {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 34% 66%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(26, 43, 72, .16)
}
.ita-how-work-content {
padding: 35px 30px 25px;
background: #FEFEFA;
display: flex;
flex-direction: column;
justify-content: center
}
.ita-how-work-number {
display: block;
margin-bottom: 10px;
color: #C8D0DC;
font-family: "DM Serif Display", serif;
font-size: 110px;
font-weight: 400;
line-height: .8
}
.ita-how-work-content h3 {
margin: 12px 0 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 38px;
font-weight: 400;
line-height: .98;
letter-spacing: -.6px
}
.ita-how-work-content p {
margin: 13px 0 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.45
}
.ita-how-work-visual {
position: relative;
min-width: 0;
background: var(--ita-primary);
display: flex;
flex-direction: column;
height: 100%;
}
.ita-how-work-visual img {
width: 100%;
height: calc(100% - 50px);
display: block;
object-fit: cover
}
.ita-how-work-bottom {
color: #fff;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
background-color: var(--ita-primary);
padding: 7px 12px;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
/* 15 Years of Trusted Travel */
.ita-trusted-section {
width: 100%;
padding: 80px 0;
background: #FEFEFA;
display: flex;
align-items: center;
overflow: hidden
}
.ita-trusted-heading {
text-align: center;
margin-bottom: 40px
}
.ita-trusted-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 48px;
font-weight: 400;
line-height: 1;
letter-spacing: -1.4px
}
.ita-trusted-heading p {
margin: 10px auto 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.55
}
.ita-trusted-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px
}
.ita-trusted-title-row h3 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 24px;
font-weight: 400;
line-height: 1
}
.ita-trusted-navigation {
display: flex;
align-items: center;
gap: 8px
}
.ita-trusted-navigation button {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--ita-primary);
background: #fff;
border: 0;
border-radius: 50%;
box-shadow: 0 3px 12px rgba(26, 43, 72, .12);
cursor: pointer;
transition: all .25s ease
}
.ita-trusted-navigation button.ita-trusted-next {
color: #fff;
background: var(--ita-primary)
}
.ita-trusted-navigation button:hover {
color: #fff;
background: var(--ita-primary)
}
.ita-trusted-navigation button.swiper-button-disabled {
opacity: .45;
pointer-events: none
}
.ita-trusted-swiper {
width: 100%;
overflow: hidden
}
.ita-trusted-swiper .swiper-wrapper {
align-items: stretch
}
.ita-trusted-swiper .swiper-slide {
height: auto
}
.ita-trusted-card {
display: grid;
grid-template-columns: 58% 42%;
padding: 12px;
border: 1px solid #E0E5EA;
border-radius: 10px;
background: #fff;
height: 100%;
}
.ita-trusted-card-content {
min-width: 0;
padding: 3px 13px 3px 2px;
display: flex;
flex-direction: column
}
.ita-trusted-card-content h4 {
margin: 0 0 8px;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 28px;
font-weight: 400;
line-height: 1
}
.ita-trusted-card-content p {
margin: 0 0 10px;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.45
}
.ita-trusted-location {
width: max-content;
margin-top: auto;
display: flex;
align-items: center;
gap: 4px;
padding: 9px 10px;
color: var(--ita-primary);
background: #EEF3F8;
border-radius: 30px;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1
}
.ita-trusted-card-image {
height: 100%;
overflow: hidden;
border-radius: 6px;
width: 100%;
}
.ita-trusted-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover
}
/* Popular itinerary */
.ita-itinerary-section {
position: relative;
width: 100%;
padding: 50px 0 70px;
background: #FEFEFA;
overflow: hidden;
display: flex;
flex-direction: column
}
.ita-itinerary-section .ita-container {
position: relative;
z-index: 2;
}
.ita-itinerary-heading {
text-align: center;
margin-bottom: 16px
}
.ita-itinerary-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 50px;
font-weight: 400;
line-height: 1;
letter-spacing: -1.2px
}
.ita-itinerary-heading p {
margin: 12px auto 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.35
}
.ita-itinerary-swiper {
width: 100%;
overflow: visible
}
.ita-itinerary-swiper .swiper-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px 0px;
margin-top: 40px;
}
.ita-itinerary-swiper .swiper-slide {
height: auto
}
.ita-itinerary-card {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
background: #fff;
box-shadow: 0 3px 12px rgb(26 43 72 / 11%);
transition: transform .3s ease, box-shadow .3s ease
}
.ita-itinerary-image {
position: relative;
height: 220px;
flex-shrink: 0;
overflow: hidden
}
.ita-itinerary-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease
}
.ita-itinerary-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(26, 43, 72, .14)
}
.ita-itinerary-card:hover .ita-itinerary-image img {
transform: scale(1.05)
}
.ita-itinerary-content {
position: relative;
flex: 1;
padding: 11px
}
.ita-itinerary-content span {
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.1;
text-transform: uppercase;
margin-bottom: 7px;
display: block;
}
.ita-itinerary-card:hover .ita-itine-card-title {
color: var(--ita-primary);
}
.ita-itine-card-title {
margin: 0 30px 10px 0;
color: #000;
font-family: "DM Serif Display", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.1;
display: block;
}
.ita-itinerary-content strong {
display: block;
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 1
}
.ita-itine-card-link {
position: absolute;
right: 10px;
bottom: 10px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ita-primary);
background: #E6EEF6;
border-radius: 50%;
text-decoration: none
}
.ita-itinerary-content .ita-itine-card-link svg {
width: 14px;
height: 14px
}
.ita-itinerary-button {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
margin-top: 25px
}
.ita-itinerary-button a,
.last-view-btn {
position: relative;
min-width: 200px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 18px;
color: #fff;
background: var(--ita-primary);
border-radius: 30px;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ita-itinerary-button a::before,
.last-view-btn::before {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
content: "";
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
.ita-itinerary-button a:hover,
.last-view-btn:hover {
color: #fff;
box-shadow: 0 8px 20px rgba(26, 43, 72, 0.25);
}
.ita-itinerary-button a:hover::before,
.last-view-btn:hover::before {
left: 130%;
}
.ita-itinerary-button a svg,
.last-view-btn svg {
width: 17px;
height: 17px
}
/* .ita-itinerary-bg {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 620px;
background-image: url("../img/itinerary-bg.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover
}
.ita-itinerary-bg:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, #FEFEFA 0%, rgba(254, 254, 250, 0) 35%, rgba(254, 254, 250, 0) 100%)
} */
/* Follow Our Journey */
.ita-social-section {
position: relative;
width: 100%;
padding: 70px 0 60px;
background: #fff
}
.ita-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 40px
}
.ita-section-heading {
text-align: center;
margin-bottom: 28px
}
.ita-section-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 42px;
font-weight: 400;
line-height: 1.05
}
.ita-section-heading p {
margin: 8px auto 0;
max-width: 620px;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.45
}
.ita-social-layout {
display: flex;
align-items: stretch;
gap: 12px;
width: 100%;
overflow: hidden
}
.ita-social-info {
position: relative;
flex: 0 0 22%;
min-height: 250px;
padding: 42px 38px 20px 26px;
background: #EDF5FB;
border-radius: 10px;
overflow: hidden
}
.ita-social-info-icon {
position: absolute;
top: 0;
right: 0;
}
.ita-social-info-icon img {
max-width: 150px;
}
.ita-social-info h3 {
position: relative;
margin: 35px 0 8px;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 34px;
font-weight: 400;
line-height: .95
}
.ita-social-info p {
position: relative;
max-width: 240px;
margin: 0;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.4
}
.ita-social-slider-wrap {
position: relative;
flex: 1;
min-width: 0;
padding-right: 36px
}
.ita-social-swiper {
width: 100%;
overflow: hidden
}
.ita-social-swiper .swiper-wrapper {
align-items: stretch
}
.ita-social-swiper .swiper-slide {
height: auto
}
.ita-social-card {
position: relative;
display: block;
width: 100%;
height: 350px;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
background: #ddd;
}
.ita-social-card>img,
.ita-social-card>video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: filter .5s ease;
}
.ita-social-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
opacity: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, .06) 22%, transparent 48%);
transition: opacity .5s ease, transform .6s ease;
pointer-events: none;
}
.ita-social-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(135deg, rgba(26, 43, 72, .25), transparent 45%, rgba(26, 43, 72, .2));
opacity: 0;
transform: scale(1.15);
transition: opacity .5s ease, transform .7s ease;
pointer-events: none;
}
.ita-social-card:hover>img,
.ita-social-card:hover>video {
filter: brightness(.82) contrast(1.05);
}
.ita-social-card:hover::before {
opacity: 1;
transform: scale(1.15);
}
.ita-social-card:hover::after {
opacity: 1;
transform: scale(1);
}
.ita-social-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
cursor: pointer;
opacity: 1;
visibility: visible;
transition: opacity .25s ease, visibility .25s ease
}
.ita-social-play.is-playing {
opacity: 0;
visibility: hidden
}
.ita-social-card:hover .ita-social-play.is-playing {
opacity: 1;
visibility: visible
}
.ita-social-top {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1;
z-index: 3;
}
.ita-social-user {
display: flex;
align-items: center;
gap: 4px
}
.ita-social-avatar {
display: flex;
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .8)
}
.ita-social-avatar img {
width: 100%;
height: 100%;
object-fit: cover
}
.ita-social-play {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(0, 0, 0, .65);
transform: translate(-50%, -50%)
}
.ita-social-bottom {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column;
color: #fff;
font-family: "Manrope", sans-serif;
z-index: 3;
}
.ita-social-bottom strong {
font-family: "DM Serif Display", serif;
font-size: 22px;
font-weight: 400;
line-height: 1
}
.ita-social-bottom span {
margin-top: 4px;
font-size: 14px
}
.ita-social-next {
position: absolute;
top: 50%;
right: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 12px rgba(18, 61, 130, .12);
transform: translateY(-50%);
cursor: pointer
}
.ita-social-next.swiper-button-disabled {
opacity: .35;
pointer-events: none
}
.ita-people-section {
position: relative;
width: 100%;
padding: 20px 0;
background: #fff;
display: flex;
align-items: center
}
.ita-people-section .ita-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 40px
}
.ita-people-heading {
text-align: center;
margin-bottom: 25px
}
.ita-people-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 50px;
font-weight: 400;
line-height: 1
}
.ita-people-heading p {
margin: 12px auto 0;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.4
}
.ita-people-slider-wrap {
position: relative;
width: 100%;
padding: 0 14px
}
.ita-people-swiper {
width: 100%;
overflow: hidden
}
.ita-people-swiper .swiper-wrapper {
align-items: stretch
}
.ita-people-swiper .swiper-slide {
height: auto
}
.ita-people-card {
position: relative;
width: 100%;
height: 260px;
border-radius: 7px;
display: inline-block;
overflow: hidden;
background: #ddd;
box-shadow: 0 8px 18px rgba(26, 43, 72, .08);
transition: transform .4s ease, box-shadow .4s ease;
}
.ita-people-card>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.ita-people-card::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
z-index: 2;
background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .22) 50%, transparent 80%);
transform: skewX(-18deg);
transition: left .7s ease;
pointer-events: none;
}
.ita-people-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .82) 100%);
transition: background .4s ease;
}
.ita-people-card-content {
position: absolute;
left: 12px;
right: 42px;
bottom: 12px;
color: #fff;
z-index: 3;
transition: transform .4s ease;
}
.ita-people-card:hover {
box-shadow: 0 16px 32px rgba(26, 43, 72, .18);
}
.ita-people-card:hover>img {
transform: scale(1.04);
}
.ita-people-card:hover::before {
left: 150%;
}
.ita-people-card:hover .ita-people-card-overlay {
background: linear-gradient(180deg, rgba(26, 43, 72, .05) 20%, rgba(26, 43, 72, .9) 100%);
}
.ita-people-card:hover .ita-people-card-content {
transform: translateY(-3px);
}
.ita-people-card-content h3 {
margin: 0;
font-family: "DM Serif Display", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.05;
color: #fff
}
.ita-people-card-content p {
margin: 9px 0 0;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1;
color: #fff
}
.ita-people-card-arrow {
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 50%;
text-decoration: none
}
.ita-people-card-arrow:hover {
background-color: rgba(255, 255, 255, 0.283);
}
.ita-people-prev,
.ita-people-next {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 12px rgba(18, 61, 130, .12);
transform: translateY(-50%);
cursor: pointer
}
.ita-people-prev {
left: -1px
}
.ita-people-next {
right: -1px
}
.ita-people-prev.swiper-button-disabled,
.ita-people-next.swiper-button-disabled {
opacity: .35;
pointer-events: none
}
.ita-people-action {
display: flex;
justify-content: center;
margin-top: 18px
}
.ita-people-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 45px;
padding: 10px 20px;
border-radius: 30px;
background: #0F326C;
color: #fff;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 500;
transition: all .3s ease
}
.ita-people-button span {
font-size: 15px;
line-height: 1
}
.ita-people-button:hover {
background: var(--ita-primary);
color: #fff
}
/* Why choose us */
.ita-why-section {
width: 100%;
background: #FEFEFA;
display: flex;
align-items: center;
padding: 60px 0
}
.ita-why-section .ita-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 45px
}
.ita-why-row {
display: grid;
grid-template-columns: 38% 62%;
align-items: start;
margin: 0 auto
}
.ita-why-content {
padding: 0 55px 0 0
}
.ita-why-content h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 88px;
font-weight: 400;
line-height: 1;
letter-spacing: -1px
}
.ita-why-content h2 span {
font-style: italic
}
.ita-why-content p {
max-width: 400px;
margin: 16px 0 0;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 18px;
line-height: 1.45
}
.ita-why-accordion .accordion-item {
border: 0;
border-bottom: 1px solid #D8E0E8;
border-radius: 0;
background: transparent
}
.ita-why-accordion .accordion-header {
margin: 0
}
.ita-why-accordion .accordion-button {
position: relative;
padding: 12px 28px 12px 0;
color: var(--ita-primary);
background: transparent;
box-shadow: none;
font-family: "DM Serif Display", serif;
font-size: 26px;
font-weight: 400;
line-height: 1.4
}
.ita-why-accordion .accordion-button:not(.collapsed) {
color: var(--ita-primary);
background: transparent;
box-shadow: none
}
.ita-why-accordion .accordion-button:focus {
box-shadow: none
}
.ita-why-accordion .accordion-button::after {
width: 8px;
height: 8px;
margin-left: auto;
background-image: none;
border-right: 1.5px solid #173B6C;
border-bottom: 1.5px solid #173B6C;
transform: rotate(45deg);
transition: transform .25s ease
}
.ita-why-accordion .accordion-button:not(.collapsed)::after {
background-image: none;
transform: rotate(225deg) translate(-2px, -2px)
}
.ita-why-accordion .accordion-body {
max-width: 470px;
padding: 0 30px 10px 0;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.45
}
.ita-why-help {
padding-top: 11px;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.4
}
.ita-why-help span {
display: block
}
.ita-why-help a {
color: var(--ita-primary);
text-decoration: underline
}
/* Blog */
.ita-blog-section {
width: 100%;
background: #FEFEFA;
display: flex;
align-items: center;
padding: 60px 0
}
.ita-blog-section .ita-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 40px
}
.ita-blog-heading {
text-align: center;
margin-bottom: 24px
}
.ita-blog-heading h2 {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 48px;
font-weight: 400;
line-height: 1
}
.ita-blog-heading p {
margin: 10px auto 0;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.4
}
.ita-blog-slider-wrap {
position: relative;
padding: 0 4px
}
.ita-blog-swiper {
width: 100%;
overflow: hidden
}
.ita-blog-swiper .swiper-slide {
height: auto;
padding-block: 20px;
}
.ita-blog-card {
height: 100%;
overflow: hidden;
border-radius: 10px;
background: #fff;
display: block;
box-shadow: 0 5px 18px rgba(26, 43, 72, .08)
}
.ita-blog-image {
position: relative;
height: 260px;
overflow: hidden
}
.ita-blog-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover
}
.ita-blog-category {
position: absolute;
top: 11px;
left: 12px;
padding: 8px 12px;
border-radius: 30px;
background: #fff;
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1
}
.ita-blog-content {
padding: 10px 14px 14px
}
.ita-blog-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #66758C;
font-family: "Manrope", sans-serif;
font-size: 15px;
line-height: 1
}
.ita-blog-meta span {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap
}
.ita-blog-meta svg {
flex: 0 0 auto
}
.ita-blog-content h3 {
margin: 10px 0 7px;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 22px;
font-weight: 400;
line-height: 1.05
}
.ita-blog-content p {
margin: 0;
color: #5B6B84;
font-family: "Manrope", sans-serif;
font-size: 15px;
line-height: 1.5
}
.ita-blog-read {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px;
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: color .3s ease, gap .3s ease;
}
.ita-blog-read span {
transition: transform .35s ease;
}
.ita-blog-read svg {
display: block;
transition: transform .35s ease;
}
.ita-blog-read:hover {
gap: 10px;
}
.ita-blog-read:hover span {
transform: translateX(3px);
}
.ita-blog-read:hover svg {
transform: translateX(2px);
}
.ita-blog-read {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 12px;
color: var(--ita-primary);
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 700;
text-decoration: none
}
.ita-blog-prev,
.ita-blog-next {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 12px rgba(26, 43, 72, .12);
transform: translateY(-50%);
cursor: pointer
}
.ita-blog-prev {
left: -12px
}
.ita-blog-next {
right: -12px
}
.ita-blog-prev.swiper-button-disabled,
.ita-blog-next.swiper-button-disabled {
opacity: .35;
pointer-events: none
}
.ita-blog-action {
display: flex;
justify-content: center;
margin-top: 22px
}
.ita-blog-button span {
font-size: 15px
}
.ita-blog-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
min-width: 177px;
height: 45px;
padding: 0 22px;
border-radius: 30px;
background: var(--ita-primary);
color: #fff;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 500;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ita-blog-button::before {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
content: "";
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
.ita-blog-button:hover {
color: #fff;
box-shadow: 0 8px 20px rgba(26, 43, 72, 0.25);
}
.ita-blog-button:hover::before {
left: 130%;
}
.contact-form {
width: 100%;
padding: 120px 0 60px;
background: var(--ita-white, #FFFFFF);
}
/*--------------------------------------------------------------
# Blog Section
--------------------------------------------------------------*/
.blog-one {
position: relative;
padding-top: 0;
background-color: #f2f9ff;
}
.blog-one__shape {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.blog-one__shape img {
animation: movebounce3 4s linear infinite;
max-width: 100%;
}
.blog-one__item {
position: relative;
overflow: hidden;
border-radius: 6px;
}
.blog-one__item__thumb {
position: relative;
overflow: hidden;
}
.blog-one__item__thumb::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
content: '';
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9999999999999999) 100%);
}
.blog-one__item__thumb img {
transition: 0.5s;
background-size: cover;
width: 100%;
min-height: 320px;
max-height: 320px;
object-fit: cover;
}
.blog-one__item__thumb img:nth-child(1) {
transform: translatex(50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blog-one__item:hover .blog-one__item__thumb img:nth-child(1) {
transform: translatex(0) scalex(1);
opacity: 1;
filter: blur(0);
}
.blog-one__item__thumb img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
object-fit: cover;
}
.blog-one__item:hover .blog-one__item__thumb img:nth-child(2) {
transform: translatex(-50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blog-one__item__content {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 100%;
padding: 0 20px 20px;
@media (max-width: 1199px) {
padding: 0 15px 10px;
}
}
.blog-one__item__title {
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin: 0 0 16px;
color: var(--travhub-white);
text-transform: capitalize;
}
.blog-one__item__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
font-size: 18px;
line-height: 18px;
text-transform: none;
}
.blog-one__item__title a:hover {
background-size: 100% 1px;
color: #1A2B48;
}
.blog-one__item__meta {
display: flex;
align-items: center;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
@media (min-width: 992px) and (max-width: 1199px) {
gap: 18px;
}
}
.blog-one__item__meta li {
color: var(--travhub-white);
text-transform: capitalize;
display: flex;
align-items: center;
gap: 10px;
position: relative;
@media (min-width: 992px) and (max-width: 1199px) {
gap: 6px;
font-size: 15px;
}
}
.blog-one__item__meta li:not(:last-of-type)::before {
content: "";
width: 2px;
height: 14px;
background-color: var(--travhub-white);
opacity: .31;
position: absolute;
top: 0;
right: -13px;
bottom: 0;
margin: auto;
@media (min-width: 992px) and (max-width: 1199px) {
right: -9px;
}
}
.blog-one__item__meta li i {
font-size: 18px;
color: #1A2B48;
display: inline-block;
@media (min-width: 992px) and (max-width: 1199px) {
font-size: 16px;
}
}
/*-- Sidebar --*/
.sidebar {
position: relative;
@media (min-width: 1400px) {
margin-left: 20px;
}
}
.sidebar.sidebar--left {
@media (min-width: 1400px) {
margin-left: 0;
margin-right: 20px;
}
}
.sidebar__single {
position: relative;
padding: 30px 23px;
border: 1px solid var(--travhub-border-color);
background-color: #fafafa;
border-radius: 8px;
}
.sidebar__single+.sidebar__single {
margin-top: 30px;
}
.sidebar__title {
text-transform: capitalize;
line-height: 1em;
font-size: 24px;
font-weight: 600;
margin-top: -2px;
margin-bottom: 23px;
}
.sidebar__search {
position: relative;
}
.sidebar__search input[type=search],
.sidebar__search input[type=text] {
outline: none;
width: 100%;
height: 50px;
background-color: transparent;
font-size: 16px;
color: var(--travhub-text);
border: 1px solid var(--travhub-border-color);
border-radius: 8px;
padding-left: 21px;
padding-right: 50px;
transition: all 400ms ease;
}
.sidebar__search button[type=submit] {
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 8px 8px 0;
line-height: 1;
padding: 0;
top: 0;
right: 0;
font-size: 21px;
background-color: #1A2B48;
color: var(--travhub-white);
transition: all 400ms ease;
}
.sidebar__search button[type=submit]:hover {
background-color: var(--travhub-black);
color: var(--travhub-white);
}
.sidebar__categories {
margin: 0;
padding: 0;
}
.sidebar__categories li {
position: relative;
margin-top: 12px;
}
.sidebar__categories li a {
display: flex;
align-items: center;
position: relative;
z-index: 1;
color: var(--travhub-text2);
font-size: 18px;
font-weight: 400;
background-color: rgba(var(--travhub-black3-rgb), 0.03);
border-radius: 8px;
transition: all 400ms ease;
padding: 8.2px 20px;
overflow: hidden;
}
.sidebar__categories li a::after {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
content: '';
transition: all 400ms ease;
background-color: #1A2B48;
border-radius: 8px;
z-index: -1;
}
.sidebar__categories li a::before {
position: relative;
display: inline-block;
font-family: 'icomoon' !important;
/* content: "\e916"; */
font-size: 18px;
color: #1A2B48;
margin-right: 12px;
transition: all 200ms ease;
}
.sidebar__categories li a:hover {
color: var(--travhub-white);
}
.sidebar__categories li a:hover::before {
color: var(--travhub-white);
}
.sidebar__categories li a:hover:after {
width: 100%;
}
.sidebar__posts {
margin: 0;
padding: 0;
list-style: none;
}
.ita-blog-sidebar .widget-area {
width: 100%;
}
.ita-blog-sidebar__card {
width: 100%;
padding: 22px;
border: 1px solid #E1E7EF;
border-radius: 10px;
background: #FFFFFF;
}
.ita-blog-sidebar__heading {
position: relative;
margin: 0 0 18px;
padding-bottom: 12px;
color: var(--ita-primary, #1A2B48);
font-family: "DM Serif Display", serif;
font-size: 26px;
font-weight: 400;
line-height: 1.3;
}
.ita-blog-sidebar__heading::after {
content: "";
display: block;
width: 42px;
height: 3px;
margin-top: 10px;
border-radius: 4px;
background: var(--ita-primary, #1A2B48);
}
.ita-blog-sidebar__posts {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
}
.ita-blog-sidebar__item {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 1px solid #E3E8EF;
border-radius: 10px;
background: #FFFFFF;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ita-blog-sidebar__item:hover {
border-color: #C8D4E4;
box-shadow: 0 5px 14px rgba(26, 43, 72, 0.07);
}
.ita-blog-sidebar__link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-width: 0;
padding: 12px;
color: var(--ita-primary, #1A2B48);
text-decoration: none;
}
.ita-blog-sidebar__link:hover {
color: var(--ita-primary, #1A2B48);
}
.ita-blog-sidebar__image {
width: 78px;
min-width: 78px;
height: 70px;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: #F1F4F8;
}
.ita-blog-sidebar__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.ita-blog-sidebar__item:hover .ita-blog-sidebar__image img {
transform: scale(1.04);
}
.ita-blog-sidebar__content {
flex: 1;
min-width: 0;
margin: 0;
}
.ita-blog-sidebar__title {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--ita-primary, #1A2B48);
font-family: "DM Serif Display", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.35;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.ita-blog-sidebar__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
background: #F0F4F9;
color: var(--ita-primary, #1A2B48);
transition: background-color 0.25s ease, color 0.25s ease;
}
.ita-blog-sidebar__arrow svg {
display: block;
width: 17px;
height: 17px;
}
.ita-blog-sidebar__item:hover .ita-blog-sidebar__arrow {
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
}
.sidebar__posts__meta {
margin: 0;
padding: 0;
list-style: none;
line-height: 1em;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 13px;
}
.sidebar__posts__meta li {
display: inline-flex;
align-items: center;
color: var(--travhub-text);
font-size: 12px;
font-weight: 500;
line-height: 1em;
transition: all 500ms ease;
}
.sidebar__posts__meta li a {
color: inherit;
}
.sidebar__posts__meta li a:hover {
color: #1A2B48;
}
.sidebar__posts__meta li i {
color: #1A2B48;
margin-right: 7px;
}
.sidebar__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.sidebar__tags a {
background-color: var(--travhub-white);
border: 1px solid var(--travhub-border-color);
border-radius: 100px;
text-transform: capitalize;
font-size: 14px;
font-weight: 400;
color: var(--travhub-text);
transition: all 500ms ease;
display: inline-flex;
padding: 2px 10px;
}
.sidebar__tags a:hover {
color: var(--travhub-white);
background-color: #1A2B48;
border-color: #1A2B48;
}
.blog-two {
position: relative;
padding: 170px 0px 224px;
background-color: #F6F9FF;
margin-bottom: -104px;
margin-top: -104px;
}
@media (max-width: 1300px) {
.blog-two {
padding: 120px 0px 120px;
}
}
@media (max-width: 991px) {
.blog-two {
padding: 100px 0px 100px;
}
}
@media (max-width: 767px) {
.blog-two {
padding: 40px 0px 40px;
}
}
.blog-two__item {
position: relative;
z-index: 1;
background-color: var(--travhub-white);
border-radius: 20px;
overflow: hidden;
}
.blog-two__item__thumb {
position: relative;
overflow: hidden;
}
.blog-two__item__thumb img {
transition: 0.5s;
background-size: cover;
width: 100%;
}
.blog-two__item__thumb img:nth-child(1) {
transform: translatex(50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blog-two__item__thumb img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-object-fit: cover;
object-fit: cover;
}
.blog-two__item__thumb__link {
display: flex;
width: 100%;
height: 100%;
background-color: rgb(var(--travhub-black-rgb), 0.7);
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(-20%);
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-two__item__thumb__link::before,
.blog-two__item__thumb__link::after {
content: "";
width: 25px;
height: 2px;
background-color: var(--travhub-white);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-two__item__thumb__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-two__item__thumb::after {
content: "";
width: 100%;
height: 75px;
position: absolute;
bottom: -3px;
left: 0;
background-color: var(--travhub-white);
-webkit-mask: url('data:image/svg+xml;utf8, ');
mask: url('data:image/svg+xml;utf8, ');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: auto;
mask-size: auto;
}
@media (max-width: 1399px) {
.blog-two__item__thumb::after {
height: 65px;
}
}
@media (max-width: 1199px) and (min-width: 992px) {
.blog-two__item__thumb::after {
height: 58px;
width: 110%;
}
}
@media (max-width: 991px) {
.blog-two__item__thumb::after {
height: 60px;
}
}
@media (max-width: 767px) {
.blog-two__item__thumb::after {
height: 90px;
}
}
@media (max-width: 575px) {
.blog-two__item__thumb::after {
height: 80px;
width: 105%;
}
}
@media (max-width: 490px) {
.blog-two__item__thumb::after {
display: none;
}
}
.blog-two__item:hover .blog-two__item__thumb>a {
opacity: 1;
transform: translateY(0);
}
.blog-two__item:hover .blog-two__item__thumb img:nth-child(1) {
transform: translatex(0) scalex(1);
opacity: 1;
filter: blur(0);
}
.blog-two__item:hover .blog-two__item__thumb img:nth-child(2) {
transform: translatex(-50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blog-two__item__content {
position: relative;
padding: 25px 34px 36px;
}
@media (max-width: 1199px) and (min-width: 992px) {
.blog-two__item__content {
padding: 20px;
}
}
.blog-two__item__meta {
margin-top: -5px;
margin-bottom: 2px;
}
.blog-two__item__meta a {
font-family: var(--travhub-font);
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 156%;
text-transform: uppercase;
color: var(--travhub-text);
}
.blog-two__item__meta a:hover {
color: #1A2B48;
}
.blog-two__item__title {
margin: 0;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 133%;
text-transform: capitalize;
color: var(--travhub-black);
font-family: var(--travhub-heading-font);
transform: rotate(0.24deg);
margin-bottom: 10px;
}
.blog-two__item__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-two__item__title a:hover {
background-size: 100% 1px;
}
.blog-two__item__title a:hover {
color: #1A2B48;
}
.blog-two__item__text {
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 175%;
color: var(--travhub-text);
margin-bottom: 38px;
}
.blog-two__item__btn a {
display: flex;
align-items: center;
justify-content: start;
padding: 0;
background-color: transparent;
border-radius: 0;
position: relative;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: normal;
text-transform: uppercase;
padding-left: 12px;
color: var(--travhub-black);
}
.blog-two__item__btn a::before,
.blog-two__item__btn a::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 2px;
height: 11px;
background-color: #1A2B48;
}
.blog-two__item__btn a::after {
left: -5px;
}
.blog-two__item__btn a:hover {
color: #1A2B48;
}
.blog-two__item__icon img {
-o-object-fit: cover;
object-fit: cover;
width: auto !important;
position: absolute;
right: 0;
bottom: 0;
transition: all 0.4s ease-in-out;
}
.blog-two__item__icon img:last-child {
visibility: hidden;
opacity: 0;
}
.blog-two__item:hover .blog-two__item__icon img:first-child {
visibility: hidden;
overflow: 0;
}
.blog-two__item:hover .blog-two__item__icon img:last-child {
opacity: 1;
visibility: visible;
}
.blog-three {
position: relative;
z-index: 1;
padding: 120px 0px 120px;
}
@media (max-width: 991px) {
.blog-three {
padding: 100px 0px;
}
}
@media (max-width: 767px) {
.blog-three {
padding: 80px 0px;
}
}
.blog-three__item {
position: relative;
z-index: 1;
padding: 24px;
background: #FFEDE5;
border-radius: 24px;
}
.blog-three__item__thumb {
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 100px 0px;
}
.blog-three__item__thumb img {
border-radius: 100px 0px;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
transition: all 0.4s ease-in-out;
transform: scale(1);
}
.blog-three__item__thumb__link {
display: flex;
border-radius: 100px 0px;
width: 100%;
height: 100%;
background-color: rgb(var(--travhub-black-rgb), 0.7);
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(-20%);
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-three__item__thumb__link::before,
.blog-three__item__thumb__link::after {
content: "";
width: 25px;
height: 2px;
background-color: var(--travhub-white);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-three__item__thumb__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-three__item:hover .blog-three__item__thumb img {
transform: scale(1.1);
}
.blog-three__item:hover .blog-three__item__thumb>a {
opacity: 1;
transform: translateY(0);
}
.blog-three__item__content {
padding: 34px 0px 15px;
}
.blog-three__item__meta {
display: flex;
align-items: center;
gap: 12px;
}
.blog-three__item__author {
display: flex;
align-items: center;
gap: 12px;
}
.blog-three__item__author__img img {
width: 24px;
border-radius: 50%;
height: 24px;
}
.blog-three__item__author__name {
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 130%;
text-transform: capitalize;
color: var(--travhub-black);
}
.blog-three__item__author__name:hover {
color: #1A2B48;
}
.blog-three__item__author__date {
font-weight: 400;
font-size: 14px;
line-height: 25px;
color: var(--travhub-white);
padding: 5px 9px;
background-color: #1A2B48;
}
.blog-three__item__title {
margin: 0;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 32px;
text-transform: capitalize;
color: var(--travhub-black);
margin-bottom: 15px;
}
.blog-three__item__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-three__item__title a:hover {
background-size: 100% 1px;
}
.blog-three__item__title a:hover {
color: #1A2B48;
}
.blog-three__item__btn a {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 200%;
display: flex;
align-items: center;
text-transform: capitalize;
color: var(--travhub-black);
display: inline-block;
position: relative;
z-index: 1;
}
.blog-three__item__btn a::after {
content: "";
width: 15%;
height: 3px;
position: absolute;
left: 0;
bottom: 0;
background-color: #1A2B48;
transition: all 0.4s ease-in-out;
}
.blog-three__item__btn a:hover {
color: #1A2B48;
}
.blog-three__item__btn a:hover::after {
width: 100%;
}
.contact-form-flex {
display: flex;
align-items: stretch;
position: relative;
width: 100%;
overflow: hidden;
border-radius: 10px;
margin: 0 auto;
}
.contact-form .form-section {
flex: 1 1 50%;
min-width: 0;
padding: 45px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: #EBF3F9;
}
.contact-form .form-wrapper {
width: 100%;
position: relative;
}
.contact-form .form-header {
margin-bottom: 26px;
}
.contact-form .form-title {
margin: 0 0 5px;
color: var(--ita-primary, #1A2B48);
font-family: "DM Serif Display", serif;
font-size: 50px;
font-weight: 500;
letter-spacing: -0.7px;
line-height: 1.25;
}
.contact-form .form-subtitle {
margin: 0;
color: var(--ita-body, #5B6B84);
font-size: 16px;
font-weight: 400;
line-height: 1.65;
}
.contact-form .form-group {
position: relative;
margin-bottom: 24px;
}
.contact-form .form-group {
position: relative;
margin-bottom: 24px;
}
.contact-form .form-label {
position: absolute;
top: 14px;
left: 17px;
z-index: 2;
margin: 0;
padding: 0 3px;
color: #66758C;
background: transparent;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
pointer-events: none;
transform-origin: left center;
transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.contact-form .form-label.floating {
top: -8px;
left: 13px;
padding: 0 5px;
background: #FFFFFF;
color: #1A2B48;
font-size: 11px;
font-weight: 600;
line-height: 16px;
}
.contact-form .form-input,
.contact-form .form-textarea {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 14px 16px;
border: 1px solid #D5DFEE;
border-radius: 12px;
outline: none;
background: #FFFFFF;
color: #1A2B48;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form .form-input {
height: 59px;
}
.contact-form .form-textarea {
min-height: 108px;
padding-top: 15px;
resize: vertical;
}
.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
color: #66758C;
opacity: 1;
}
.contact-form .form-input:hover,
.contact-form .form-textarea:hover {
border-color: #A9B8CE;
}
.contact-form .form-input:focus,
.contact-form .form-textarea:focus,
.contact-form .form-input.has-content,
.contact-form .form-textarea.has-content {
border-color: #1A2B48;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.07);
}
.contact-form .form-input.valid,
.contact-form .form-textarea.valid {
border-color: #23845B;
background-image: none;
padding-right: 16px;
}
.contact-form .form-input.valid,
.contact-form .form-input.valid:focus {
padding-right: 38px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2323845B'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
background-position: right 13px center;
background-size: 15px;
background-repeat: no-repeat;
}
.contact-form .form-group {
position: relative;
margin-bottom: 24px;
}
.contact-form .form-label {
position: absolute;
top: 8px;
left: 12px;
z-index: 2;
margin: 0;
color: #66758C;
background: transparent;
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18px;
pointer-events: none;
transition: all 0.2s ease;
}
.contact-form .form-label.floating {
top: -8px;
left: 12px;
background: #FFFFFF;
color: #1A2B48;
font-size: 11px;
font-weight: 600;
}
.contact-form .form-input,
.contact-form .form-textarea {
display: block;
width: 100%;
padding: 20px 16px 6px;
border: 1px solid #D5DFEE;
border-radius: 10px;
outline: none;
background: #FFFFFF;
color: #1A2B48;
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form .form-input {
height: 59px;
}
.contact-form .form-textarea {
min-height: 108px;
resize: vertical;
}
.contact-form .form-input:focus,
.contact-form .form-textarea:focus,
.contact-form .form-input.has-content,
.contact-form .form-textarea.has-content {
border-color: #1A2B48;
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.07);
}
.contact-form .form-input:focus-visible,
.contact-form .form-textarea:focus-visible {
outline: none;
}
.contact-form .form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.contact-form .submit-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
margin-top: 8px;
padding: 10px 22px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 10px;
background: var(--ita-primary);
color: #FFFFFF;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
text-align: center;
cursor: pointer;
box-shadow: 0 6px 15px rgba(26, 43, 72, 0.13);
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.contact-form .submit-btn::before {
position: absolute;
top: 0;
left: -120%;
width: 65%;
height: 100%;
content: "";
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
pointer-events: none;
}
.contact-form .submit-btn:hover {
color: #FFFFFF;
}
.contact-form .submit-btn:hover::before {
left: 140%;
}
.contact-form .submit-btn:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(26, 43, 72, 0.15);
}
.contact-form .submit-btn:focus-visible,
.contact-form .social-link:focus-visible {
outline: 3px solid #91A7C8;
outline-offset: 3px;
}
.contact-form .info-section {
flex: 1 1 50%;
min-width: 0;
padding: 55px 50px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--ita-primary, #1A2B48);
color: #FFFFFF;
}
.contact-form .info-content {
position: relative;
z-index: 1;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.contact-form .company-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: #DCE6F4;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.5;
}
.contact-form .info-title {
margin: 0 0 16px;
color: #FFFFFF;
font-family: "DM Serif Display", serif;
font-size: 32px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.3;
}
.contact-form .info-description {
margin: 0 0 30px;
color: #E0E7F0;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.75;
}
.contact-form .contact-info {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 30px;
padding: 0;
}
.contact-form .contact-item {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
min-height: 52px;
margin: 0;
padding: 13px 18px;
border: 1px solid rgba(255, 255, 255, 0.045);
border-radius: 10px;
background: rgba(255, 255, 255, 0.105);
color: #FFFFFF;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.contact-form .contact-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.12);
}
.contact-form .contact-icon {
display: block;
width: 21px;
height: 21px;
min-width: 21px;
margin: 0;
color: #FFFFFF;
stroke: currentColor;
flex-shrink: 0;
}
.contact-form .contact-item span {
min-width: 0;
color: #FFFFFF;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
overflow-wrap: anywhere;
}
.contact-form .contact-item a {
color: #FFFFFF;
text-decoration: none;
transition: opacity 0.25s ease;
}
.contact-form .contact-item a:hover {
color: #FFFFFF;
opacity: 0.78;
}
.contact-form .social-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.contact-form .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
background: rgba(255, 255, 255, 0.105);
color: #FFFFFF;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-form .social-link i {
font-size: 21px;
}
.contact-form .social-link svg {
width: 20px;
height: 20px;
}
.contact-form .social-link:hover {
background: #1A2B48;
border-color: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(10, 21, 40, 0.2);
}
.contact-form .success-message {
position: fixed;
top: 24px;
right: 24px;
z-index: 10000;
max-width: calc(100vw - 32px);
padding: 14px 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: #1A2B48;
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
box-shadow: 0 12px 30px rgba(26, 43, 72, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.contact-form .success-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.contact-form #footerSuccessMsg {
color: #23845B;
font-size: 12px;
line-height: 1.5;
}
.contact-form .form-input.error,
.contact-form .form-textarea.error {
border-color: #C13B46;
box-shadow: 0 0 0 3px rgba(193, 59, 70, 0.08);
}
.contact-form .error-message {
margin-top: 5px;
color: #C13B46;
font-size: 11px;
line-height: 1.5;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.contact-form .error-message.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.contact-form .loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.contact-form .loading::after {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
content: "";
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #FFFFFF;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: contactFormSpin 0.8s linear infinite;
}
@keyframes contactFormSpin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.ita-circuits-page {
padding: 120px 0 60px;
}
.ogd-sidebar .form-control {
height: 48px;
border: 1px solid #E5E5E5;
font-size: 15px;
padding: 10px 16px;
color: var(--ita-primary);
box-shadow: none;
background-color: var(--ita-white);
}
.ogd-sidebar .form-control:focus {
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.08);
border-color: var(--ita-primary);
}
.btn-sm-size.theme-btn {
font-size: 16px;
line-height: 20px;
padding: 14px 40px;
}
.ogd-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.ogd-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
color: var(--ita-primary);
}
.ogd-input-icon svg {
width: 17px;
height: 17px;
stroke: var(--ita-primary);
}
.ogd-icon-input {
padding-left: 44px !important;
}
.ogd-textarea-wrap .ogd-textarea-icon {
top: 16px;
transform: none;
}
.ogd-icon-textarea {
padding-left: 44px !important;
padding-top: 12px !important;
resize: vertical;
}
.ogd-input-wrap .select-box {
width: 100%;
}
.ogd-input-wrap .nice-select.form-control,
.ogd-input-wrap select.form-control {
padding-left: 44px !important;
}
.ogd-send-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
border: 1px solid var(--ita-primary);
border-radius: 8px !important;
background-color: var(--ita-primary);
color: var(--ita-white);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.ogd-send-btn svg {
width: 18px;
height: 18px;
stroke: var(--ita-white);
}
.ogd-send-btn:hover {
background-color: #263F63;
border-color: #263F63;
color: var(--ita-white);
}
.ogd-send-btn:focus-visible {
outline: 3px solid rgba(26, 43, 72, 0.2);
outline-offset: 3px;
}
.float,
.contact-widget {
display: none;
}
.green-class {
color: var(--ita-primary);
}
#contentShort {
overflow: hidden;
transition: max-height 0.4s ease;
}
.card-title.travel-title {
color: var(--ita-primary);
}
.card-title.travel-title b {
font-weight: 500;
font-size: 26px;
}
#contactQuoteModal {
z-index: 1111111;
}
.itinerary-title-card {
font-size: 26px;
color: var(--ita-primary);
font-weight: 500;
}
.contact_step .form-area {
max-width: 100%;
width: 100%;
}
.card-body.p-0,
#contentWrapper {
text-align: justify;
color: var(--ita-body, #5B6B84);
}
.content-collapsed {
max-height: 38em;
}
.content-expanded {
max-height: 5000px;
}
.read-more-btn {
display: inline-block;
margin-top: 10px;
color: var(--ita-primary);
font-weight: 600;
cursor: pointer;
transition: color 0.25s ease;
}
.read-more-btn:hover {
color: #263F63;
}
.tours-two.triplist {
padding: 30px 0 80px;
}
.trip-actions a.btn-blue:hover {
background-color: var(--ita-primary);
border-color: var(--ita-primary);
color: var(--ita-white);
}
@media (max-width: 900px) {
.mob-contact {
display: none;
}
}
.ita-sidebar {
width: 100%;
min-width: 0;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
}
.ita-sidebar__widgets {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.ita-sidebar__expert-card,
.ita-sidebar__group-card,
.ita-sidebar__quote-card {
width: 100%;
min-width: 0;
border: 1px solid #E5EAF1;
border-radius: 10px;
background: #FFFFFF;
}
.ita-sidebar__profile-box{
padding: 14px;
border: 1px solid #E3E9F2;
border-radius: 10px;
background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FC 100%);
}
.ita-sidebar__profile-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-width: 0;
border-bottom: 1px solid #E3E9F2;
padding-bottom: 12px;
margin-bottom: 12px;
}
.ita-sidebar__profile {
display: flex;
align-items: center;
gap: 13px;
flex: 1;
min-width: 0;
}
.ita-sidebar__avatar {
width: 50px;
height: 50px;
min-width: 50px;
padding: 2px;
overflow: hidden;
border: 1px solid #DCE4F0;
border-radius: 50%;
background: #FFFFFF;
}
.ita-sidebar__avatar img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.ita-sidebar__author {
min-width: 0;
}
.ita-sidebar__author h3 {
margin: 0 0 4px;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.ita-sidebar__author p {
margin: 0 0 5px;
color: var(--ita-meta, #66758C);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
overflow-wrap: anywhere;
}
.ita-sidebar__status {
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 50%;
background: var(--ita-green-light, #176B57);
box-shadow: 0 0 0 3px rgba(23, 107, 87, 0.10);
}
.ita-sidebar__duration {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.ita-sidebar__duration-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
}
.ita-sidebar__duration-icon svg {
display: block;
width: 19px;
height: 19px;
}
.ita-sidebar__duration-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.ita-sidebar__duration-text small {
color: var(--ita-meta, #66758C);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
.ita-sidebar__duration-text strong {
color: var(--ita-primary, #1A2B48);
font-size: 13px;
font-weight: 800;
line-height: 1.4;
white-space: nowrap;
}
.ita-sidebar__expert-card {
padding: 18px;
}
.ita-sidebar__eyebrow {
display: block;
margin-bottom: 9px;
color: var(--ita-meta, #66758C);
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
line-height: 1;
}
.ita-sidebar__expert-card h3 {
margin: 0 0 10px;
color: var(--ita-primary, #1A2B48);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
}
.ita-sidebar__expert-card p {
margin: 0;
color: var(--ita-body, #5B6B84);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
overflow-wrap: anywhere;
}
.ita-sidebar__group-card {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 18px;
border-color: rgba(26, 43, 72, 0.2);
background: #F7F9FC;
}
.ita-sidebar__group-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 10px;
background: #E9EEF6;
color: var(--ita-primary, #1A2B48);
}
.ita-sidebar__group-icon svg {
width: 21px;
height: 21px;
}
.ita-sidebar__group-card h3 {
margin: 0 0 6px;
color: var(--ita-primary, #1A2B48);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
.ita-sidebar__group-card p {
margin: 0;
color: var(--ita-body, #5B6B84);
font-size: 12px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.ita-sidebar__quote-card {
padding: 24px 20px 20px;
scroll-margin-top: 100px;
}
.ita-sidebar__quote-header {
position: relative;
margin-bottom: 20px;
text-align: center;
}
.ita-sidebar__quote-header .ita-sidebar__eyebrow {
margin-bottom: 8px;
}
.ita-sidebar__price {
margin: 0;
color: var(--ita-body, #5B6B84);
font-size: 14px;
line-height: 1.7;
}
.ita-sidebar__price strong {
display: inline-block;
margin-left: 4px;
color: var(--ita-primary, #1A2B48);
font-size: 25px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.6px;
}
.ita-sidebar__price .old-price {
display: inline-block;
margin-left: 5px;
color: var(--ita-meta, #66758C);
font-size: 13px;
font-weight: 500;
text-decoration: line-through;
letter-spacing: 0;
}
.ita-sidebar__price-caption {
margin: 2px 0 0;
color: var(--ita-meta, #66758C);
font-size: 12px;
line-height: 1.4;
}
.ita-sidebar__discount {
top: 0;
right: 0;
left: auto;
border-radius: 0 10px 0 10px;
background: var(--ita-primary, #1A2B48);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
}
.ita-sidebar__form {
width: 100%;
}
.ita-sidebar .ogd-input-wrap {
width: 100%;
}
.ita-sidebar .ogd-sidebar .form-control {
min-width: 0;
height: 46px;
border: 1px solid #DCE3ED;
border-radius: 9px;
background-color: #FFFFFF;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
font-size: 13px;
box-shadow: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ita-sidebar .ogd-sidebar .form-control::placeholder {
color: #8793A5;
opacity: 1;
}
.ita-sidebar .ogd-sidebar .form-control:focus {
border-color: var(--ita-primary, #1A2B48);
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.07);
outline: none;
}
.ita-sidebar .ogd-input-icon {
color: var(--ita-primary, #1A2B48);
}
.ita-sidebar .ogd-input-icon svg {
width: 16px;
height: 16px;
stroke: var(--ita-primary, #1A2B48);
}
.ita-sidebar .ogd-icon-input {
padding-left: 42px !important;
}
.ita-sidebar .ogd-icon-textarea {
height: 110px !important;
min-height: 110px;
padding-top: 13px !important;
resize: vertical;
}
.ita-sidebar .ogd-textarea-wrap .ogd-textarea-icon {
top: 15px;
}
.ita-sidebar .ogd-send-btn {
position: relative;
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 13px 18px;
border: 1px solid var(--ita-primary, #1A2B48);
border-radius: 9px !important;
background: var(--ita-primary, #1A2B48);
color: #FFFFFF;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.ita-sidebar .ogd-send-btn::before {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
content: "";
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
pointer-events: none;
}
.ita-sidebar .ogd-send-btn svg {
position: relative;
z-index: 1;
width: 17px;
height: 17px;
flex-shrink: 0;
stroke: #FFFFFF;
transition: transform 0.25s ease;
}
.ita-sidebar .ogd-send-btn:hover {
color: #fff;
box-shadow: 0 8px 20px rgba(26, 43, 72, 0.25);
}
.ita-sidebar .ogd-send-btn:hover::before {
left: 130%;
}
.ita-sidebar .ogd-send-btn:hover svg {
transform: translate(2px, -2px);
}
.ita-sidebar .ogd-send-btn:focus-visible {
outline: 3px solid rgba(26, 43, 72, 0.2);
outline-offset: 3px;
}
.ita-sidebar #contactFormMessage {
overflow-wrap: anywhere;
font-size: 12px;
line-height: 1.6;
}
.travel-card {
padding: 40px 30px;
border-radius: 16px;
overflow: hidden;
color: var(--ita-white, #FFFFFF);
position: relative;
transition: transform 0.4s ease, box-shadow 0.4s ease;
background: linear-gradient(135deg, var(--ita-primary, #1A2B48) 0%, #263F63 100%);
background-size: 200% 200%;
animation: gradientBG 15s ease infinite;
}
.color-green {
background: linear-gradient(135deg, var(--ita-green-light, #176B57) 0%, var(--ita-green, #1A2B48) 100%);
background-size: 200% 200%;
animation: gradientBG 20s ease infinite;
}
.travel-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: var(--ita-white, #FFFFFF);
}
.travel-subtitle {
font-size: 18px;
opacity: 0.85;
color: var(--ita-white, #FFFFFF);
}
.travel-btn {
display: inline-block;
background: var(--ita-white, #FFFFFF);
color: var(--ita-primary, #1A2B48);
padding: 12px 26px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 5px 20px rgba(26, 43, 72, 0.1);
transition: 0.3s ease;
white-space: nowrap;
}
.travel-btn:hover {
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(26, 43, 72, 0.22);
}
.travel-btn:hover i {
transform: translateX(4px);
transition: 0.3s ease;
}
.travel-anim {
opacity: 0;
animation: slideIn 0.9s ease forwards;
}
.inclus-exclus-section {
padding: 55px 0;
background: linear-gradient(135deg, #EBF3F9 0%, #FEFEFA 100%);
}
.inclus-exclus-section .section-title {
margin: 0 0 34px;
color: var(--ita-primary, #1A2B48);
font-family: "DM Serif Display", serif;
font-size: 50px;
font-weight: 500;
line-height: 1.35;
text-align: center;
}
.inclus-exclus-section .info-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
padding: 25px 24px;
overflow: hidden;
border: 1px solid #E0E8F1;
border-left: 3px solid var(--ita-primary, #1A2B48);
border-radius: 15px;
background: var(--ita-white, #FFFFFF);
box-shadow: 0 5px 18px rgba(26, 43, 72, 0.055);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.styled-list1 li {
font-size: 18px;
font-weight: 500;
color: #3c495d;
}
.inclus-exclus-section .info-card:hover {
border-color: #C8D5E5;
box-shadow: 0 12px 28px rgba(26, 43, 72, 0.09);
}
.inclus-exclus-section .card-title {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 17px;
color: var(--ita-primary, #1A2B48);
font-size: 26px;
font-family: "DM Serif Display", serif;
line-height: 1.5;
}
.inclus-exclus-section .title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
font-size: 14px;
line-height: 1;
}
.ita-rating-box-sidebar {
border: 1px solid #E5EAF1;
border-radius: 10px;
background: #FFFFFF;
padding: 12px;
}
.ita-rating-box-sidebar .ita-rating-logo {
width: 30px;
height: 30px;
flex: 0 0 30px;
}
.ita-rating-box-sidebar .ita-rating-item+.ita-rating-item {
padding-left: 12px;
}
.ita-rating-box-sidebar .ita-rating-box {
gap: 12px;
}
.inclus-exclus-section .title-icon.cross {
background: var(--ita-green-light, #176B57);
color: var(--ita-white, #FFFFFF);
}
.inclus-exclus-section .styled-list {
list-style: none;
margin: 0;
padding: 0;
}
.inclus-exclus-section .styled-list li {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 5px 0;
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
overflow-wrap: anywhere;
}
.inclus-exclus-section .bullet-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
min-width: 19px;
margin-top: 1px;
border-radius: 50%;
background: #E9EEF6;
color: var(--ita-primary, #1A2B48);
font-size: 10px;
line-height: 1;
}
.inclus-exclus-section .bullet-icon.cross {
background: #E8F2EE;
color: var(--ita-green-light, #176B57);
}
.inclus-exclus-section .info-card:not(:has(.title-icon.cross)) .bullet-icon.cross {
background: #E9EEF6;
color: var(--ita-primary, #1A2B48);
}
.inclus-exclus-section .info-card:not(:has(.title-icon.cross)) {
border-left-color: var(--ita-primary, #1A2B48);
}
.timeline-container {
position: relative;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 98%;
border-left: 2px dashed #1A2B48;
transform: translateX(-1px);
}
.timeline-item {
position: relative;
margin-bottom: 30px;
}
/* Left column blocks */
.timeline-item-left .content-box {
padding-right: 40px;
}
/* Right column blocks */
.timeline-item-right .content-box {
padding-left: 40px;
}
/* Image styling */
.timeline-img {
width: 96%;
border-radius: 6px;
margin-top: 20px;
}
.timeline-item-left .col-md-6:nth-child(n+1) img {
margin-left: 14px;
}
.last-view.timeline-dot {
top: unset;
bottom: 0;
width: auto;
height: auto;
padding: 5px 10px;
font-size: 13px;
border-radius: 6px;
color: white;
cursor: pointer;
}
.last-view.timeline-dot .cl-icon {
margin: 0px 0 0 5px;
color: #fff;
font-size: 16px;
line-height: 30px;
}
/* Mobile responsive */
.destination-details__accordion .accrodion-content {
display: none;
}
.destination-details__accordion .accrodion.active .accrodion-content {
display: block;
}
.accrodion-title {
cursor: pointer;
}
.bannerad {
padding: 40px 0;
}
.site-footer {
background: var(--ita-primary, #1A2B48) !important;
color: var(--ita-white, #FFFFFF) !important;
padding: 48px 0 0;
font-family: "Manrope", sans-serif;
position: relative;
z-index: 9;
margin-top: 0;
}
.site-footer a {
color: rgba(255, 255, 255, 0.88) !important;
transition: color 0.25s ease;
}
.site-footer a:hover {
color: var(--ita-white, #FFFFFF) !important;
}
.site-footer .footer-section-title {
font-weight: 700;
font-size: 1.13rem;
margin-bottom: 14px;
padding-bottom: 7px;
display: inline-block;
color: var(--ita-white, #FFFFFF) !important;
}
.site-footer .footer-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
font-size: 0.98rem;
line-height: 2;
}
.site-footer .footer-list li {
margin-bottom: 3px;
list-style: none;
}
.site-footer .footer-list a {
color: rgba(255, 255, 255, 0.82) !important;
text-decoration: none;
font-size: 14px;
}
.site-footer .footer-list a:hover {
text-decoration: underline;
color: var(--ita-white, #FFFFFF) !important;
}
.site-footer .footer-carousel {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
.site-footer .footer-affiliations-carousel .item img {
max-height: 50px;
width: auto !important;
display: inline-block !important;
filter: brightness(0) invert(1);
opacity: 0.85;
transition: opacity 0.3s ease;
}
.site-footer .footer-affiliations-carousel .item img:hover {
opacity: 1;
}
.site-footer .footer-other-sites-carousel .item img {
max-height: 55px;
width: auto !important;
display: inline-block !important;
filter: none !important;
opacity: 1 !important;
transition: transform 0.25s ease;
}
.site-footer .footer-other-sites-carousel .item img:hover {
transform: scale(1.05);
}
.site-footer .topbar-two {
padding: 10px 0;
background: transparent !important;
margin-top: 15px;
}
.site-footer .topbar-two__social {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.site-footer .topbar-two__social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ita-white, #FFFFFF) !important;
text-decoration: none;
font-size: 18px;
transition: color 0.25s ease, transform 0.25s ease;
}
.site-footer .topbar-two__social a:hover {
color: #DCE5F1 !important;
transform: translateY(-2px);
}
.site-footer .bottom-menu {
text-align: center;
padding: 20px 0 30px;
font-size: 0.95rem;
color: var(--ita-white, #FFFFFF) !important;
}
.site-footer .bottom-menu a {
color: rgba(255, 255, 255, 0.88) !important;
padding: 0 10px;
text-decoration: none;
transition: color 0.25s ease;
}
.site-footer .bottom-menu a:hover {
color: var(--ita-white, #FFFFFF) !important;
}
:root {
--ita-primary: #1A2B48;
--ita-body: #5B6B84;
--ita-meta: #66758C;
--ita-white: #FFFFFF;
--ita-bg: #FEFEFA;
--ita-green: #1A2B48;
--ita-green-light: #176B57;
}
.ita__intro,
.ita__tours,
.ita__consultant {
background: var(--ita-white);
}
.ita__intro {
padding: 30px 0 16px;
}
.ita__intro .container,
.ita__tours .container,
.ita__about .container,
.ita__consultant .container,
.ita__articles .container {
max-width: 1200px;
}
.btn-banner-pill {
background-color: rgb(26 43 72 / 68%);
border: 2px solid #1a2b48bf;
color: var(--ita-white, #FFFFFF) !important;
padding: 8px 28px;
border-radius: 10px;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.3px;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 15px rgba(26, 43, 72, 0.2);
text-decoration: none;
display: inline-block;
font-family: "Manrope", sans-serif;
max-width: 95%;
overflow-wrap: break-word;
white-space: normal;
}
.btn-banner-pill:hover {
background-color: var(--ita-primary, #1A2B48);
border-color: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF) !important;
box-shadow: 0 7px 20px rgba(26, 43, 72, 0.3);
}
.tours-two.triplist {
padding: 20px 0 10px;
}
@media (max-width: 768px) {
.btn-banner-pill {
padding: 9px 18px;
font-size: 0.85rem;
max-width: 90%;
}
}
.ita__intro-text {
margin: 0 auto;
color: var(--ita-body);
font-family: "Manrope", sans-serif;
font-size: 16px;
line-height: 1.9;
text-align: center;
}
.ita__intro-text p {
margin-bottom: 12px;
}
.ita__tours {
padding: 20px 0 48px;
}
.ita__section-header {
margin: 0 auto 28px;
text-align: center;
}
.ita__section-title {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: clamp(30px, 3vw, 42px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.5px;
}
.ita__section-title::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin: 14px auto 0;
border-radius: 3px;
background: var(--ita-primary);
}
.ita__description-wrapper {
margin-top: 20px;
}
.ita__description {
color: var(--ita-body);
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.85;
text-align: left;
overflow: hidden;
transition: max-height 0.35s ease;
}
.ita__description p {
margin-bottom: 12px;
font-size: 16px;
}
.ita__description.content-collapsed {
max-height: 12em;
}
.ita__description.content-expanded {
max-height: 5000px;
}
.ita__read-more {
display: inline-block;
margin-top: 10px;
color: var(--ita-primary);
font-size: 15px;
font-weight: 700;
text-decoration: underline;
}
.ita__read-more:hover {
color: var(--ita-green-light);
}
.ita__tour-grid {
row-gap: 24px;
}
.ita__tour-column {
display: flex;
}
.ita__tour-link {
width: 100%;
color: inherit;
text-decoration: none;
}
.ita__tour-card {
height: 100%;
overflow: hidden;
border: 1px solid #E4EAF1;
border-radius: 12px;
background: var(--ita-white);
box-shadow: 0 5px 18px rgba(26, 43, 72, 0.055);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ita__tour-link:hover .ita__tour-card {
border-color: #C7D3E2;
box-shadow: 0 12px 28px rgba(26, 43, 72, 0.12);
}
.ita__tour-image {
position: relative;
height: 155px;
overflow: hidden;
background: #E9EEF4;
}
.ita__tour-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
}
.ita__tour-link:hover .ita__tour-image img {
transform: scale(1.035);
}
.ita__tour-offer {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 9px;
border-radius: 5px;
background: var(--ita-primary);
color: var(--ita-white);
font-family: "Manrope", sans-serif;
font-size: 10px;
font-weight: 700;
}
.ita__tour-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
padding: 15px 13px;
}
.ita__tour-price {
display: flex;
flex-wrap: wrap;
gap: 5px;
color: var(--ita-body);
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.5;
}
.ita__tour-price .discounted-price,
.ita__tour-price .discounted-price b {
color: var(--ita-primary);
}
.ita__tour-price .original-price {
color: var(--ita-meta);
}
.ita__tour-title {
margin: 0;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}
.ita__tour-meta {
margin: 0;
color: var(--ita-meta);
font-family: "Manrope", sans-serif;
font-size: 11px;
}
.ita__section-action {
display: flex;
justify-content: center;
margin-top: 28px;
text-align: center;
}
.ita__button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 12px 23px !important;
border: 1px solid var(--ita-primary) !important;
border-radius: 8px !important;
background: var(--ita-primary) !important;
color: var(--ita-white) !important;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(26, 43, 72, 0.12);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ita__button:hover {
transform: translateY(-2px);
background: #243C60 !important;
border-color: #243C60 !important;
color: var(--ita-white) !important;
box-shadow: 0 8px 18px rgba(26, 43, 72, 0.2);
}
.ita__button-arrow {
font-size: 16px;
line-height: 1;
}
.ita__about {
padding: 24px 0 45px;
background: var(--ita-white, #FFFFFF);
}
.ita__about .container {
max-width: 1320px;
}
.ita__about-card {
position: relative;
isolation: isolate;
display: flex;
align-items: stretch;
min-height: 410px;
padding: 38px 42px;
overflow: hidden;
border-radius: 14px;
background-color: var(--ita-primary, #1A2B48);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 12px 32px rgba(26, 43, 72, 0.12);
}
.ita__about-overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg,
rgba(15, 32, 57, 0.911) 0%,
rgba(15, 32, 57, 0.755) 34%,
rgba(15, 32, 57, 0.329) 58%,
rgba(15, 32, 57, 0.041) 100%);
}
.ita__about-layout {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
align-items: start;
gap: clamp(28px, 5vw, 68px);
width: 100%;
min-width: 0;
}
.ita__about-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
min-width: 0;
max-width: 620px;
color: var(--ita-white, #FFFFFF);
}
.ita__about-text {
width: 100%;
color: rgba(255, 255, 255, 0.95);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.85;
overflow-wrap: anywhere;
}
.ita__about-text p {
margin: 0 0 14px;
color: inherit;
text-align: left !important;
}
.ita__about-text p:last-child {
margin-bottom: 0;
}
.ita__about-text strong,
.ita__about-text b {
color: var(--ita-white, #FFFFFF);
font-weight: 800;
}
.ita__about-text h1,
.ita__about-text h2,
.ita__about-text h3,
.ita__about-text h4,
.ita__about-text h5,
.ita__about-text h6 {
margin: 0 0 16px;
color: var(--ita-white, #FFFFFF);
font-family: "DM Serif Display", serif;
font-weight: 600;
line-height: 1.3;
}
.ita__about-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
max-width: 100%;
min-height: 50px;
margin-top: 22px;
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 9px;
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ita__about-button svg {
flex-shrink: 0;
transition: transform 0.25s ease;
}
.ita__about-button:hover {
background: var(--ita-white, #FFFFFF);
border-color: var(--ita-white, #FFFFFF);
color: var(--ita-primary, #1A2B48);
}
.ita__about-info {
width: 100%;
min-width: 0;
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
color: var(--ita-primary, #1A2B48);
box-shadow: 0 12px 32px rgba(12, 28, 50, 0.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ita__about-info-content {
width: 100%;
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.7;
overflow-wrap: anywhere;
}
.ita__about-info-content h1,
.ita__about-info-content h2,
.ita__about-info-content h3,
.ita__about-info-content h4,
.ita__about-info-content h5,
.ita__about-info-content h6 {
margin: 0 0 16px;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1.55;
}
.ita__about-info-content p {
margin: 0 0 12px;
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
}
.ita__about-info-content p strong,
.ita__about-info-content p b {
color: var(--ita-primary, #1A2B48);
font-weight: 500;
font-size: 24px;
font-family: "DM Serif Display", serif;
line-height: 1.2;
}
.ita__about-info-content ul {
display: flex;
flex-direction: column;
gap: 9px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.ita__about-info-content ol {
margin: 14px 0 0;
padding-left: 20px;
}
.ita__about-info-content li {
position: relative;
margin: 0;
padding-left: 28px;
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.65;
}
.ita__about-info-content ul li::before {
content: "✓";
position: absolute;
top: 3px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
font-size: 11px;
font-weight: 500;
padding: 1px 1px 2px 0px;
}
.ita__about-info-content li strong,
.ita__about-info-content li b {
color: var(--ita-primary, #1A2B48);
font-weight: 700;
}
.ita__consultant {
padding: 0 0 52px;
}
.ita__consultant-row {
row-gap: 24px;
}
.ita__consultant-copy {
padding: 8px 15px 8px 0;
}
.ita__eyebrow {
display: inline-block;
margin-bottom: 4px;
color: var(--ita-meta);
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
}
.ita__consultant-title {
margin: 0 0 12px;
color: var(--ita-primary);
font-family: "DM Serif Display", serif;
font-size: 38px;
font-weight: 400;
line-height: 1;
}
.ita__consultant-text {
color: var(--ita-body);
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.ita__consultant-text p {
margin-bottom: 12px;
}
.ita__consultant-image-wrap {
width: 100%;
overflow: hidden;
border: 1px solid #E4EAF1;
border-radius: 13px;
background: #F1F4F8;
box-shadow: 0 8px 24px rgba(26, 43, 72, 0.09);
}
.ita__consultant-image {
display: block;
width: 100%;
height: 340px;
object-fit: cover;
object-position: center;
}
.ita__articles {
padding: 48px 0 55px;
border-top: 1px solid #E9EEF4;
border-bottom: 1px solid #E9EEF4;
background: #F6F9FC;
}
.ita__articles-header {
margin-bottom: 28px;
}
.ita__section-subtitle {
margin: 12px 0 0;
color: var(--ita-body);
font-family: "Manrope", sans-serif;
font-size: 14px;
line-height: 1.7;
}
.ita__articles-grid {
row-gap: 24px;
}
.ita__article-column {
display: flex;
}
.ita__article-card {
width: 100%;
overflow: hidden;
border: 1px solid #E3EAF2;
border-radius: 11px;
background: var(--ita-white);
box-shadow: 0 4px 16px rgba(26, 43, 72, 0.045);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ita__article-card:hover {
border-color: #C7D4E3;
box-shadow: 0 10px 24px rgba(26, 43, 72, 0.1);
}
.ita__article-image-link {
display: block;
overflow: hidden;
}
.ita__article-image {
position: relative;
height: 145px;
overflow: hidden;
background: #E8EDF3;
}
.ita__article-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.ita__article-card:hover .ita__article-image img {
transform: scale(1.035);
}
.ita__article-content {
padding: 14px;
}
.ita__article-title {
margin: 0;
font-family: "DM Serif Display", serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
.ita__article-title a {
color: var(--ita-primary);
text-decoration: none;
}
.ita__article-title a:hover {
color: var(--ita-green-light);
}
.contact_step {
background: var(--ita-bg, #FEFEFA);
padding: 1px 15px 25px;
margin-bottom: 25px;
animation: slideUp 0.8s ease-out forwards;
}
.contact_step .form-area {
width: 100%;
max-width: 800px;
margin: 24px auto;
padding: 24px;
border: 1px solid rgba(26, 43, 72, 0.2);
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 8px 28px rgba(26, 43, 72, 0.07);
position: relative;
z-index: 1;
}
.contact_step .hero-two__sub-title {
color: var(--ita-primary, #1A2B48);
font-family: "DM Serif Display", Georgia, serif;
font-size: 28px;
font-weight: 600;
line-height: 1.3;
text-align: center;
margin-bottom: 10px;
}
.contact_step .text-p {
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.7;
margin-bottom: 24px !important;
text-align: center;
}
.contact_step .form-group {
margin-bottom: 18px;
}
.contact_step .form-group label {
display: block;
margin-bottom: 7px;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
.contact_step .form-control {
width: 100%;
min-height: 44px;
padding: 10px 13px;
border: 1px solid #D8E1EE;
border-radius: 7px;
background-color: #FFFFFF;
color: var(--ita-primary, #1A2B48);
font-family: "Manrope", sans-serif;
font-size: 13px;
line-height: 1.5;
box-shadow: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.contact_step .form-control::placeholder {
color: var(--ita-meta, #66758C);
opacity: 1;
}
.contact_step .form-control:hover {
border-color: #A8B8D0;
}
.contact_step .form-control:focus {
border-color: var(--ita-primary, #1A2B48);
background-color: #FFFFFF;
color: var(--ita-primary, #1A2B48);
outline: none;
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.09);
}
.contact_step textarea.form-control {
min-height: 90px;
resize: vertical;
}
.contact_step .form-check {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 5px 0 18px;
}
.contact_step .form-check-input {
flex-shrink: 0;
margin-top: 4px;
border-color: #B8C5D8;
box-shadow: none;
cursor: pointer;
}
.contact_step .form-check-input:checked {
background-color: var(--ita-primary, #1A2B48);
border-color: var(--ita-primary, #1A2B48);
}
.contact_step .form-check-input:focus {
border-color: var(--ita-primary, #1A2B48);
box-shadow: 0 0 0 3px rgba(26, 43, 72, 0.1);
}
.contact_step .form-check-label {
color: var(--ita-body, #5B6B84);
font-family: "Manrope", sans-serif;
font-size: 11px;
line-height: 1.7;
}
.contact_step .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 11px 25px;
border: 1px solid var(--ita-primary, #1A2B48);
border-radius: 7px;
background: var(--ita-primary, #1A2B48);
color: var(--ita-white, #FFFFFF);
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
box-shadow: 0 4px 12px rgba(26, 43, 72, 0.12);
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.contact_step .btn-primary:hover {
background: #263B5D;
border-color: #263B5D;
color: var(--ita-white, #FFFFFF);
box-shadow: 0 7px 18px rgba(26, 43, 72, 0.2);
transform: translateY(-1px);
}
.contact_step .btn-primary:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(26, 43, 72, 0.14);
}
.contact_step .btn-primary:focus-visible {
outline: 3px solid rgba(26, 43, 72, 0.2);
outline-offset: 3px;
}
/*--------------------------------------------------------------
# Mobile Nav
--------------------------------------------------------------*/
.mobile-nav__wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
transform: translateX(-100%);
transform-origin: left center;
transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
visibility: hidden;
position: fixed;
}
.mobile-nav__wrapper .container {
padding-left: 0;
padding-right: 0;
}
.mobile-nav__wrapper .home-showcase .row [class*=col-] {
flex: 0 0 100%;
}
.mobile-nav__wrapper .home-showcase {
margin-bottom: -1px;
margin-top: 0;
border-bottom: 1px solid RGBA(var(--travhub-white-rgb), 0.1);
}
.mobile-nav__wrapper .home-showcase__inner {
padding: 15px 0px;
background-color: transparent;
box-shadow: none;
}
.mobile-nav__wrapper .home-showcase__title {
color: var(--travhub-white);
}
.mobile-nav__wrapper.expanded {
opacity: 1;
transform: translateX(0%);
visibility: visible;
transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
}
.mobile-nav__wrapper.expanded .mobile-nav__content {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms;
}
.mobile-nav__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--travhub-black);
opacity: 0.3;
cursor: url(../images/close.png), auto;
}
.mobile-nav__content {
width: 300px;
background-color: var(--travhub-black2);
z-index: 10;
position: relative;
height: 100%;
overflow-y: auto;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;
padding-right: 15px;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms;
}
.mobile-nav__content .main-menu__nav {
display: block;
padding: 0;
}
.mobile-nav__content .logo-box {
margin-bottom: 40px;
display: flex;
}
.mobile-nav__close {
position: absolute;
top: 20px;
right: 15px;
font-size: 18px;
color: var(--travhub-white);
cursor: pointer;
}
.mobile-nav__close:hover {
color: #1A2B48;
}
.mobile-nav__content .main-menu__list,
.mobile-nav__content .main-menu__list ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.mobile-nav__content .main-menu__list ul {
display: none;
border-top: 1px solid RGBA(var(--travhub-white-rgb), 0.1);
}
.mobile-nav__content .main-menu__list ul li>a {
padding-left: 1em;
}
.mobile-nav__content .main-menu__list li:not(:last-child) {
border-bottom: 1px solid RGBA(var(--travhub-white-rgb), 0.1);
}
.mobile-nav__content .main-menu__list li>a {
display: flex;
justify-content: space-between;
line-height: 30px;
color: var(--travhub-white);
font-size: 12px;
font-family: var(--travhub-font);
text-transform: uppercase;
font-weight: 500;
height: 46px;
align-items: center;
transition: 500ms;
}
.mobile-nav__content .main-menu__list li a.expanded {
color: #1A2B48;
}
.mobile-nav__content .main-menu__list li a button {
width: 30px;
height: 30px;
background-color: #1A2B48;
border: none;
outline: none;
color: var(--travhub-white);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transform: rotate(-90deg);
transition: transform 500ms ease;
}
.mobile-nav__content .main-menu__list li a button.expanded {
transform: rotate(0deg);
background-color: var(--travhub-white);
color: var(--travhub-black);
}
.mobile-nav__social {
display: flex;
align-items: center;
}
.mobile-nav__social a {
font-size: 16px;
color: var(--travhub-white);
transition: 500ms;
}
.mobile-nav__social a+a {
margin-left: 20px;
}
.mobile-nav__social a:hover {
color: #1A2B48;
}
.mobile-nav__contact {
margin-bottom: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.mobile-nav__contact li {
color: var(--travhub-white);
font-size: 14px;
font-weight: 500;
position: relative;
display: flex;
align-items: center;
}
.mobile-nav__contact li+li {
margin-top: 15px;
}
.mobile-nav__contact li a {
color: inherit;
transition: 500ms;
}
.mobile-nav__contact li a:hover {
color: #1A2B48;
}
.mobile-nav__contact li>i {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1A2B48;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12px;
margin-right: 10px;
color: var(--travhub-white);
}
.mobile-nav__container .main-menu__logo,
.mobile-nav__container .main-menu__right {
display: none;
}
@media(max-width:900px) {
.mobile-nav__content .main-menu__list,
.mobile-nav__content .main-menu__list ul {
flex-direction: column;
justify-content: start;
align-items: start !important;
}
.mobile-nav__content .main-menu__list li:not(:last-child) {
width: 100%;
}
/* jdnclam */
}
.rc-anchor-invisible {
opacity: .3 !important;
}
.ita-circuits-page {
padding: 95px 0 65px;
background: #fff;
}
.ita-circuits-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-bottom: 38px;
}
.ita-circuits-heading {
max-width: 690px;
}
.ita-circuits-heading h1 {
margin: 0 0 5px;
color: var(--ita-primary);
font-family: 'DM Serif Display', serif;
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 400;
line-height: 1.2;
}
.ita-circuits-heading p {
max-width: 600px;
margin: 0;
color: var(--ita-meta, #66758C);
font-family: 'Manrope', sans-serif;
font-size: 16px;
line-height: 1.6;
}
.ita-circuits-actions {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.ita-circuits-btn {
position: relative;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 22px;
border: 1px solid var(--ita-primary, #1A2B48);
border-radius: 8px;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 700;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ita-circuits-btn::before {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
content: "";
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transform: skewX(-20deg);
transition: left .5s ease;
pointer-events: none;
}
.ita-circuits-btn:hover::before {
left: 130%;
}
.ita-circuits-btn-primary {
background: var(--ita-primary, #1A2B48);
color: #fff;
}
.ita-circuits-btn-primary:hover {
color: #fff;
box-shadow: 0 8px 20px rgba(26, 43, 72, 0.25);
}
.ita-circuits-btn-outline {
background: #fff;
color: var(--ita-primary, #1A2B48);
}
.ita-circuits-btn-outline::before {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.ita-circuits-btn-outline:hover {
background: var(--ita-primary, #1A2B48);
border-color: var(--ita-primary, #1A2B48);
color: #fff;
box-shadow: 0 8px 20px rgba(26, 43, 72, 0.2);
}
.ita-circuits-category {
margin-bottom: 32px;
}
.ita-circuits-tabs {
display: flex !important;
align-items: flex-start;
justify-content: center;
flex-wrap: nowrap !important;
gap: 24px;
padding: 0 0 18px;
border-bottom: 1px solid #E8ECF1;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #1A2B48 #E8ECF1;
-webkit-overflow-scrolling: touch;
}
.ita-circuits-tabs .nav-item {
flex: 0 0 110px;
min-width: 110px;
}
.ita-circuits-tabs .nav-link {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 5px 4px 12px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ita-primary, #1A2B48);
font-family: 'Manrope', sans-serif;
font-size: 15px;
font-weight: 600;
white-space: normal;
line-height: 1.4;
text-align: center;
transition: color .25s ease;
}
.ita-circuits-tabs::-webkit-scrollbar {
height: 5px;
}
.ita-circuits-tabs::-webkit-scrollbar-track {
background: #E8ECF1;
border-radius: 10px;
}
.ita-circuits-tabs::-webkit-scrollbar-thumb {
background: #1A2B48;
border-radius: 10px;
}
.ita-circuits-tab-icon {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #E7EEF4;
color: var(--ita-primary, #1A2B48);
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ita-circuits-tab-icon svg {
width: 32px;
height: 32px;
}
.ita-circuits-tabs .nav-link:hover .ita-circuits-tab-icon {
transform: translateY(-3px);
}
.ita-circuits-tabs .nav-link.active {
background-color: transparent !important;
font-weight: 800;
color: var(--ita-primary, #1A2B48) !important;
}
.ita-circuits-tabs .nav-link.active .ita-circuits-tab-icon {
background: var(--ita-primary, #1A2B48) !important;
color: #fff !important;
}
.nav-pills.ita-circuits-tabs .nav-link:hover {
color: var(--ita-primary) !important;
}
.ita-circuits-tabs .nav-link.active::after {
width: 30px;
height: 3px;
margin-top: 0;
border-radius: 5px;
background: var(--ita-primary, #1A2B48);
content: "";
}
.ita-circuits-tab-content {
min-height: 150px;
}
.ita-call-schedule {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 14px;
border: 1px solid #D7E1EF;
border-radius: 10px;
background: linear-gradient(135deg, #F8FAFD 0%, #E8EEF8 100%);
color: #1A2B48;
text-decoration: none;
transition: all .25s ease;
}
.ita-call-schedule:hover {
background: linear-gradient(135deg, #EDF3FB 0%, #DCE7F5 100%);
border-color: #B7C9E2;
color: #1A2B48;
box-shadow: 0 5px 16px rgba(26, 43, 72, .08);
}
.ita-call-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #1A2B48;
color: #FFFFFF;
transition: background .25s ease;
}
.ita-call-schedule:hover .ita-call-icon {
background: #2B4266;
}
.ita-call-content {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
}
.ita-call-content strong {
font-size: 16px;
color: #1A2B48;
font-weight: 700;
line-height: normal;
}
.ita-call-content small {
color: #66758C;
font-size: 13px;
line-height: 20px;
}
.ita-call-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
color: #1A2B48;
transition: transform .25s ease, background .25s ease;
}
.ita-call-schedule:hover .ita-call-arrow {
transform: translateX(3px);
background: rgba(26, 43, 72, .07);
}
.ita-schedule-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
color: #1A2B48;
cursor: pointer;
transition: all .25s ease;
border: 1px solid #E3E9F2;
background: linear-gradient(135deg, #FFFFFF 0%, #F5F8FC 100%);
}
.ita-schedule-icon:hover {
background: linear-gradient(0deg, #FFFFFF 0%, #F5F8FC 100%);
border-color: #dae9ff;
}
.ita-schedule-icon svg {
width: 24px;
height: 24px;
}
.ita-mobile-email {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0;
}