.header-container {
    display: grid; /* Use grid layout */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
   /* padding: 10px; Add some padding */
    background-color: #f0f0f0; /* Background color for the container */
}
.header-top-alert-blue,
.header-top-alert-red {
    padding: 10px; /* Padding */
    text-align: center; /* Center text */
    color: white; /* Text color */
}
.header-top-alert-blue {
    background-color: #005CB9; /* Background color for the blue alert */
}
.header-top-alert-red {
    background-color: #CC0000; /* Background color for the red alert */
}
.logo1 {
    width: 60px; /* Set logo width */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive styles */
@media (max-width: 600px) {
    .header-container {
        grid-template-columns: 1fr; /* Stack items vertically on small screens */
    }
}

.top-line {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    background-color: #f8f9fa; /* Light background */
    padding: 10px 20px; /* Padding for spacing */
    border-bottom: 2px solid #007BFF; /* Bottom border */
}
.contact {
    font-size: 16px; /* Font size for contact info */
}
.contact a {
    color: #007BFF; /* Link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
}
.top-nav {
    display: flex; /* Flexbox for navigation */
    align-items: center; /* Center items vertically */
}
.social {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0 20px; /* Margin for spacing */
    display: flex; /* Flexbox for horizontal layout */
}
.social li {
    margin-right: 15px; /* Space between social icons */
}
.social a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Default icon color */
}
.search-box {
    margin-left: 20px; /* Space for search box */
}
.icon-search, .icon-facebook, .icon-twitter, .icon-pinterest, .icon-instagramm {
    font-size: 20px; /* Icon size */
}
@media (max-width: 768px) {
    .top-line {
        flex-direction: column; /* Stack items vertically on small screens */
        align-items: flex-start; /* Align items to the start */
    }
    .top-nav {
        margin-top: 10px; /* Space between contact and nav */
        width: 100%; /* Full width for nav */
        justify-content: space-between; /* Space between nav items */
    }
    .social {
        margin: 0; /* Remove margin for social icons */
    }
    .social li {
        margin-right: 10px; /* Adjust space between icons */
    }
}

