/* CSS RESET */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
    font-family: aptos;
    
}
body {
    background-color:#F5F0E7;
}
footer {
    color: #164e78 !important;
}
#inc {
    font-family: cormorant garamond;
    color: #D76B43;
    font-weight: bold;
    font-size: 1.5rem
}
/* Change style when hovered over */
.navbar a:hover {
  color: #164e78;
  font-weight: bold;
}
 
/* Selects your specific navbar using its unique aria-label */
[aria-label="Thirteenth navbar example"] {
  /* Overrides the color of the hamburger lines */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23164e78' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  
  /* Optional: Changes the border of the hamburger box to match */
  --bs-navbar-toggler-border-color: rgba(22, 78, 120, 0.2);
}

 .nav-link {
    color: #164e78;
 }
 
 a[aria-current="page"] {
  color: #C5A34A !important; /* active color */
  font-weight: bold; /* Recommended: add an extra visual cue */
}


:root {
      --stack-scale: 1;
    }
/* 1. RESPONSIVE CONTAINER SETUP */
.photo-stack {
      position: relative;
      height: calc(620px * var(--stack-scale)); /* Increased height limit for 5 images */
      max-width: calc(550px * var(--stack-scale)); /* Increased width for scatter room */
      margin: 50px auto;
    }
/* 2. BASE POLAROID FRAME */
    .polaroid-frame {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fcfbf9;
      padding: 12px 12px 35px 12px;
      border: 1px solid #e3dec3;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, z-index 0.3s ease;
      width: 100%;
    }


    /* 3. INDIVIDUAL SCALED FRAMES (Stacked 1 to 5, bottom to top) */
    /* Photo 1: Bottom layer (Landscape) */
    .photo-1 {
      max-width: calc(260px * var(--stack-scale));
      transform: rotate(-12deg) translate(0px, calc(60px * var(--stack-scale)));
      z-index: 1;
    }

 /* Photo 2: Second layer (Large & Vertical) */
    .photo-2 {
      max-width: calc(300px * var(--stack-scale)); 
      transform: rotate(6deg) translate(calc(120px * var(--stack-scale)), calc(10px * var(--stack-scale)));
      z-index: 2;
    }

    /* Photo 3: Third layer (Landscape - Cropped shorter from bottom) */
    .photo-3 {
      max-width: calc(250px * var(--stack-scale));
      transform: rotate(-4deg) translate(calc(20px * var(--stack-scale)), calc(180px * var(--stack-scale)));
      z-index: 3;
    }

    /* Photo 4: NEW Fourth layer (Square or Landscape, angled right) */
    .photo-4 {
      max-width: calc(240px * var(--stack-scale));
      transform: rotate(10deg) translate(calc(220px * var(--stack-scale)), calc(220px * var(--stack-scale)));
      z-index: 4;
    }

    /* Photo 5: NEW Top layer (Landscape, slightly shifted left) */
    .photo-5 {
      max-width: calc(270px * var(--stack-scale));
      transform: rotate(-2deg) translate(calc(80px * var(--stack-scale)), calc(320px * var(--stack-scale)));
      z-index: 5;
    }

    /* 4. INTERACTION */
    .polaroid-frame:hover {
      z-index: 20; /* Elevates above all 5 layers */
      transform: scale(calc(1.05 * var(--stack-scale))) rotate(0deg);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    }

/* Page 2 */
.carousel-item img {
    height: 400px;
    object-fit: cover;
    width: 100%;
}












/* Page 3 destinations */
 h1, h5, a.destination-link {
    font-family: cormorant garamond;
    /* background-color: #F5F0E7;    need this somewhere else*/
    color: #D76B43;
    text-decoration: none;
 }
 .destination-link h5 {
    color: #176B59;
    font-weight: bold;
    transition: color 0.5s ease;
 }
.destination-link h5:hover {
    color: #C5A34A;
}
p {
    font-family: aptos;
    color: black;
}
.custom-quote-box {
        background-color: white; /* Light custom colour */
        border-left: 5px solid #d76b43; /* Darker accent border */
        margin: 30px;
        color: #d76b43; /* text colour */
      }

      /* Styling the bootstrap footer dash to look nice against custom colors */
      .custom-quote-box .blockquote-footer::before {
        color: #d76b43;
      }


.container-fluid {
    background-color: #F5F0E7
}

.crop {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;  /* works like a mask image outside of box is hidden */
    position: relative;
    margin-bottom: 20px;
    background-color: #F5F0E7;
   
}
.crop {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    position: relative;
    margin-bottom: 20px;
    background-color: #F5F0E7;
   
}
.crop img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);  /* centers image */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;  /* smooth transition */
}




