/*Base CSS General Code */

html, body {
    overflow-x: hidden;
    overflow-y: auto; /* Allows natural vertical scrolling */
    margin: 0; /* Removes unexpected spacing */
    padding: 0;
}



.page-wrapper {
  overflow: hidden;
} 

*{
    box-sizing:  border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style-type: none;
}
.nav__list{
    width: 100%;
}
body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}


/*Variables for Our Reference*/
:root{
    --header-height: 3.5rem;
    --logo-color: rgba(226,82,13);
    --black-color: hsl(220, 24%, 12%);
    --black-color-light: hsl(220, 24%, 15%);
    --black-color-lighten: hsl(220, 20%, 18%);
    --black-color-lighten-lighten: hsl(220, 18%, 21%);
    --white-color: #fff;
    --body-color: hsl(220, 100%, 97%);
    --body-font: serif;
    --normal-font-size:  16px;
    --dot-slider-color: #bbb;
    --dot-hover-color: #717171;
    --accent-color: rgba(226,82,13, 0.8);
    --rears-green: rgb(59,119,60);
    --error-color: rgba(221, 20, 6, 0.8);
    /*Font Weight*/
    --font-weight: 400;
    --font-semi-bold: 600;
    --peach-color: rgb(240,223,200);
    /*Reusable CSS Classes*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

.nav-container{
    width: 100%;
   
}

/*Header*/
header{
    position: sticky;
    top:0;
    left: 0;
    width: 100%;
    background-color: var(--black-color);
    box-shadow: 0 2px 16px hsla(39, 98%, 43%, 0.3);
    z-index: var(--z-fixed);
}

/*Navigation*/
nav{
    height: var(--header-height);
    width: 100%;
}

.nav__logo,
.nav__burger, 
.nav__close{
    color: var(--white-color);
}

.nav__data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav__logo{
    display: inline-flex;
    column-gap: 0.25rem;
    color: var(--logo-color);
    font-weight: var(--font-semi-bold);
    height: 100%;
}

.nav__logo i{
   font-size: 1.25rem;
   padding-left: 0.25rem;
}

.nav__toggle{
    position: relative;
    width: 32px;
    height: 32px;

}

.nav__burger,
.nav__close{
    position: absolute;
    width: max-content;
    height: max-content;
    inset:0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity 0.1s, transform 0.4s;
}

.nav__close{
    opacity: 0;
}

/*Navigation for Mobile Devices*/

@media screen and (max-width: 1118px){
    .nav__menu{
        position: absolute;
        left:0;
        top: 2.5rem;
        width: 100%;
        background-color: grey;
        height: calc(100vh-3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity 0.3s;
    }
    .nav__menu::-webkit-scrollbar{
        width: 0;
    }
    .nav__list{
        background-color: var(--black-color);
        padding-top: 1rem;
    }
     /* Caption text */
 .text {
    position: absolute; 
    top: 0; /* Start top of the image */ 
    left: 25%; 
    transform: translateX(-50%); 
    color: var(--white-color); 
    font-size: 1em; 
    opacity: 0; 
    transition: opacity 1s ease-in-out, top 0.5s ease-in-out;
    overflow:hidden;
 }
}

.nav__link{
    color: var(--white-color);
    background-color: var(--black-color);
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ;
}
.nav__link:hover{
    background-color: var(--black-color-light);
}

/*Show Menu, Utilizes menuToggle.js File***/
.show-menu{
    opacity:1;
    top: 3.5rem;
    pointer-events: initial;
    rotate: 360;
}

.swap .nav__burger{
    opacity:0;
    transform: rotate(720deg);
}

.swap .nav__close{
    opacity: 1;
    transform: rotate(1080deg);
}

/*Dropdown Menu CSS (Not Submenu of Dropdown*/
.dropdown-item{
    cursor: pointer;
}

.dropdown_arrow{
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform 0.4s;
}

.dropdown__link,
.dropdown__sublink{
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--white-color);
    background-color: var(--black-color-light);
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    font-weight: var(--font-semi-bold);
    transition: background-color 0.3s;
}

.dropdown__link i, .dropdown__sublink i{
    font-size: 1.25rem;
}   

.dropdown__link:hover{
    background-color: var(--black-color-lighten);
}

/*Still Part of Dropdown Menum, This Code Hides the Dropdown + Trans.*/
.dropdown__menu, .dropdown__submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.09s ease-in-out;
}


