/********** Template CSS **********/
:root {
    --primary: #374a23;
    --secondary: hwb(237 32% 59%);
    --light: #e6e3de;
    --dark: #0F4229;
    --mid: #6D4C41;
}
/* #AE734E */

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

#hidesomert{
    display: none;
}

h1,
.h1,
h2,
.h2,
.fw-bold {
    font-weight: 700 !important;
}

h3,
.h3,
h4,
.h4,
.fw-medium {
    font-weight: 600 !important;
}

h5,
.h5,
h6,
.h6,
.fw-semi-bold {
    font-weight: 500 !important;
    display: block;
}

.body{
    background-color: #e6e3de;
    font-family: "Montserrat", sans-serif;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
    border-radius: 10px;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.logo-image{
    width: 16rem;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 80px
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 25px 0;
    color: var(--mid);
    font-size: 16px;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(78, 52, 46, .4);
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    .logo-image{
        width: 14rem;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(rgba(15, 66, 41, .6), rgba(15, 66, 41, .6)), url(../img/bgabt.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-size: 18px;
    color: var(--light);
}


/*** Top Feature ***/
@media (min-width: 991.98px) {
    .top-feature {
        position: relative;
        margin-top: -80px;
    }
}


/*** Facts & Quote ***/
.facts,
.quote {
    background: rgba(15, 66, 41, .6);
}


/*** Service ***/
.service-item {
    position: relative;
    text-align: center;
}

.service-item .service-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

.service-item .service-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    object-fit: cover;
    transform: scale(1.2);
    transition: .3s;
    z-index: -1;
}

.service-item:hover .service-img img {
    transform: scale(1);
}

.service-item .service-text {
    background: #FFFFFF;
    box-shadow: 10px 15px 0px rgba(0, 0, 0, .08);
    transition: .3s;
}

.service-item:hover .service-text {
    background: rgba(15, 66, 41, .6);
}

.service-item .service-text h4,
.service-item .service-text p {
    transition: .3;
}

.service-item:hover .service-text h4 {
    color: #FFFFFF;
}

.service-item:hover .service-text p {
    color: var(--light);
}

.service-item .service-text .btn-square {
    width: 100px;
    height: 100px;
    background: transparent;
    transition: .5s;
}

.service-item:hover .service-text .btn-square {
    background: var(--light);
}

.service-item .service-text .btn {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    color: var(--mid);
    background: var(--light);
    white-space: nowrap;
    overflow: hidden;
    transition: .3s;
}

.service-item:hover .service-text .btn {
    width: 112px;
}


/*** Project Portfolio ***/
#portfolio-flters {
    display: inline-block;
    background: var(--light);
    padding: 10px 15px;
}

#portfolio-flters li {
    display: inline-block;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover,
#portfolio-flters li.active {
    color: var(--mid);
    border-color: var(--mid);
}

.portfolio-inner {
    position: relative;
    overflow: hidden;
}

.portfolio-inner::before,
.portfolio-inner::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(15, 66, 41, .6);
    transition: .5s;
}

.portfolio-inner::after {
    left: auto;
    right: 0;
}

.portfolio-inner:hover::before,
.portfolio-inner:hover::after {
    width: 50%;
}

.portfolio-inner .portfolio-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .5s;
    z-index: 3;
    opacity: 0;
}

.portfolio-inner:hover .portfolio-text {
    transition-delay: .3s;
    opacity: 1;
}

.portfolio-inner .portfolio-text .btn {
    background: var(--light);
    color: var(--primary);
}

.portfolio-inner .portfolio-text .btn:hover {
    background: var(--primary);
    color: var(--light);
}

.image-gallery{
    margin: 4% 0;
    display: grid;
    padding: 40px 0;
    box-sizing: border-box;
    grid-auto-rows: 300px;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

.image-grid-col-2{
    grid-column: span 2;
}

.door-nav{
    display: flex; 
    justify-content:space-between; 
    align-items: center
}

.door-dropdown{
    position: absolute; 
    right: -10.3rem; 
    top: 75%;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #525368;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.countries{
    background: url(../img/countries-background.jpeg);
    margin: 6% 0 2%;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
}

.service-heading-section{
    background-color: #fff;
}

.spiral-design{
    position: absolute;
    top: -230px;
    left: -400px;
    z-index: -1;
}

.spiral-design > img{
    z-index: -2;
    position: relative;
}

.overlay{
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    padding: 6% 12%;
    height: 100%;
    z-index: 2;
}

.contact-button{
    padding: 1.2% 4%;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    background-color: #374a23;
    border: 2px solid #374a23;
    color: #eee;
}

.contact-button:hover{
    color: #374a23;
    background-color: #fff;
}

.image-grid-row-2{
    grid-row: span 2;
}

.image-gallery > img, .image-gallery > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*** Team ***/
.team-item {
    position: relative;
    overflow: hidden;
}

.team-item .team-text {
    position: absolute;
    width: calc(100% - 45px);
    left: -100%;
    bottom: 45px;
    padding: 1.5rem;
    background: #FFFFFF;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text {
    left: 0;
    opacity: 1;
}

.team-item .team-social .btn {
    background: var(--light);
    color: var(--primary);
}

.team-item .team-social .btn:hover {
    background: var(--primary);
    color: var(--light);
}

.team-item .team-img .team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    z-index: 3;
    opacity: 0;
}

