@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');
*{

  box-sizing: border-box;
  font-family:Time News Roman;
} 
a.active{
    background-color: #CCE406 ;
    border-radius: 10px;
    color: black;
    opacity: 0.8;
}
body{
    margin:0;
    padding:0;
    background: url(Images/toy.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }
 
.trend{
      text-align: center;
      font-size:67px;
      color:#f5f6fa;
      font-family: Arial, Helvetica, sans-serif;
    }
.container{
	       display:flex;
	       flex-direction: row;
	       height:400px;
       }


.carousel-wrapper {
  height:560px;
  position: relative;
  display: flex;
  margin: 50px auto ;
}

.carousel-item {
    height:80%;
  border-radius:35px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 50px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.arrow{
  border: solid #eb2f06;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 12px;
}
.arrow-prev {
  left: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);

}
.arrow-next {
  right: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

[id^= "item"] {
  display: flex;
  width:100%;
}
.item-1 {
  z-index: 2;
  opacity: 1;
  background: url('Images/ubein_bridge.jpg');
  background-size: cover;
  background-position: center;
}
.item-2 {
  background: url('Images/shwedagon-service.webp');
  background-size: cover;
  background-position: center;
}
.item-3 {
  background: url('Images/ananda-service.jpg');
  background-size: cover;
  background-position: center;
}

*:target ~ .item-1{
  opacity: 0;
}
#item-1:target ~ .item-1 {
  opacity: 1;

}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
  z-index: 3;
  opacity: 1;
} 

.gallery{

        display:flex;
        width:100%;
        height:350px;
        }
.one{
     width:25%;
     }

#inlelake{ 
           width:100%;
           height:350px; 
           object-fit: cover;

          }
.two{
      width:25%;
    }
#phaung{
       width:100%;
           height:350px;
           object-fit: cover;
       }
.three{
      width:25%;
    }
#sulamuni{
       width:100%;
           height:350px;
           object-fit: cover;
         }
.four{
      width:25%;
    }
#ngaphe{
       width:100%;
           height:350px;
           object-fit: cover;
      }
.landmark{
   margin-top:60px;
    text-align: center;
    font-size:50px;
   }

.box{
     position: relative;
     display:flex;
     justify-content: center;
     align-items: center;
     flex-wrap:wrap;
     padding: 30px;
}

.box .card{
          position: relative;
          max-width: 300px;
          height:400px;
          background: #fff;
          margin:30px 10px;
          padding:20px 15px;
          margin-left:40px;
          box-shadow: 0.5px 202px rgba(0,0,0,0,0.5);
        }

.box .card .image{
                  position: relative;
                  width:260px;
                  height:260px;
}

.box .card .image img{
                      max-width: 100%;
                      border-radius:4px;
                      }

.box .card .image:hover{
                       transform: scale(1.1); 
                       transition: 1s;
                   }

.box .card .content{
                     position:relative;
                     bottom:-56px;
                     background-color:yellow;
                   
                    border-radius: 35px;
                    }

.box .card .content a{
                      text-decoration: none;
                      font-size:35px;
                      color:#4b4b4b;
                    }
.box .card .content a:hover{
                            text-decoration: underline;
                            color:#eb2f06;
                            }
.option1 {
          margin-left:45px;
        }

.option2{
          margin-left:80px;
        }
.option3{
         margin-left:50px;
         }

footer {
    position: fixed;
    bottom: 0;
}

@media (max-height:800px) {
    footer {
        position: static;
    }
    header {
        padding-top: 40px;
    }
}