*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}



body {
  height: 100%;
  width: 100%;
  background: url('images/Coffee2.png');
}

body.active{
  overflow: hidden;
}

.cover{
  width: 100%;
  height: 100%;
  background: transparent;
}

.menu-cover{
  width: 100%;
  height: 100%;
  background-color: #EDECDF;
}

.navbar{
  display: flex;
  justify-items: center;
  background-color: #f8bbd0;
  padding: 0rem 1rem;
  width: 100%;
  position: fixed;
  z-index: 10000;
}

.logo{
  width: 70px;
  height: 70px;
  margin-right: 1rem;
  border-radius: 140px;
}

.navbar-logo{
  width: 100%;
  display: flex;
  color: black;
  text-decoration: none;
  padding-top: 1rem;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 3rem;
}

.navbar-logo p {
  font-family: "Dancing Script";
  font-optical-sizing: auto;
  font-style: normal;
}


.brand img{
  width: 70%;
  height: 70%;
  margin-top: 2rem;
  border-radius: 110px;
}

.brandName{
  color: rgb(72, 60, 50);
  font-size: 2.4rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar-toggle{
  cursor: pointer;
  display: none;
}

.navbar-menu{
    display: flex;
    padding: 1rem 0;
}

.navbar-menu li{
    padding: 0.8rem;
    list-style: none;
    cursor: pointer;
    transition: all ease-in-out 1.4s;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.navbar-menu li:hover{
    margin-bottom: 2rem;
    transition: all ease-in-out 1.4s;
}

.navbar-menu li a{
    font-size: 1.2rem;
    color: black;
    padding: 0.8rem;
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    transition: all ease-in-out 1.4s;
}

.navbar-menu li a:hover{
    color: black;
    padding: 0.8rem;
    text-decoration: underline;
    transition: all ease-in-out 1.4s;
}

.hero-container{
  height: 100%;
  width: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr 2fr;
  z-index: auto;
}

.hero-header{
  width: 100%;
  height: 70%;
  display: flex;
  position: relative;
  align-items: right;
  padding-left: 1rem;
  flex-direction: column;
}

.hero-header .title{
  font-size: 4.1rem;
  color: rgb(92, 64, 51);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero-header .text{
  width: 100%;
  margin: 0px;
  color: rgb(41, 0, 1);
}

.hero{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero video{
  width: 80%;
  height: 100vh;
  object-fit: cover;
  border-radius: 30px;
  margin: 3rem 0rem;
  box-shadow: rgb(41, 0, 1) 0px 20px 30px 5px;
}


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

    .brand{
      margin-left: 2rem;
    }

    .hero-header{
      display: flex;
      position: relative;
      top: 0px;
      right: 0px;
      padding: 0rem 1.2rem;
    }


    .hero-header .title{
      position: relative;
      top: 0px;
      padding: 0rem 1.2rem;
    }

    .hero-header .text{
      padding-bottom: 2rem;
    }

    .navbar-heading{
      display: flex;
      padding: 0rem 2rem;
      flex-direction: column;
    }

    .navbar-container{
        display: flex;
        gap: 1.2rem;
        position: relative;
        align-items: center;
        justify-content: space-between;
    }

    #menu-bar.active .bar:nth-child(2){
        opacity: 0;
    }

    #menu-bar.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }

    #menu-bar.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero{
      display: flex;
      width: 100%;
      height: 100%;
      top: 0px;
      position: relative;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem;
    }

    .about-image{
      display: none;
    }

    .service-container{
      width: 100%;
      height: 100%;
      gap: 1rem;
      display: flex;
      flex-direction: column;
      padding-top: 3rem;
      align-items: center;
      justify-content: center;
    }
   
    .service-paragraph{
      font-size: 1.2rem;
      padding-top: 1rem;
      margin-bottom: 1.5rem;
      text-align: center;
      width: 100%;
      align-self: center;
      justify-content: center;
    }
  
    .service-paragraph:nth-child(1){
      top: 0px;
      left: 0px;
    }
  
    .service-paragraph:nth-child(2){
      top: 0px;
      right: 0px;
    }
    
    .service-content{
      height: 100%;
      width: 100%;
      display: grid;
      align-items: center;
      justify-content: center;
      grid-template-columns: 1fr;
      grid-template-rows: 0.5fr;
      
    }
  
    .service-card{
      width: 50%;
      height: 50%;
    }
  
    .service-card img{
      width: 100%;
      height: 100%;
    }
  
    .service-card:nth-child(1){
      position: relative;
      top: 0px;
    }
  
    .service-card:nth-child(2){
      position: relative;
      top: 0px;
      right: 0px;
    }
}

  .welcome-section{
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0rem 1rem;
    justify-content: center;
    align-items: center;
    background-color: #e27228;
  }

  .welcome-container{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .slogan-content{
    font-size: 1.2rem;
    text-align: center;
  }

  .about-section{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0rem 2rem;
    padding-top: 3rem;
    justify-content: center;
    align-items: center;
    background-color: #EDECDF;;
  }

  .about-container{
    width: 80%;
    display: grid;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5fr;
  }

  .about-content{
    justify-items: center;
    padding: 0rem 0.5rem 0rem 0.5rem;
  }

  .about-image{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem 2rem 2rem 2rem;
  }

  .aboutImage{
    height: 120%;
    width: 120%;
  }

  .about-title1{
    display: none;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3rem;
    transition: all ease-in-out 0.3s;
  }

  .about-title2{
    display: flex;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3rem;
    transition: all ease-in-out 0.3s;
  }

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

    

    .project-container{
      margin-top: 6rem;
    }
    
}

  .project-button{
    cursor: pointer;
    border: solid 1px #1a7ef0;
    padding: 0.8rem 2rem;
    transition: all ease-in-out 0.3s;
  }

  .project-button:hover{
    color: #000;
    background-color: #1a7ef0;
    transition: all ease-in-out 0.3s;
  }
  
  .service-section{
    height: 100%;
    width: 100%;
    display: flex;
    padding: 2rem 1.7rem 5rem 1.7rem;
    justify-content: center;
    flex-direction: column;
    background-color: #EDECDF;
  }

  .title{
    display: flex;
    justify-content: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3.1rem;
    color: #000;
  }

  .text{
    font-family: "Quicksand", sans-serif;
    font-style: normal;
    font-size: 1.4rem;
    text-align: center;
    color: #000000;
    font-weight: 600;
    font-size: 1.45rem;
    padding: 0rem 1rem;
    margin-bottom: 1rem;
  }

  .paragraph{
    color: #a09c9c;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
  }

  .heading{
    width: 100%;
    font-size: 4rem;
    text-align: center;
    margin-bottom: 2rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;;
    font-weight: 400;
    font-style: normal;
    }

  .event-heading{
    width: 90%;
    display: flex;
    font-size: 4rem;
    margin-bottom: 2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }


  .menu-title{
    display: flex;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3rem;
    margin-bottom: 2rem;
  }

  .image-title{
    display: flex;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    font-size: 3.1rem;
    text-align: center;
    color: #000;
  }

  .card-title{
    display: none;
    color: #000;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  .menu-section{
    padding: 0rem 1rem;
    padding-bottom: 2rem;
    background: transparent;
  }

  .menu-collection{
    width: 100%;
    height: 100%;
    padding: 2rem 2rem;
    border-radius: 30px;
    background: transparent;
  }

  .customer-container{
    width: 100%;
    height: 100%;
    display: flex;
  }

  .customer-container{
    display: flex;
    flex-direction: column;
  }

  .menu-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .menu-context{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .menu-context img{
    width: 100%;
    height: 100%;
  }

  .card-container {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    margin-bottom: 1.3rem;
    justify-content: center;
    justify-content: space-evenly;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .video-container {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .about-swiper {
    width: 370px;
    height: 460px;
  }

  .card-content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-content img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }

  #customer-content{
    width: 100%;
    height: 100%;
  }

  .menu-content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .menu-content img{
    width: 80%;
    height: 100%;
    border-radius: 20px;
  }
  

  .swiper-slide {
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
  }
  
  .image{
    width: 100%;
    height: 100%;
  }

  .event-section{
    padding-top: 2rem;
    padding-bottom: 4rem;
    background-color: #EDECDF;
  }

  .event-collection{
    padding: 0rem 2rem;
  }

  .event-container{
    width: 100%;
    height: 100%;
    display: grid;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 300px 300px;
  }

  .event-container{
    margin-bottom: 4rem;
  }

  .event-card{
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 0 1rem;
    border-radius: 20px;
    flex-direction: column;
    border: solid 1px black;
  }

  .event-header{
    width: 90%;
    display: flex;
    justify-content: center;
    padding: 1rem 1rem;
  }

  .event-content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .event-image{
    width: 100px;
    height: 100px;
  }

  .event-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .event-title{
    width: 90%;
    display: flex;
    justify-content: center;
    padding-bottom: 0.8rem;
    border-bottom: solid 1px #000;
  }

  textarea{
    color: #000;
    width: 80%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    scrollbar-width: 30px;
    background: transparent;
  }

  .close{
    font-size: 1.2rem;
  }

  #close{
    cursor: pointer;
  }

  .event-context{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem 1rem;
  }

  .overlay{
    display: none;
  }

  .overlay.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    opacity: 1;
    transition: all 0.3s ease;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) scale(1.2);
  }

  .event-box{
    display: none;
  }

  .event-box.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    height: 60%;
    width: 60%;
    border-radius: 24px;
    background-color: rgb(210, 180, 140);
    opacity: 1;
    border: solid 1px #000;
    transition: all 0.3s ease;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) scale(1.2);
  }
  
  @media screen and (max-width: 768px) {
    .project-container{
      width: 100%;
      display: flex;
      gap: 2rem;
      flex-direction: column-reverse;
      align-items: center;
      padding: 1.5rem 2rem;
      justify-content: center;
    }
    textarea{
      width: 100%;
    }
    .text{
      display: flex;
      flex-direction: column;
      align-self: center;
      justify-self: center;
      text-align:center;
      text-align: center;
      color: #000000;
      font-weight: 600;
      font-size: 1.45rem;
      padding: 0rem 1rem;
      margin-bottom: 1rem;
    }
  }
  
  .footer{
    height: 100%;
    color: #000;
    background: transparent;
    padding: 0rem 3rem;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .footer-logo{
    width: 250px;
    height: 250px;
    border-radius: 300px;
  }

  .footer a{
    color: #000;
    font-size: 1.3rem;
    font-style: italic;
    text-decoration: underline;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  .footer-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .footer-info{
    display: flex;
    text-align: center;
  }

  .footer-contact{
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 2rem;
  }

  .footer-info a{
    font-size: 1.2rem;
  }
  
  .footer-info h2{
    color: #fff;
    font-style: italic;
    text-transform: uppercase;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  
  .footer-info h4{
    color: #000;
  }
  
  .footer-info p{
    color: var(--black);
  }
  
  .footer-info a{
    color: var(--black);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.4s ease;
  }
  
  .footer-info a:hover{
    color: var(--red);
  }
  
  .project-section{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0rem 2rem;
    padding-top: 3rem;
    justify-content: center;
    align-items: center;
    background-color: #c51162;
  }

  .project-container{
    width: 80%;
    height: 100%;
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .project-content{
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 0.2fr;
  }

  .project-title{
    width: 100%;
    display: flex;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3rem;
  }

  .project-context{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .project-text{
    text-align: center;
    color: #000000;
    font-weight: 600;
    font-size: 1.45rem;
    padding: 0rem 1rem;
    margin-bottom: 1rem;
  }

  .project-image{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  

  .project-image:nth-child(1){
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .project-image:nth-child(2){
    padding-top: 2rem;
  }

  .image-container{
    height: 50%;
    width: 90%;
    border-radius: 20px;
  }

  .video-content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 20px;
    justify-content: center;
  }

  .video-content video{
    height: 90%;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
  }

  .button{
    color: #000;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 30px;
    text-decoration: none;
    border: solid 1px #000;
    padding: 1rem 3rem;
    transition: all ease-in-out 0.3s;
  }

  .button:hover{
    color: #EDECDF;
    background-color: #000;
    transition: all ease-in-out 0.3s;
  }
  
  .service-section{
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0rem 3rem;
    padding-top: 3rem;
    justify-content: center;
    background-color: #5cbdb9;
  }

  .email-title{
    display: flex;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .paragraph{
    color: #a09c9c;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
  }

  .service-container{
    width: 100%;
    height: 100%;
    gap: 1rem;
    display: flex;
    padding-top: 3rem;
    align-items: center;
    justify-content: center;
  }
 
  .service-paragraph{
    font-size: 1.2rem;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    width: 100%;
    align-self: center;
  }

  .service-paragraph:nth-child(1){
    position: relative;
    width: 100%;
    top: 0px;
    left: -110px;
  }

  .service-paragraph:nth-child(2){
    position: relative;
    top: 60px;
    right: 0px;
  }
  
  .service-content{
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1.5fr;
    grid-template-rows: 0.3fr 0.3f;
    
  }

  .service-card{
    width: 70%;
    height: 70%;
  }

  .service-card img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }

  .service-card:nth-child(1){
    position: relative;
    top: -40px;
  }

  .service-card:nth-child(2){
    position: relative;
    top: -220px;
    right: -120px;
  }
  
  .service-icon{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #a09c9c;
    flex-direction: column;
  }

  .service-icon i {
    color: #f9032f;
    font-size: 2.5rem;
    padding-bottom: 0.5rem;
  }

  .service-text{
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 3rem;
  }

  .service-button{
    cursor: pointer;
    font-size: 1.1rem;
    border: solid 1px #000;
    font-weight: 600;
    padding: 0.8rem 2rem;
    text-decoration: none;
    color: #000;
    transition: all ease-in-out 0.3s;
  }

  .service-button:hover{
    color: #fff;
    background-color: #000;
    transition: all ease-in-out 0.3s;
  }

  .service-collection{
    width: 100%;
    display:flex;
    border: solid 1px;
    align-items: center;
    justify-content: center;
  }

  .service-box{
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .service-list{
    width: 100%;
    height: 100%;
    padding: 1rem 2rem;
    border-right: solid 1px;
  }

  .service-list ul{
    text-decoration: none;
    padding-left: 0px;
  }

  .service-heading{
    width: 100%;
    display: flex;
    padding: 1rem 0;
    align-items: center;
    justify-content: center;
    border-bottom: solid 1px;
    border-right: solid 1px;
  }

  .service-heading p{
    font-size: 1.1rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

  #Other .service-heading{
    border-right: none;
  }

  #Other .service-list{
    border-right: none;
  }

  .project-collection{
    width: 90%;
    display:flex;
    flex-direction: column;
    margin: 2rem 0;
  }

  .text h3 {
    color: #0064d6;
    margin-bottom: 1rem;
  }

  .welcome-section{
    width: 100%;
    display: flex;
    padding: 0rem 1rem;
    padding-top: 3rem;
    justify-content: center;
  }

  .welcome-container{
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .welcome-card{
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .welcome-card video{
    width: 100%;
    height: 100%;
    align-self: center;
  }

  .project-context img{
    width: 100%;
    height: 100%;
  }
  
  .studio-image{
    width: 1fr;
  }
  
  .image{
    width: 100%;
    height: 100%;
  }

  .email-section{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 1rem;
    justify-content: center;
  }

  .email-container{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-self: center;
    padding: 2rem 2rem;
    border-radius: 8px;
    flex-direction: column;
    border: solid 1px #000;
  }

  .form-contact{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .form-contact input{
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin: 1rem 1rem;
    font-size: 1rem;
    border: solid 1px #000;
    background: transparent;
  }

  .form-contact label{
    margin: 0rem 1rem;
    font-size: 1rem;
  }

  .form-contact textarea{
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin: 1rem 1rem;
    font-size: 1rem;
    resize: none;
    min-height: 200px;
    scroll-behavior: smooth;
    border: solid 1px #000;
    background: transparent;
  }

  #submit{
    height: 100%;
    width:200px;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 8px;
    align-self: center;
    justify-self: center;
    border: solid 1px #000;
    background: transparent;
    transition: all ease-in-out 0.4s;
  }

  #submit:hover{
    color: white;
    background-color: #000;
    transition: all ease-in-out 0.4s;
  }

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

    
    
    .service-container{
      height: 90vh;
    }

    .service-paragraph:nth-child(1){
      position: relative;
      width: 100%;
      top: -70px;
      left: -110px;
    }
  
    .service-paragraph:nth-child(2){
      position: relative;
      top: -50px;
      right: 0px;
    }

    .title{
      text-align: center;
      padding-bottom: 2rem;
    }
  }

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

    .customer-container{
      width: 100%;
      height: 100%;
      display: grid;
      gap: 2.5rem;
      align-items: center;
      justify-content: center;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
    
    .service-container{
      width: 100%;
      height: 100%;
      gap: 8rem;
      display: flex;
      flex-direction: column;
      padding-top: 3rem;
      align-items: center;
      justify-content: center;
    }
   
    .service-paragraph{
      font-size: 1.2rem;
      padding-top: 1rem;
      margin-bottom: 1.5rem;
      text-align: center;
      width: 100%;
      align-self: center;
      justify-content: center;
    }
  
    .service-paragraph:nth-child(1){
      top: 0px;
      left: 0px;
    }
  
    .service-paragraph:nth-child(2){
      top: 0px;
      right: 0px;
    }
    
    .service-content:nth-child(1){
      height: 100%;
      width: 100%;
      display: grid;
      align-items: center;
      justify-content: center;
      grid-template-columns: 0.4fr 0.4fr;
      grid-template-rows: 0.5fr;
    }
  
    .service-card{
      width: 100%;
      height: 100%;
    }
  
    .service-card img{
      width: 100%;
      height: 100%;
    }
  
    .service-card:nth-child(1){
      position: relative;
      top: 0px;
      right: -50px;
    }
  
    .service-card:nth-child(2){
      position: relative;
      top: 120px;
      left: -50px;
    }
}

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

  .menu-collection{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .image-title{
    display: none;
  }

  .card-title{
    display: flex;
    text-align: center;
    font-weight: 400;
    font-size: 3.1rem;
  }

  .card-container{
    display: flex;
    flex-direction: column;
  }

  .card-content img{
    width: 60%;
    height: 30%;
    border-radius: 20px;
    padding-bottom: 1rem;
  }

  .video-container{
    display: flex;
    flex-direction: column-reverse;
  }

  .video-content video{
    height: 550px;
    width: 80%;
    border-radius: 30px;
    padding-bottom: 1rem;
  }

  .image-container{
    display: none;
  }

  .video-content{
    display: flex;
    flex-direction: column;
  }
  
  .about-title1{
    display: flex;
    transition: all ease-in-out 0.3s;
  }

  .about-title2{
    display: none;
    transition: all ease-in-out 0.3s;
  }

  .about-container{
    display: flex;
    flex-direction: column-reverse;
  }

  .about-content:nth-child(2){
    display: flex;
  }
}

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

    

    .project-title{
      width: 210%;
    }

    .about-title1{
      display: flex;
      transition: all ease-in-out 0.3s;
    }
  
    .about-title2{
      display: none;
      transition: all ease-in-out 0.3s;
    }

    .about-container{
      display: flex;
      flex-direction: column-reverse;
    }

    .about-content:nth-child(2){
      display: flex;
    }
  }

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

    .service-list{
      border-right: none;
    }

    .service-heading{
      border-right: none;
    }

    .service-collection{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .view-service{
      margin-top: 1.3rem;
    }

    .service-section{
      width: 100%;
      display: flex;
      align-items: center;
    }

    .service-container{
      padding-top: 1rem;
    }
    
    
    .service-content{
      width: 100%;
      height: 100%;
      gap: 1rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  
    .service-card{
      width: 100%;
      height: 100%;
    }
  
    .service-card img{
      width: 100%;
      height: 100%;
    }

    .event-container{
      width: 100%;
      height: 100%;
      display: grid;
      gap: 3rem;
      align-items: center;
      justify-content: center;
      grid-template-columns: 300px 300px;
      grid-template-rows: 300px 300px 300px 300px 300px;
    }
    

  }

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

    .navbar-logo{
      font-size: 2rem;
    }

    .heading{
      font-size: 3rem;
    }

    .project-box{
      display: grid;
      gap: 2.5rem;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
    }

    .project-image{
      border-left: none;
    }

    .project-image:nth-child(1){
      border-bottom: none;
    }

    .project-title{
      width: 100%;
    }

    .project-title{
      top: 30px;
      margin-top: 0rem;
    }

    .welcome-content{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column-reverse;
    }

    .project-section{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .project-container{
      width: 100%;
      display: flex;
      gap: 1rem;
      flex-direction: column-reverse;
      align-items: center;
      margin-top: 2rem;
      padding: 0rem 2rem;
      justify-content: center;
    }

    .image-container{
      width: 60%;
      height: 60%;
    }

    .service-card img{
      width: 100%;
      height: 100%;
    }

    .text{
      display: flex;
      flex-direction: column;
      align-self: center;
      text-align:center;
    }

    .heading{
      width: 100%;
    }

    #card2{
      flex-direction: column-reverse;
    }

    .hero-container{
      height: 100%;
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;
      flex-direction: column-reverse;
      justify-content: center;
    }

    .hero img{
      width: 80%;
      height: 85vh;
      margin-top: 2.4rem;
    }

    .event-container{
      width: 100%;
      height: 100%;
      display: grid;
      gap: 3rem;
      align-items: center;
      justify-content: center;
      grid-template-columns: 300px;
      grid-template-rows: 300px 300px 300px 300px 300px 300px 300px 300px 300px;
    }

    .email-container{
      width: 80%;
    }
  }

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

    .menu-content img{
      width: 90%;
      height: 90%;
      border-radius: 20px;
    }

    .menu-container{
      width: 100%;
      height: 100%;
      display: grid;
      gap: 2.5rem;
      align-items: center;
      justify-content: center;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }

    .video-content video{
      width: 80%;
      height: 80%;
    }

    .footer-info{
      display: flex;
      flex-direction: column;
      padding-bottom: 2rem;
    }

  }