.text-white{
    color: #fff;
}
/* header css */
/* santa catalina panam bamboo eco lodge place to stay page css */
body {font-family: Simplo-Regular!important;}
h1, h2, h3, h4, h5 {font-family: 'Baskerville Bold'!important;}
h5 {font-size:20px;}
.container-slider{
  width: 100%;
  height: 411px!important;
}
.dot_nav{
  display: none!important;
}
.arrows span svg {
fill: white!important;
transition: all 200ms ease;
}
.dark-background {background-color: #313131!important;}
@font-face {
  font-family: Simplo-Regular;
  src: url("font/Simplo-Regular.otf") format("opentype");
}

@font-face {
  font-family: 'Baskerville Normal';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Normal'), url('baskvl.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville Regular';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Regular'), url('baskervi.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville Light-Italic';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Light-Italic'), url('BASKE10.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville Light';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Light'), url('BASKE9.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville LightA';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville LightA'), url('BASKRV_L.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville Bold';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Bold'), url('BASKE1.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville Bold';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville Bold'), url('Baskerville Bold font.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville BT Roman';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville BT Roman'), url('BaskervilleBT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville BT Italic';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville BT Italic'), url('BaskervilleItalicBT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville BT Bold';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville BT Bold'), url('BaskervilleBoldBT.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville BT Bold';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville BT Bold'), url('baskerville bold bt.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Baskerville BT Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('font/Baskerville BT Bold Italic'), url('BaskervilleBoldItalicBT.woff') format('woff');
  }

@font-face {
  font-family: Simplo-Regular;
  font-weight: bold;
  src: url("font/Simplo-Regular.otf") format("opentype");
}
      /* Extra small devices (phones, 600px and down) */
      @media only screen and (max-width: 768px) {
          .hide-mob {display:none!important;}
          .my-logo a {color:var(--nav-color);}
          .navmenu a, .navmenu a:focus {font-family: Simplo-Regular!important;} 
      }
      
      /* Large devices (laptops/desktops, 992px and up) */
      @media only screen and (min-width: 992px) {
          .hide-desk {display:none!important;}
          #navmenu {margin:auto;}
          .navmenu a, .navmenu a:focus {font-family: Simplo-Regular!important;}
      } 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
	.cus-row {width:100%!important; margin:30px auto 30px auto;}
	.lft {float:left; width:100%; text-align:center;}
	.lft h1 {font-size:50px; line-height:56px; text-align:center; margin:0;font-family: 'Baskerville Bold';}
	.lft p {font-size:20px; line-height:26px; text-align:center;font-family: Simplo-Regular;}
	.rgt {float:right; width:100%;}
	.clear { clear:both;}
	img {width:100%;}
	.bg { background:transparent; min-height:500px;}
	.gry-bg-box { background-color: #1d384b;padding: 20px;}
	.wht-txt { color:#FFFFFF;font-size:20px; line-height:26px;}
	.tp {position:relative; z-index:1;}
	.form-box { color:#FFFFFF;font-size:20px; text-align:center;}
	.form-box { color:#FFFFFF;font-size:20px; text-align:center;}
	.form-box select { min-height:30px; background-color:#FFFFFF; width:100%; text-align: left; color:#1d384b;font-size:20px; margin-bottom:10px;}
	.form-box input { min-height:30px; background-color:#FFFFFF; width:98%; text-align: left; color:#1d384b;font-size:16px; margin-bottom:10px; padding:0 0 0 10px; border:none;}
	.line { margin-bottom:10px;}
	.form-box .sub-btn {background-color:#1d384b; padding:10px 20px; text-align:center; color:#fff;font-size:20px; border:1px solid #FFFFFF; cursor:pointer;}
	.in-row {width:80%; margin: 25px auto 25px auto;}
	.in-row .lt {width:50%;float:left;}
	.in-row .rt {width:50%;float:right;}
	.in-row .lt .rev-btn {background:#1d384b;padding:15px;color:white;}
	.rev-btn a {color:white;}
	.rev-btn a:hover {color:white;text-decoration:underline;}
	.rt .about-btn {padding:15px;color:#000;}
	.about-btn a {color:#000;}
	.about-btn a:hover {color:#000;text-decoration:underline;}
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.cus-row {width:90%; margin:30px auto 30px auto;}
	.lft {float:left; width:49%; text-align:center;}
	.lft h1 {font-size:50px; line-height:56px; text-align:center; margin:0;font-family: 'Baskerville Bold';}
	.lft p {font-size:20px; line-height:26px; text-align:center;font-family: Simplo-Regular;}
	.rgt {float:right; width:49%;}
	.clear { clear:both;}
	img {width:100%;}
	.bg { background:url(assets/img/side-img.png) 0 0 no-repeat; min-height:900px; position:relative; z-index:1;}
	.gry-bg-box { background-color: #1d384b;padding: 20px;position: absolute;z-index: 2;bottom: -150px;left: -150px;margin-right: 350px;}
	.wht-txt { color:#FFFFFF;font-size:20px; line-height:26px;}
	.tp {position:relative; z-index:1;}
	.form-box { color:#FFFFFF;font-size:20px; text-align:center;}
	.form-box select { min-height:30px; background-color:#FFFFFF; width:100%; text-align: left; color:#1d384b;font-size:20px; margin-bottom:10px;}
	.form-box input { min-height:30px; background-color:#FFFFFF; width:98%; text-align: left; color:#1d384b;font-size:16px; margin-bottom:10px; padding:0 0 0 10px; border:none;}
	.line { margin-bottom:10px;}
	.form-box .sub-btn {background-color:#1d384b; padding:10px 20px; text-align:center; color:#fff;font-size:20px; border:1px solid #FFFFFF; cursor:pointer;}
	.in-row {width:80%; margin: 25px auto 25px auto;}
	.in-row .lt {width:50%;float:left;}
	.in-row .rt {width:50%;float:right;}
	.in-row .lt .rev-btn {background:#1d384b;padding:15px;color:white;}
	.rev-btn a {color:white;}
	.rev-btn a:hover {color:white;text-decoration:underline;}
	.rt .about-btn {padding:15px;color:#000;}
	.about-btn a {color:#000;}
	.about-btn a:hover {color:#000;text-decoration:underline;}
}