 

:root {

    --primary: #FFE468;

    --secondary: #8CC641;

    --light: #F2F2F2;

    --dark: #272630;

}



.btn {

    font-weight: 700;

    transition: .5s;

}



.btn:hover {

    -webkit-box-shadow: 0 8px 6px -6px #555555;

    -moz-box-shadow: 0 8px 6px -6px #555555;

    box-shadow: 0 8px 6px -6px #555555;

}



.btn.btn-secondary {

    color: #FFFFFF;

}



.btn-square {

    width: 36px;

    height: 36px;

}



.btn-sm-square {

    width: 28px;

    height: 28px;

}



.btn-lg-square {

    width: 46px;

    height: 46px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding-left: 0;

    padding-right: 0;

    text-align: center;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 30px;

    bottom: 30px;

    z-index: 99;

}



.navbar-dark .navbar-nav .nav-link {

    position: relative;

    margin-left: 30px;

    padding: 35px 0;

    font-size: 18px;

    color: var(--light);

    outline: none;

    transition: .5s;

}



.sticky-top.navbar-dark .navbar-nav .nav-link {

    padding: 20px 0;

}



.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

    color: var(--primary);

}



@media (min-width: 992px) {

    .navbar-dark .navbar-nav .nav-link::before {

        position: absolute;

        content: "";

        width: 0;

        height: 5px;

        bottom: 0;

        left: 50%;

        background: var(--primary);

        transition: .5s;

    }



    .navbar-dark .navbar-nav .nav-link:hover::before,

    .navbar-dark .navbar-nav .nav-link.active::before {

        width: 100%;

        left: 0;

    }

}



@media (max-width: 991.98px) {

    .navbar-dark .navbar-nav .nav-link  {

        margin-left: 0;

        padding: 10px 0;

    }

}



.bg-hero {

    background: url(../images/image-07.jpg) top right no-repeat;

    background-size: contain;

}