/*Make our Dropdown Visible! I am not using this. Keep it to 
test if hove works as "click" on mobile. I do not know how that 
interaction works. -HRR
.dropdown-item:hover .dropdown__menu{
    max-height:1000px;
    transition: max-height 0.4s ease-in;
}
    */

.show_dropdown{
    max-height: 100%;
}


/*Rotation of the Dropdown Arrow*/
.arrow-rotate{
    transform: rotate(180deg);
}

/*Dropdown Submenu CSS*/
.dropdown__add{
    margin-left: auto;
}

.dropdown__sublink:hover{
    background-color: var(--black-color-lighten-lighten);
}

/*Breakpoints*/
/*For Small Devices, Less than 340px, Smalls Smartphones*/
@media screen and (max-width: 340px){
    .nav-container{
        margin-inline: 1rem;
    }
    .nav__link{
        padding-inline: 1rem;
    }
}

@media screen and (min-width: 1118px){
    .nav-container{
        margin-inline: auto;

    }
    nav{
        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
    }
    .nav__toggle{
        display: none;
    }
    .nav__list{
        display: flex;
        column-gap: 3rem;
        height: 100%;
    }
    .nav__link{
        height: 100%;
        column-gap: 0.25rem;
    }
    .dropdown-item{
        height: 100%;
    }
    .dropdown-item:hover .dropdown__menu{
        overflow: visible;
    }
    .dropdown-item,
    .dropdown__subitem{
        position: relative;
    }
    .dropdown__menu,
    .dropdown__submenu{
        max-height: intial;
        overflow: initial;
        position: absolute;
        left: 0;
        top: 6rem;
        opacity: 0;
        pointer-events: none; /*Hides dropdown*/
        transition: opacity 0.3s, top 0.3s;
    }
    .dropdown__link,
    .dropdown__sublink{
        padding-inline: 1rem 3.5rem;
    }
    .dropdown__subitem .dropdown__link{
        padding-inline: 1rem;
    }

    .dropdown__submenu{
        position: absolute;
        left: 100%;
        top: 0.5rem;
    }

    .dropdown-item:hover .dropdown__menu{
        opacity: 1;
        top: 5.5rem;
        pointer-events: initial;
        transition: top 0.2s;
    }
    
    .dropdown__subitem:hover > .dropdown__submenu{
        opacity:1;
        top:0;
        pointer-events: initial;
        transition: top 0.3s;
    }
     /* Caption text */
 .text {
    position: absolute; 
    top: 0; /* Start top of the image */ 
    left: 30%; 
    transform: translateX(-50%); 
    color: var(--white-color); 
    font-size: 4em; 
    opacity: 0; 
    transition: opacity 1s ease-in-out, top 0.5s ease-in-out;
    overflow:hidden;
    z-index: 1;
 }
 .directory{
    margin-left: 5%;
    margin-right: 5%;
 }
}


/*Body CSS*/
[class*="col-"]{
    width: 100%;
}

@media only screen and (width>768px){
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    }

.gif{
    width: 100%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
  }

.row{
    margin-left: 15%;
    margin-right: 15%;
}


