html,body{
    background-color: #fff;
    font-family: 'Dosis', sans-serif;
    overflow-x: hidden !important;
    margin: 0px !important;
    padding: 0px !important;
    scroll-padding-top: 50px;
    scroll-behavior: smooth;
}

*{
    text-decoration: none !important;
}

/* Nav Bar */

.nav{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    height: 130px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px 0 40px;
    background-color:transparent;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30); 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} 

.white{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 35px 0 40px;
  background-color:white;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30); 
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
} 

.nav .links a{
    margin-right: 55px;
    font-size: 20px;
    font-weight: 300;
    font-weight: bold;
    color: black;
}


.nav .links a:hover{
    /* margin-right: 5px; */
    font-size: 22px;
    font-weight: 500;
    color:black;
}


.nav .links a:focus, .nav .links a:active{
    /* margin-right: 5px; */
    font-size: 22px;
    font-weight: 500;
    color:black;
}

.nav .links{
    color: black;
}


.nav .links:hover{
    /* margin-right: 5px; */
    font-size: 22px;
    font-weight: 500;
    color:black;
}


.nav .links:focus, .nav .links:active{
    /* margin-right: 5px; */
    font-size: 22px;
    font-weight: 500;
    color:black;
}


.nav .logo{
    margin-left: 16px !important;
    width: 68px;
    height: 100px;
} 

/* Landing Page */

#wrap {
    position: absolute;
    z-index: 1; 
    top: 0;
    left: 0;
    border: 0;
    width: 100% !important;
    height: 100%;
	/* margin:0; */
    padding:0;
    background: #f4f0ec;
}

/* Overlay */

*, *:before, *:after {
    box-sizing: border-box;
}

.overlay{
    margin-top: 1000px;
    padding: 50px;
    text-align: center;
    display: inline-block;
}

.overlay2{
    margin-top: 5px;
    padding: 50px;
    text-align: center;
}
  
