/* Define primary colors */
:root {
    --primary: #6699CC;
    --secondary: white;
    --util: #676767;
    --text-color: black;
}
/* Navbar styles */
.navbar {
    background-color: var(--primary);
}

.navbar .nav-link {
    color: var(--secondary);
}
.bold {
    font-weight: bold;
}
.navbar .nav-link.active {
    color: var(--primary);
}

/* Footer styles */
footer {
    background-color: var(--util);
    color: var(--text-color);
    padding: 1rem 0;
    text-align: center;
}
footer > a{
    color: inherit;
    text-decoration: none;
}
footer > a:hover{
    color: white;
    text-decoration: underline;
}
body {
    background-color: var(--primary);
}
/* Body and text styles */
main {
    background-color: var(--secondary);
    color: var(--text-color);
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;
    align-items: center; 
    margin: 0 8%;
    padding: 10px;
    padding-top: 100px;
}
nav > a {
    color: var(--primary);
}

a:hover {
    color: var(--text-color);
}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--util) !important;
}
/* Utility classes */
.bg-dim-gray {
    background-color: var(--util) !important;
}

.text-silver {
    color: var(--text-color) !important;
}

/* Button styles */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.list-img{
    height: 200px;
    width: 200px;
}
.list-pic {
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.form-control ~ .btn-outline-dark { 
    position: absolute; 
    right: 21px; 
    top: 16%;
}
.form-control {
    position: relative;
    padding-right: 2.5rem; /* Adjust padding to accommodate the icon */
}

.form-control ~ .fa-search {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
footer img {
    height: 25px;
    width: 25px;
    margin: 0 15px;
}
.home-img {
    width: 90%;
    height: 240px;
    margin-top: 15px;
    object-fit: cover;
    object-position: center;
}
.home-imga {
    width: 90%;
}
.home-imga > .home-img,  .sidebyside > .home-img{
    width: 100%;
}
p {
    margin: 15px 15px;
}
.container1 {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    overflow: hidden;
    padding: 0;
}
.container1 > div{
    text-align: center;
}
.container1 .sidebyside{
    flex: 1;
    margin: 0 10px;
}
.sidebyside{
    width: 200px; 
    height: 150px; 
    object-fit: cover;
}
.carousel-item-inner {
    position: relative;
}
.results-image{
    height: 100px;
    width: 100px;
}
.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}
.carousel{
    margin-bottom: 25px;
}

@media (max-width: 992px){
    main {
        margin: 0;
    }
    .list-pic {
        display: flex;
        flex-direction: column; 
        justify-content: flex-start;
        align-items: center; 
    }
    .list-pic a{ 
        margin-top: 20px; 
        order: -1; 
        width: 100%; 
        height: auto; 
        display: flex;
        flex-direction: column; 
        justify-content: flex-start;
        align-items: center; 
    }
    .navbar .d-flex { 
        width: 100%; 
    } 
    .form-control { 
        width: 100%; position: relative; padding-right: 2.5rem;
    } 
    .form-control ~ .btn-outline-dark { 
        position: absolute; 
        right: 21px; 
        top: 68%; 
        transform: translateY(46%);
    }
}
/* ---- Portfolio additions (2026) ---- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { padding-top: 120px; line-height: 1.6; }
main h1 { margin-top: 1rem; text-align: center; }
main a { color: #2f6aa6; }
.credit-bar { background: #3f3f3f; color: #e5e5e5; font-size: .8rem; text-align: center; padding: 4px 8px; }
.credit-bar a, .concept-note a { color: white; }
.navbar .nav-link.active { color: white; font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.accent { color: #2f6aa6; }
footer { color: #f1f1f1; }
footer img { height: 25px; width: 25px; margin: 0 15px; }
.concept-note { margin: .5rem 0 0; font-size: .8rem; }
.search-form { position: relative; }
.search-form .form-control { padding-right: 2.75rem; min-width: 230px; }
.search-form .btn-outline-dark { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; }

/* Illustrated photo placeholders: gradient + icon blocks in place of stock photos */
.ph { position: relative; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92);
      background: linear-gradient(135deg, #6699CC, #2f6aa6); border-radius: 10px; overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: auto -20% -45% -20%; height: 70%; border-radius: 50%; background: rgba(255,255,255,.12); }
.ph i { font-size: 3.5rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); z-index: 1; }
.ph-sea    { background: linear-gradient(135deg, #48c6ef, #2f6aa6); }
.ph-sand   { background: linear-gradient(135deg, #f6d365, #e08e3c); }
.ph-jungle { background: linear-gradient(135deg, #5fbf7f, #1f6f4a); }
.ph-sunset { background: linear-gradient(135deg, #f093a0, #8e5ab5); }
.ph-volcano{ background: linear-gradient(135deg, #f2994a, #9b2c2c); }
.ph-night  { background: linear-gradient(135deg, #5b5f97, #1f2346); }
.ph-food   { background: linear-gradient(135deg, #f7b267, #d9534f); }
.ph-gray   { background: linear-gradient(135deg, #8d8d8d, #555); }
.home-img.ph { height: 240px; }
.home-img.ph i { font-size: 5rem; }
.carousel-item-inner .ph { aspect-ratio: 4 / 3; width: 100%; }
.carousel-item-inner .ph i { transform: translateY(-14%); }
.carousel-caption { bottom: -10px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.carousel { width: 90%; }
.list-img.ph { width: 200px; height: 140px; flex-shrink: 0; }
.list-pic { gap: 1rem; padding: .5rem 0; }
main ul { width: 90%; padding-left: 1rem; }
.results-image.ph { width: 100px; height: 100px; }
.results-image.ph i { font-size: 2.5rem; }
.faq { list-style: none; padding: 0; max-width: 820px; }
.faq h2 { font-size: 1.25rem; margin-top: 1rem; }
@media (max-width: 992px) {
    main { padding-top: 110px; }
    .search-form { margin-bottom: .5rem; }
    .search-form .btn-outline-dark { top: 50%; transform: translateY(-50%); }
}
@media (max-width: 768px) {
    .container1 { flex-direction: column; }
    .container1 > div { width: 100%; }
    .carousel { width: 100%; }
    .carousel-item-inner .ph i { font-size: 2rem; }
    .carousel-caption h5 { font-size: .8rem; }
    .list-img.ph { width: 100%; max-width: 320px; }
    main h1 { font-size: 1.6rem; }
}
.container1 { gap: 20px; }
.container1 > div { flex: 1; min-width: 0; }
.container1 .sidebyside { display: block; width: 100%; height: auto; margin: 0; }
.container1 .sidebyside > .home-img { width: 100%; }
@media (max-width: 768px) {
    .carousel-item-inner .ph { aspect-ratio: 1 / 1; }
    .carousel-item-inner .ph i { font-size: 1.6rem; transform: translateY(-38%); }
    .carousel-caption { bottom: -18px; padding: 4px; }
    .carousel-caption h5 { font-size: .68rem; line-height: 1.15; }
    .carousel-indicators { display: none; }
}