/*

TemplateMo 580 Woox Travel

https://templatemo.com/tm-580-woox-travel

*/
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #000000;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
	color: #22b3c1;
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #2a2a2a;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #afafaf;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #000000;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #22b3c1;
  color: #fff;
}

::-moz-selection {
  background: #22b3c1;
  color: #fff;
}

.text-button a {
  font-size: 14px;
  color: #22b3c1;
  font-weight: 500;
  transition: all .3s;
}

.text-button a i {
  margin-left: 5px;
  transition: all .3s;
}

.text-button a:hover i {
  margin-left: 10px;
}

.border-button a {
  font-size: 14px;
  color: #22b3c1;
  background-color: transparent;
  border: 1px solid #22b3c1;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.border-button a:hover {
  background-color: #22b3c1;
  color: #fff;
}

.main-button a {
  font-size: 14px;
  color: #fff;
  background-color: #22b3c1;
  border: 1px solid #22b3c1;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}


/* Animations */
@keyframes progressBarFill {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}


/* 
---------------------------------------------
Visit Country Style
--------------------------------------------- 
*/

.visit-country {

margin-top: 20px;
  
}

.visit-country .side-bar-map {
  margin-left: 30px;
}

.visit-country .item {
  position: relative;
  margin-top:20px ;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.visit-country .last-item {
  border-bottom: none;
}

.visit-country .item .image img {
  border-radius: 23px;
}

.visit-country .item .right-content h4 {
  font-size: 20px;
  margin-bottom: 5px;
}

.visit-country .item .right-content span {
  font-size: 15px;
  color: #afafaf;
  display: block;
}


.visit-country .item .right-content p {
  margin: 18px 0px;
}

.visit-country .item .right-content ul {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 15px 0px;
}

.visit-country .item .right-content ul li {
  display: inline-block;
  width: 32%;
  color: #4e4e4e;
  font-size: 14px;
}

.visit-country .item .right-content ul li:nth-child(2) {
  text-align: center;
}

.visit-country .item .right-content ul li:last-child {
  text-align: right;
}

.visit-country .item .right-content ul li i {
  margin-right: 5px;
  font-size: 16px;
}

.visit-country .item .right-content .text-button {
  margin-top: 20px;
}
 /* nav bar */
 .navbar {

    background: transparent;
    z-index: 999999;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .navbar .container {
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--border-radius-medium);
    padding: 15px 30px;
  }
  
  .navbar-brand,
  .navbar-brand:hover {
    font-size: var(--h4-font-size);
    font-weight: var(--font-weight-bold);
    display: block;
    color: var(--white-color);
  }
  
  
  
  .navbar-brand-image {
    border-radius: 25px;
    width: 48px;
    height: auto;
    margin-right: 10px;
  }
  
  .navbar .custom-btn {
    padding: 10px 20px;
  }
  
  .navbar-expand-lg .navbar-nav .nav-link {
    border-radius: var(--border-radius-large);
    margin: 10px;
    padding: 10px;
  }
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .navbar-nav .nav-link {
    display: inline-block;
    color: var(--white-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-bold);
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .navbar-nav .nav-link.active, 
  .navbar-nav .nav-link:hover {
    color: var(--secondary-color);
  }
  
  .navbar .dropdown-menu {
    background: var(--white-color);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    border: 0;
    display: inherit;
    opacity: 0;
    min-width: 9rem;
    margin-top: 20px;
    padding: 13px 0 10px 0;
    transition: all 0.3s;
    pointer-events: none;
  }
  
  .navbar .dropdown-menu::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 15px solid var(--white-color);
    position: absolute;
    top: -10px;
    left: 10px;
  }
  
  .navbar .dropdown-item {
    display: inline-block;
    color: white;
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    position: relative;
  }
  
  .navbar .dropdown-item.active, 
  .navbar .dropdown-item:active,
  .navbar .dropdown-item:focus, 
  .navbar .dropdown-item:hover {
    background: transparent;
    color: var(--link-hover-color);
  }
  
  .navbar .dropdown-toggle::after {
    content: "\f282";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-size: var(--menu-font-size);
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    left: 2px;
    border: 0;
  }
  
  @media screen and (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
      opacity: 1;
      margin-top: 0;
      pointer-events: auto;
    }
  }
  
  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 30px;
    height: 35px;
    outline: none;
  }
  
  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
    transform: rotate(45deg);
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transform: rotate(-45deg);
  }
  
  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }
  
  .navbar-toggler .navbar-toggler-icon:before,
  .navbar-toggler .navbar-toggler-icon:after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 30px;
    height: 2px;
    content: '';
  }
  
  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }
  
  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
  }