.navbar-dropdown {
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.45s ease;
  z-index: 1030;
  background: #282828; }

  .navbar-dropdown .navbar-logo {
    margin-right: 0.8rem;
    transition: margin 0.3s ease-in-out;
    vertical-align: middle; }
    .navbar-dropdown .navbar-logo img {
      height: 3.125rem;
      transition: all 0.3s ease-in-out; }
    .navbar-dropdown .navbar-logo.mbr-iconfont {
      font-size: 3.125rem;
      line-height: 3.125rem; }
  .navbar-dropdown .navbar-caption {
    font-weight: 700;
    white-space: normal;
    vertical-align: -4px;
    line-height: 3.125rem !important; }
    .navbar-dropdown .navbar-caption, .navbar-dropdown .navbar-caption:hover {
      color: inherit;
      text-decoration: none; }
  .navbar-dropdown .mbr-iconfont + .navbar-caption {
    vertical-align: -1px; }
  .navbar-dropdown.navbar-fixed-top {
    position: fixed; }
  .navbar-dropdown .navbar-brand span {
    vertical-align: -4px; }
  .navbar-dropdown.bg-color.transparent {
    background: none; }
  .navbar-dropdown.navbar-short .navbar-brand {
    padding: 0.625rem 0; }
    .navbar-dropdown.navbar-short .navbar-brand span {
      vertical-align: -1px; }
  .navbar-dropdown.navbar-short .navbar-caption {
    line-height: 2.375rem !important;
    vertical-align: -2px; }
  .navbar-dropdown.navbar-short .navbar-logo {
    margin-right: 0.5rem; }
    .navbar-dropdown.navbar-short .navbar-logo img {
      height: 2.375rem; }
    .navbar-dropdown.navbar-short .navbar-logo.mbr-iconfont {
      font-size: 2.375rem;
      line-height: 2.375rem; }
  .navbar-dropdown.navbar-short .mbr-table-cell {
    height: 3.625rem; }
  .navbar-dropdown .navbar-close {
    left: 0.6875rem;
    position: fixed;
    top: 0.75rem;
    z-index: 1000; }
  .navbar-dropdown .hamburger-icon {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    -webkit-box-shadow: 0 -6px 0 1px #282828,0 0 0 1px #282828,0 6px 0 1px #282828;
    -moz-box-shadow: 0 -6px 0 1px #282828,0 0 0 1px #282828,0 6px 0 1px #282828;
    box-shadow: 0 -6px 0 1px #282828,0 0 0 1px #282828,0 6px 0 1px #282828; }

.dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
  border-bottom: 0.35em solid transparent;
  border-left: 0.35em solid;
  border-right: 0;
  border-top: 0.35em solid transparent;
  margin-left: 0.3rem; }

.dropdown-menu .dropdown-item:focus {
  outline: 0; }

.nav-dropdown {
  font-size: 0.75rem;
  font-weight: 500;
  height: auto !important; }
  .nav-dropdown .nav-btn {
    padding-left: 1rem; }
  .nav-dropdown .link {
    margin: .667em 1.667em;
    font-weight: 500;
    padding: 0;
    transition: color .2s ease-in-out; }
    .nav-dropdown .link.dropdown-toggle {
      margin-right: 2.583em; }
      .nav-dropdown .link.dropdown-toggle::after {
        margin-left: .25rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0; }
      .nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
        margin: 0;
        padding: 0.667em 3.263em  0.667em 1.667em; }

.nav-dropdown .link::after{
    color: inherit; }
 
.nav-dropdown .dropdown-item::after {
    color: inherit; }
  .nav-dropdown .btn {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem; }
  .nav-dropdown .dropdown-menu {
    border-radius: 0;
    border: 0;
    left: 0;
    margin: 0;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    position: relative; }
  .nav-dropdown .dropdown-submenu {
    margin-left: 0.125rem;
    top: 0; }
  .nav-dropdown .dropdown-item {
    font-weight: 500;
    line-height: 2;
    padding: 0.3846em 4.615em 0.3846em 1.5385em;
    position: relative;
    transition: color .2s ease-in-out, background-color .2s ease-in-out; }
    .nav-dropdown .dropdown-item::after {
      margin-top: -0.3077em;
      position: absolute;
      right: 1.1538em;
      top: 50%; }
    .nav-dropdown .dropdown-item:focus, .nav-dropdown .dropdown-item:hover {
      background: none; }