.team-item:hover .team-img .team-social {
    transition-delay: .3s;
    opacity: 1;
}


/*** Testimonial ***/

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin-right: 15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--light);
    border-radius: 4px;
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    color: var(--light);
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    color: var(--light);
    background: #072A19;
}

.copyright a {
    color: #FFFFFF;
}

.copyright a:hover {
    color: var(--primary);
}



#unique-image-container {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    animation: fadeInFromRight 3s forwards;
}

#unique-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    #unique-image-container {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    #unique-image-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Existing CSS */
:-ms-input-placeholder { /* IE 10+ */
    color: #969494;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #969494;
  }
  
  .animate-top {
    position: relative;
    animation: animatetop 0.4s;
  }
  @keyframes animatetop {
    from { top: -300px; opacity: 0; }
    to { top: 0; opacity: 1; }
  }
  
  .modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .modal-content {
    margin: 5% auto 0;
    border: 1px solid #888;
    width: 360px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    outline: 0;
    padding: 15px;
  }
  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
  }
  .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    margin-top: 0;
  }
  h5.modal-title {
    font-size: 2rem;
    color: #3B2C28;
    font-weight: 600 !important;

  }
  .close {
    float: right;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
  }
  button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
  }
  .modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
  }
  .close:not(:disabled):not(.disabled) {
    cursor: pointer;
  }
  
  .modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    background-color: #fff;
  }
  .modal-body p {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .modal-footer {
    display: block;
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
  }

  .form-control {
    display: block;
    width: 95%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  .form-control:focus {
    border-color: #66e9b5;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  }
  
  .alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
  }
  .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }
  
  /* Media Queries for Responsiveness */
  @media (max-width: 1200px) {
    .modal-content {
      width: 60%;
    }
  }


    /* Media Queries for Responsiveness */
    @media (min-width: 1200px) {

        #mybtnprime{
            margin-left: 45%;
            width: 132px;
             margin-bottom: 40px;
    
        }
        .modal-content {
          width: 50%;
        }
      }
      
  
  @media (max-width: 992px) {
    
    .modal-content {
      width: 60%;
    }
    .door-dropdown{
        position: static; 
        padding: 0.5rem 0;
        margin: 2% 5%;
    }
    .right-arrow{
        width: 2%;
    }
  }


  
  @media (max-width: 768px) {
    #mybtnprime{
        margin-left: 45%;
        width: 132px;
         margin-bottom: 40px;

    }

    

    .modal-content {
      width: 80%;
      margin: 50% auto;
      padding: 4%;
    }
    .modal-header, .modal-footer {
      padding: 0.5rem;
    }
    .modal-body {
      padding: 0.5rem;
    }
  }
  
  @media (max-width: 576px) {
    .modal-content {
      width: 90%;
      margin: 50% auto;
      padding: 4%;
    }
    .modal-header, .modal-footer {
      padding: 0.25rem;
    }
    .modal-body {
      padding: 0.25rem;
    }
    .form-control {
      width: 100%;
    }
  }
  
  @media (max-width: 400px) {

    #mybtnprime{
        margin-left: 30%;
    }

    .modal-content {
      width: 90%;
      margin: 50% auto;
      padding: 5px;
    }
    .modal-header, .modal-footer {
      padding: 0.25rem;
      font-size: 0.9rem;
    }
    .modal-body {
      padding: 0.25rem;
    }
    .form-control {
      width: 100%;
      font-size: 12px;
      padding: 5px 10px;
    }
  }
  
  @media (max-width: 300px) {
    .modal-content {
      width: 100%;
      margin: 50% auto;
      padding: 5px;
    }
    .modal-header, .modal-footer {
      padding: 0.1rem;
      font-size: 0.8rem;
    }
    .modal-body {
      padding: 0.1rem;
    }
    .form-control {
      width: 100%;
      font-size: 11px;
      padding: 4px 8px;
    }
  }
  

  

