:root{
    --black : #2a2a2a;
    --grey: #777777;
    --blue: #2F98D4;
    --bg: #E9EDEE;
    --white: #fff;
    font-size: 62.5%;
}
body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #E9EDEE 90%, white 95%, white 100%);
    background-repeat: no-repeat;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: normal;
    color: #2A2A2A;
    overflow-x:hidden;
}
.form-hero{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.navbar{
    z-index: 1;
}
hr{
    border-color: #D8D8D8;
    border-width: .15rem;
}
.legal a{
    font-size: 1.8rem;
    text-decoration: none;
}
#hero{
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: start;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-color: var(--bg);
    padding-top: 4rem;

}
.tag{
    background: rgba(255, 255, 255, 0.5);
    padding: 1.2rem 1.5rem;
    border-radius: 1rem;
    display: inline-block;
    
}
.tag p{
    margin-bottom: 0;
}
.button{
        padding: 2.3rem 2.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: start;
        gap: 1rem;
        
}
.button{
    text-decoration: none !important;
}
.button img{
    width: 1.2rem;
}
.SocialAndLegal{
    display: flex;
    align-items: center;
    gap:2rem 6rem;
    flex-wrap: wrap;
}
.bottom-liner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.form-group input, .form-group textarea{
    width: 100%;
}
.legal{
    display: flex;
    gap: 3.5rem;
    align-items: center;
}
.legal > *{
    margin-bottom: 0;
}
.ma-circle{
    background-color: var(--black);
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
}
.ma-card-icon img{
    width: 7rem;
}
.social{
    display: flex;
    gap: 2rem;
    align-items: center;
}
.social img{
    width: 4rem;
}
.logo{
    width: 21rem;
}
/* Colors */

.black{
    color: var(--black);
}
.grey{
    color: var(--grey);
}
.blue{
    color: var(--blue);
}
.white{
    color: var(--white);
}
.black-bg{
    background-color: var(--black);
}
.grey-bg{
    background-color: var(--grey);
}
.blue-bg{
    background-color: var(--blue);
}
.white-bg{
    background-color: var(--white);
}
.green-bg{
    background-color: var(--bg);
}
.section-title{
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}
/* End of Colors */

.container{
    max-width: 83.33%;
    margin: auto;
}
#scrollable .container{
    max-width: calc(83.33% + 50px) ;
    margin: auto;
}
#scrollable{
padding: 0 25px;
z-index:2;
position: relative;
background:linear-gradient(180deg, #E9EDEE 90%, white 95%, white 100%);
}
#scrollable section{
    position: relative;
}
.vertical, .horizontal{
    position: relative;
}
.br-2{
    border-radius: 2rem;
}
.o-8{
    opacity: 0.8;
}
.o-4{
    opacity: 0.4;
}
.text-gradient-black-bg{
    background: linear-gradient(to bottom, #fff, #808080); /* Define your gradient colors */
    -webkit-background-clip: text; /* Makes the gradient visible on text */
    -webkit-text-fill-color: transparent; /* Fills the text with transparency */
    background-clip: text; /* For compatibility */
    color: transparent; /* Ensures no fallback color interferes */
}
.text-gradient-white-bg{
    background: linear-gradient(to bottom, #2a2a2a, #747474); /* Define your gradient colors */
    -webkit-background-clip: text; /* Makes the gradient visible on text */
    -webkit-text-fill-color: transparent; /* Fills the text with transparency */
    background-clip: text; /* For compatibility */
    color: transparent; /* Ensures no fallback color interferes */
}
.grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: clamp(2rem, 5.815vw, 7.815vw);
  }
  .flex-layout{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(15px, 1.56vw, 3rem);
  }
  .grid-two{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns on desktop */
    column-gap: clamp(2rem, 5vw, 15rem);
    row-gap: 5rem;
}
  .grid-two-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns on desktop */
    justify-items: end;
}
.big-image{
    display: flex;
    align-items: end;
    justify-content: end;
    height: 100%;
}
.big-image.flipped{
    justify-content: start;
}
.big-image img{
    width: clamp(100%, 30.2vw, 30.2vw);

}
  .footer-content {
    background: url(../resources/images/general/footer-bg.png);
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
  }
  @media (max-width:1200px){
    #hero{
        position: relative !important;
    }
  }
@media (max-width: 1024px) {
    .container{
        max-width: 96% !important;
        margin: auto;
    }
    .grid-four {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on 1024px and below */
      }
      #scrollable{
        padding: 0;
        margin: 0 10px;
       

        }

}
@media (max-width: 768px) {
    .grid-four {
      grid-template-columns: 1fr; /* 1 column on 768px and below */
    }
    .grid-two, .grid-two-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 4 columns on desktop */
      }
    .row{
        gap: 1rem;
    }
    br{
        display: none;
    }
    .legal{
        gap: 1.5rem;
    }
  }