@import url('https://fonts.googleapis.com/css2?family=Acme&family=Lobster&family=Patua+One&family=Rubik:wght@300&family=Sniglet&display=swap');

*{
    box-sizing: border-box;
}

header, section {
    overflow-x: hidden;
}

:root{
    --Snigle-font:"Sniglet", cursive;
    --Rubik:"Rubik", cursive;
    --Lobster:"Lobster", cursive;
    --Patua:"Patua One", cursive;
    --light-black:#2e2c2caf;
    --bggradient:linear-gradient(to bottom, #dd2476,#ff512f);
    --light-gray:rgba(255,255,255,0.877);
}

header a {
    font-family: var(--Snigle-font);
    font-size: 1em;
    color: whitesmoke !important;
}

header {
    background: #dd2476;
    background: var(--bggradient);
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white  !important;
    min-width: 160px;
    box-shadow: 0px 2px 15px 0px rgba(0,0,0,0)  !important;
    z-index: 1;
}

.dropdown-content a {
    color: black  !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background: #ddd  !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

header .nav-item:last-child {
    padding-right: 10.5em;
}

header .nav-item {
    padding: 0.9em;
}

header .navbar-brand {
    padding-left: 8rem;
}

header .nav-link:hover {
    color: black  !important;
}

header .navbar-brand:hover {
    color: blue  !important;
}

header .row .col-md-5 {
    padding: 4.2vmin 1vmin;
}

header .row .col-md-7 {
    padding: 22vmin 1vmin;
    padding-bottom: 35vmin;
    font-family: var(--Rubik);
    color: white;
}

header .row .col-md-5 img{
    width: 90%;
}
header .row .col-md-7 h6 {
    padding: 1vmin;
    letter-spacing: 4px;
}

header .row .col-md-7 h1 {
    font-size: 8.5vmin;
    font-weight: bold;
    padding: 0.1em 0em;
}

header .row .col-md-7 p {
    padding: 1vmin 5vmin;
}

header .row .col-md-7 button {
    border-radius: 30px;
    font-weight: bold;

}

/* section 1 */
.section-1 {
    padding: 20vmin 0;
}

.section-1 .row .col-md-6 .pray img {
    opacity: 0.8;
    width: 80%;
    border-radius: 0.2em;
}

.section-1 .row .col-md-6:last-child {
    position: relative;
}

.section-1 .row .col-md-6 .panel {
    position: absolute;
    top: 7vmin;
    left:-18vmin;
    background: white;
    border-radius: 3px;
    text-align: left;
    padding: 13vmin 5vmin 20vmin 10vmin;
    box-shadow: 0px 25px 42px rgba(0,0,0,0.2);
    font-family: var(--Rubik);
    z-index: 1;
} 

.section-1 .row .col-md-6 .panel h1 {
    font-weight: bold;
    padding: 0.4em 0;
    font-size: 2em;
}

.section-1 .row .col-md-6 .panel p {
    font-size: 0.9em;
    color: rgba(0,0,0,0.5);
}

/* section 2 */

.cover {
    width: 100%;
    height: 55vmin;
    background: url('../assets/img/pexels-markus-spiske-1089438.jpg');
    background-position: -24rem -19rem;
    background-size: 150%;
    position: relative;
    
}

.cover .content {
    background: rgba(0,0,0,0.7);
    height: 100%;
    width: 100%;
    padding-top: 19vmin;
}

.cover .content>h1 {
    font-family: var(--Patua);
    font-size: 6vmin;
    color:whitesmoke;
}

.cover .content>p {
    font-family: var(--Rubik);
    font-size: 2vmin;
    color: #e5e5e5;
}

.numbers .rect {
    position: relative;
    z-index: 1;
    background: white;
    width: 17rem;
    height: 12rem;
    padding-top: 3.5vmin;
    margin: 1rem;
    border-radius: .5em;
    box-shadow: 1px 2px 50px 0px rgba(255,0,0,0.349);

}

.numbers {
    margin-top: -15vmin;
}

.numbers .rect h1 {
    font-size: 5rem;
    color: tomato;
}

.numbers .rect p {
    font-family: var(--Patua);
}

.purchase>h1 {
    padding-top: 15vmin;
    padding-bottom: 0.1em;
    font-family: var(--Lobster);
}

.purchase>p {
    color: var(--light-black);
    font-size: 3vmin;
    padding-bottom: 10vmin;
}

.purchase .cards .card {
    width: 22rem;
    margin: 3vmin;
}

.cards div {
    padding: 0;
    margin: 0;
}

.cards .title {
   background: tomato;
    padding: 1.2rem 2.5rem;
    font-size: 2vmin;
    color: #fff;
}

.card .card-text {
    /* background: rgba(208,241,241,0.199); */
    padding: 2rem 3rem;
    color: var(--light-black);
}

.card-body .pricing {
    background: rgba(208,241,241,0.199);
    border-top-right-radius: 170px;
    border-top-left-radius: 170px;

}

.card-body .pricing>h1 {
    font-size: 10vmin;
    padding: 1em 0.5em;
}

/* section 3 */
.section-3 {
    height: 70vmin;
    margin-top: 15vmin;
    background: var(--bggradient);
}

.section-3 .col-md-12>h1 {
    padding: 2em 0 0.5em 0;
    color: whitesmoke;
    font-size: 6vmin;
}

.section-3 .col-md-12>p {
    padding: 0 4em;
    padding-bottom: 2em;  
    color: var(--light-gray);
    font-size: 3vmin;
}

.section-3 .desktop {
    background: white;
    display: inline-block;
    border-radius: 3em;
    padding: 2vmin 4.5vmin;
    margin: 1em;
}

.section-3 .desktop h3 {
    font-size: 4vmin;
}

.section-3 .desktop p {
    font-size: 2vmin;
}

/* section 4 */

.section-4 .container h1 {
    font-size: 6vmin;
    padding-top: 14vmin;
}

.section-4 .team {
    padding: 10vmin 4vmin;
}

.section-4 .card {
    width: 22rem;
   /* margin-top: 2vmin; */
}

.section-4 .card .card-text {
    padding: 0.5em;
}

.section-4 .card .card-body>a {
    font-size: 1.5em;
}

.section-4 .carousel-item {
    padding-left: 3rem;
}

.border-radius {

    width: 100%;
   
}

/*footer */
footer {
    background: rgba(0,0,0,0.815);
    overflow-x: hidden;
    padding: 14vmin 18vmin;
}

footer p>span {
    color: #ff512f;
}

footer input {
    border:none !important;
}

footer input::placeholder {
    color :white !important;
}

footer .input-group .input-group-text{
    background: var(--bggradient);
    border :none;
}

footer .column i {
    color: #dd2476;
}

footer .column i+i {
    padding: 0 0.5em;
}

/* sticky Class */
.sticky {
    position: fixed;
    top:0;
    width: 100%;
    background: rgba(0,0,0,0.815);
    z-index: 9999;
    transition: all 1.5s ease;
}

/* Awal Galeri */
.gallery img{
    max-width: 100%;
  }
  .gallery{
    background-color: #ffffff;
    padding: 50px 0;
  }
  .gallery img{
    background-color: #ffffff;
    padding: 15px;
    width: 100%;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  #gallery-modal .modal-img{
    width: 100%;
  }
/* Akhir Galeri */


 /* Testimoni */

 .testimonials-section h1{
    color: #01b0f8;
      }
      .testimonials-section {
         background: aliceblue; 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
    }
    
    .testimonials .card {
        background: #fff;
        box-shadow: 0 8px 30px -7px #c9dff0;
        margin: 0 20px;
        padding: 0 10px;
        border-radius: 20px;
        border: 0;
    }
    
    .testimonials .card .card-img-top {
        max-width: 100px;
        border-radius: 50%;
        margin: 15px auto 0;
        box-shadow: 0 8px 20px -4px #9fabbb;
        width: 100px;
        height: 100px;
    }
    
    .testimonials .card h5 {
        color: #01b0f8;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 600;
    }
    .testimonials .card h5 span {
        font-size: 17px;
        color: #666666;
    }
    
    .testimonials .card p {
        font-size: 18px;
        color: #555;
        padding-bottom: 15px;
    }
    
    .owl-item > div {
        cursor: pointer;
        margin: 5% 0%;
        transition: margin 0.4s ease;
    }
    
    .owl-item.center  > div {
        cursor: pointer;
        margin: 0;
    }
    
    .testimonials .active {
        opacity: 0.5;
        transition: all 0.25s ease;
    }
    
    .testimonials .center {
        opacity: 1;
      }
    
      .testimonials .owl-stage-outer {
          padding: 30px 0;
      }
      .testimonials .owl-dots {
          text-align: center;
      }
    
      .testimonials .owl-dots span {
          position: relative;
          height: 14px;
          width: 14px;
          border-radius: 20px;
          display: block;
          background: #fff;
          border: 2px solid #01b0f8;
          transition: all 0.25s ease;
          margin: 0 4px;
      }
    
      .testimonials .owl-dots .active span {
          background: #01b0f8;
          box-shadow: none;
          height: 14px;
          width: 30px;
          position: relative;
          transition: all 0.25s ease;
      }
    
      .testimonials .owl-dots .active {
        box-shadow: none;  
      }
    
      .owl-dots .owl-dots:focus {
          box-shadow: none !important;
          outline: 0;
          border: 0;
      }
      /* Akhir Testimoni */