.center-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .nav-dropdown.navbar-toggleable-sm {
    bottom: 0;
    display: none;
    left: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    width: 18.75rem;
    z-index: 999; } }
.nav-dropdown.navbar-toggleable-xl {
  bottom: 0;
  display: none;
  left: 0;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  width: 18.75rem;
  z-index: 999; }

.nav-dropdown-sm {
  display: block !important;
  overflow-x: hidden;
  overflow: auto;
  padding-top: 3.875rem; }
  .nav-dropdown-sm::after {
    content: "";
    display: block;
    height: 3rem;
    width: 100%; }
  .nav-dropdown-sm.collapse.in ~ .navbar-close {
    display: block !important; }
  .nav-dropdown-sm.collapsing, .nav-dropdown-sm.collapse.in {
    transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    background: #282828; }
  .nav-dropdown-sm.collapsing[aria-expanded="false"] {
    transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%); }
  .nav-dropdown-sm .nav-item {
    display: block;
    margin-left: 0 !important;
    padding-left: 0; }
  .nav-dropdown-sm .link,
  .nav-dropdown-sm .dropdown-item {
    border-top: 1px dotted rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 0 !important;
    padding: 0.875rem 2.4rem 0.875rem 1.5625rem !important;
    position: relative;
    white-space: normal; }
    .nav-dropdown-sm .link:focus, .nav-dropdown-sm .link:hover,
    .nav-dropdown-sm .dropdown-item:focus,
    .nav-dropdown-sm .dropdown-item:hover {
      background: rgba(0, 0, 0, 0.2) !important;
      color: #c0a375; }
  .nav-dropdown-sm .nav-btn {
    position: relative;
    padding: 1.5625rem 1.5625rem 0 1.5625rem; }
    .nav-dropdown-sm .nav-btn::before {
      border-top: 1px dotted rgba(255, 255, 255, 0.1);
      content: "";
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
    .nav-dropdown-sm .nav-btn + .nav-btn {
      padding-top: 0.625rem; }
      .nav-dropdown-sm .nav-btn + .nav-btn::before {
        display: none; }
  .nav-dropdown-sm .btn {
    padding: 0.625rem 0; }
  .nav-dropdown-sm .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
    margin-left: .25rem;
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    border-bottom: 0; }
  .nav-dropdown-sm .dropdown-toggle[data-toggle="dropdown-submenu"][aria-expanded="true"]::after {
    border-top: 0;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    border-bottom: 0.35em solid; }
  .nav-dropdown-sm .dropdown-menu {
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    border: 0;
    float: none;
    border-radius: 0;
    background: none; }
  .nav-dropdown-sm .dropdown-submenu {
    left: 100%;
    margin-left: 0.125rem;
    margin-top: -1.25rem;
    top: 0; }

.navbar-toggleable-sm .nav-dropdown .dropdown-menu {
  position: absolute; }

.navbar-toggleable-sm .nav-dropdown .dropdown-submenu {
  left: 100%;
  margin-left: 0.125rem;
  margin-top: -1.25rem;
  top: 0; }

.navbar-toggleable-sm.opened .nav-dropdown .dropdown-menu {
  position: relative; }

.navbar-toggleable-sm.opened .nav-dropdown .dropdown-submenu {
  left: 0;
  margin-left: 0;
  margin-top: 0;
  top: 0; }

.is-builder .nav-dropdown.collapsing {
  transition: none !important; }

/*----------- new styles for wanderresponsibly.html -------*/

.wrapper {
  width: 100%;
  display: block; 
  align-items: center; /* Center content horizontally */
  max-height: 300px; /* Full viewport height */
  justify-content: center;
  background-color: rgb(215, 200, 145);
  padding: 20px;
  margin-bottom: 500px;
  }

    .tm {
        font-size: 0.4em;
        position: relative;
        top: -1em;
        letter-spacing: -.01em;
    }

    .txtcontainer {
        width: 80%;
        max-height: 300px; /* Set a maximum height */
        padding: 10px; /* Adjust padding as needed */
        margin: 0; /* Remove or adjust margin */
        line-height: 1.5; /* Adjust line height as needed */
        box-sizing: border-box; /* Include padding and border in height calculation */
        overflow: auto; /* Optional: Add scrollbars if content overflows */
        background-color: #f9f9f9; /* Optional: Background color for visibility */
        border: 1px solid #ccc; /* Optional: Border for visibility */
      }

    .img-container {
        display: flex;
        justify-content: center;
        width: 90%;
        max-width: 1200px;
        padding-top: 50px;
        max-height: 1000px; /* Set a maximum height */
        overflow: auto; /* Optional: Add scrollbars if content overflows */
        line-height: 1.4; /* Adjust line height as needed */
    }

    .blog-header {
      position: sticky;
      z-index: 1; /* Ensure the header is above other content */
        text-align: center;
        color: #28324e;
        font-size: 1.5rem;
        font-family: Arial, sans-serif;
        font-weight: 600;
        padding: 40px;
        background-color: rgb(255, 255, 255);
        line-height: 1; /* Adjust line height as needed */
    }

    .blog-content {
        display: flex;
        justify-content: space-between;
        margin-top: 0;
        text-align: left;

    }
    .blog-text {
        width: 80%;
        background-color: #ffffff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 1rem;
        text-align: left;
        margin: 0 auto; 
    }

    .blog-image {
        width: 50%;
        margin-left: 2%;
        margin-top: 5px;
    }
    .blog-image img {
        width: 65%;
        height: 20%;
        object-fit: scale-down;
        border-radius: 8px;
    }

    .blog-imgtxt {
        width: 65%;
        font-size: .8rem;
        text-align: left;
        height: auto;

    }

    .caption {
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0; /* Remove extra padding */
    line-height: 1.2; /* Reduce line-height to avoid big gaps between lines */
    word-wrap: break-word; /* Ensure long words wrap properly */
    width: 100%;  /* Make sure the caption takes up full width of its parent */
    }

    ul {
        margin-top: 2px;
    }
    ul li {
        margin-bottom: 2px;
    }
    a {
        color:rgb(246, 137, 4); /* Slightly lighter dark tan */
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    .footer {
        text-align: center;
        font-size: 0.9rem;
        margin-top: 40px;
        color: #28324e;
    }
    .trademark {
      /*  font-size: 1.1rem;  */
          font-size: 0.4em;
        position: relative;
        top: -1em;
        letter-spacing: -.01em;
    }

    .tm {
        font-size: 0.4em;
        position: relative;
        top: -1em;
        letter-spacing: -.01em;
    }
/*  containerR  */
    .container {
      display: flex;
      justify-content: center;
      width: 90%;
      height: 100px;
      max-width: 100%; /* Adjust as needed */
      padding-top: 25px;
      max-height: auto; /* Set a maximum height */
      /* overflow: auto; Optional: Add scrollbars if content overflows */
      line-height: 1.3; /* Adjust line height as needed */
      margin: 0 auto; /* Center the container */
      margin-bottom: 0;
      transform: translateZ(0);
  }
  

    .content {
      flex: 1; /* Allow the content to grow and shrink */
      padding: 10px; /* Add some padding to the content */
    }

/* defined by developer me */ 
.divider {
    display: flex;
    justify-content: center;
/*
    vertical-align: center;
    width: 75%;
    height: 10%;
    object-fit: scale-down;
    padding: 2 2;
    margin: 15 15;
*/
  }

.small {
  font-size: 0.85rem;
  line-height: 1.4;
  color: navy;
}



.content {
flex: 1; /* allow content to resize */
width: 100%;
margin: auto; 
background-color: white;
color: #28324e;
font-size: clamp(0.9rem, 1.3vw, 1.2rem);
max-height: auto; /* Set a maximum height */
padding: 5px; /* Default padding for top, bottom, left, right */
margin-bottom: 5px;
}

.content li {
  font-size: clamp(.8rem, 1.3vw, 1.2rem);
}

.content a {
  color:rgb(246, 137, 4); /* Slightly lighter dark tan */
  text-decoration: none;
}

.blog-header a{
  color:rgb(246, 137, 4); /* Slightly lighter dark tan */
  text-decoration: none;

}

.image-container a {
  color:rgb(246, 137, 4); /* Slightly lighter dark tan */
  text-decoration: none;
}

  .text-section {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 2 equal columns */
    gap: 30px; /* Space between columns */
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    padding: 5px;
    padding-left: 3rem;
  }

.text-section p {
  font-size: 1rem;
  }
  
.text-section h1 {
    font-size: .5rem; /* Smaller font size for medium screens */
    font-weight: 600;
    font-family: Arial, sans-serif;
    margin-bottom: 40px;
}

/* Image Section */
.image-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}

/* Image Grid Section */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images per row */
  grid-template-rows: repeat(2, auto); /* 2 rows */
  gap: 10px;
  justify-items: center; 
}


