:root {
    --pink: #f14e95;
    --white:#ffffff;
    --bg  : #0a0a0a;    
    --shadow: 0 2px 2px rgb(0, 0, 0, /0.5);

}

body{ 
    font-size: 1.2rem;
    font-family: 'Work Sans', sans-serif;
    min-height: 4000px;
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background-image: url(img/add.jpg );
    background-size: cover;
    background-position: center;
    z-index: -1;
 
}

.hero{
    position: relative;
    min-height: 100vh;
   

}

 .hero h1 {
    font-family: 'Sacramento', cursive;
    font-size: 5.6rem;
 }

 .hero a {
    color: var(--bg);
    background-color: rgb(255, 255, 255);
 }
 
 .mynavbar{
    background-color: rgb(255, 255, 255,0.4)!important;
    backdrop-filter:blur(4px);
    
 }

 .mynavbar .offcanvas{
    height: 100vh;
 }
  
 .mynavbar .navbar-brand, 
 .mynavbar .offcanvas-title {
    font-family: 'sacramento', cursive;
    font size: 8.2rem;
    font-weight:bold;
 }

 .mynavbar .nav-link{
   text-transform: uppercase;
 }

 .home h1{
   font-size: 1.1rem;
   font-family: Arial;
   font-weight: lighter;
   color: #f8f8f8ce;
 }


 .home{
    background-image: url(img/bg.jpeg) ;
    background-size: cover;
    min-height: 80vh;
    margin-top: -3.7rem;
    padding-top: 12rem;
    padding-bottom: 5rem;
    background-size: cover;
    background-position: center;
    z-index: -1 ;

 }

.home h2 { 
    color:var(--white);
    font-family: 'sacramento', cursive;
    font-size:3rem;
    font-weight:bold;
 }

 .home h3 { 
    color:#ffffff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
 }
 .home p{
    font-size: 1.1rem;
    color: #ffffff; ;
 }

.home .couple{
   margin-top: 100px;
   
}

.home .couple span{
   color: #ffffff;
   font-weight: 600;
}


.home .couple h3{
   font-family: 'Sacramento';
   font-size:3.1rem ;
   font-weight: bold;
   color: var(--white);
}

.home .couple img {
   width:100% ;
}

.home .couple p {
   color:var(--white);
   font-weight: 300;
}

.home .ayat p{
   color:var(--white);
   font-weight: lighter;
}



.info{
   background-image: url(img/info.jpg) ;
    background-size: cover;
   color: white;
   padding-top: 10rem;
   padding-bottom: 8rem;

}
.info h2{
   color:var(--white);
   font-family: 'sacramento';
   font-size: 4rem;
   font-weight: bold;
}
.info .alamat{
   font-size:1.1rem;
   font-family: Arial, Helvetica, sans-serif;
}

.info .description{
   font-size: 1rem;
   font-family: Arial, Helvetica, sans-serif;
}

.info .card,
.dresscode .card{
   background-color:rgba(124, 124, 124, 0.2)!important ;
   color: white !important;
   border: 1px solid #999;
}

.info .card-header{
   border-bottom: 1px solid #999;
   text-transform: uppercase;
   letter-spacing: 0.1rem;

}

.info .card-body{
   font-size: 1rem;
}

.info .card-footer,
.dresscode .card-footer {
   border-top:1px solid #999;
   font-size: 1rem;

}

.story h2{
   color:var(--white);
   font-family: 'sacramento';
   font-size: 4rem;
   font-weight: bold;

}

.story{
   background-image: url(img/story.jpg) ;
    background-size: cover;
   padding-top: 10rem;
   padding-bottom: 8rem;

}
.gallery,
.rsvp,
.gifts,
.dresscode {
   padding-top: 10rem;
   padding-bottom: 8rem;
}
.story h1{
   color: #ffffff;
   font-size: 1rem;
}
.story span{
    color: #b8b8b8;
}
.gallery span,
.gifts span {
   text-transform: uppercase;
   color: #ffffff;
   font-size: 0.9rem;
   letter-spacing: 1px;
   display: block;
   margin-bottom:1rem ;

}
.story p{
   color: #000000;
}
.gallery p,
.gifts p {
   font-size: 1rem;
   font-weight: 300;
   color: #ffffff;
}

.timeline{
   list-style: none;
   padding: 1.4rem;
   margin-top: 1rem;
   position: relative;
}

.timeline::before{
 content: '';
 top: 0;
 bottom: 0;
 position: absolute;
 width: 1px;
 background-color: #ccc;
 left: 50%;
}

.timline li{
   margin-bottom: 1.5rem;
   position: relative;
}

.timeline li::before,
.timeline li::after{
   content: '';
   display:table;
}

.timeline li::after{
   clear: both;
}

