html{
  scroll-behavior: smooth;
  }
/*---------------------------------- GİRİŞ CONTAİNER --------------------------------*/

.giris-container{
    text-align: left;
    background-image: url(https://media.giphy.com/media/26gR0zosc4HvAmul2/giphy.gif);
    margin: 0 auto; 
    margin-top: 5%;
    width: 100%;
    height: 600px;  
    object-fit: cover;
    background-size: cover;

    }
    .kırmızı{
      color: rgb(228, 36, 49);
    }
    .container-content h1{
      font-family: 'Anton', sans-serif;
      font-weight: 700;
      margin-left: 15%;
      letter-spacing: 5px;
    }
    #ana-title{       
      color: white;
      text-shadow: 1px 1px rgb(51, 49, 47);
      padding-top: 20%;
      font-size: 90px;
    }
    #detail-title{
      padding-top: 71px;
      font-family: 'Raleway', sans-serif;
      font-size: 25px;
      text-shadow: 1px 1px rgb(51, 49, 47);
      color: white;   
      }

    /*------------- küçük ekran -----------*/
    @media (max-height:850px) {
      .giris-container{
      height: 650px;}
    }
    @media (max-width:559px) {

      .container-content h1{
        text-align: center;
        margin-left: 0px;
      }
      #ana-title{
        padding-top: 55%; 
        font-size: 50px;
      }
      #detail-title{
        margin-top: -2%;
        font-size: 20px;
        }
        .motive-title{
          font-size: 36px;
          font-family: 'Raleway', sans-serif;
          color: white;
          padding-top:3%;
        }
      }

/*------------------------------------ MOTİVASYON CONTAİNER------------------------------*/

        .motive-container{
          background:rgb(231, 46, 59);
          width: 100%;
          height: 120px;
          text-align: center;
        }
        .motive-title{
          font-size: 30px;
          font-family: 'Raleway', sans-serif;
          color: white;
          padding-top:3%;
        }
        @media (max-width:559px) {

            .motive-title{
              font-size: 19px;
              padding-top:8%;
            }
          }
