* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #003130;
    font-size: 16px;
    
}

body::-webkit-scrollbar {
    width: 1em;
  }
   
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(12, 136, 99, 0.3);
  }
   
  body::-webkit-scrollbar-thumb {
    background-color: #1b8c72;
    outline: 1px solid #003130;
  }


body content { 
    min-height:100vh;  
    max-width: auto;
    margin:0; 
    display:flex; 
    flex-direction:column; 
    justify-content: center;
    align-items: center;
    
   
  
}

img {
    border: #55d7b9 solid 2px;
    border-radius: 25px;
    width: 100%;
    display: block;
}




header {
    background-color: black;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}

.logo {
    color: #55d7b9;
    padding: 10px;
    font-weight: 500;
    font-size: 60px;
    font-family: 'Lovers Quarrel', serif;
}

header ul {
    list-style: none;
    display: flex;

}

header ul li a {
    padding: 9px 12px;
    display: block;
    background-color: #1b8c72;
    text-decoration: none;
    font-weight: 500;
    position:relative;
    color:black;
    margin:2px 14px;
    font-size: 18px;
    transition-duration: 1s;
}

header ul li a:active {
    color:#55d7b9;
}

header ul li a:hover {
    color:rgb(156, 218, 214);
    transition-duration: 1s;
}

header ul li a::before {
    content:'';
    height:2px;
    width:0px;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#55d7b9;
    transition-duration: 1s;

}

header ul li a:hover::before {
    width:100%;
    transition-duration: 1s;
    background-color:#1b8c72;
}

.content {

  
        padding: 20px;
        max-width: 960px;
        margin: auto;

        box-shadow:
        inset 
        0 0 0 2px rgb(255, 255, 255),
        0.3em 0.3em 1em #1b8c72;
     

}




.about {
    padding: 20px;
}

h1 {
    font-family: 'Lovers Quarrel', serif;
    font-weight: 500;
    font-size: 50px;
    color: #1b8c72;
    text-align: center;
  
}

h3 {
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
   
}

p {
    padding: 5px;
}



.testimonial-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: aliceblue;
    overflow-x: scroll;
   margin-left: 25%;
  
    }



.testimonial-container::-webkit-scrollbar {
    width: 1em;
  }
   
  .testimonial-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(12, 136, 99, 0.3);
  }
   
  .testimonial-container::-webkit-scrollbar-thumb {
    background-color: #1b8c72;
    outline: 1px solid #003130;
  }
    
    
    
    .testimonial1,
    .testimonial2,
    .testimonial3,
	.testimonial4 {
        width: 400px;
        height: fit-content;
        
        
    }
    
    
    
    
    
    blockquote {
        border:none;
        font-family:Georgia, "Times New Roman", Times, serif;
        quotes: "\201C""\201D""\2018""\2019";
        margin: 10px;
        padding: 5px;
        background-color: ghostwhite;
        position: relative;
    }
    
    blockquote  {
    font-size:16px;
    margin-top: 30px;
    padding: 10px;
    
    }
    
    blockquote:before { 
    content: open-quote;
    font-weight: bold;
    font-size:30px;
    color:#1b8c72;
    position: absolute;
    margin-top: -20px;
    margin-left: -10px;
    } 
    
    blockquote:after { 
    content: close-quote;
    font-weight: bold;
    font-size:30px;
    color:#1b8c72;
    position: absolute;
    margin-top: 10px;
    
      
    }
    
    .testimonial-name,
    .testimonial-title {
        text-align:right;
        padding-right: 10px;
    }
    
    .testimonial-name {
    font-weight: 700;
    }
    
    .testimonial-title {
    font-style: italic;
    margin-top: 0;
    
    }




.price {
    text-align: end;
    font-weight: 600;
}







.modal {
    position: fixed;
    z-index: 9999;
    padding: 50px 0 50px 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .4);

    display: none; 
}

.modal h1 {
    color: #55d7b9;
    padding: 10px;
    font-weight: 500;
    font-size: 60px;
    font-family: 'Lovers Quarrel', serif;
    background-color: #000;
}

.modalContent {
    width: 50%;
    font-family: 'Times New Roman', Times, serif;
    font-size: large;
  border: none;
  background-color:rgb(183, 234, 234);
    margin: auto;
    padding: 15px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 1px 1px 14px 3px rgba(0,0,0,0.75);	
}

.close {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: 700
}

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

























footer {
 
    background-color: black;
    color:white;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
footer h1 {
    color: #55d7b9;
    font-weight: 500;
    font-size: 40px;
    font-family: 'Lovers Quarrel', serif;
}
footer a {
color: #1b8c72;
}

footer a:active {
    color:#55d7b9;
}

footer a:hover {
    color:rgb(156, 218, 214);
    transition-duration: 1s;
}

.footer1 {
    display:flex;
    flex-direction: column;
    align-items: center;
    color:white;
    margin-top:15px;
}

.footer2 {
    display: flex;
    width:100%;
    justify-content:space-evenly;
    align-items: center;
    text-decoration: none;
    flex-wrap: wrap;
}

.footer0 {
    font-weight:1200;
    transition-duration: 1s;
}

.footer3 {
    margin-top:60px;
    margin-bottom: 20px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #1b8c72;
    text-align: center;
}

.social-media {
    display:flex;
    justify-content: center;
    color:white;
    flex-wrap: wrap;
}

.social-media a {
    color:white;
    margin:20px;
    border-radius: 5px;
    margin-top:10px;
    color:white;
}

.social-media a ion-icon {
    color: #55d7b9;
    background-color: black;
}

.social-media a:hover ion-icon {
    color: #1b8c72;
    transform: translateY(5px);
}

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

    header {
        height:150px;
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;
    }

    content {
        height:250px;
        width: 375px;
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;

    }

 footer {
    height:350px;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
 }

 .footer2 {
    display: flex;
    flex-direction: column;
   
 }

 img {
    max-width: 100%;
    height: auto;
    block-size: auto;
  }

  .scroll {
    overflow-x: scroll;
    height: 250px;
    min-width: 300px;
    padding: 10px;

  }
  
  .project-image {
    height: 100%;
    min-width: 260px;
  }

  .testimonial-container {

    margin-left: 0;
    max-width: 100%;
    height: auto;
   
  
    }




  }