*{
    margin: 0;
    padding: 0;

}

h1{
    
    font-size: 32px;
}
#container{
    display: grid;
    grid-template: 80px 26rem auto auto auto auto 80px / 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px 20px;
    grid-template-areas:
    "nav nav nav nav nav nav"
    "slider slider slider slider slider slider"
    "uygulamalar uygulamalar uygulamalar uygulamalar uygulamalar uygulamalar"
    "uygulamaci1 uygulamaci1 uygulamaci1 uygulamaci2 uygulamaci2 uygulamaci2"
    "faydali faydali faydali faydali faydali faydali"
    "konum konum iletisim iletisim randevu randevu"
    "footer footer footer footer footer footer"
}


nav{
    position: fixed;
    width: 100%;
    grid-area: nav;
    background-color:#003333;
    height: 5rem;
    line-height: 5rem;
    /* padding: 0 10rem; */
}
nav #menuBtn{
    display:none;}
nav .menuBtn{
    font-size:2rem;
    float:right;
    color:#f1faee;
    line-height: 80px;
    margin-right: 2rem;
    display: none;
}
.logo{
    color:#f1faee;
    font-size:2rem;
    display: inline-block;
    height: 80px;
    line-height:80px;
    padding: 0 2rem;
    /*min-width 350px;*/

}
nav ul{
    float:right;
    margin-right:2rem;
    transition:all .5s;
}
nav ul li{
    list-style-type: none;
    display: inline-block;
    line-height: 80px;
    margin:0 .2rem;

}
nav ul li a{
    color:#f1faee;
    font-size: 1rem;
    padding:.5rem;
    border-radius: 3px;
    text-decoration: none;
}
nav ul li a.active{
    background:#e63946;
    
}
nav ul li a:hover{
    background: #ff6633;
    transition:all .5s;
}
#menu2{
    text-align:center;
    list-style-type:none;
    }

#menu2 a{
    display:block;
    text-align:center;
    text-decoration:none;
    background: #ff6633;
    color:#FFFFFF;
    width:250px;
    height:150px;
    padding-top: 50px;
    margin-bottom: 1rem;
    font-size:26px;
    font-weight:bold;
    border-radius: 2rem;        
}

#menu2 a:hover{
    background: #003333;
    transition: all 500ms ease;
    
}
#menu2 li{
    margin-bottom: 1rem;
    width: 25%;
    display:inline;
    float:left;
    margin:0px;
    line-height:55px;
}

input{
    padding-left: .5rem;
    width: 100%;
    background-color:#8FD8DE;
    height:2rem;
    border-radius:10px;}
    textarea{
    padding-left: .5rem;
    width: 100%;
    background-color:#8FD8DE;
    height:4rem;
    border-radius:10px;
}

section #faydali #bilgi1,#bilgi2,#bilgi3,#bilgi4,#bilgi5{
    width:100%;
    height:45px;
    overflow:hidden;
    cursor:pointer;
    margin-bottom:10px;
    padding-top: 1rem;
    text-align:left;
    border:none;
    padding-left:50px;
    vertical-align:top; 
    background-image:url(images/tikla.png); 
    background-repeat:no-repeat; 
    background-position:right;
}
section #faydali #bilgi1:focus,#bilgi2:focus,#bilgi3:focus,#bilgi4:focus,#bilgi5:focus {
    width:100%;
    height:auto;
    overflow:visible;
    cursor:pointer;
    background-image:url(); 
    background-color:#FFFFFF;
    border:none;
    padding:20px;
    }

p{
    font-weight: lighter;
    font-size: 20px;
    padding-bottom: .8rem;
    text-align: left;
}
#slider{
    grid-area: slider;
    background:url(images/banner.png) no-repeat;
    background-size:cover;
    background-position:right;
    height: 26rem;
    padding: 0 2rem;    
}
#uygulamalar{
    grid-area: uygulamalar;
    padding: 0rem 4rem;
    }
#uygulamaci1{
    grid-area: uygulamaci1;
        padding: 0 2rem;
    
}
#uygulamaci2{
    grid-area: uygulamaci2;
    /* background:url(images/iu.png) no-repeat;
    background-size: cover; */
    padding: 0 2rem;
    
    }
#faydali{
    grid-area: faydali;
    background-color:#879696;
    height: auto;
    padding: 2rem 2rem;    
}
#konum{
    margin-left: .5rem;
    padding-bottom: .5rem;
    grid-area: konum;
    background-color:#f1faee;
    border:outset 5px;   
}
#iletisim{
    grid-area: iletisim;
    background-color:#f1faee;
    padding: 0 2rem;    
}
#randevu{
    grid-area: randevu;
    background-color:#f1faee;
    padding: 0 2rem; 
    border:outset 5px;      
}
#footer{
    grid-area: footer;
    background-color:#003333;
    color: #f1faee;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    padding: 0 .5rem; 
    margin-top: 4rem;   
}