/*gif Hover*/
.images-container {
    position: relative;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;     
 }
       
 .image1 {
     position: relative;
     top: 0;
     left: 0;
     vertical-align: top;

 }

 .image2:hover{
opacity: 0;
 }
 
 .image2container {
    vertical-align: top;
 }
 
 .image2 {
    position: absolute;
    top: 0px;
    height: 100%;
 }

 /*Slideshow CSS*/
 * {box-sizing:border-box}

 /* Slideshow container */

 .slideshow-container {
    display: flex; 
    flex-wrap: nowrap;
    clip-path: inset(0 0 0 0);
    width: 100%;
    position: relative;
    max-height: 650px;
 }
 
 .active{
    opacity: 1;
 }

 
 .mySlides {
   min-width: 100%; 
   transition: transform 0.5s ease-in-out;
   position: relative;
 }

 .mySlides:first-child {
    display: block;
}


 /* Next & previous buttons */
 .car-prev, .car-next {
    z-index: 100000;
   cursor: pointer;
   position: absolute;
   top: 30%;
   padding: 16px;
   color: white;
   font-weight: bold;
   font-size: 2rem;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }
 
 /* Position the "next button" to the right */
 .car-next {
    
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 /* On hover, add a black background color with a little bit see-through */
 .car-prev:hover, .car-next:hover {
   background-color: rgba(0,0,0,0.8);
 }
 
 /* Caption text 
 .text {
    position: absolute; 
    top: 0;  Start top of the image 
    left: 25%; 
    transform: translateX(-50%); 
    color: var(--white-color); 
    font-size: 1em; 
    opacity: 0; 
    transition: opacity 1s ease-in-out, top 0.5s ease-in-out;
    overflow:hidden;
 }
*/
.text.activated{ 
    top: 60%; /* Slide up to this position */ 
    opacity: 1; 
}

 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
 
 /* The dots/bullets/indicators */

 .dots{
    text-align:center;
    margin-bottom: 1em;
 }

 .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: var(--dot-slider-color);
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 
 .active, .dot:hover {
   background-color: var(--logo-color);
 } 

 .title-header{
    color: var(--logo-color);
    font-weight: var(--font-semi-bold);
    margin-bottom: 0;
    padding: 0;
    font-size: 1.3em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
 }
.title-sub-header{
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    margin-top: 0;
    padding: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}

@media (max-width: 525px){
    .title-header{
        font-size: 0.5em;
    }
    .title-sub-header{
        font-size: 0.5em;
    }
}
 .slide1{
    width: 100%;
    height: 100%;
    visibility: visibility: visible !important;
    object-fit: cover; /* Cover the container */
    object-position: 50% 50%; /* Adjust position to crop the top */
 }

 .sliderPic2{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
 }


 /*Body of Homepage*/
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); /*6-Column Layout*/
    gap: 1em; /* Adjust spacing between grid items */ 
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 1em;
    justify-content: center;
    margin-top: 0em;
} 
.grid-item { 
    display: flex; 
    flex-direction: column; /* Stack image and text vertically */ 
    justify-content: center; /* Center image and text */ 
    align-items: center;
} 
.grid-item .card img { 
    width: 100%; 

} 
.grid-item .card .card-container{
    width: 100%;

}
.grid-item h1{
    font-size: 1.8em;
    color: var(--accent-color);
    vertical-align: center;
    justify-content: center;
}
.grid-item .card-content{
    padding: 8px;
    text-align: center;
    margin-bottom: 2%;
}

.body-header{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: var(--black-color-light);
    color: var(--white-color);
    text-align: center;
}
 
/*Card CSS*/
.card{
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    margin: 0.2em;
    height: 100%;
}
.card img{
    width: 100%;
    height: auto;
    flex: 1;
    object-fit: cover;
}



.card-container{
    display: flex;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}

.card-description{
    color:var(--black-color-lighten-lighten);
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1em;
    align-items: end;
}

.grid-item .card-header{
    color: var(--black-color);
}

.card-header{
    color: var(--logo-color);
}

.card-content{
    padding: 16px;
    text-align: left;
}

.swiper-container {
    overflow: hidden;
    position: relative;
    margin-left: 1%;
    margin-right: 8%;
    background-color: transparent;

}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    background: #fff;
    overflow: hidden;
    padding: 20px;
    background-color: transparent;
}

.swiper-slide .card-container .card { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Ensures image fills the slide without distortion */ 
    margin:0;
    padding: 0;
}
.swiper-button-next, .swiper-button-prev{
    position: absolute;
    top: 20%;
}