/*-----------------------------------------FİYATLAR-------------------------------------*/

          /*---fiyat genel container---*/
          .fiyat-container{
            background-image: url(https://images.unsplash.com/photo-1554284126-aa88f22d8b74?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1157&q=80);
            width: 100%;
            height:auto;
            object-fit: cover;
            background-size: cover;
            text-align: center;
            padding-bottom: 5%;
          }
          .fiyat-container .row{
            text-align: center; justify-content: center; margin: 0 auto;
          }
          .plan-title{
            font-size: 45px;
            font-family: 'Anton', sans-serif;
            color: white;
            letter-spacing: 4px;
            padding-top: 75px;
          }
          .sis-fiyat{
            background-color: rgba(0, 0, 0, 0.459);
          }
           /*--- ortadaki fiyat kartı---*/
          #fiyat-orta-card{
            background-color: rgba(83, 82, 82, 0.726);
          }
          /*---fiyat kartı---*/
          .fiyat-card{
            background-color: rgba(0, 0, 0, 0.336);
            width: 300px;
            height: 290px;
            padding-top: 5%;          
            margin: 0 auto;
            margin-top: 25%;
            border: 2px solid rgb(156, 153, 153);
            /*--yavaş büyümesini sağlıyor---*/
            transition: transform 0.5s;
          }  
      #f-c{
        padding-top: 0px;
        background-color: rgba(255, 255, 255, 0.233);
      }
          #son-f-card{
            margin: 0 auto;
                    }
         .f-not{
           margin-top: 5%;
           color: rgb(255, 255, 255);
          text-shadow: rgb(0, 0, 0); 
          font-size: 19px;
          background-color: rgba(0, 0, 0, 0.411);
          background-color: rgba(231, 46, 58, 0.74);

        }  
          
          @media (max-width:767px) {
            .fiyat-card{
              margin-top: 10%;
            }
            .f-not{
            font-size: 13px;
           }
          }
              
             /*------------- ipad -----------*/

             @media (max-width:900px){
             #f-card{
                 margin-left: 9%;
             }
             #f-card-3{
                margin-left: 28%;
             }
             .fiyat-container .row{
              margin-left: -14%;
            }
             
        
        }
            /*------------- telefon -----------*/

             @media (max-width:767px){
                #f-card{
                    margin-left: 0px;
                }
                #f-card-3{
                    margin-left: 0px;
                 }
           
                 .fiyat-container .row{
                  margin-left: 0%;
                }
                 
            }
          .fiyat-card:hover{
           /*-- büyümesini sağlıyor---*/
            transform: scale(1.1)
          }
          .üyelik-title{
            padding-top: 25px;
            font-size: 15px;
            color: white;
          }
          .fiyat-number{
            font-family: 'Jura', sans-serif;
            font-size: 70px;
            color: white;
          }
          .tl{
            font-size: 40px;
          }
         
         /*---fiyat kartı iç kontainer---*/
         .içerik-container{
        background-color: rgb(17, 17, 17);
        width: 100%;
        height:auto;
        border-top: 2px solid rgb(156, 153, 153);
        margin-top: 10%;
        padding-bottom: 2%;
          }
         #orta-içerik-cont{
        background-color:#EC3642;
          }
      .ara-button {
        background-color:rgb(228, 36, 49);
        color: white;
        width: 50%;
        margin: 0 auto;
        padding: 2%;
        margin-bottom: 12%;
        font-family: 'Anton', sans-serif;
        letter-spacing: 1px;
      }
      #ara-but-a{
        color: white;
      }
      .içerik-container p{
        color: white;
        padding-top: 5%;
        font-size: 14px;
      }
      .al-çizgi{
        color: #EC3642;
        font-size: 18px;
      }
      .ak-çizgi{
        color: white;
        font-size: 18px;
      }
      /*-- ribbon---*/
      .ribbon-tile{
    background: rgba(0, 128, 128, 0);
    color: #fff;
    padding: 20px;
    display: block;
    position: relative;
      }
      .ribbon{
    background:  rgb(212, 30, 42);
    height: 40px;
    line-height: 40px;
    position: absolute;
    padding-right: 40px;
    left: -6px;
    padding-left: 20px;
    top: 10px;
    color: #fff;}
  
      .ribbon:before{
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    top: 100%;
    left: 0px;
    border-top: 7px solid #7f0000;
    border-left: 7px solid transparent;
      }
      .ribbon:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 20px;
    border-color:  rgb(212, 30, 42);
    border-right-color: transparent;
    position: absolute;
    left: 100%;
    top: 0;
      }
      /*----------------------------------PLAYLIST------------------------------*/
      .playlist-container{
        text-align: left;
        background-image: url(https://media.giphy.com/media/3oEjHVZN9RQJim14n6/giphy.gif);
        width: 100%;
        height:800px;
        object-fit: cover;
        background-size: cover;
      }
      .playlist-container h1{
        font-family: 'Anton', sans-serif;
        font-weight: 700;
        margin-left: 15%;
        text-shadow: 2px 4px;
        letter-spacing: 5px;
      }
      .playlist-button{
        background-color:#EC3642;
        color: white;
        width: 150px;
        padding: 1%;
        font-family: 'Anton', sans-serif;
        letter-spacing: 1px;
        text-align: center;
        margin-left: 15%;
        margin-top: 5%;
      }
       /*----------------------------------INSTAGRAM------------------------------*/

    .instagram-container{
     background-color: rgb(22, 22, 22);
      width: 100%;
      height:auto;
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
      text-align: center;
    }
    .insta-galery{
      margin-top: 7%;
    }
    .insta-img {
      width: 250px;
      height: 250px;
      object-fit: cover;
      background-size: cover;
      padding: 0.5%;
    }
    .insta-a:hover{
      color:rgb(22, 22, 22) ;
    }
    @media (max-width:600px) {
      #k-img{
        display: none;
      }
   }
  
        /*---------------------------------video-----------------------------*/
        .program-video video{
          width:65%;
          height: auto;}
      
        .program-video{
          background-color: rgb(22, 22, 22);
          text-align: center;
        }

        
        @media (max-width:800px){

          .program-video video{
          width: 100%;}
          }
     /*----------------------------------GALERY------------------------------*/

    .galery-title{
      color: white;
      text-shadow: 1px 1px rgb(51, 49, 47);
      padding-bottom: 20%;
      font-size: 100px;
      font-family: 'Anton', sans-serif;
      font-weight: 700;
      text-align: left;
      margin-right: 15%;
      letter-spacing: 7px;
    }

    .carousel-control-next-icon{
      background-image: url(sağ-ok.png);
      width: 55px;
      height: 55px;
    }
    .carousel-control-prev-icon{
      background-image: url(sol-ok.png);
      width: 55px;
      height: 55px;
    }
     @media (min-width:900px) {
     /*--- sliderın uzunluğu---*/
    .w-100{
      height: 700px;
      object-fit: cover;
      background-size: cover;
    }
    }
    @media (max-width:600px) {
    /*--- sliderın uzunluğu---*/
    .carousel-control-next-icon{
      width: 35px;
      height: 35px;
    }
    .carousel-control-prev-icon{
      width: 35px;
      height: 35px;
    }
    }
        /*----------------------------------BODYBUILDING------------------------------*/

    .building-container{
      background-image:url(building.gif);
      width: 100%;
      height: 600px;  
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
    }
            /*---------------------------------- FITNESS------------------------------*/

    .fitness-container{
      background-image: url(fitness.gif);
      width: 100%;
      height: 600px;  
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
    }
          /*----------------------------------PLATES------------------------------*/

    .pilates-container{
      background-image: url(pilates.gif);
      width: 100%;
      height: 600px;  
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
    }
      /*----------------------------------personal trainer------------------------------*/

    .trainer-container{
      background-image: url(trainer.gif);
      width: 100%;
      height: 600px;  
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
    }
          /*----------------------------------ZUMBA------------------------------*/

    .zumba-container{
      background-image: url(zumba.gif);
      width: 100%;
      height: 600px;  
      padding-bottom: 7%;
      object-fit: cover;
      background-size: cover;
    }

    .zumba-p{
      margin-top: 4%;
      font-size: 25px;
      color: #fff;
    }
    @media (max-width:700px) {
     .zumba-p{
       margin-top: 10%;
       margin-bottom: 5%;
       font-size: 20px;
     }
   }

  
      /*----------------------------------İLETİŞİM------------------------------*/
      .iletişim-container{
        background-image: url(arka.jpg);
        width: 100%;
        height:580px;
        object-fit: cover;
        background-size: cover;
        text-align: center;
      }
    
      .sis{
      background-color: #22222294;
      height:580px;
    }
      .iletişim-title{
        font-size: 45px;
        font-family: 'Anton', sans-serif;
        color: white;
        letter-spacing: 4px;
        padding-top: 12%;
      }
      #iletişim-col{
        font-size: 30px;
        color: white;
        font-family: 'Anton', sans-serif;
        padding-top: 5%;
      }
      @media (max-width:600px) {
        .iletişim-title{
          font-size: 33px;
          padding-top: 30%;
        }
        #iletişim-col{
          font-size: 17px;
        }
     } 

     @media (max-width:400px) {
        #ilk-iletişim-p{
          padding-top: 15%;     
     } 
   } 


     /*--- footer ---*/
      .footer{
       background-color: #222222;
       height: auto;
       text-align: center;
       padding: 2%;
     }
      .footer h1{
      color: white;
      font-size: 19px;
      padding-left: 15%;
      padding-top: 2.5%;
    }
    
      #footer-p{
      color: white;
      font-size: 13px;
      padding-left: 15%;
      padding-top: 0.5%;
      }

      .footer .nav-link{
      
        margin-top: 2.8%;

      }

      #created{
        color: rgba(255, 255, 255, 0.849);
        font-size: 11px;
        padding-top: 2%;
        /*--- display: none; ---*/
        display: none;
      }
      #created a{
        color: rgba(236, 54, 66, 0.87);
        font-size: 11.5px;
      }

     /*--- footer ---*/
      @media (max-width:600px) {
     .footer{
      padding-bottom: 6%;

     }
      .footer h1{
        padding-left: 0px;
        padding-top: 8%;
      }
      
      #footer-p{
       padding-left:0%;
      }
     } 

     .map{
       width: 100%;
       height: 500px;
       margin-bottom: -0.8%;
     }