:root {
    --primary-color: #000C14;
    --secondary-color: #424242;
    --third-color: #283044;
    --fourth-color: #3C4F65;

    --text-light: #ffffff;
    --text-muted: #cccccc;
}

/* main > .container, main > .container-fluid
{
    padding: 70px 15px 20px;
} */

.footer {
    background-color: #79AF89;
    font-size: .9em;
    color: #ffffff;
    background-image: url('/images/cartographer.png');
    /* background-image: url('/images/black-thread.png'); */
}
.background-pattern-1 {
    background-image: url('/images/cubes.png');
}

.background-pattern-2 {
    /* background-image: url('/images/crissxcross.png'); */
    /* background-image: url('/images/black-thread.png'); */
    background-image: url('/images/subtle-grey.png');

}
.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}
.contact-logo {
    height: 20px;
    width: 20px;
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }

}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item > a
{
    text-decoration: none;
}
.project-highlight {
    background-color: #f9f9f9;
    transition: all 0.3s ease-in-out;
    border-left: 4px solid #6c757d; /* fallback in case bootstrap class is missing */
    cursor: pointer;
}

.project-highlight:hover {
    background-color: #e9ecef;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-left-color: #343a40; /* darker on hover */
}
.service-hover-img {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

.service-hover-img:hover {
    transform: scale(1.05);
    opacity: 0.85;
}

.navbar-toggler {
    border-color: rgb(223, 208, 208);
}


/* Media query for screen sizes above 768px */
@media (min-width: 768px) {
    .active {
        transition: all 0.3s ease-in-out;
        border-bottom: 4px solid #6c757d; /* fallback in case bootstrap class is missing */
        cursor: pointer;
    }
    .hero-style {
        font-size: 4rem;
    }
    
    .hero-caption-style {
        font-size: 1.5rem;
        font-weight: 500;
    }

}
.theme-1 {
    background-color: #F8F3C4;
}
.theme-11 {
    background-color: #fffde9;
}
.theme-2 {
    background-color: rgba(178, 205, 242, 0.39);
    
}
.inner-box {
    background-color: rgba(255, 255, 255, 0.74);

}
.theme-3{
    background-color: #79AF89;

}
.font-theme-1{
    color: #79AF89;
}
.honur img {
    transition: transform 1s;
  }
  
.honur:hover img {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.1); 
}
.design-1 {
  background-image: url('/images/design1.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 20vw;
}

.contact-card1{
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    border-radius: 2rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 2.5rem 2rem;
}
.contact-gap {
    gap: 21px;
}
.hero-style {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    /* text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000,
                -2px 0px 0 #000,
                2px 0px 0 #000,
                0px -2px 0 #000,
                0px 2px 0 #000; */
}

.hero-caption-style {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}