.directory{
    display: flex;
    justify-content: space-evenly;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: var(--black-color-lighten);
    color: var(--white-color);
}

.directory a{
    padding: 1em;
    font-size: 1.3em;
    font-weight: var(--font-semi-bold);
    text-decoration: none;
    color:inherit;
}

.directory a:hover{
    background-color: var(--black-color-light);
}


.directory a i{
    padding-left: 0.2em;
}

@media (max-width: 1118px) { 
    .grid-container { 
        grid-template-columns: repeat(3, 1fr); /* 3 column layout for smaller screens */ 
        margin-left: 0px;
        margin-right: 0px;
    } 
    .grid-item .card{
        width: 100%;
        height:auto;
    }
    .directory{
        margin-left: 0%;
        margin-right: 0%;
    }
}
@media (max-width: 600px) { 
    .grid-container { 
        grid-template-columns: repeat(3, 1fr); /* Two column layout for even smaller screens */ 
        margin-left: 0px;
        margin-right: 0px;
    } 
    .grid-item .card{
        width: 100%;
        height:auto;
    }
    .directory{
        margin-left: 0%;
        margin-right: 0%;
    }

}

.grid-container-sub { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* 2-Column Layout */
    gap: 1em; /* Adjust spacing between grid items */ 
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0.3em;
    background-color: var(--black-color-light);
    color: var(--white-color);
    place-items: center;
} 

.content-sub {
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    height: 100%;
    width: 100%;
    background-color: #bbb;
}

.content-sub h1{
    color: var(--accent-color);
}

.container-test-rev{
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 100%;
    margin-bottom: 5%;
}

.content-container-rev{
    margin-right: 15%;
    background-image: url('EDS3.jpg');
    background-color: var(--black-color);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 12px;
}
.container-test{
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
    margin-bottom: 5%;
}

.content-container{
    margin-left: 15%;
    background-image: url('spray.jpg');
    background-color: var(--black-color);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 12px;
}

.content-container-sub{
    padding: 10px 10px 10px 18px;
    border-radius:12px;
    background-color: rgb(240,223,200);
}

.content-container h1, .content-container-rev h1{
    color: var(--accent-color);
}

.content-container p, .content-container-rev p{
    color: var(--black-color);
}



.history-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, black, transparent); /* Gradient overlay */
    pointer-events: none; 
}

.history-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    flex-wrap: nowrap;
    border-radius: 20px 0 0 20px;
    position: relative;
    margin: auto;
    margin-bottom: 5%;
}

.history-container img{
    width: 100%;
    height:auto;
    max-height: 600px ;
    border: solid black 1px;
    box-shadow: 10px 10px 5px 0px var(--accent-color);
}
.history-container .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-80%, 30%);
    color: var(--white-color);
}
.history-container .content h1{
    color: var(--accent-color);
}

@media (max-width:475px){
    .history-container .content{
        font-size: 0.75em;
    }
}

@media (max-width:400px){
    .history-container .content{
        font-size: 0.65em;
    }
}

@media (max-width: 1118px) { 
   /* .container-test { 
        grid-template-columns: 2fr;
    } */
    .content-container{
        margin: 2%;
    }
    .content-container-rev{
        margin: 2%;
    }
    .swiper-container{
        margin: 2%;
    }
    .history-container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-wrap: nowrap;
        border-radius: 20px 0 0 20px;
        position: relative;
        margin: auto;
        margin-bottom: 5%;
    }

    .history-container img{
        width: 100%;
        height:fit-content;
        border: solid black 1px;
    }




}
@media (max-width: 800px) { 
   /* .container-test { 
        grid-template-columns: 1fr;
    } */
    .content-container{
        margin: 2%;
    }
    .content-container-rev{
        margin: 2%;
    }
    .slideshow-container{
        margin: 0%;
    }
    .history-container .content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--white-color);
    }
}

@media (max-width: 1118px) { 
    .grid-container-sub { 
        grid-template-columns: repeat(1, 1fr); /* Two column layout for even smaller screens */ 
        margin-left: 0px;
        margin-right: 0px;
    } 

}