.card img{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  height: 200px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.column {
    float: left;
    width: 30% !important;
    margin-bottom: 16px;
    padding: 0 8px;
    margin-left: 2rem !important;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 8px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 120px !important;
    display: inline-block;
    padding-bottom: 5px;
}
 
.overlay .card:hover img {
    transform: scale(1.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.overlay2 .card:hover img {
    transform: scale(1.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.info{
    height: 800px;
    text-align: center;
    position: relative;
    text-align: center;
    z-index: 0;
}

.info img{
    height: 85%;
    width: 100%;
    padding: 0 !important;
    z-index: 1;
}

.infoText{
    align-items: center;
    text-align: center;
    position: absolute;
    top: 130px;
    left: 690px;
    z-index: 10 !important;
}

.infoText h1{
    font-size: 50px;
    text-align: center;
    align-items: center;
}

.infoText h2{
    text-align: center;
    align-items: center;
    margin-top: 40px;
}

.infoText ul li{
    font-size: 20px;
    text-align: center;
    align-items: center;
    text-decoration: none;
    list-style-type: none;
}

/* Footer */

.footer{
    margin-top: 800px;
    height: 200px;
    width: 100%;
    background-color: #f4f0ec;
    padding: 80px;
}

.footer .love{
    margin-right: 95px !important;
    align-items: center;
    text-align: center;
}



    @media screen and (max-width: 1900px){
        .nav{
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            height: 130px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 35px 0 40px;
            background-color:transparent;
            box-shadow: 0 19px 38px rgba(0,0,0,0.30); 
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        } 
        
        .white{
          position: fixed;
          z-index: 1000;
          top: 0;
          right: 0;
          left: 0;
          height: 130px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 0 35px 0 40px;
          background-color:white;
          box-shadow: 0 19px 38px rgba(0,0,0,0.30); 
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 20px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 68px;
            height: 100px;
        } 
    }

    @media screen and (max-width: 1300px){
        .nav{
          /* flex-direction: column; */
          justify-content: space-between;
          padding: 20px;
          height: auto;
          overflow-y: hidden;
        } 
        
        .white{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 20px;
            height: auto;
            overflow-y: hidden;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 20px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 58px;
            height: 90px;
        } 
    }

     @media screen and (max-width: 1300px){
        .nav{
          /* flex-direction: column; */
          justify-content: space-between;
          padding: 20px;
          height: auto;
          overflow-y: hidden;
        } 
        
        .white{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 20px;
            height: auto;
            overflow-y: hidden;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 20px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 58px;
            height: 90px;
        } 
    }

    @media screen and (max-width: 1200px){
        .nav{
          /* flex-direction: column; */
          justify-content: space-between;
          padding: 20px;
          height: auto;
          overflow-y: hidden;
        } 
        
        .white{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 20px;
            height: auto;
            overflow-y: hidden;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 20px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 58px;
            height: 90px;
        } 
    }

    @media screen and (max-width: 1024px){
        .nav{
          /* flex-direction: column; */
          justify-content: space-between;
          padding: 20px;
          height: 130px;
          overflow-y: hidden;
        } 
        
        .white{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 20px;
            height: 130px;
            overflow-y: hidden;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 30px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 58px;
            height: 90px;
        } 
    }

    @media screen and (max-width: 800px){
        .nav{
          /* flex-direction: column; */
          justify-content: space-between;
          padding: 20px;
          height: auto;
          overflow-y: hidden;
        } 
        
        .white{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 20px;
            height: auto;
            overflow-y: hidden;
        } 
        
        .nav .links a{
            margin-right: 55px;
            font-size: 25px;
            font-weight: 300;
            font-weight: bold;
            color: black;
        }
        
        
        .nav .links a:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links a:focus, .nav .links a:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        .nav .links{
            color: black;
        }
        
        
        .nav .links:hover{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .links:focus, .nav .links:active{
            font-size: 22px;
            font-weight: 500;
            color:black;
        }
        
        
        .nav .logo{
            width: 58px;
            height: 90px;
        } 
    }


    @media screen and (max-width: 500px), screen and (max-width: 400px){
        .nav{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 15px;
            height: auto;
            overflow-y: hidden;
          } 
          
          .white{
              /* flex-direction: column; */
              justify-content: space-between;
              padding: 15px;
              height: auto;
              overflow-y: hidden;
          } 
          
          .nav .links a{
              margin-right: 45px;
              font-size: 16px;
              font-weight: 300;
              font-weight: bold;
              color: black;
          }
          
          
          .nav .links a:hover{
              font-size: 18px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .links a:focus, .nav .links a:active{
              font-size: 18px;
              font-weight: 500;
              color:black;
          }
          
          .nav .links{
              color: black;
          }
          
          
          .nav .links:hover{
              font-size: 18px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .links:focus, .nav .links:active{
              font-size: 18px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .logo{
              width: 48px;
              height: 80px;
          } 
    }

    @media screen and (max-width: 375px){
        .nav{
            /* flex-direction: column; */
            justify-content: space-between;
            padding: 10px;
            height: auto;
            overflow-y: hidden;
          } 
          
          .white{
              /* flex-direction: column; */
              justify-content: space-between;
              padding: 10px;
              height: auto;
              overflow-y: hidden;
          } 
          
          .nav .links a{
              margin-right: 15px;
              font-size: 12px;
              font-weight: 300;
              font-weight: bold;
              color: black;
          }
          
          
          .nav .links a:hover{
              font-size: 14px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .links a:focus, .nav .links a:active{
              font-size: 14px;
              font-weight: 500;
              color:black;
          }
          
          .nav .links{
              color: black;
          }
          
          
          .nav .links:hover{
              font-size: 14px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .links:focus, .nav .links:active{
              font-size: 14px;
              font-weight: 500;
              color:black;
          }
          
          
          .nav .logo{
              width: 28px;
              height: 50px;
          } 
    }


    @media screen and (max-width: 1900px){

        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 50px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: 5px;
            padding: 50px;
            text-align: center;
        }
        
        .card img{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 2rem !important;
        }
        
        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            margin-bottom: 120px !important;
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.7);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.7);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            height: 800px;
            /* width: 100%; */
            text-align: center;
            /* background-color: #f4f0ec; */
            position: relative;
            text-align: center;
            /* display: inline-block; */
            z-index: 0;
        }
        
        .info img{
            height: 85%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 130px;
            left: 650px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer .love{
            align-items: center;
            text-align: center;
        }
    }

    @media screen and (max-width: 1600px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 11rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 510px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love{
            text-align: center;
        }
    }

    @media screen and (max-width: 1500px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 11rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 410px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love{
            text-align: center;
        }
    }

    @media screen and (max-width: 1300px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1450px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 150px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 2rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 220px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }
    }

    @media screen and (max-width: 1250px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 8rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 290px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love{
            text-align: center;
        }
    }

    @media screen and (max-width: 1200px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 8rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 290px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love{
            text-align: center;
        }
    }

    @media screen and (max-width: 1100px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 5rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 290px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love p{
            text-align: center;
            margin-right: 150px !important;

        }
    }

    @media screen and (max-width: 1000px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1000px;
            padding: 20px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -200px !important;
            padding: 20px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 200px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 5rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 60%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 170px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 50px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
        }
        
        .infoText ul li{
            font-size: 20px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1200px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
        
        .footer .love{
            text-align: center;
        }
    }

    @media screen and (max-width: 800px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 1150px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 150px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            padding: 0 8px;
            margin-left: 1rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            margin-left: 95px !important;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            height: 40%;
            width: 100%;
            padding: 0 !important;
            z-index: 1;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 10px;
            left: 190px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 30px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 20px;
        }
        
        .infoText ul li{
            font-size: 18px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 1000px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
    }

    @media screen and (max-width: 540px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 850px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 100px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 29% !important;
            margin-bottom: 16px;
            /* padding: 0 8px; */
            margin-left: 3rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            margin-left: 1px !important;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 40px;
            left: 135px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 20px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 15px;
        }
        
        .infoText ul li{
            font-size: 14px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 800px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
            align-items: center;
        }

        .love p{
            font-size: 14px;
            text-align: center;
            margin-right: 150px !important;
        }
    }

    @media screen and (max-width: 500px), screen and (max-width: 400px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 900px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 90px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 16px;
            /* padding: 0 8px; */
            margin-left: 1.1rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            margin-left: 8px !important;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 40px;
            left: 65px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 20px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 16px;
        }
        
        .infoText ul li{
            font-size: 14px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 800px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }
    }


    @media screen and (max-width: 375px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 700px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 80px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 29% !important;
            margin-bottom: 16px;
            /* padding: 0 8px; */
            margin-left: 1rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            margin-left: 1px !important;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 40px;
            left: 45px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 20px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 15px;
        }
        
        .infoText ul li{
            font-size: 14px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 800px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }

        .love p{
            font-size: 14px;
        }
    }

    @media screen and (max-width: 360px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 650px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 60px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 29% !important;
            margin-bottom: 16px;
            /* padding: 0 8px; */
            margin-left: 2rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            margin-left: 0 !important;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 40px;
            left: 40px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 20px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 15px;
        }
        
        .infoText ul li{
            font-size: 14px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 600px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }

        .love p{
            font-size: 14px;
        }
    }

    @media screen and (max-width: 320px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 650px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 60px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 40% !important;
            margin-bottom: 10px;
            /* padding: 0 8px; */
            margin-left: 0.1rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 40px;
            left: 17px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 20px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 15px;
        }
        
        .infoText ul li{
            font-size: 14px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            list-style-type: none;
        }

        .footer{
            margin-top: 600px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }

        .love p{
            font-size: 12px;
        }
    }

    @media screen and (max-width: 300px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 650px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -370px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 50px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 40% !important;
            margin-bottom: 10px;
            /* padding: 0 8px; */
            margin-left: 3.5rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 60px;
            left: 26px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 15px;
            text-align: center;
            align-items: center;
        }
        
        .infoText h2{
            text-align: center;
            align-items: center;
            margin-top: 40px;
            font-size: 10px;
        }
        
        .infoText ul li{
            font-size: 12px;
            text-align: center;
            align-items: center;
            list-style-type: none;
        }

        .footer{
            margin-top: 1300px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }

        .love p{
            float: left;
            font-size: 10px;
            text-align: center;
        }
    }

    @media screen and (max-width: 280px){
    
        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        .overlay{
            margin-top: 650px;
            padding: 30px;
            text-align: center;
            display: inline-block;
        }
        
        .overlay2{
            margin-top: -420px !important;
            padding: 30px;
            text-align: center;
        }
        
        .card img{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            height: 50px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .column {
            float: left;
            width: 30% !important;
            margin-bottom: 10px;
            /* padding: 0 8px; */
            margin-left: 1rem !important;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            /* margin: 8px; */
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* margin-bottom: 120px !important; */
            display: inline-block;
            padding-bottom: 5px;
        }

        .overlay .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .overlay2 .card:hover img {
            transform: scale(1.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        .info{
            text-align: center;
            position: relative;
            text-align: center;
            z-index: 0;
        }
        
        .info img{
            /* height: 20%;
            width: 100%; */
            padding: 0 !important;
            z-index: 1;
            height: 250px;
            background-size: cover;
        }
        
        .infoText{
            align-items: center;
            text-align: center;
            position: absolute;
            top: 30px;
            left: 50px;
            z-index: 10 !important;
        }
        
        .infoText h1{
            font-size: 15px;
            text-align: center;
            /* align-items: center; */
        }
        
        .infoText h2{
            text-align: center;
            /* align-items: center; */
            margin-top: 40px;
            font-size: 10px;
        }
        
        .infoText ul li{
            font-size: 12px;
            text-align: center;
            /* align-items: center; */
            list-style-type: none;
        }

        .footer{
            margin-top: 600px;
            height: 200px;
            width: 100%;
            background-color: #f4f0ec;
            padding: 80px;
        }

        .love p{
            float: left;
            font-size: 10px;
            text-align: center;
        }
    }



/* About Page */

  *, *:before, *:after {
    box-sizing: inherit;
  }

  .aboutSection{
      margin-top: 200px;
   }
  
  .about {
    float: left;
    width: 47%;
    margin-bottom: 16px;
    margin-left: 25px !important;
    padding: 0 8px;
  }
  
  .section {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 8px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 670px;
  }

  .section img{
    padding-top: 20px;
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    align-items: center;
  }
  
  .words {
    padding: 0 20px;
  }

  .words h2{
      text-align: center;
      align-items: center;
      margin-top: 30px;
      font-size: 35px;
  }

  .words p{
      font-size: 18px;
  }
  
  .words::after, .aboutSection::after {
    content: "";
    clear: both;
    display: table;
  }
  
  .words {
    color:black;
  }

  .words .title{
      font-style: italic;
      font-size: 23px;
  }

  @media screen and (max-width: 1900px) {
    .about {
      float: left;
      margin-left: 80px !important;
      width: 40%;
      display: block;
    }

    .section img{
        border-radius: 50%;
    }
      
  }
  
  @media screen and (max-width: 1300px) {
    .about {
      float: left;
      margin-left: 65px !important;
      width: 40%;
      display: block;
    }

    .section img{
        border-radius: 50%;
    }

  }

  @media screen and (max-width: 1000px) {
    .about {
      float: left;
      margin-left: 50px !important;
      width: 40%;
      display: block;
    }

    .section img{
        border-radius: 50%;
    }
  }

  @media screen and (max-width: 1024px) {
    .about {
      float: left;
      margin-left: -7px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 160px;
    }

    .section img{
        border-radius: 50%;
    }
  }
  
  @media screen and (max-width: 800px) {
    .about {
      float: left;
      margin-left: auto !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 170px;
    }

    .section img{
        border-radius: 50%;
    }
  }

  @media screen and (max-width: 768px) {
    .about {
      float: left;
      margin-left: -7px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 170px;
    }

    .section img{
        border-radius: 50%;
    }
  }

  @media screen and (max-width: 650px) {
    .about {
        float: left;
        margin-left: -7px !important;
        width: 100%;
        display: block;
    }

    .aboutSection{
        margin-top: 170px;
    }

  }

  @media screen and (max-width: 500px) {
    .about {
      float: left;
      margin-left: auto !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 150px;
    }
  }

  @media screen and (max-width: 414px) {
    .about {
      float: left;
      margin-left: -8px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 150px;
    }
  }

  @media screen and (max-width: 411px) {
    .about {
      float: left;
      margin-left: -7px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 150px;
    }
  }

  @media screen and (max-width: 375px) {
    .about {
      float: left;
      margin-left: -7px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 100px;
    }
  }

  @media screen and (max-width: 360px) {
    .about {
      float: left;
      margin-left: -7px !important;
      width: 100%;
      display: block;
    }

    .aboutSection{
        margin-top: 100px;
    }
  }


  /* Contact Page */

  .contact{
    position: relative;
    align-items: center;
    text-align: center;
    margin-top: 190px;
    z-index: 10px;
  }

  .contact img{
    padding: 0 !important;
    z-index: 1;
    width: 100%; 
    background-size: cover; 
  }

.contactText{
    align-items: center;
    text-align: center;
    position: absolute;
    top: 2%;
    left: 38%;
    z-index: 10 !important;
}

.contactText h1{
    align-items: center;
    text-align: center;
    font-size: 100px;
}

.contactText h2{
    padding-top: 100px !important;
    align-items: center;
    text-align: center;
    font-size: 30px;
}

.contactText p{
    /* padding-top: -15px !important; */
    align-items: center;
    text-align: center;
    font-size: 22px;
}

@media screen and (max-width: 1600px) {
    .contact{
        position: relative;
        align-items: center;
        text-align: center;
        margin-top: 230px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        background-size: cover; 
    }

      .contactText{
        align-items: center;
        text-align: center;
        position: absolute;
        top: 2%;
        left: 36%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 60px !important;
        align-items: center;
        text-align: center;
        font-size: 30px;
    }    
}

@media screen and (max-width: 1300px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 270px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 80px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 36%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 1024px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 530px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 32%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}


@media screen and (max-width: 1000px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 32%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 900px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 400px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 32%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 770px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 400px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 26%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 750px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 400px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 26%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 600px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 400px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 20%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 550px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 270px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 300px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 15%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 10px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 500px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 330px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 400px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 60px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 12%;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }    
}

@media screen and (max-width: 411px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 280px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 250px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 50px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 43px;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 10px !important;
        align-items: center;
        text-align: center;
        font-size: 20px;
    }   
    
    .contactText p{
        font-size: 18px;
    }   
}

@media screen and (max-width: 414px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 230px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 250px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 50px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 48px;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 10px !important;
        align-items: center;
        text-align: center;
        font-size: 20px;
    }   
    
    .contactText p{
        font-size: 18px;
    }   
}

@media screen and (max-width: 400px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 230px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 250px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 50px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 13px;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 10px !important;
        align-items: center;
        text-align: center;
        font-size: 20px;
    }   
    
    .contactText p{
        font-size: 18px;
    }   
}

@media screen and (max-width: 380px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 200px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 250px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 30px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 45px;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 18px;
    }   
    
    .contactText p{
        font-size: 16px;
    }
}

@media screen and (max-width: 350px) {
    .contact{
        align-items: center;
        text-align: center;
        margin-top: 200px;
        z-index: 10px;
    }

    .contact img{
        padding: 0 !important;
        z-index: 1;
        height: 250px;
        background-size: cover; 
    }

    .contactText h1{
        font-size: 30px;
    }

      .contactText{
        align-items: center;
        text-align: center;
        left: 13px;
        z-index: 10 !important;
    }

    .contactText h2{
        padding-top: 30px !important;
        align-items: center;
        text-align: center;
        font-size: 18px;
    }   
    
    .contactText p{
        font-size: 16px;
    }   
}