@charset "utf-8";
/* CSS Document */



html, body {
    margin: 0;
    padding: 0;
}
    #main {
        background-color: #e1e6f0;
        background-image: url("truck.svg");
        background-position: bottom;
        background-repeat: no-repeat;
        
    
        
        height: 100vh; /* instead of min-height */
        
}

#texts {
      padding-top: 20vh;
    overflow: hidden; /* prevents any scroll */
        display: flex;
        flex-direction: column;
        gap: 20px; /* controls spacing between ALL children */

        justify-content: flex-start; /* aligns content to top */
        align-items: center;         /* keeps it centered horizontally */

        text-align: center;
}

    #main h1,
    #main h2,
    #main p {
        text-align: center;
        color: #457aaa;
        font-family: 'Montserrat', sans-serif;
        margin:0;
}
    

h2 {
    font-size: 2em;
}

h1 {
    font-size: 4em;
    margin:10px;
}

p {
    font-size: 1.2em;
}

    #main img {
        display: block;
        margin: 0 auto; /* centers images */
        
         max-width: 100%;
        height: auto;
    }


    
    a:link, a:visited {
      background-color: #ffffff;
      color: #457aaa;
      padding: 14px 25px;
      text-align: center;
        border-radius: 5px;
      text-decoration: none;
      display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;

}

a:hover, a:active {
  background-color: #acbdd6;
    color: #1d3048;
    font-weight:700;
   
}

@media (max-width: 1024px) {
   
           #main {
        min-height: 80vh;
        background-size: 100%;           
    }
    
    #texts {
           padding-top: 20vh;
    }
    
    img {
    }
    
     h2 {
        font-size: 3em;
    }
    
   h1 {
        font-size: 5em;
    }
    
 p {
        font-size: 1.5em;
        font-weight: 600;
    }
    
       a:link, a:visited {
           
           font-size: 1.6em;
      background-color: #ffffff;
      color: #457aaa;
      padding: 14px 25px;
      text-align: center;
        border-radius: 5px;
      text-decoration: none;
      display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;

}
    
}

@media (max-width: 768px) {
    #main {
            background-size: 140%;
    }
    
    #main p {
        font-size: 1.8em;
    }
    
    #main h1 {
        font-size: 4em;
    }
    
    #main h2 {
        font-size: 2em;
    }
    
     a:link, a:visited {
           
           font-size: 2em;
      background-color: #ffffff;
      color: #457aaa;
      padding: 14px 25px;
      text-align: center;
        border-radius: 5px;
      text-decoration: none;
      display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;

}
    
    #texts {
            gap: 40px;
    }

}

@media (max-width: 600px) {
    #main {
        min-height: 90vh;
        background-size: 120%;
    }
    
      h2 {
        font-size: 1.9em!important;
    }
    
  h1 {
        font-size: 4em!important;
    }
    
   p {
        font-size: 1.9em;
        font-weight: 600;
    }
    
     a:link, a:visited {
           
           font-size: 2em;
      background-color: #ffffff;
      color: #457aaa;
      padding: 14px 25px;
      text-align: center;
        border-radius: 5px;
      text-decoration: none;
      display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;

}
}

@media (max-width: 425px) {
    #main {
        min-height: 90vh;
        background-width: 150%;
    }
    
     h2 {
        font-size: 3em!important;
    }
    
 h1 {
        font-size: 5em!important;
    }
    
   p {
        font-size: 3em!important;
    }
    
     a:link, a:visited {
           
           font-size: 3em;
      background-color: #ffffff;
      color: #457aaa;
      padding: 14px 25px;
      text-align: center;
        border-radius: 5px;
      text-decoration: none;
      display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;

}
}