.swiper-container-rev {
    overflow: hidden;
    position: relative;
    margin-right: 1%;
    margin-left: 8%;
}

.card, .swiper-slide{
    transition: transform 0.3s ease; /* Smooth transition */
    }

.card:hover  {
      transform: scale(1.05); /* Scales the container to 110% of its original size */
      box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
}


section{
    padding: 80px 13% 70px;
}


.footer-content li{
    margin-bottom: 16px;
}

.footer-content img{
    transform: scale(1.5);
}
.footer{
    width: 100%;
    background-color: var(--black-color);
    color: var(--white-color);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 7rem; /* Adjust the gap between grid items */
    position: absolute;
    left: 0;
    right: 0;
    justify-items: center;
    border-top-left-radius: 200px;
    margin-top: 5%;
}


.footer i{
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
}

.footer-content h4{
    margin-bottom: 1rem;
    font-weight: var(--font-semi-bold);
    font-size: 1.5em;
    color: var(--accent-color);
}

.footer-content li a{
    display: block;
    color: var(--white-color);
    transition: all 0.40s ease;
    font-size: 1.25em;
}
.footer-content a:hover{
    transform: translateY(-3px) translateX(-5px);
    color: var(--accent-color);
}

.footer-content p{
    margin: 10px 0;
    font-size: 1.25em;
    font-style: italic;
}

.footer-content{
    text-align: left;
    
}

.icons{
    display: flex;
    justify-content: space-between;
}

.icons a{
    display: inline-block;
    font-size: 22px;
    margin-right: 15px;
    transition: all 0.40s ease;
    align-content: center;
    
}

.icons a:hover{
    transform: translateY(-3px) translateX(-5px);
}

i:hover{
    color: var(--accent-color);
}

.cutter-banner{
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: 500px;
    position: relative;
    background: linear-gradient(to right, black, transparent); /* Gradient overlay */
}


.cutter-banner img{
    width: 100%;
    height: auto;
    opacity: 0.75;
    
}

.cutter-banner-content{
    position: absolute;
    top:40%;
    left: 10%;
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    font-size: 24px;
}

.cutter-banner-content h1{
    color: var(--logo-color);
    font-weight: bold;
}

.container-eq{
    display: flex;
    width: 100%;
    margin-top: 2%;
}

.eq-container{
    display: grid;
    margin-left: 3%;
    margin-bottom: 5%;
    margin-right: 3%;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 1%;
    width: 100%;
    
    justify-content: center;
}

.eq-container .pc:hover  {
    transform: scale(1.05); /* Scales the container to 110% of its original size */
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
}
.pc a{
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensure content is spaced out */
        width: 100%;
        height: 100%
}
.pc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5%;
    background-color: white;
    border: 1px solid var(--black-color);
    border-radius: 15px;
    transition: transform 0.3s ease; /* Smooth transition */
    
}

.pc-caption{
    background-color: var(--black-color);
    width: 100%;
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    
    font-size: 1.2em;
    padding: 1em;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    flex-grow: 1; /* Allow the caption to grow to fill available space */
    display: flex;
    align-items: center;
    justify-content: center;
}

.eq-container .pc img{
    width: 100%;
    height: 325px;
    overflow: hidden;
}