.image-containerB {
flex: 1 1 175px; /* Allow each container to grow and shrink but never be less than 300px */
max-width: 225px;  /* Ensure no image container exceeds 500px */
text-align: center; 
margin: 0, 0, 15,15;
padding: 5px;
}

.image-containerB img {
width: 100%;
height: auto; /* Maintain aspect ratio */
max-width: 220px; /* Max width of 500px */
max-height: 100px; /* Max height of 300px */
}

.image-containerB h3 {
font-size: 1.25em;
margin: 10px 0;
}

.image-containerB p {
font-size: .9em;
text-align: center;
}
/*--------------------------------------------------*/

/* Responsive Styles */
@media (max-width: 1200px) {
.content {
    padding-left: 20px; /* Slightly reduced padding for medium screens */
    padding-right: 20px; /* Slightly reduced padding for medium screens */
    font-size: clamp(1rem, 1.1vw, 1.2rem);
}

.text-section h1 {
    font-size: 1.7rem; /* Smaller font size for medium screens */
    font-weight: 600;
    font-family: Arial, sans-serif;
    text-align: center;
}

.text-section {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
}

.text-section p {
    font-size: .8rem; /* Smaller paragraph font size for medium screens */
}

.image-container {
    flex: 1 1 45%; /* 2 images per row */
    grid-template-columns: repeat(2, 1fr); /* 2 images per row on medium screens */
    margin: 10px;
    max-width: 225px; /* Ensure no image container exceeds 500px */
}

.caption {
  font-weight: bold;
  font-size: 1.0rem;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0; /* Remove extra padding */
  line-height: 1.2; /* Reduce line-height to avoid big gaps between lines */
  word-wrap: break-word; /* Ensure long words wrap properly */
  width: 100%;  /* Make sure the caption takes up full width of its parent */
  }


}