@media(min-width:1030px) and (max-width:1230px){
    h1{
        font-size: 32px;
    }
    .logo{
        color:#f1faee;
        font-size:2rem;
        display: inline-block;
        height: 80px;
        line-height:80px;
        padding: 0 2rem;
        /*min-width 350px;*/
    }

    nav .menuBtn{
        display:initial;
    }
    nav ul{
        padding-bottom: 2em;
        position: fixed;
        background:#003333;
        width: 100%;
        min-width:350px;
        height:calc(100vh-80px);
        top: 80px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        transition:all .5s;
        left:-100%;

    }

    
    nav ul li{
        display: block;
        min-width:350px;
        text-align: center;
        line-height:2rem;
    }
    nav ul li a{
        display:block;

    }
    nav #menuBtn:checked ~ ul{
        left:0;
    }
    nav #menuBtn:checked ~ label.menuBtn i::before{
    content: "\f00d";
    }
    #menu2{
        text-align:center;
        list-style-type:none;
    }
        #menu2 a{
        display:block;
        text-align:center;
        text-decoration:none;
        background: #ff6633;
        color:#FFFFFF;
        width:450px;
        height:150px;
        padding-top: 50px;
        margin-bottom: 1rem;
        font-size:26px;
        font-weight:bold;
        border-radius: 2rem;
            
        }
        #menu2 a:hover{
        background: #003333;
        transition: all 500ms ease;
        
        }
        #menu2 li{
            margin-bottom: 1rem;
            width: 50%;
            display:inline;
            float:left;
            margin:0px;
            line-height:55px;}
        input{
            padding-left: .5rem;
            width: 100%;
            background-color:#8FD8DE;
            height:2rem;
            border-radius:10px;}
            textarea{
            padding-left: .5rem;
            width: 100%;
            background-color:#8FD8DE;
            height:4rem;
            border-radius:10px;}
    
}

@media(min-width:250px) and (max-width:1029px){
    nav .menuBtn{
        display:initial;
    }
    nav ul{
        padding-bottom: 2em;
        position: fixed;
        background:#003333;
        width: 100%;
        min-width:350px;
        height:calc(100vh-80px);
        top: 80px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        transition:all .5s;
        left:-100%;

    }

    
    nav ul li{
        display: block;
        min-width:350px;
        text-align: center;
        line-height:2rem;
    }
    nav ul li a{
        display:block;

    }
    nav #menuBtn:checked ~ ul{
        left:0;
    }
    nav #menuBtn:checked ~ label.menuBtn i::before{
    content: "\f00d";
    }
    h1{        
    font-size: 20px;}
    h3{
        font-size: 15px;
    }
    .logo{
        color:#f1faee;
        font-size:1.2rem;
        display: inline-block;
        height: 80px;
        line-height:80px;
        padding: 0 2rem;
        /*min-width 350px;*/
    }
    #menu2{
    text-align:center;
    list-style-type:none;
    }

    #menu2 a{
    display:block;
    text-align:center;
    text-decoration:none;
    background: #ff6633;
    color:#FFFFFF;
    width:100%;
    height:120px;
    padding-top: 50px;
    margin-bottom: 1rem;
    font-size:26px;
    font-weight:bold;
    border-radius: 2rem;        
    }
    
    #menu2 a:hover{
    background: #003333;
    transition: all 500ms ease;
    
    }
    #menu2 li{
    margin-bottom: 1rem;
    width: 100%;
    display:inline;
    float:left;
    margin:0px;
    line-height:55px;
    }

    input{
        padding-left: .5rem;
        width: 100%;
        background-color:#8FD8DE;
        height:2rem;
        border-radius:10px;}
        textarea{
        padding-left: .5rem;
        width: 100%;
        background-color:#8FD8DE;
        height:4rem;
        border-radius:10px;
    }
    

#container{
    display: grid;
    grid-template: 80px 26rem auto auto auto auto auto auto auto 80px / 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px 20px;
    grid-template-areas:
    "nav nav nav nav nav nav"
    "slider slider slider slider slider slider"
    "uygulamalar uygulamalar uygulamalar uygulamalar uygulamalar uygulamalar"
    "uygulamaci1 uygulamaci1 uygulamaci1 uygulamaci1 uygulamaci1 uygulamaci1"
    "uygulamaci2 uygulamaci2 uygulamaci2 uygulamaci2 uygulamaci2 uygulamaci2"
    "faydali faydali faydali faydali faydali faydali"
    "iletisim iletisim iletisim iletisim iletisim iletisim"
    "konum konum konum konum konum konum"            
    "randevu randevu randevu randevu randevu randevu"
    "footer footer footer footer footer footer"   
        }
    section #faydali #bilgi1,#bilgi2,#bilgi3,#bilgi4,#bilgi5{
            height: 55px;
            padding-left:20px;
        }
    #faydali{
        grid-area: faydali;
        background-color:#879696;
        height: auto;
        padding: 1.5rem 2rem;    
    }
    #konum{
        margin-top: 2rem;
        padding-bottom: .5rem;
        grid-area: konum;
        background-color:#f1faee;
        border:outset 5px;   
    }
    #iletisim{
        margin-top: 2rem;
        grid-area: iletisim;
        background-color:#f1faee;
        padding: 0 2rem;    
    }
    #randevu{
        margin-top: 2rem;
        grid-area: randevu;
        background-color:#f1faee;
        padding: 0 2rem; 
        border:outset 5px;      
    }
.content{
    display:block;
    clear:both;
    width:80%;
    height:100%;
    padding-top:70px;
    padding-left:70px;
    padding-right:70px;
    line-height:50px;
    margin-left:auto;
    margin-right:auto;
    background-color:#045555;
    color:#FFFFFF;
    text-align:center;
    font-size:22px;
}

}