.eq-list-box h1{
    background-color: var(--black-color); /* Set the desired background color */
    padding: 10px; /* Add padding for spacing */
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.eq-list-box{
    border: 1px grey solid;
    display: inline-block;
    color: var(--white-color);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    color: var(--black-color);
    margin-left: 2%;
    background-color: #fffbfb;
    color: var(--black-color);
    border-radius: 5px;
    height: fit-content;
}

.eq-list-box li{
    
    padding: 5px 10px 5px 10px;
}

.eq-list-box li a{
    text-decoration: none;
    display: block;
    transition: all 0.40s ease;
    font-size: 1.25em;
    color: inherit;
    transition: all 0.40s ease;
}

.eq-list-box li a:hover{
    transform: translateY(-3px) translateX(-5px);
    color: var(--logo-color);
}

@media (max-width: 1450px) { 
    .container-eq{ 
        display: flex;
        flex-wrap: wrap;
    } 
    .eq-list-box{
        width: 100%;
        margin-right: 2%;
    }

    .eq-container{
        margin: 5%;
        grid-template-columns: repeat(3, 1fr);
    }

    .text {
        position: absolute; 
        width: 100%;
        top: 50%; /* Start top of the image */ 
        left: 50%; 
        transform: translate(-50%, -50%); 
        color: var(--white-color); 
        font-size: 3em; 
        opacity: 0; 
        transition: opacity 1s ease-in-out, top 0.5s ease-in-out;
        overflow:hidden;
        z-index: 1;
        text-align: center;

     }
     .text.activated{ 
        top: 50%; /* Slide up to this position */ 
        opacity: 1; 
    }

}






.partition-1{
    margin-top: 3%;
}

.partition-2:nth-child(odd){
    background-color: var(--black-color-lighten-lighten);
    color: white;
}
.partition-2:nth-child(even){
    background-color: grey;
    color: white;
}


.partition-3{
    background-color: grey;
    color: white;
}
.par-1{
    visibility: hidden;
    max-height: 0;
    margin-left: 5%;
    margin-right: 5%;
    transition: max-height 0.3s ease-in-out, visibility 0s 0.65s;
    overflow: hidden;
    
}

.dropdown-3-column{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
}
.dropdown-2-column{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;

    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 1%;
    justify-content: center;
    align-items: center;

}

.dropdown-1-column{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3%;
    justify-content: center;    
    overflow: hidden;

}

.image-container{
    display: flex;
    justify-content: center;
    align-items: center;
}




.image-container img{
    max-width: 50%;
    height: 100%;
    margin: 1%;
}

.image-container-spf{
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.image-container-spf img{
    margin-bottom: 5%;
    margin-top: 5%;
    width: 100%;
    border-radius: 25px;
}
.FLMB500-image{
    height:fit-content;
    max-height: 300px;
    padding: 15px;
}

.SP5150-image{
        height:fit-content;
        max-height: 450px;
        padding: 1px;
        border-radius: 15px;
}

/*
    grid-column: span 2;
    border-radius: 35px;
    padding: 20px;
    margin-bottom: 3%;
}*/
.par-1.show{
    visibility: visible;
    max-height: 10000px;
    transition: max-height 0.3s ease-in-out, visibility 0s 0s;
}



.column-1, .column-2, .column-3{
    color: var(--white-color);
    border-radius: 35px;
    padding: 20px;
    margin-bottom: 3%;
}

.blade-image{
    max-height: 400px;
}

.par-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-left: 5%;
    margin-right: 5%;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}


.par-1-1{
    margin-left: 0%;
    margin-right: 0%;
    padding: 15px;
}

.par-1 img, .par-2 img{
    width: 100%;
    height: fit-content;
    border-radius: 30px;
    vertical-align: center;
}


.par-1 h1 , .par-2 h1{
    color: var(--logo-color);
    font-weight: var(--font-semi-bold);
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}

.par-1-1 h1{
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    font-size: 2em;
    display:flex;
    justify-content: space-between;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}
.paragraph-intro{
    padding: 10px;
}

/*TRANSITION FOR ICON FROM + TO - */
.toggle-button {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for transform and opacity */
}

/* Plus icon */
.toggle-button::before {
    content: "\f067"; /* Font Awesome plus icon */
}

/* Minus icon */
.toggle-button.minus::before {
    content: "\f068"; /* Font Awesome minus icon */
}

.toggle-button:hover{
    cursor: pointer;
}


.toggle-button.minus {
    transform: rotate(180deg); /* Rotate the icon when toggled */
}

table{
    width: 100%;
    
}


table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
    color: var(--black-color);
}

th, td{
    padding: 10px;
}

th{
    background-color: var(--logo-color);
    font-size: 1.25em;
}

tr:nth-child(even){
    background-color: white;
}

tr:nth-child(odd){
    background-color: #ddd;
}