.main-btn {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 99;
    background-color: #374a23; /* Dark green */
    border-radius: 50%;
    padding: 10px 14px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    text-decoration: none;
}

.options {
    position: fixed;
    left: 30px;
    bottom: 80px; /* Adjust to ensure it appears above the main button */
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.options > a{
    color: #fff;
}

.option-link {
    display: block;
    background-color: #374a23; /* Dark green */
    border-radius: 50%;
    padding: 10px 14px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}

/* Show options when hovering over the main button or options */
.main-btn:hover + .options,
.options:hover {
    display: flex;
}

.main-btn.active + .options {
    display: flex;
}




/* 
    <!-- Team Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <p class="fs-5 fw-bold text-primary">Our Team</p>
                <h1 class="display-5 mb-5">Dedicated & Experienced Team Members</h1>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="team-item rounded">
                        <img class="img-fluid" src="img/team-1.jpg" alt="">
                        <div class="team-text">
                            <h4 class="mb-0">Doris Jordan</h4>
                            <p class="text-primary">Landscape Designer</p>
                            <div class="team-social d-flex">
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="team-item rounded">
                        <img class="img-fluid" src="img/team-2.jpg" alt="">
                        <div class="team-text">
                            <h4 class="mb-0">Johnny Ramirez</h4>
                            <p class="text-primary">Garden Designer</p>
                            <div class="team-social d-flex">
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="team-item rounded">
                        <img class="img-fluid" src="img/team-3.jpg" alt="">
                        <div class="team-text">
                            <h4 class="mb-0">Diana Wagner</h4>
                            <p class="text-primary">Senior Gardener</p>
                            <div class="team-social d-flex">
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-square rounded-circle me-2" href=""><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Team End -->


    <!-- Testimonial Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-5 wow fadeInUp" data-wow-delay="0.1s">
                    <p class="fs-5 fw-bold text-primary">Testimonial</p>
                    <h1 class="display-5 mb-5">What Our Clients Say About Us!</h1>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit sed stet lorem sit clita duo justo.</p>
                    <a class="btn btn-primary py-3 px-4" href="">See More</a>
                </div>
                <div class="col-lg-7 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="owl-carousel testimonial-carousel">
                        <div class="testimonial-item">
                            <img class="img-fluid rounded mb-3" src="img/testimonial-1.jpg" alt="">
                            <p class="fs-5">Dolores sed duo clita tempor justo dolor et stet lorem kasd labore dolore lorem ipsum. At lorem lorem magna ut et, nonumy et labore et tempor diam tempor erat.</p>
                            <h4>Client Name</h4>
                            <span>Profession</span>
                        </div>
                        <div class="testimonial-item">
                            <img class="img-fluid rounded mb-3" src="img/testimonial-2.jpg" alt="">
                            <p class="fs-5">Dolores sed duo clita tempor justo dolor et stet lorem kasd labore dolore lorem ipsum. At lorem lorem magna ut et, nonumy et labore et tempor diam tempor erat.</p>
                            <h4>Client Name</h4>
                            <span>Profession</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial End -->

 */

 .gallery-image-mobile, .abt-mobile{
    display: none;
 }
 
.request-wood-log-image{
    width: 25%;
}
 
.logo-text{
    color: #3B2C28; 
    font-size: 2rem; 
    font-family: 'Alice', serif;
}

.logo-seperator{
    color: red !important;
    opacity: 1;
    margin: 1% 0;
    height: 1.5px !important;
}

.logo-sub-text{
    font-weight: 500;
    font-size: 0.7rem; 
    margin: 0; 
    text-transform: uppercase; 
    text-align: center; 
    display: block;
}

.all-varieties-mobile{
    display: none !important;
}

 @media (max-width: 768px) {
    .image-gallery{
        grid-template-columns: repeat(2, 1fr);
    }
    .image-grid-col-2{
        grid-column: span 1;
    }
    .image-grid-row-2{
        grid-row: span 1;
    }
    .log-wood-image{
        width: 80%;
    }
    .gallery-image-mobile{
        display: block;
    }
    .mobile-none, .abt-desktop{
        display: none !important;
    }
    .topbar-contact-details{
        margin: 0 auto;
        display: block;
        text-align: center !important;
    }
    .abt-mobile{
        display: block;
    }
    .request-wood-log-image{
        width: 40%;
    }
    .all-varieties-mobile{
        display: block !important;
    }
    .all-varieties-mobile .product{
        margin: 4% 0;
    }
    .product img{
        width: 100% !important;
    }
    .center-circle{
        display: none;
    }
}