html {
   padding: env(safe-area-inset);
}
html,body{
   font-family: 'Roboto', sans-serif;
   overflow-x: hidden;

}
/*-------------NAVBAR----------*/
nav li{
   font-size:1.1rem;
   margin-right: .9rem;
   text-transform: uppercase;
}
.navbar{
   transition: background-color .8s ease;
}

.scroll:before{
   content:"";
   height: 6rem;
   display: block;
   margin-top: -4rem;
}

.navbar-nav .nav-link.active{
   color:#2ecc71!important;

}
.navbar-nav .nav-link:hover {
   color:#2ecc71!important;
   transform:scale(.95);
}
.navbar.solid {
   background-color: #fff;
   transition:background-color 1s ease;
}
.custom-text{
color:#2ecc71;
}
/*Remove button outline*/
button:focus, a:focus, a.btn:focus {
   outline: 0;
   -webkit-appearance: none;
   box-shadow: none;
   transition: all .6s ease;
}
button, a, a.btn,
.svg-inline--fa {
   transition: all .6s ease;
}
/*-------------Arka plan fotoğrafı----------*/
.background-image{
   position: relative;
   width: 100%;
   height: 100vh;
   display: table;
   z-index: -1;
}
.background-wrap{
   clip: rect(0,auto,auto,0);
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
}
.background-inner{
   background-image:url('../img/1.jpg');
   position: fixed;
   height: 100%;
   width: 100%;
   background-size: cover;
   background-position: center;
   -webkit-transform: translateZ(0);
   transform:translateY(0);
   will-change: transform;
   display: table;
   opacity: .7;
}
/*---------------ARKAPLAN YAZI POZİSYONU-----------*/
.background-texts{
   position: absolute;
   top: 45%;
   width: 100%;
}

/*Çizgi*/
.custom-hr{
   width: 5%;
   background-color: #2ecc71;
   height: .2rem;
}
/*Montalin Nedir? Bölümü*/

.montalin-image{
   width: 450px;  
margin-top: 5rem;
}
.montalin-image img{
   width: 100%;
}
.montalin-texts{
   margin-top: 5rem;
   margin-bottom: 5rem;
}
/*Bizi seçmeniz için nedenler? Bölümü*/
#why .jumbotron{
   background-image: linear-gradient(to right, rgba(0,170,210,0.62),rgba(105,240,174,0.52)),url('../img/3.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
/*Ürün İçeriği Bölümü*/

.fa-arrow-right {
   opacity: .3;
   animation: shakeX 5s infinite;
   -webkit-animation: shakeX 5s infinite;
   margin-left: .5rem;
}
.fa-arrow-right:hover{
   opacity: 1;
}

.fa-check-double{
   color:#27ae60;
}
.btn-customButton{
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   outline:0;
}
.btn-customButton:hover{
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   transform: scale(1.1);
   transition:transform .8s ease;
}
.about-image{
   width: 500px;
   height: 300px;

}
.about-image img{
   width: 100%;
   height: 100%;
   margin-right: 5rem;
}
#about{
   margin-bottom: 5rem;
}
/*Nasıl Kullanılır Bölümü*/
#how{
   background:#dfe6e9;
   padding:4rem;
}

/*Fiyat Bölümü*/
#price{
   padding:5rem;
   position: relative;
}
#counter .jumbotron{
   background-image: linear-gradient(to right, rgba(0,170,210,0.62),rgba(105,240,174,0.52)),url('../img/1.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
}

.fa-lira-sign{
position: absolute;
top: 7%;
left: 64%;

}

/*SSS Bölümü*/
#info h1{
   text-align: center;
   margin-bottom: 50px;
   }
.info{
   display: none;
}
.openInfo{
   display: block;
}
 dl.faq button {
   margin: 0;
   padding: 0;
   margin-top: 1em;
   font-weight: bold;
   font-size: 110%;
   border: none;
   background-color: transparent;
   padding-left: 0.125em;
 }

 dl dd {
   margin: 0;
   padding: 0;
   margin-left: 1.5em;
 }
 
 dl.faq .desc {
   margin: 0;
   padding: 0.5em;
   font-size: 110%;
   display: none;

 }
 
 dl.faq button:hover,
 dl.faq button:focus {
   background-color: #fff;
 }
 
 dl.faq button:focus {
   border-color: #333;
 }
 
 dl.faq button:hover {
   text-decoration: underline;
 }
 
 dl.faq button:active {
   background-color: #333;
 }
 

/*Footer*/
ul.social{
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 1.4rem;
}
ul.social li{
   display: inline;
   padding-right:.5rem;
}
ul.social li a{
   color:#2ecc71;
   transition: all .2s ease;
}
ul.social li a:hover{
   color:#27ae60;
}

footer{
   background: #333;
   color:#fff;
   height: 14vh;
   
}



/*RESPONSİE AYALARI(Tüm cihaz uyumlulukları için)*/

@media screen and (max-width:576px){
   .background-texts h4{
      font-size:1.3rem
   }
   .background-texts p{
      font-size:.8rem;
   }
   .background-texts a{
      font-size:1rem;
   }
   .montalin-image{
      width: 280px;
      margin:auto;
   }
   #customButton .fa-arrow-right{
      display:none;
   }
   #customButton{
      margin-bottom: 2rem;
   }
   .about-image{
      width: 300px;
      margin:auto;
   }
   .fa-lira-sign{
      left: 75%;   
      }

}

@media screen and (max-width:768px){
   .montalin-image{
      width: 450px;
      margin:auto;
   }
}

@media screen and (max-width:960px){
   .montalin-image{
      width: 350px;
      
   }
   .montalin-image img{
      margin-top: 8rem;
  
   }
}
@media screen and (max-width:1200px){
   .montalin-image{
      width: 350px;
      }
   .montalin-image img{
      margin-top: 10rem;
  
   }

}