/* Custom signup button */
.btn-custom {
  --bs-btn-bg: #D76B43;          /* Background color */
  --bs-btn-border-color: #D76B43;  /* Border color */
  --bs-btn-color: #F5F0E7;         /* Text color */
  
  /* Optional: Hover states */
  --bs-btn-hover-bg: #e65824;
  --bs-btn-hover-border-color: #e65824;
  --bs-btn-hover-color: #F5F0E7;
  
  /* Optional: Active/Pressed states */
  --bs-btn-active-bg: #F5F0E7;
  --bs-btn-active-border-color: #d76b43;
  --bs-btn-active-color:#d76b43;
}

/* Page 4 Stories */

.pg-4 h5 {
    font-family: cormorant garamond;
    background-color: #F5F0E7;
    color: #176B59;
}
h2, h3 {
    font-family: cormorant garamond;
    color: #176B59;
}
.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(245, 240, 231, var(--bs-bg-opacity)) !important; /*  To overide the BS5 bakcground color needed to convert my color in RGB vs HEX  */
}

.clean-link {
    text-decoration: none;
    color: #C5A34A;
}
.clean-link1 {
    text-decoration: none;
    color: #176B59;
    font-weight: bold;
}
.clean-link1:hover {
    color: #d76b43;
}
.clean-link2 {
    text-decoration: none;
    color: #164e78;
    font-weight: bold;
}
.clean-link2:hover {
    color: #C5A34A;
}


/* CSS RESET */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
    font-family: aptos;
    
}
body {
    background-color:#F5F0E7;
}
footer {
    color: #164e78 !important;
}
#inc {
    font-family: cormorant garamond;
    color: #D76B43;
    font-weight: bold;
    font-size: 1.5rem
}
/* Change style when hovered over */
.navbar a:hover {
  color: #164e78;
  font-weight: bold;
}
 
/* Selects your specific navbar using its unique aria-label */
[aria-label="Thirteenth navbar example"] {
  /* Overrides the color of the hamburger lines */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23164e78' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  
  /* Optional: Changes the border of the hamburger box to match */
  --bs-navbar-toggler-border-color: rgba(22, 78, 120, 0.2);
}

 .nav-link {
    color: #164e78;
 }
 
 a[aria-current="page"] {
  color: #C5A34A !important; /* active color */
  font-weight: bold; /* Recommended: add an extra visual cue */
}


:root {
      --stack-scale: 1;
    }
/* 1. RESPONSIVE CONTAINER SETUP */
.photo-stack {
      position: relative;
      height: calc(620px * var(--stack-scale)); /* Increased height limit for 5 images */
      max-width: calc(550px * var(--stack-scale)); /* Increased width for scatter room */
      margin: 50px auto;
    }
/* 2. BASE POLAROID FRAME */
    .polaroid-frame {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fcfbf9;
      padding: 12px 12px 35px 12px;
      border: 1px solid #e3dec3;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, z-index 0.3s ease;
      width: 100%;
    }


    /* 3. INDIVIDUAL SCALED FRAMES (Stacked 1 to 5, bottom to top) */
    /* Photo 1: Bottom layer (Landscape) */
    .photo-1 {
      max-width: calc(260px * var(--stack-scale));
      transform: rotate(-12deg) translate(0px, calc(60px * var(--stack-scale)));
      z-index: 1;
    }

 /* Photo 2: Second layer (Large & Vertical) */
    .photo-2 {
      max-width: calc(300px * var(--stack-scale)); 
      transform: rotate(6deg) translate(calc(120px * var(--stack-scale)), calc(10px * var(--stack-scale)));
      z-index: 2;
    }

    /* Photo 3: Third layer (Landscape - Cropped shorter from bottom) */
    .photo-3 {
      max-width: calc(250px * var(--stack-scale));
      transform: rotate(-4deg) translate(calc(20px * var(--stack-scale)), calc(180px * var(--stack-scale)));
      z-index: 3;
    }

    /* Photo 4: NEW Fourth layer (Square or Landscape, angled right) */
    .photo-4 {
      max-width: calc(240px * var(--stack-scale));
      transform: rotate(10deg) translate(calc(220px * var(--stack-scale)), calc(220px * var(--stack-scale)));
      z-index: 4;
    }

    /* Photo 5: NEW Top layer (Landscape, slightly shifted left) */
    .photo-5 {
      max-width: calc(270px * var(--stack-scale));
      transform: rotate(-2deg) translate(calc(80px * var(--stack-scale)), calc(320px * var(--stack-scale)));
      z-index: 5;
    }

    /* 4. INTERACTION */
    .polaroid-frame:hover {
      z-index: 20; /* Elevates above all 5 layers */
      transform: scale(calc(1.05 * var(--stack-scale))) rotate(0deg);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    }

