@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
:root{
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: .938rem;
    --dark-green: #1A1A19;
    --sub-dark-green: #222221;
    --main-green: #31511E;
    --second-green: #859F3D;
    --accent: #F6FCDF;
}
*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
    "header" 
    "main"
    "footer";    
    font-family: var(--body-font);
    font-size: var(--normal-font-size);

}
header{
    top: 0;
    position: sticky;
    grid-area: header;
    background-color: var(--dark-green);
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .0);
    padding: 1em;
    z-index: 100;
    padding-right: 4rem;
}
.nav{
    height: 3.5rem;
}
.nav-logo,
.nav-open,
.nav-close{
    color: var(--accent);
}
.nav-data{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-logo{
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: 600;
}
.nav-logo i{
    font-weight: initial;
    font-size: 1.25rem;
}
.nav-toggle{
    position: relative;
    width: 32px;
    height: 32px;
}
.nav-open,
.nav-close{
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}
.nav-close{
    opacity: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
main{
    grid-area: main;
    position: relative;
    background: linear-gradient(245.59deg, #31511E 70%, #1A1A19 100%);
}
footer{
    grid-area: footer;
    background-color: #1A1A19;
    padding: 2em;
}
.landing{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    height: 100%; 
    border-style: solid;
    border-color: black;
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
    gap: 2em;
    padding: 1em; 
    box-sizing: border-box; 
}
.landing-text, .landing-carousel{
    height: 100%;
    width: 100%;
    flex: 1;
    padding: 1em;
    box-sizing: border-box;
}
.landing-text{
    border-style: solid;
    border-color: black;
}
.landing-carousel{
    border-style: solid;
    border-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.scroll
{
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);
}
.scroll div
{
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
    animation-delay: calc(var(--t) * -1);  
}
.scroll div:nth-child(2)
{
    animation: animate2 var(--t) linear infinite; 
    animation-delay: calc(var(--t) / -2);  
}
@keyframes animate
{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(-100%);
    }
}
@keyframes animate2
{
    0%
    {
        transform: translateX(0);
    }
    100%
    {
        transform: translateX(-200%);
    }
}
.scroll div span
{
    display: inline-flex;
    margin: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.5s;
}
.scroll div span:hover
{
    background: #4caf50;
    cursor: pointer;
}
.imgbx img
{
    max-width: 100px;
    scale: 0.8;
}
.imgbx img:hover
{
    cursor: pointer;
    scale: 1.0;
    transition: 0.5s ease;
}











@media screen and (max-width: 1118px){
    .nav-menu{
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0; 
        transition: top .4s, opacity .3s;
    }
    .nav-menu::webkit-scrollbar{
        width: 0;
    }
    .nav-list{
        background-color: var(--dark-green);
        padding-top: 1rem;
    }
}
.nav-link{
    color: var(--accent);
    background-color: var(--dark-green);
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}
.nav-link:hover{
    background-color: var(--sub-dark-green);
}
.show-menu{
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
}
.show-icon .nav-open{
    opacity: 0;
    transform: rotate(90deg);
}
.show-icon .nav-close{
    opacity: 1;
    transform: rotate(90deg);
}
.dropdown-item {
    cursor: pointer;
  }
  
  .dropdown-arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
  }
  
  .dropdown-link, 
  .dropdown-sublink {
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--accent);
    background-color: var(--dark-green);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: 600;
    transition: background-color .3s;
  }
  
  .dropdown-link i, 
  .dropdown-sublink i {
    font-size: 1.25rem;
    font-weight: initial;
  }
  
  .dropdown-link:hover, 
  .dropdown-sublink:hover {
    background-color: var(--sub-dark-green);
  }
  
  .dropdown-menu, 
  .dropdown-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
  }
  
  /* Show dropdown menu & submenu */
  .dropdown-item:hover .dropdown-menu, 
  .dropdown-subitem:hover > .dropdown-submenu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
  }
  
  /* Rotate dropdown icon */
  .dropdown-item:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
  
  /*=============== DROPDOWN SUBMENU ===============*/
  .dropdown-add {
    margin-left: auto;
  }
  
  .dropdown-sublink {
    background-color: var(--dark-green);
  }
  
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 340px) {
    .container {
      margin-inline: 1rem;
    }
  
    .nav-link {
      padding-inline: 1rem;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1118px) {
    .container {
      margin-inline: auto;
    }
  
    .nav {
      height: calc(3.5rem + 2rem);
      display: flex;
      justify-content: space-between;
    }
    .nav-toggle {
      display: none;
    }
    .nav-list {
      height: 100%;
      display: flex;
      column-gap: 3rem;
    }
    .nav-link {
      height: 100%;
      padding: 0;
      justify-content: initial;
      column-gap: .25rem;
    }
    .nav-link:hover {
      background-color: transparent;
    }
  
    .dropdown-item, 
    .dropdown-subitem {
      position: relative;
    }
  
    .dropdown-menu, 
    .dropdown-submenu {
      max-height: initial;
      overflow: initial;
      position: absolute;
      left: 0;
      top: 6rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, top .3s;
    }
  
    .dropdown-link, 
    .dropdown-sublink {
      padding-inline: 1rem 3.5rem;
    }
  
    .dropdown-subitem .dropdown-link {
      padding-inline: 1rem;
    }
  
    .dropdown-submenu {
      position: absolute;
      left: 100%;
      top: .5rem;
    }
  
    /* Show dropdown menu */
    .dropdown-item:hover .dropdown-menu {
      opacity: 1;
      top: 5.5rem;
      pointer-events: initial;
      transition: top .3s;
    }
  
    /* Show dropdown submenu */
    .dropdown-subitem:hover > .dropdown-submenu {
      opacity: 1;
      top: 0;
      pointer-events: initial;
      transition: top .3s;
    }
  }

  @media(max-width: 1538px){
    .scroll{
        width: 600px;
    }
} 
@media(max-width: 1337px){
    .scroll{
        width: 400px;
    }
} 
@media(max-width: 1000px){
    .scroll{
        width: 300px;
    }
} 
@media(min-width: 1920px){
    .scroll{
        width: 800px;
    }
} 
@media(min-width: 2200px){
    .scroll{
        width: 900px;
    }
} 
@media(min-width: 2500px){
    .scroll{
        width: 1000px;
    }
} 

@media(max-width: 800px){
    .landing{
        flex-direction: column;
    }
    .scroll{
        width: 90%;
    }
}