.timeline li .timeline-image{
   width: 160px;
   height: 160px;
   background-color: #ccc;
   position: absolute;
   left: 50%;
   transform:translateX(-50%);
   border-radius: 50%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

}

.timeline li .timeline-panel{
   width:40%;
   float: left;
   border: 1px solid #ccc;
   padding: 2rem;
   position: relative;
   border-radius: 8px;
   background-color: #ffffff;
}

.timeline li .timeline-panel::before{
   content: '';
   display: inline-block;
   position: absolute;
   border-top: 15px solid transparent;
   border-left: 15px solid #ccc;
   border-right: 0 solid #ccc ;
   border-bottom: 15px solid transparent;
   top:80px;
   right: -15px;  
}

.timeline li .timeline-panel::after{
   content:'';
   position: absolute;
   display:inline-block ;
   border-top: 14px solid transparent;
   border-left: 14px solid #ffffff;
   border-right: 0 solid #ffffff ;
   border-bottom: 14px solid transparent;
   top:81px;
   right: -13px;
}

.timeline li.timeline-inverted .timeline-panel{
   float: right;
}

.timeline li.timeline-inverted .timeline-panel::before{
   border-left-width:0;
   border-right-width:15px;
   left:-15px;
   right: auto;

}

.timeline li.timeline-inverted .timeline-panel::after{
   border-left-width:0;
   border-right-width:14px;
   left:-13px;
   right: auto;


}

.gallery h2,
.gifts h2 {
   color:var(--white);
   font-family: 'sacramento';
   font-size: 4rem;
   font-weight: bold;

}
.gallery {
   background-color: #000000;
}

.rsvp h2{
   color:var(--white);
   font-family: 'sacramento';
   font-size: 4rem;
   font-weight: bold;

}

.rsvp{
   background-color: #000000;
}

.rsvp p{
   font-size: 1rem;
   font-weight: 300;
   color: #ffffff;
}

.rsvp form label{
   color: rgb(255, 255, 255);

}

.rsvp button:hover {
   background-color: #464646;
   color: #0a0a0a;
   border:1px solid;
   
}
.gifts{
   background-color: #080808;
}

.dresscode span {
   text-transform: uppercase;
   color: #ffffff;
   font-size: 0.9rem;
   letter-spacing: 1px;
   display: block;
   margin-bottom:1rem ;
}

.dresscode h2{
   color:var(--white);
   font-family: 'sacramento';
   font-size: 4rem;
   font-weight: bold;
}

.dresscode{
   background-color: #131313;
}

.dresscode p {
   font-size: 1rem;
   font-weight: 300;
   color: #ffffff;
}
.dresscode list-group-item {
   background-color: #000000;
}

.dresscode{
   background-image: url(img/dress.jpg);
   background-size: cover;
   padding-top: 10rem;
   padding-bottom: 8rem;
   background-position: center;
    z-index: -1;

}
.info .map i{
   color:red
}






.audio-icon-wrapper {
   width: 4rem;
   height: 4rem;
   font-size: 4rem;
   position: fixed;
   bottom:2.5rem;
   right:2rem;
   cursor: pointer;
   animation: rotating 4s linear infinite;
   transform-origin: center;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 0;
   color: white;
   opacity:0.5;
   mix-blend-mode: difference;



}

@keyframes rotating {
   from{
      transform: rotate(0);
   }
   to{
      transform: rotate(1turn);
   }
   
}


 /* media query */
 /* laptop */
 @media(max-width: 992px  ){
    html {
        font-size: 75%;
    }

  .timeline::before  {
   left:60px;
  }
  .timeline li .timeline-image {
   left:15px;
   margin-left: 45px;
   width: 140px;
   height: 140px;
   
   
  }

  .timeline li .timeline-panel{
   width: calc((100% - 200px));
   float: right;

  }
  .timeline li .timeline-panel::before{
   border-left-width: 0;
   border-right-width:15px;
   left:-15px;
   right:auto;

 }
.timeline li .timeline-panel::after{
   border-left-width: 0;
   border-right-width:14px;
   left:-13px;
   right:auto;
 
}
 }

 /*tablet*/
 @media(max-width: 768px  ){
    html {
        font-size: 55%;
    }

    .mynavbar .nav-link{
    font-size: 2rem;
    text-align: center;
 }

 .sticky-top {
   overflow:hidden;
 }

 .timeline li .timeline-image{
   width: 100px;
   height: 100px;

 }
    
 }

  /*mobile*/
  @media(max-width: 576px  ){
    html {
        font-size: 45%;
    }

    .timeline li .timeline-image{
      width:80px;
      height:80px;
    }
    .timeline li .timeline-panel{
      width:65%;
      transform: translateX(-20px);

    }
    .timeline li .timeline-panel::before{
      top:30px;
    }

    .timeline li .timeline-panel::after{
      top:31px;

    }
    .mynavbar .nav-link{
      text-transform: unset;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
 }
    
 }