@media (max-width: 768px) {

.content {
  width: 90%; /* Increase content width to 90% for small screens */
  padding-left: 10px; /* Further reduced padding for small screens */
  padding-right: 10px; /* Further reduced padding for small screens */
  font-size: clamp(0.8rem, 1.1vw, 1.3em);
}

.text-section p {
  font-size: 0.9rem; /* Smaller paragraph font size for small screens */
}

.text-section {
    grid-template-columns: 1fr; /* 1 column on small screens */
}

.text-section h1 {
    font-size: 1.5rem; /* Smaller font size for small screens */
}


.image-container {
  flex: 1 1 45%; 
  grid-template-columns: repeat(2, 1fr); 
  margin: 10px;
  max-width: 225px; /* Ensure no image container exceeds 500px */
}

.image-containerB {
    flex: 1 1 100%; /* 1 image per row on smaller screens */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.image-grid {
    grid-template-columns: 1fr; /* 1 image per row on small screens */
}

/* Even smaller font sizes for mobile */
.image-container h3 {
    font-size: 1rem; /* Even smaller heading font size for mobile */
}

.image-container p {
    font-size: 0.75rem; /* Even smaller description font size for mobile */
}

 .heading {
    font-size: 6vw;  
}

.caption {
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 0; /* Remove extra padding */
  line-height: 1.0; /* Reduce line-height to avoid big gaps between lines */
  word-wrap: break-word; /* Ensure long words wrap properly */
  width: 100%;  /* Make sure the caption takes up full width of its parent */
  }


}

@media (max-width: 480px) {

  .caption {
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 0; /* Remove extra padding */
    line-height: 1.0; /* Reduce line-height to avoid big gaps between lines */
    word-wrap: break-word; /* Ensure long words wrap properly */
    width: 100%;  /* Make sure the caption takes up full width of its parent */
    }

  .content {
    width: 95%; /* Increase content width to 95% for very small screens */
    padding-left: 15px; /* Further reduced padding for very small screens */
    padding-right: 15px; /* Further reduced padding for very small screens */
    font-size: clamp(0.9rem, 1.1vw, 1.3rem);
  }

  .text-section h1 {
      font-size: 1.25rem; /* Even smaller font size for very small screens */
  }

  B.text-section p {
      font-size: 0.9rem; /* Even smaller paragraph font size for very small screens */
  }
  .text-section p {
    font-size: 0.65rem; /* Even smaller paragraph font size for very small screens */
  }

  .heading {
      font-size: 8vw;  /* Further adjust for very small screens */
  }
}  /* @media (max-width: 480px) */