/* Main Header Container */
.main-header {
  /* box-shadow: 0px 4px 16px 0px #1122110D !important; */

  /* margin-bottom: -200px !important; */
}

/* Main Header's Anker's active States */
.main-header a:active {
  /* background: none !important;
  color: unset !important; */
}

/* Mobile Navbar */

/* ":is" suedo-class represents that the elements presents in the selectors-list can be selected with any of these selectors */
/* here, i am selecting all the 'anker' or 'span' elements that are descendants of ".cus-navbar" */
.cus-navbar *:is(a, span),
.contact-us-link {
  transition: all 0.4s !important;
}

/* nested ":is" suedo-class to save code repetition */
nav :is(.cus-navbar :is(a, span), .contact-us-link):hover {
  color: var(--gray-9);
}

/* the link with 'active' class */
.cus-navbar a.active span {
  color: var(--white) !important;
}

/* Contact Us */

/* if any 'anker' element with ".active" class has a 'span' element with ".contact-us-link" class, then select that 'span' element*/
a.active:has(span.contact-us-link) .contact-us-link {
  color: var(--white);
}

.contact-us-link {
  /* use "background-clip" to display 'multiple backgrounds' to mimick the look of 'borders' */
  /* background: linear-gradient(rgb(13, 13, 13), rgb(13, 13, 13)) padding-box,
    linear-gradient(180deg, #D7213B 0%, #574DA0 100%) border-box;
  border: 2px solid transparent; */

  background: linear-gradient(180deg, #FF0014 0%, #5956E9 100%);
}

.contact-us-link:hover {
  color: var(--gray-7) !important;
}


/* Left Navbar */
.cus-left-navbar>div {
  /* border-bottom: 3px solid transparent !important; */
}

/* coverting icons color to black using css */
.cus-left-navbar>div *:is(img, span) {
  /* filter: grayscale(100%); */
  /* filter: brightness(20%); */

}

.cus-left-navbar>div.active {
  /* border-bottom: 3px solid #02876E !important; */
}

/* coverting icons color to original when active, using css */
.cus-left-navbar>div.active *:is(img, span) {
  /* filter: brightness(100%); */
}

/* Find Stays */
.navbar .find-stays img {
  width: 50px !important;
}

/* Our Blogs */
.blogs-icon {
  width: 17px !important;
  height: 17px !important;
}

/* Logo */
.navbar .logo img {
  width: 50px !important;
  /* padding-bottom: 2px !important; */
}

/* Hamburger icon */
.navbar .hamburger-icon img {
  width: 16px !important;
}









/* ############################################################################################################### */
/* ######################### Media Queries ######################### */
/* ############################################################################################################### */

@media (max-width: 576px) {

  .px-xs-12p {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

}

@media (min-width: 576px) {

  .px-12p {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Find Stays */
  .navbar .find-stays img {
    width: 60px !important;

  }

  /* Logo */
  .navbar .logo img {
    width: 60px !important;
  }

  /* Hamburger icon */
  .navbar .hamburger-icon img {
    width: 16px !important;
  }

  /********************** "Custom Classes" start **********************/
  /* Border Radius */
  .rounded-sm-1 {
    border-radius: 4px !important;
  }

  /********************** "Custom Classes" end **********************/

}

@media (min-width: 768px) {

  /* Find Stays */
  .navbar .find-stays img {
    width: 70px !important;

  }

  /* Logo */
  .navbar .logo img {
    width: 70px !important;
  }

  /* Hamburger icon */
  .navbar .hamburger-icon img {
    width: 20px !important;
  }

  .cus-navbar {
    /* border: 1px solid var(--white) !important; */
  }

}

@media (min-width: 992px) {

  /* .cus-navbar {
    border: 1px solid var(--black);
  } */

  /* Border-Right between "Right Navbar Links" */

  /* .cus-navbar > li:not(:last-child) { */
  /* .cus-navbar > li:not(:last-child) > a > span:last-of-type, .cus-navbar > li:nth-of-type(2) > a { */
  .cus-navbar>li:not(:last-child)>a>span:last-of-type {
    /* border-right: 2px solid var(--black) !important; */
    /* padding-bottom: 2px !important; */
  }

  /* .cus-navbar > li:last-child > a > span:last-of-type { */
  .cus-navbar>li:last-child>a {
    position: relative !important;
    top: 1px !important;
  }

  /* .cus-navbar > li:not(:last-child) > a > span:last-of-type {
    padding-bottom: 3px !important;
  } */
  /* .cus-navbar > li:nth-of-type(2) > a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  } */
  .cus-navbar>li:last-child>a {
    padding-right: 0px !important;
  }

  /* White Avatar Icon */
  .cus-navbar>li:last-child .avatar-icon-white {
    display: none !important;
  }

  /* Black Avatar Icon */
  .cus-navbar>li:last-child .avatar-icon-black {
    display: block !important;
  }

  .cus-navbar a {
    color: var(--black);
    font-size: var(--fs-base);
  }

  /* Find Stays */
  .navbar .find-stays img {
    width: 80px !important;

  }

  /* Logo */
  .navbar .logo img {
    /* width: 80px !important; */
  }

  /* Dropdown */

  /* Dropdown Menu */
  .cus-dropdown-menu {
    visibility: visible !important;
  }

  /********************** "Custom Classes" start **********************/
  /* Border Radius */
  .rounded-lg-3 {
    border-radius: 8px !important;
  }

  /********************** "Custom Classes" end **********************/

}

@media (min-width: 1200px) {

  /* Find Stays */
  /* .navbar .find-stays img {
      width: 80px !important;
    } */

  /* Logo */
  .navbar .logo img {
    /* width: 100px !important; */
  }

  /********************** "Custom Classes" start **********************/
  /* Border Radius */
  .rounded-xl-4 {
    border-radius: 16px !important;
  }

  /* Contact Us */
  .contact-us-link {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  /********************** "Custom Classes" end **********************/

}

@media (min-width: 1400px) {

  .main-header {
    padding-top: 34px !important;
  }
  
  /* Find Stays */
  .navbar .find-stays img {
    width: 90px !important;
  }

  /* Logo */
  .navbar .logo img {
    /* width: 110px !important; */
  }

}