.quad-contain{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.quad-contain img{
    height: 100%;

}

.two-image-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    gap: 15px;
}

.two-image-container img, .thumbnail {
    max-height: 450px
}

@media (max-width: 1118px) { 
    .container-eq{ 
        display: flex;
        flex-wrap: wrap;
    } 
    .eq-list-box{
        width: 100%;
        margin-right: 2%;
    }

    .eq-container{
        margin: 5%;
        grid-template-columns: repeat(2, 1fr);
    }


    .par-2{
        grid-template-columns: repeat(1, 1fr);
    }

    .dropdown-2-column{
        grid-template-columns: repeat(1,1fr);
        gap: 8px;
    }

}

@media (max-width: 500px) { 
    .container-eq{ 
        display: flex;
        flex-wrap: wrap;
    } 
    .eq-list-box{
        width: 100%;
        margin-right: 2%;
    }

    .eq-container{
        margin: 5%;
        grid-template-columns: repeat(1, 1fr);
    }
    .cutter-banner-content{
        position: absolute;
        top:50%;
        left: 10%;
        color: var(--white-color);
        font-weight: var(--font-semi-bold);
        font-size: 12px;
    }

    .dropdown-2-column{
        grid-template-columns: repeat(1,1fr);
        gap: 8px;
    }

    .image-container{
        display: flex;
        flex-wrap:wrap;
        width: 100%;
    }
    .image-container img{
        max-width: 100%;
        height: 100%;
    }
    .two-image-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        align-items: center;
        gap: 15px;
    }


}
@media (max-width: 1000px) { 
.dropdown-3-column{
    grid-template-columns: repeat(1, 1fr);
    }
}






.thumbnail {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Increased z-index to ensure it's on top */
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 20px; /* Adjusted top position to ensure visibility */
    right: 20px; /* Adjusted right position to ensure visibility */
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    z-index: 1001; /* Increased z-index to ensure it's on top */
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.cane-video{
    height: auto;
    width: 100%;
    border-radius: 25px;
}

.cane-video{
    height: auto;
    width: 100%;
    border-radius: 25px;
}

.ash-video{
    max-height: 450px;
    width: 100%;
    border-radius: 10px;

}

.pb-video{
    max-height: 600px;
    width: 100%;
    border-radius: 10px;
}

.pb-list li{
    padding-left: 1em;
    padding-bottom: 0.75em;
}

strong{
    font-weight: var(--font-semi-bold);
    font-size: 1.2em;
}

.video-container2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    justify-content: center;
}

.video-container1{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    align-items: center;
    justify-content: center;
}


.content-list{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
    justify-content: center;
    margin-left: 7.5%;
    margin-right: 7.5%;
}

.content-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--black-color);
    font-weight: var(--font-semi-bold);
    padding: 0.5em;
    margin: 2%;
    border-radius: 10px;
    overflow: hidden;
}

.description{
    padding: 10px;
    margin-top: 1%;
    height: 90px;
}

.content-card:hover{
    transform: scale(1.05); /* Scales the container to 110% of its original size */
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
}