@media (max-width: 991.98px) {

    .bg-hero {

        background-size: 150px auto;

        background-position: bottom center;

        background-repeat: no-repeat;

    }

    .bg-hero > .container {

        padding-bottom: 9rem !important;

    }

    .bg-hero > .container > .row > [class*="col-"] {

        background-color: #FFE468;

        padding: 0.5rem 0.75rem 1rem;

        position: relative;

        z-index: 1;

    }

    .bg-hero .display-1 {

        font-size: calc(1.75rem + 2.5vw);

        line-height: 1.15;

        word-break: break-word;

    }

    .bg-hero .btn {

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

}



.about-start,

.about-end {

    background: linear-gradient(135deg, #ffe468, #f5d65a) center center no-repeat;

    background-size: contain;

}



@media (min-width: 992px) {

    .about-start {

        position: relative;

        margin-right: -90px;

        z-index: 1;

    }



    .about-end {

        position: relative;

        margin-left: -90px;

        z-index: 1;

    }

}



.service-item,

.contact-item {

    background: linear-gradient(135deg, #ffe468, #f5d65a) top center no-repeat;

    background-size: cover;

    transition: .5s;

}



.service-item:hover,

.contact-item:hover {

    background: linear-gradient(135deg, #ffe468, #f5d65a) bottom center no-repeat;

    background-size: cover;

}



.service-item .service-icon,

.contact-item .contact-icon {

    margin-top: -50px;

    width: 100px;

    height: 100px;

    color: var(--secondary);

    background: #FFFFFF;

    transform: rotate(-45deg);

}



.service-item .service-icon div,

.contact-item .contact-icon div {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    transition: .5s;

}



.service-item .service-icon i,

.contact-item .contact-icon i {

    transform: rotate(45deg);

    transition: .5s;

}



.service-item:hover .service-icon div,

.contact-item:hover .contact-icon div {

    background: var(--secondary);

}



.service-item:hover .service-icon i,

.contact-item:hover .contact-icon i {

    color: var(--primary);

}



.service-item a.btn {

    position: relative;

    bottom: -30px;

    opacity: 0;

}



.service-item:hover a.btn {

    bottom: 0;

    opacity: 1;

}



.bg-quote {

    background: url(../images/image-08.jpg) top right no-repeat;

    background-size: contain;

}



@media (max-width: 991.98px) {

    .bg-quote {

        background-size: cover;

        background-position: center right;

    }

    .bg-quote > .container > .row > [class*="col-"] {

        background-color: #FFE468;

        padding: 2rem 1.25rem;

        position: relative;

        z-index: 1;

    }

}



.team-item {

    position: relative;

    margin-bottom: 45px;

}



.team-text {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #ffe468, #f5d65a) bottom center no-repeat;

    background-size: cover;

    height: 90px;

    padding: 0 30px;

    right: 45px;

    left: 45px;

    bottom: -45px;

    transition: .5s;

    z-index: 1;

}



.team-item:hover .team-text {

    height: 100%;

    bottom: 0;

}



.team-social {

    position: absolute;

    transition: .1s;

    transition-delay: .0s;

    opacity: 0;

}



.team-item:hover .team-social {

    transition-delay: .3s;

    opacity: 1;

}



.bg-testimonial {

    background: url(../images/image-14.jpg) top left no-repeat;

    background-size: contain;

}



.bg-testimonial > .container > .row > [class*="col-"] {

    background-color: #FFE468;

    padding: 2.5rem 2rem;

    box-shadow: 0 0 0 1px rgba(39, 38, 48, 0.04);

}



@media (max-width: 991.98px) {

    .bg-testimonial {

        background-size: cover;

        background-position: center left;

    }

    .bg-testimonial > .container > .row > [class*="col-"] {

        padding: 2rem 1.25rem;

    }

}



.testimonial-carousel .owl-nav {

    margin-top: 30px;

    display: flex;

    justify-content: start;

}



.testimonial-carousel .owl-nav .owl-prev,

.testimonial-carousel .owl-nav .owl-next{

    position: relative;

    margin: 0 5px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    background: var(--secondary);

    font-size: 22px;

    border-radius: 45px;

    transition: .5s;

}



.testimonial-carousel .owl-nav .owl-prev:hover,

.testimonial-carousel .owl-nav .owl-next:hover {

    color: var(--dark);

}



.testimonial-carousel .owl-item img {

    width: 60px;

    height: 60px;

}



.bg-call-to-action {

    background: url(../images/image-06.jpg) top right no-repeat;

    background-size: contain;

}



.bg-footer {

    background: linear-gradient(135deg, #ffe468, #f5d65a) center center no-repeat;

    background-size: contain;

}



@media (max-width: 991.98px) {

    .bg-call-to-action,

    .bg-footer {

        background-size: cover;

        background-position: center right;

    }

    .bg-call-to-action > .container > .row > [class*="col-"],

    .bg-footer > .container > .row > [class*="col-"] {

        background-color: #FFE468;

        padding: 2rem 1.25rem;

        position: relative;

        z-index: 1;

    }

}

.navbar-brand img { vertical-align: middle; }

.policy-content { max-width: 860px; }

.form-status { margin-top: 1rem; padding: 1rem; background: #fff; color: #272630; }

.navbar .dropdown-toggle { font-family: inherit; }



 

.site-nav { position: sticky; top: 0; z-index: 1030; padding: 0; }

.site-nav-inner { width: 100%; max-width: 1440px; margin: auto; padding: 0 32px; display: flex; align-items: center; gap: 32px; }

.site-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 18px 0; color: var(--primary) !important; font-size: 28px; font-weight: 700; text-transform: uppercase; }

.site-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; }

.site-primary-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }

.site-nav-link, .site-resources-toggle { color: #f2f2f2; font-size: 16px; font-weight: 700; padding: 28px 0; border: 0; background: none; white-space: nowrap; position: relative; }

.site-nav-link:hover, .site-nav-link.active, .site-resources-toggle:hover, .site-resources-toggle.active { color: var(--primary); }

.site-nav-link.active::after, .site-resources-toggle.active::after { content: ''; position: absolute; bottom: 15px; left: 0; right: 0; height: 3px; background: var(--primary); }

.site-resources { position: relative; }

.site-resource-menu { position: absolute; top: calc(100% - 6px); right: 0; min-width: 210px; background: white; padding: 8px; border-radius: 8px; box-shadow: 0 12px 30px #0003; }

.site-resource-menu[hidden] { display: none !important; }

.site-resource-link { display: block; padding: 11px 14px; color: var(--dark); border-radius: 4px; }

.site-resource-link:hover, .site-resource-link.active { background: var(--primary); color: var(--dark); }

.site-contact { background: var(--primary); color: var(--dark); padding: 12px 22px; border-radius: 30px; font-weight: 700; white-space: nowrap; }

.site-contact:hover, .site-contact.active { background: var(--secondary); color: var(--dark); }

.site-menu-toggle { display: none; color: var(--primary); border: 1px solid #ffe46880; background: transparent; padding: 8px 12px; border-radius: 6px; align-items: center; gap: 8px; }

.site-nav a:focus-visible, .site-nav button:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; }

@media (max-width: 1199.98px) {

 .site-nav-inner { flex-wrap: wrap; padding: 0 24px; gap: 0; justify-content: space-between; }

 .site-menu-toggle { display: inline-flex; }

 .site-menu { display: none; flex-basis: 100%; padding: 8px 0 24px; max-height: calc(100dvh - 86px); overflow-y: auto; }

 .site-menu.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }

 .site-primary-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }

 .site-nav-link, .site-resources-toggle { display: block; width: 100%; padding: 12px 8px; text-align: left; }

 .site-nav-link.active::after, .site-resources-toggle.active::after { display: none; }

 .site-nav-link.active, .site-resources-toggle.active { background: #ffffff0d; border-radius: 4px; }

 .site-resource-menu { position: static; margin: 0 8px 8px; box-shadow: none; }

 .site-contact { align-self: flex-start; }

}

@media (max-width: 400px) { .site-nav-inner { padding: 0 16px; } .site-brand { font-size: 24px; gap: 8px; } }


 
.site-topbar { background: #ffe468; color: #272630; border-bottom: 1px solid #2726301a; }
.site-topbar a, .site-topbar .text-secondary { color: #272630 !important; }
.site-topbar a:hover { color: #416d18 !important; }
.site-topbar .border-white { border-color: #27263026 !important; }
.social-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.site-nav { background: #272630 !important; border-bottom: 2px solid #ffe468; }
.site-menu-icon { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.site-menu-icon span { display: block; height: 2px; background: currentColor; width: 100%; }
.menu-chevron { display: inline-block; width: 7px; height: 7px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 6px; vertical-align: 3px; }
.site-footer { background: #272630; color: #dcdce2; }
.site-footer h4 { color: #ffe468; margin-bottom: 20px; }
.site-footer .site-brand { padding: 0; }
.site-footer p { line-height: 1.75; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.site-footer a { color: #e9e9ee; }
.site-footer a:hover { color: #ffe468; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.site-footer .footer-social-link { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffe468; color: #272630; }
.site-footer .footer-social-link:hover { background: #8cc641; color: #272630; }
.site-footer .form-control { min-width: 0; background: #fff; color: #272630; padding: 14px; border: 0; }
.site-footer .btn-primary { background: #ffe468; border-color: #ffe468; color: #272630; }
.site-footer form > p { color: #b8b8c2; font-size: 12px; margin-top: 10px; }
.footer-contact { display: inline-block; margin-top: 20px; font-weight: 700; }
.footer-bottom { border-top: 1px solid #ffffff24; background: #201f28; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.footer-bottom p { margin: 0; font-size: 14px; }
.footer-policy-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.site-footer a:focus-visible, .faq-item summary:focus-visible { outline: 3px solid #8cc641; outline-offset: 4px; }
.faq-planning { background: #f7f7f3; color: #272630; }
.section-kicker { display: block; color: #476c20; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.faq-photo { width: 100%; height: 300px; object-fit: cover; border-radius: 12px; }
.faq-work { background: #ffe468; color: #272630; }
.faq-item { background: #fff; margin-bottom: 16px; border: 1px solid #27263018; border-radius: 10px; overflow: hidden; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 20px; padding: 22px 58px 22px 24px; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 24px; top: 20px; color: #476c20; font-size: 24px; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { border-bottom: 1px solid #27263012; }
.faq-item p { padding: 20px 24px; margin: 0; color: #53525d; line-height: 1.8; }
@media (max-width: 575.98px) { .faq-photo { height: 240px; } .faq-item summary { font-size: 18px; } .footer-policy-links { gap: 12px 18px; } }

 
.showcase-hero { background: #ffe468; color: #272630; }
.showcase-image-wrap { position: relative; padding-bottom: 24px; }
.showcase-hero-photo { width: 100%; height: 440px; object-fit: cover; border-radius: 12px; }
.showcase-image-note { position: absolute; bottom: 0; right: 20px; left: 20px; padding: 18px 22px; border-radius: 8px; background: #272630; color: #fff; font-weight: 700; }
.showcase-heading { max-width: 760px; }
.showcase-heading p { color: #53525d; font-size: 18px; line-height: 1.7; }
.project-card { height: 100%; background: #f7f7f3; border-radius: 12px; overflow: hidden; border: 1px solid #27263012; }
.project-card > img { width: 100%; height: 220px; object-fit: cover; }
.project-card-body { padding: 28px; }
.project-tag { display: inline-block; background: #ffe468; color: #272630; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 7px 12px; border-radius: 30px; margin-bottom: 18px; }
.project-card h3 { font-size: 27px; margin-bottom: 16px; }
.project-card p, .project-card li { color: #53525d; line-height: 1.75; }
.project-card ul { padding-left: 20px; margin-bottom: 0; }
.showcase-dark { background: #272630; color: #dedee5; }
.showcase-dark h2 { color: #ffe468; }
.showcase-dark .section-kicker { color: #a5d266; }
.showcase-dark p { font-size: 18px; line-height: 1.8; }
.showcase-dark .btn-primary { color: #272630; }
.project-prep-list { display: grid; gap: 12px; font-weight: 700; }
.process-hero { background: #f7f7f3; }
.process-hero-photo { width: 100%; height: 410px; object-fit: cover; border-radius: 12px; border-bottom: 8px solid #ffe468; }
.process-hero-points { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.process-hero-points span { background: #ffe468; padding: 8px 14px; border-radius: 30px; font-weight: 700; font-size: 13px; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.process-step { display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid #2726301c; border-radius: 12px; background: #fff; }
.process-number { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #ffe468; color: #272630; border-radius: 50%; font-weight: 700; font-size: 24px; margin-bottom: 24px; }
.process-step h3 { font-size: 25px; }
.process-step p { line-height: 1.8; color: #53525d; }
.process-deliverable { display: grid; gap: 8px; padding-top: 18px; margin-top: auto; border-top: 1px solid #27263018; font-size: 14px; }
.process-deliverable strong { color: #476c20; }
.process-preparation { background: #ffe468; }
.process-prep-photo { width: 100%; height: 430px; object-fit: cover; border-radius: 12px; }
.process-checklist { list-style: none; padding: 0; display: grid; gap: 18px; }
.process-checklist li { position: relative; padding-left: 28px; line-height: 1.7; }
.process-checklist li::before { content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 8px; border-left: 3px solid #476c20; border-bottom: 3px solid #476c20; transform: rotate(-45deg); }
#project-ideas { scroll-margin-top: 100px; }
@media (max-width: 1199.98px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .process-grid { grid-template-columns: 1fr; } .showcase-hero-photo, .process-hero-photo { height: 300px; } .process-prep-photo { height: 280px; } .project-card-body { padding: 24px; } .showcase-image-note { left: 12px; right: 12px; font-size: 14px; } }
