/* Start custom CSS for html, class: .elementor-element-9009237 *//* =========================================================
INDIAN ESCORTS WORLD
PREMIUM HEADER
========================================================= */
#iew-main-header {
--iew-purple: #9B8EC7;
--iew-lavender: #BDA6CE;
--iew-blue: #B4D3D9;
--iew-cream: #F2EAE0;
--iew-dark: #292334;
--iew-dark-2: #332C40;
--iew-text: #4B4651;
--iew-white: #ffffff;
width: 100%;
position: relative;
z-index: 9999;
background: rgba(41, 35, 52, 0.98);
border-bottom:
1px solid rgba(189, 166, 206, 0.18);
font-family:
Arial,
Helvetica,
sans-serif;
}
/* =========================================================
HEADER INNER
========================================================= */
#iew-main-header .iew-header-inner {
width: min(1420px, calc(100% - 50px));
min-height: 92px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
/* =========================================================
PREMIUM LOGO
========================================================= */
#iew-main-header .iew-logo {
flex: 0 0 auto;
display: flex;
flex-direction: column;
text-decoration: none;
line-height: 1;
min-width: 205px;
position: relative;
padding-left: 14px;
}
#iew-main-header .iew-logo::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 3px;
height: 38px;
background:
linear-gradient(
to bottom,
var(--iew-blue),
var(--iew-lavender)
);
}
#iew-main-header .iew-logo span {
color: var(--iew-blue);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 5px;
margin-bottom: 6px;
text-transform: uppercase;
}
#iew-main-header .iew-logo strong {
color: var(--iew-cream);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 22px;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
}
#iew-main-header .iew-logo strong::after {
content: "";
display: block;
width: 38px;
height: 1px;
background: var(--iew-lavender);
margin-top: 7px;
transition: width 0.3s ease;
}
#iew-main-header .iew-logo:hover strong::after {
width: 70px;
}
/* =========================================================
NAVIGATION
========================================================= */
#iew-main-header .iew-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex: 1;
}
#iew-main-header .iew-navigation > a,
#iew-main-header .iew-dropdown-trigger {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 12px 13px;
color: rgba(242, 234, 224, 0.88);
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
transition:
color 0.3s ease,
background 0.3s ease;
}
#iew-main-header .iew-navigation > a::after,
#iew-main-header .iew-dropdown-trigger::after {
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 4px;
height: 1px;
background: var(--iew-lavender);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
#iew-main-header .iew-navigation > a:hover,
#iew-main-header .iew-dropdown-trigger:hover {
color: var(--iew-white);
}
#iew-main-header .iew-navigation > a:hover::after,
#iew-main-header .iew-dropdown-trigger:hover::after {
transform: scaleX(1);
}
/* =========================================================
LOCATION DROPDOWN HOLDER
========================================================= */
#iew-main-header .iew-nav-dropdown {
position: static;
}
/* =========================================================
LOCATION ARROW
========================================================= */
#iew-main-header .iew-arrow {
color: var(--iew-lavender);
font-size: 16px;
line-height: 1;
margin-top: -3px;
transition: transform 0.3s ease;
}
#iew-main-header .iew-nav-dropdown:hover .iew-arrow {
transform: rotate(180deg);
}
/* Mobile opened arrow */
@media (max-width: 950px) {
#iew-main-header
.iew-nav-dropdown.iew-mobile-location-open
.iew-arrow {
transform: rotate(180deg);
}
}
/* =========================================================
INVISIBLE HOVER BRIDGE
========================================================= */
#iew-main-header .iew-nav-dropdown::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 22px;
background: transparent;
z-index: 9997;
}
/* =========================================================
MEGA MENU
========================================================= */
#iew-main-header .iew-mega-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
width: min(1160px, calc(100% - 50px));
transform:
translateX(-50%)
translateY(-8px);
background: var(--iew-dark);
border:
1px solid rgba(189, 166, 206, 0.2);
padding: 32px 36px 25px;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.35),
0 5px 20px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0s linear 0.35s;
}
/* =========================================================
DESKTOP MEGA MENU ACTIVE
========================================================= */
#iew-main-header
.iew-nav-dropdown:hover
.iew-mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
transition:
opacity 0.25s ease 0.15s,
transform 0.25s ease 0.15s,
visibility 0s linear 0s;
}
/* =========================================================
MEGA MENU TOP
========================================================= */
#iew-main-header .iew-mega-heading {
border-bottom:
1px solid rgba(189, 166, 206, 0.18);
padding-bottom: 22px;
margin-bottom: 22px;
}
#iew-main-header .iew-mega-heading span {
display: block;
color: var(--iew-blue);
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 8px;
}
#iew-main-header .iew-mega-heading h3 {
margin: 0 0 7px;
color: var(--iew-cream);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 27px;
font-weight: 400;
}
#iew-main-header .iew-mega-heading p {
max-width: 600px;
margin: 0;
color: rgba(242, 234, 224, 0.62);
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
LOCATION GRID
========================================================= */
#iew-main-header .iew-location-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 1px;
background:
rgba(189, 166, 206, 0.12);
border:
1px solid rgba(189, 166, 206, 0.12);
}
/* =========================================================
LOCATION ITEM
========================================================= */
#iew-main-header .iew-location-grid a {
position: relative;
display: flex;
align-items: center;
min-height: 51px;
padding: 0 17px;
background: var(--iew-dark-2);
color: rgba(242, 234, 224, 0.85);
text-decoration: none;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 12px;
font-weight: 500;
transition:
background 0.3s ease,
color 0.3s ease,
padding-left 0.3s ease;
}
#iew-main-header .iew-location-grid a::before {
content: "•";
color: var(--iew-lavender);
font-size: 15px;
margin-right: 10px;
transition: transform 0.3s ease;
}
#iew-main-header .iew-location-grid a:hover {
background:
rgba(155, 142, 199, 0.16);
color: var(--iew-white);
padding-left: 21px;
}
#iew-main-header .iew-location-grid a:hover::before {
transform: scale(1.35);
}
/* =========================================================
MEGA MENU BOTTOM
========================================================= */
#iew-main-header .iew-mega-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 21px;
}
#iew-main-header .iew-mega-bottom span {
color: rgba(242, 234, 224, 0.4);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}
#iew-main-header .iew-mega-bottom a {
color: var(--iew-lavender);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
transition: color 0.3s ease;
}
#iew-main-header .iew-mega-bottom a:hover {
color: var(--iew-white);
}
/* =========================================================
CONTACT AREA
========================================================= */
#iew-main-header .iew-header-contact {
display: flex;
align-items: center;
gap: 11px;
flex: 0 0 auto;
}
/* =========================================================
PHONE
========================================================= */
#iew-main-header .iew-phone {
display: flex;
align-items: center;
gap: 9px;
color: var(--iew-cream);
text-decoration: none;
transition: color 0.3s ease;
}
#iew-main-header .iew-phone:hover {
color: var(--iew-lavender);
}
#iew-main-header .iew-phone-icon {
width: 33px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(180, 211, 217, 0.3);
border-radius: 50%;
color: var(--iew-blue);
font-size: 13px;
}
#iew-main-header .iew-phone span:last-child {
display: flex;
flex-direction: column;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
#iew-main-header .iew-phone small {
color: rgba(242, 234, 224, 0.42);
font-size: 8px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 3px;
}
/* =========================================================
WHATSAPP
========================================================= */
#iew-main-header .iew-whatsapp {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border:
1px solid rgba(189, 166, 206, 0.5);
color: var(--iew-cream);
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
#iew-main-header .iew-whatsapp:hover {
background: var(--iew-lavender);
border-color: var(--iew-lavender);
color: var(--iew-dark);
transform: translateY(-2px);
}
#iew-main-header .iew-wa-icon {
font-size: 16px;
}
/* =========================================================
MOBILE TOGGLE
========================================================= */
#iew-main-header .iew-menu-toggle {
display: none;
width: 43px;
height: 43px;
border:
1px solid rgba(189, 166, 206, 0.35);
background: transparent;
cursor: pointer;
padding: 10px;
flex-shrink: 0;
position: relative;
z-index: 10001;
}
#iew-main-header .iew-menu-toggle span {
display: block;
height: 1px;
width: 100%;
background: var(--iew-cream);
margin: 5px 0;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1250px) {
#iew-main-header .iew-header-inner {
width:
min(1200px, calc(100% - 35px));
gap: 15px;
}
#iew-main-header .iew-navigation > a,
#iew-main-header .iew-dropdown-trigger {
padding-left: 9px;
padding-right: 9px;
font-size: 12px;
}
#iew-main-header .iew-logo {
min-width: 170px;
}
#iew-main-header .iew-logo strong {
font-size: 19px;
}
#iew-main-header .iew-phone span:last-child {
display: none;
}
#iew-main-header .iew-phone-icon {
width: 37px;
height: 37px;
}
}
/* =========================================================
MOBILE NAVIGATION
========================================================= */
@media (max-width: 950px) {
#iew-main-header {
z-index: 99999;
}
#iew-main-header .iew-header-inner {
min-height: 78px;
position: relative;
}
/* MOBILE BUTTON */
#iew-main-header .iew-menu-toggle {
display: block;
margin-left: auto;
}
/* MOBILE NAV */
#iew-main-header .iew-navigation {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background: var(--iew-dark);
border-top:
1px solid rgba(189, 166, 206, 0.18);
padding: 12px 20px 20px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3);
gap: 0;
z-index: 10000;
}
/* THIS CLASS IS ADDED BY JAVASCRIPT */
#iew-main-header
.iew-navigation.iew-mobile-open {
display: flex;
}
/* MOBILE LINKS */
#iew-main-header .iew-navigation > a,
#iew-main-header .iew-dropdown-trigger {
width: 100%;
min-height: 48px;
box-sizing: border-box;
padding: 14px 10px;
border-bottom:
1px solid rgba(189, 166, 206, 0.1);
font-size: 13px;
}
#iew-main-header .iew-navigation > a::after,
#iew-main-header .iew-dropdown-trigger::after {
display: none;
}
/* LOCATION HOLDER */
#iew-main-header .iew-nav-dropdown {
width: 100%;
position: relative;
}
/* REMOVE DESKTOP HOVER BRIDGE */
#iew-main-header .iew-nav-dropdown::after {
display: none;
}
/* =====================================================
MOBILE MEGA MENU
===================================================== */
#iew-main-header .iew-mega-menu {
position: relative;
top: auto;
left: auto;
width: 100%;
max-width: none;
box-sizing: border-box;
transform: none;
display: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
padding: 20px;
margin: 0;
box-shadow: none;
border-top:
1px solid rgba(189, 166, 206, 0.12);
background: var(--iew-dark);
transition: none;
}
/* IMPORTANT:
Desktop hover must NOT force mobile menu open */
#iew-main-header
.iew-nav-dropdown:hover
.iew-mega-menu {
transform: none;
transition: none;
}
/* JAVASCRIPT OPENS THIS CLASS */
#iew-main-header
.iew-nav-dropdown.iew-mobile-location-open
.iew-mega-menu {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* MOBILE LOCATION GRID */
#iew-main-header .iew-location-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
width: 100%;
}
#iew-main-header .iew-location-grid a {
min-height: 48px;
padding-left: 13px;
padding-right: 13px;
}
#iew-main-header .iew-location-grid a:hover {
padding-left: 17px;
}
#iew-main-header .iew-mega-heading h3 {
font-size: 23px;
}
#iew-main-header .iew-header-contact {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 600px) {
#iew-main-header .iew-header-inner {
width: calc(100% - 28px);
min-height: 74px;
}
#iew-main-header .iew-logo {
min-width: 0;
padding-left: 11px;
max-width: calc(100% - 60px);
}
#iew-main-header .iew-logo::before {
width: 2px;
height: 32px;
}
#iew-main-header .iew-logo span {
font-size: 7px;
letter-spacing: 3.5px;
margin-bottom: 5px;
}
#iew-main-header .iew-logo strong {
font-size: 16px;
letter-spacing: 1px;
}
#iew-main-header .iew-logo strong::after {
width: 30px;
margin-top: 6px;
}
#iew-main-header .iew-logo:hover strong::after {
width: 50px;
}
/* MOBILE MENU */
#iew-main-header .iew-navigation {
padding:
10px 14px 18px;
}
/* ONE COLUMN LOCATION MENU */
#iew-main-header .iew-location-grid {
grid-template-columns: 1fr;
}
#iew-main-header .iew-mega-menu {
padding: 18px 14px;
}
#iew-main-header .iew-mega-heading {
padding-bottom: 17px;
margin-bottom: 17px;
}
#iew-main-header .iew-mega-heading h3 {
font-size: 21px;
}
#iew-main-header .iew-mega-heading p {
font-size: 11px;
line-height: 1.65;
}
#iew-main-header .iew-mega-bottom {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
#iew-main-header .iew-menu-toggle {
width: 42px;
height: 42px;
padding: 9px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
#iew-main-header .iew-logo strong {
font-size: 14px;
letter-spacing: 0.8px;
}
#iew-main-header .iew-logo span {
font-size: 6px;
letter-spacing: 3px;
}
#iew-main-header .iew-navigation {
padding-left: 10px;
padding-right: 10px;
}
}/* End custom CSS */