.content-card img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 1000px) { 

        .content-card img{
            height: 200px;
        }
       
        .content-list{
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
        
}

@media (max-width: 600px) { 
    
        .content-list{
            display: grid;
            grid-template-columns: repeat(2,1fr);
        }
}

@media (max-width: 400px) { 
    
    .content-list{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
}



.aboutUs-H{
    display: flex;
    width: 100%;
    color: var(--white);
    align-items: center;
    margin: auto;
    margin-top: 5%;
}

.aboutUs-H h1{
    margin-left: 7.5%;
    color: var(--logo-color);
    font-weight: var(--font-semi-bold);
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
}


.see-more-button{
    background-color: var(--logo-color);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding:0.5em;
    font-size: 1.1em;
    border: none;
    margin-top: 4%;
    border-radius: 0.3em;
    text-align: center;
    width: 100%;
}

.see-more-button:hover{
    transform: scale(1.05); /* Scales the container to 110% of its original size */
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
    cursor: pointer;
}

.cherry-blower .strong{
    line-height: 1.6;
    padding: 1.2em;
}

.list-Header{
    font-size:1.2em;

}

.property {
    align-items: center;
    background-color: #5e5b5b;
    border-radius: 50%;
    color: #dd7c0d;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 30px;
    justify-content: center;
    padding: 4px;
    position: relative;
    position: relative;
    transition: all 0.3s ease-out;
    width: 30px;
  }
  
  .property::after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFFFFF;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 95%;
    transform: translate(-50%, 0);
    transition: all 0.3s ease-out;
    width: 0;
    z-index: 1;
  }
  
  .property .icon {
    align-items: center;
    display: flex;
    justify-content: center;
    color: #fffffff3;
  }
  
  .property .icon svg {
    height: 20px;
    width: auto;
  }
  
  .property .details {
    display: none;
    flex-direction: column;
    flex: 1;
  }
  
  .property .address {
    color: #777474;
    font-size: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  
  .property .features {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  
  .property .features > div {
    align-items: center;
    background: #f5f5f5fa;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    font-size: 10px;
    gap: 5px;
    padding: 5px;
  }
  
  /*
   * Property styles in highlighted state.
   */
  .property.highlight {
    background-color: #ffffffee;
    border-radius: 8px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height: 80px;
    padding: 8px 15px;
    width: auto;
  }
  
  .property.highlight::after {
    border-top: 9px solid #FFFFFF;
  }
  
  .property.highlight .details {
    display: flex;
  }
  
  .property.highlight .icon svg {
    width: 50px;
    height: 50px;
  }

/*
Tractor colors.
*/
  .property.highlight:has(.fa-tractor) .icon {
    color: var(--tractor-color);
  }
  
  .property:not(.highlight):has(.fa-tractor) {
    background-color: var(--tractor-color);
  }
  
  .property:not(.highlight):has(.fa-tractor)::after {
    border-top: 9px solid var(--tractor-color);
  }
   

  

  :root {
    --tractor-color: #FF9800;
  }

#map {
  height: 100%;
  width: 100%;
}


.form-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    width:35%;
    font-size: var(--normal-font-size);
    margin-inline: auto;
    background-color: var(--black-color-lighten);
    color: var(--white-color);
    padding: 20px;
    margin-top: 10%;
    border-radius: 10px;
    width: 85%;
    height: fit-content;
}



.error-code{
    color: var(--error-color);
    font-weight: var(--font-semi-bold);
    font-size: 1.5em;
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
}


.success-code{
    color: var(--rears-green);
    font-weight: var(--font-semi-bold);
    font-size: 1.5em;
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
}

.form-wrapper h2{
    color: var(--logo-color);
    font-weight: var(--font-semi-bold);
    font-size: 2em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 

}

form {
    background-color: var(--black-color-lighten-lighten);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: 2%;
    margin-bottom: 2%;
}

.form-group {
    margin-bottom: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.form-group-2 {
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: 1fr 2fr; /* Adjusts the layout to have two columns */
    justify-content: space-between;
    width: 100%;
}



@media (max-width: 485px) { 
.form-group{
    flex-direction: column;;
    }
    .form-wrapper h2{
        font-size: 1.25em;
    }
}

@media (max-width: 565px) { 
.form-group-2{
    grid-template-columns: 1fr; /* Stacks the columns on smaller screens */
    }
    .form-wrapper h2{
        font-size: 1.25em;
    }
}
label{
    font-weight: var(--font-semi-bold);
    color: var(--white-color);
    width: 85%;
    min-width: 150px;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    margin-right: 0.75em;
}

.lookup-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;

}

@media (max-width: 1100px) { 
    
    .lookup-container{
        grid-template-columns: 1fr; /* Stacks the columns on smaller screens */
    }
}

.lookup-results{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lookup-table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: var(--black-color-lighten);
    color: var(--white-color);
}

.lookup-table th{
    background-color: var(--black-color-lighten);
    color: var(--white-color);
    padding: 10px;
}