/*=========================================
RESPONSIVE.CSS
İNCİ OTO KURTARMA
=========================================*/

/*-----------------------------
1200px
-----------------------------*/
@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1{
    font-size:60px;
}

.hero-text{
    width:600px;
}

.service-grid{
    grid-template-columns:repeat(2,1fr);
}

.about-grid{
    gap:50px;
}

.footer-grid{
    gap:40px;
}

}


/*-----------------------------
992px
-----------------------------*/
@media (max-width:992px){

.header .container{

    height:auto;

    padding:15px 0;

    flex-direction:column;

}

.logo{
    margin-bottom:15px;
}

nav ul{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;

}

.header-phone{

    margin-top:20px;

}

.hero{

    text-align:center;

}

.hero-text{

    width:100%;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero h1{

    font-size:52px;

}

.hero p{

    font-size:20px;

}

.about-grid{

    display:block;

}

.about-image{

    margin-bottom:40px;

}

.counter-grid{

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.footer-grid{

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

}


/*-----------------------------
768px
-----------------------------*/
@media (max-width:768px){

.header{

    position:relative;

}

.hero{

    height:auto;

    padding:140px 0 90px;

}

.hero h1{

    font-size:42px;

    line-height:1.2;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-red,
.btn-white{

    width:100%;

    text-align:center;

}

.section-title h2{

    font-size:34px;

}

.service-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:35px 25px;

}

.about{

    padding:80px 0;

}

.about h2{

    font-size:34px;

}

.about ul li{

    font-size:17px;

}

.counter-grid{

    grid-template-columns:1fr;

}

.cta{

    padding:80px 20px;

    text-align:center;

}

.cta h2{

    font-size:34px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

footer ul{

    padding:0;

}

footer li{

    margin-bottom:10px;

}

.whatsapp,
.call{

    width:55px;

    height:55px;

    font-size:24px;

}

}


/*-----------------------------
576px
-----------------------------*/
@media (max-width:576px){

.logo img{

    height:50px;

}

nav ul{

    flex-direction:column;

    gap:12px;

}

.header-phone a{

    padding:10px 18px;

    font-size:15px;

}

.hero{

    padding:120px 0 70px;

}

.hero span{

    font-size:13px;

    padding:10px 20px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:15px;

}

.service-card{

    padding:30px 20px;

}

.service-card i{

    font-size:45px;

}

.service-card h3{

    font-size:22px;

}

.about h2{

    font-size:28px;

}

.about p{

    font-size:16px;

}

.about ul li{

    font-size:16px;

}

.counter h2{

    font-size:40px;

}

.counter p{

    font-size:16px;

}

.cta h2{

    font-size:28px;

}

.cta p{

    font-size:16px;

}

.footer-grid h3{

    font-size:22px;

}

footer{

    font-size:15px;

}

.copy,
.copyright{

    font-size:14px;

}

}


/*-----------------------------
400px
-----------------------------*/
@media (max-width:400px){

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.btn-red,
.btn-white{

    padding:15px;

    font-size:15px;

}

.service-card{

    padding:25px 15px;

}

.section-title h2{

    font-size:24px;

}

.about h2{

    font-size:24px;

}

.counter h2{

    font-size:34px;

}

.cta h2{

    font-size:24px;

}

.whatsapp{

    right:15px;
    bottom:80px;

}

.call{

    right:15px;
    bottom:15px;

}

}
@media(max-width:992px){

.pricing-grid{

grid-template-columns:1fr;

}

.featured{

transform:none;

}

.page-banner h1{

font-size:44px;

}

}

@media(max-width:576px){

.page-banner{

height:260px;

}

.page-banner h1{

font-size:34px;

}

.page-banner p{

font-size:16px;

}

.price{

font-size:34px;

}

}