html{
  font-size:14px;
}


@media screen and (min-width:768px)  {
  html{
    font-size:16px;
  }
}

a{
  color:#555;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
a:after{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: seagreen;
  transform: translate(-100%,0);
  transition: transform cubic-bezier(0.215, 0.610, 0.355, 1) 0.2s;
  content: "";
}
a:hover:after{
  transform: translate(0,0);
}

a:hover{
  color:#38B6FF;
}


.cmn-title{
 text-align:center;
 font-weight:bold;
}
.sub-title{
 display:block;
 color:#38B6FF;
 font-size: 1.5rem;
}

.main-title{
 display:block;
 font-size:2rem;
}

                                /* header */
.header{
  padding:20px 10%;
  /* padding:20px 16px; */
  max-width: 1024px;
  margin:0 auto;
}
.header-logo{
  font-size: 2rem;
  font-weight: bold;
  font-family: 'Noto Serif Sinhala', serif;
  color: seagreen;
  cursor: pointer;
}
.header-logo .hover{
  display: none;
}
.header-logo:hover .normal{
  display: none;
}
.header-logo:hover .hover{
  display: inline;
  font-family: 'Cormorant Garamond', serif;
}

.header-list{
  display: flex;
  justify-content: space-between;
  margin-top:1.5rem;
}

.header-item{
  font-size:1.5rem;
}

@media screen and (min-width:768px){
  .header{
    display: flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
    padding:0;
  }
  .header-list{
    margin-top:0;
  }


  .header-item{
    margin-left: 2.5rem;
  }
}

                              /* firstview */


.firstview{
  position: relative;
}

.zoomin img{
  width: 100vw;
  height:700px;
  object-fit: cover;
  transition: 5s ease;
}
.zoomin a:hover img{
  transform: scale(3.2) translateY(-10%);
}
.mask{
  display: block;
  overflow: hidden;
}

.firstview-massage{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display:flex;
  align-items: center;
  font-size: 3rem;
  letter-spacing:0.3rem;
}

.firstview-massage .blue{
  color:#38B6FF;
}
.firstview-massage .yellow{
  color:yellowgreen;
}

@media screen and (min-width:768px){
  .firstview-massage{
    font-size:5.5rem;
  }
}

                                /* about */
.about{
 max-width:800px;
 margin:120px auto 0px;
 padding:0 16px;
}

.about-wrapper{
  margin-top:  60px;
}

.about-image{
  margin: 0 auto;
  width: 200px;
}
.about-image img{
  width: 100%;
}

.about-text{
  margin-top:40px;
  width: 80%;
  margin: 30px auto;
}

.about-greeting{
  text-align: left;
}


.about-subtitle{
  color:#555;
  /* color:#38B6FF; */
  font-size:1.5rem;
  margin-bottom:0.5rem;
  text-align: center;
}

.about-career{
  margin-top:  30px;
}


@media screen and (min-width:768px){
  .about-wrapper{
    display:flex;
    margin-top:  60px;
  }

  .about-text{
    margin-left:80px;
    margin-top:0;
    text-align: left;


  }
}

                                  /*skills*/
.skills{
  max-width:1024px;
  margin:120px auto 0;
  padding:0 16px;
}

.skill-list{
  margin-top:60px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px 30px;
}

.skill-item{
  text-align: center;
}
.skill-item h3{
  font-size: 1.2rem;
}

.skill-image{
  max-width: 100px;
  margin: auto;
}

.skill-image img{
  width: 100%;
}

.skill-name{
  font-size:1.5rem;
  font-weight:bold;

}

.skill-disc{
  margin-top:1rem;
}

@media  screen  and (max-width:767px){
  .skill-disc{
    width: 300px;
  }
}

@media screen and (min-width:768px){
  .skill-list{
    max-width:700px;
    margin:60px auto 0;
    gap:40px 40px;
  }
  .skill-item{
    width: 100px;
  }

  .skill-image{
    max-height:  180px;
    max-width: 100px;
    text-align: center;
  }

  .skill-name{
    font-size:1.5rem;
    /* font-weight:bold;
    text-align: center; */
  }


}

@media screen and (min-width:1024px){
  .skill-list{
    max-width:100%;
  }
}

                                  /* works */
.works{
  max-width:900px;
  margin:120px auto 0;
}

.work-list{
  margin-top:60px;
}

.work-item{
  margin-top:45px;
  width: 80%;
  margin: 60px auto 0;
}

.work-item.reverse{
  flex-direction:row-reverse;
}

.work-image{
  width: 80%;
  height: 250px;
  margin: 0 auto;
}

.work-image img{
  width:100%;
  height: 250px;
  /* object-fit: contain; */
  object-fit: cover;
}

.work-text{
  width: 80%;
  margin: 2rem auto 0;
  padding:0 16px;
  display: flex;
  flex-direction: column;
}

.work-desc{
  margin-top:1rem;
}

.work-view{
  font-weight: bold;
  color: seagreen;
}

@media screen and (max-width:767px){
  .work-text{
    margin-top: 1.5rem;
  }
  .work-view{
    order: -1;
    text-align: right;
    font-size: 0.8rem;
  }
}



@media screen and (min-width:768px){
  .work-item{
    display:flex;
    gap:0 50px;
  }
  .work-image{
    width:50%;
  }
  .work-text{
    width:50%;
    padding:0;
  }
}

                                /* contact */
.contact{
  margin:120px 0;
  text-align:center;
}

.contact-text{
  margin-top:60px;
}


.contact-mail{
  font-size:2rem;
  font-weight:bold;
}
.contact-mail a{
  color:seagreen;
}

@media screen and (max-width:520px){
  .contact-mail{
    font-size: 1.5rem;
  }
}

                                  /* footer */
.footer{
  padding:30px 16px 10px;
  background-color: #ddd;
}

.footer-list{
  display: flex;
  justify-content:space-between;
  align-items:center;
  margin:0 auto;
}

.footer-item{
   font-size:1.5rem;
}

@media screen and (min-width:768px){
  .footer-list{
    max-width: 400px;
  }
}

.copyright{
   margin-top:2rem;
   text-align:center;
}