/* Page 2 */
.carousel-item img {
    height: 400px;
    object-fit: cover;
    width: 100%;
}












/* Page 3 destinations */
 h1, h5, a.destination-link {
    font-family: cormorant garamond;
    /* background-color: #F5F0E7;    need this somewhere else*/
    color: #D76B43;
    text-decoration: none;
 }
 .destination-link h5 {
    color: #176B59;
    font-weight: bold;
    transition: color 0.5s ease;
 }
.destination-link h5:hover {
    color: #C5A34A;
}
p {
    font-family: aptos;
    color: black;
}
.custom-quote-box {
        background-color: white; /* Light custom colour */
        border-left: 5px solid #d76b43; /* Darker accent border */
        margin: 30px;
        color: #d76b43; /* text colour */
      }

      /* Styling the bootstrap footer dash to look nice against custom colors */
      .custom-quote-box .blockquote-footer::before {
        color: #d76b43;
      }


.container-fluid {
    background-color: #F5F0E7
}

.crop {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;  /* works like a mask image outside of box is hidden */
    position: relative;
    margin-bottom: 20px;
    background-color: #F5F0E7;
   
}
.crop {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    position: relative;
    margin-bottom: 20px;
    background-color: #F5F0E7;
   
}
.crop img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);  /* centers image */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;  /* smooth transition */
}




/* Custom signup button */
.btn-custom {
  --bs-btn-bg: #D76B43;          /* Background color */
  --bs-btn-border-color: #D76B43;  /* Border color */
  --bs-btn-color: #F5F0E7;         /* Text color */
  
  /* Optional: Hover states */
  --bs-btn-hover-bg: #e65824;
  --bs-btn-hover-border-color: #e65824;
  --bs-btn-hover-color: #F5F0E7;
  
  /* Optional: Active/Pressed states */
  --bs-btn-active-bg: #F5F0E7;
  --bs-btn-active-border-color: #d76b43;
  --bs-btn-active-color:#d76b43;
}

/* Page 4 Stories */

.pg-4 h5 {
    font-family: cormorant garamond;
    background-color: #F5F0E7;
    color: #176B59;
}
h2, h3 {
    font-family: cormorant garamond;
    color: #176B59;
}
.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(245, 240, 231, var(--bs-bg-opacity)) !important; /*  To overide the BS5 bakcground color needed to convert my color in RGB vs HEX  */
}

.clean-link {
    text-decoration: none;
    color: #C5A34A;
}
.clean-link1 {
    text-decoration: none;
    color: #176B59;
    font-weight: bold;
}
.clean-link1:hover {
    color: #d76b43;
}
.clean-link2 {
    text-decoration: none;
    color: #164e78;
    font-weight: bold;
}
.clean-link2:hover {
    color: #C5A34A;
}


:root {
        --primary-color: #176b59; /* green */
        --accent-color: #d76b43; /*  Orange */
        --text-muted: #7f8c8d; /* Muted Grey */
        --bg-light: #f5f0e7; /* Light Background */
      }


      /* Core Native Layout Containers */
      .blog-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      

      .featured-title {
        color: #ffffff;
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 15px 0;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.85);
      }

      .featured-desc {
        color: #ffffff;
        font-size: 1.1rem;
        max-width: 750px;
        margin: 0 0 20px 0;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.85);
      }

      .btn-read-feature {
        background-color: var(--accent-color);
        color: white;
        padding: 12px 30px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.2s ease;
      }

      .btn-read-feature:hover {
        background-color: #d35400;
      }

      .section-header {
        color: var(--primary-color);
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 24px;
      }

      /* Native CSS Grid layout replaces Bootstrap row/col classes */
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Mobile default */
        gap: 30px;
        margin-bottom: 60px;
      }

      /* Native Custom Card Styling */
      .blog-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        transition: transform 0.2s ease-in-out;
      }

      .blog-card:hover {
        transform: translateY(-5px);
      }

      .card-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .card-content {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .card-title {
        color: var(--primary-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 10px 0;
      }

      .card-text {
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 0 20px 0;
      }

      .btn-card {
        display: block;
        text-align: center;
        padding: 10px;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        text-decoration: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s ease;
      }

      .btn-card:hover {
        background-color: var(--primary-color);
        color: white;
      }

      /* Responsive Media Queries handling screen transitions */
      @media (min-width: 600px) {
        .blog-grid {
          grid-template-columns: repeat(2, 1fr); /* Tablets */
        }
      }

      @media (min-width: 992px) {
        .blog-grid {
          grid-template-columns: repeat(3, 1fr); /* Desktop Grid */
        }
        .featured-title {
          font-size: 3.5rem;
        }
      }










 /*  Page 5 Connect */
#wik a{
    text-decoration: none;
    color: black;
}
#wik a:hover {
    color: #C5A34A;
}
.contact-container {
            display: flex;
            gap: 50px;
            padding: 40px 8%;
        }
 .contact-form {
            flex: 2;
        }
  .contact-info {
            flex: 1;
            border-left: 1px solid #C9D0C8;
            padding-left: 30px;
        }


 label {
            display: block;
            margin-top: 15px;
            font-size: 13px;
        }

input, textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #CCCFC7;
            background-color: #FAF8F2;
            box-sizing: border-box;
            font-family: inherit;
        }

textarea {
            height: 100px;
            resize: vertical;
        }

 button {
            margin-top: 20px;
            padding: 12px 25px;
            background-color: #D76B43;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    /* Page 1 Home */
    hero-section {
        height: 50vh;
    }
    header {
                flex-direction: column;
                gap: 15px;
            }

            nav a {
                margin: 5px;
            }

            .hero {
                height: 200px;
                justify-content: center;
                text-align: center;
            }

            .hero h1 {
                font-size: 38px;
            }

            .contact-container {
                flex-direction: column;
                padding: 25px 6%;
                gap: 25px;
            }

            .contact-info {
                border-left: none;
                border-top: 1px solid #C9D0C8;
                padding: 20px 0 0;
            }
        }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
    /* Page 1 Home */
    hero-section {
        height: 50vh;
    }
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* Page 1 Home */
    hero-setion {
        height: 70vh;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}


      /* Core Native Layout Containers */
      .blog-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      

      .featured-title {
        color: #ffffff;
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 15px 0;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.85);
      }

      .featured-desc {
        color: #ffffff;
        font-size: 1.1rem;
        max-width: 750px;
        margin: 0 0 20px 0;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.85);
      }

      .btn-read-feature {
        background-color: var(--accent-color);
        color: white;
        padding: 12px 30px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.2s ease;
      }

      .btn-read-feature:hover {
        background-color: #d35400;
      }

      .section-header {
        color: var(--primary-color);
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 24px;
      }

      /* Native CSS Grid layout replaces Bootstrap row/col classes */
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Mobile default */
        gap: 30px;
        margin-bottom: 60px;
      }

      /* Native Custom Card Styling */
      .blog-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        transition: transform 0.2s ease-in-out;
      }

      .blog-card:hover {
        transform: translateY(-5px);
      }

      .card-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .card-content {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .card-title {
        color: var(--primary-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 10px 0;
      }

      .card-text {
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 0 20px 0;
      }

      .btn-card {
        display: block;
        text-align: center;
        padding: 10px;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        text-decoration: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s ease;
      }

      .btn-card:hover {
        background-color: var(--primary-color);
        color: white;
      }

      /* Responsive Media Queries handling screen transitions */
      @media (min-width: 600px) {
        .blog-grid {
          grid-template-columns: repeat(2, 1fr); /* Tablets */
        }
      }

      @media (min-width: 992px) {
        .blog-grid {
          grid-template-columns: repeat(3, 1fr); /* Desktop Grid */
        }
        .featured-title {
          font-size: 3.5rem;
        }
      }










 /*  Page 5 Connect */
#wik a{
    text-decoration: none;
    color: black;
}
#wik a:hover {
    color: #C5A34A;
}
.contact-container {
            display: flex;
            gap: 50px;
            padding: 40px 8%;
        }
 .contact-form {
            flex: 2;
        }
  .contact-info {
            flex: 1;
            border-left: 1px solid #C9D0C8;
            padding-left: 30px;
        }


 label {
            display: block;
            margin-top: 15px;
            font-size: 13px;
        }

input, textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #CCCFC7;
            background-color: #FAF8F2;
            box-sizing: border-box;
            font-family: inherit;
        }

textarea {
            height: 100px;
            resize: vertical;
        }

 button {
            margin-top: 20px;
            padding: 12px 25px;
            background-color: #D76B43;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    /* Page 1 Home */
    hero-section {
        height: 50vh;
    }
    header {
                flex-direction: column;
                gap: 15px;
            }

            nav a {
                margin: 5px;
            }

            .hero {
                height: 200px;
                justify-content: center;
                text-align: center;
            }

            .hero h1 {
                font-size: 38px;
            }

            .contact-container {
                flex-direction: column;
                padding: 25px 6%;
                gap: 25px;
            }

            .contact-info {
                border-left: none;
                border-top: 1px solid #C9D0C8;
                padding: 20px 0 0;
            }
        }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
    /* Page 1 Home */
    hero-section {
        height: 50vh;
    }
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* Page 1 Home */
    hero-setion {
        height: 70vh;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}