@media only screen and (max-width:1450px){
    .container{max-width:1200px!important}
    .main-content h2{font-size:40px}
    .main-img{right:-100px}
    .main{overflow:hidden}
    .about-small{margin-left:-25%}
    .hizmet-box-img{width:200px;height:200px}
    .hizmet-box-content p{font-size:13px}
    .hizmet-box-content h3{font-size:20px}
    .logo{width:75%}
    .header-menu ul li a{font-size:14px}
    .teklif-al a{font-size:14px}
    .yazilar-slider .blog-list-box-image{height:180px}
    .yazilar-slider .blog-list-box{height:380px}
}

@media only screen and (max-width:1200px){
    .container{max-width:90%!important}
    .main-img{right:0;top:0}
    .green-btn{font-size:12px}
    .yorum-content{font-size:14px}
    .yorum-content p{font-size:12px}
    .hizmet-box-img{width:170px;height:170px}
    .hizmet-box-content p{font-size:11px}
    .kategori-box{height:450px;padding:30px}
    .main-content{width:100%}
    .blog-first-title h2{font-size:28px}
    .blog-first-title span{font-size:16px}
    .blog-first-title{margin-bottom:15px}
    .blog-first-description p{font-size:14px;line-height:22px}
    .blog-first-description a{font-size:14px}
    .blog-first-content{padding:0 50px}
    .blog-first-image{height:300px}
    .teklif-al-box h3{font-size:24px;line-height:34px}
    .teklif-al-box p{font-size:14px}
    .teklif-al-box .ortala{padding:0 30px}
    .teklif-al-box{height:330px}
    .blog-list-box-image{height:130px}
    .blog-list-box{height:330px}
    .blog-list-box-content{padding:0 15px}
    .blog-list-box-content h3 a{font-size:16px;line-height:24px}
    .yazilar-slider .blog-list-box-content{padding:0 20px}
    .icon-box span{font-size:10px;min-height:30px}
    .hizmet-img{margin:50px 0 0}
    .icon-box span{font-size:13px;min-height:40px}
    .big-title h1{font-size:60px}
    .hello strong{font-size:50px}
    .hello img{width:55px}
    .contact-information{padding-left:15px}
    .about-small{margin-left:-34%}
    .about-content h2 br{display:none}
    .about-img{width:100%}
}

@media only screen and (max-width:850px){
    .header{z-index:3}
    .header-menu {
        position: fixed;
        background-color: #ffffff;
        height: 100vh;
        z-index: 11;
        width: 100%; /* Menü genişliği ekranın tamamını kapsayacak şekilde ayarlandı */
        right: -100%; /* Menü başlangıçta ekran dışında olacak şekilde ayarlandı */
        padding: 0;
        display: inline-block !important;
        padding-top: 100px;
        box-sizing: border-box;
        transition: all ease-in-out .3s;
        top: 0;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
        border-radius: 0;
        overflow-x: scroll;
    }

    .header-menu.active{right:0}

    .header-menu ul li {
        width: 100%;
        float: left;
        margin-left: 0;
        box-sizing: border-box;
        padding: 10px 25px;
        border-bottom: 1px solid #ddd;
    }

    .header-menu ul li a {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
        position: relative;
        padding-right: 30px;
    }

    .header-menu ul li.menu-item-has-children::after {
        content: "\f0d7";
        font-family: 'Font Awesome 5 Free';
		cursor: pointer;
        font-weight: 900;
        font-size: 20px;
        color: #ff6600;
        transition: transform 0.3s ease;
        position: relative;
        right: 2%;
        top: 15px;
		padding: 2px 0;
        margin: 0;        
        line-height: 1;
        letter-spacing: -.0045em;
        transform: translateY(-50%);
    }

    .header-menu ul li.menu-item-has-children.active::after,
    .header-menu ul li.menu-item-has-children:hover::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .header-menu ul li a:hover, 
    .header-menu ul li a.active {
        color: #ff6600;
        background-color: #f2f2f2;
        border-radius: 5px;
    }

    .header-menu ul li a::after {
        content: '';
        position: fixed;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 2px;
        background-color: #ff6600;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    .header-menu ul li a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .header-menu ul li .dropdown-menu {
        background-color: #f9f9f9;
    }

    .header-menu ul li .dropdown-menu a {
        height: 55px;
        padding: 0 25px;
        border-bottom: 1px solid #000000;
        color: #000000;
        transition: background-color 0.3s ease;
    }

    .header-menu ul li .dropdown-menu a:hover {
        background-color: #ff6600;
        color: #ffffff;
        border-radius: 5px;
    }

    .black-shadow{position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.5);z-index:10;top:0;left:0}
    .menu-btn{display:block;position:absolute;right:15px;width:35px;font-size:12px;padding-top:25px;margin-top:12px;z-index:12}
    .menu-btn span{width:100%;height:2px;background-color:#071333;position:absolute;top:0;transition:all ease-in-out .3s}
    .menu-btn span:nth-child(2){top:8px}
    .menu-btn span:nth-child(3){top:16px}
    .menu-btn.active span:nth-child(2){opacity:0}
    .menu-btn.active span:nth-child(1){transform:rotate(45deg);top:17px}
    .menu-btn.active span:nth-child(3){transform:rotate(-45deg);top:17px}
    .menu-btn.active strong{opacity:0}
    .menu-btn.active span{background-color:#fff}
    .header-menu ul{display:block}
    .main{height:auto;padding:100px 0}
    .main-img{display:none}
    .about-imgs{box-sizing:border-box;width:90%;float:right;margin-bottom:180px}
    .about-content{padding-left:0}
    .index-about{margin:100px 0}
    .yorum-info{width:250px}
    .yorum-content{width:calc(100% - 400px)}
    .hizmet-box-content p{font-size:13px}
    .marka-box{padding:20px;height:100px}
    .kategori-box h3{font-size:22px}
    .kategori-box p{font-size:12px;line-height:20px;width:100%}
    .kategori-box a{font-size:14px}
    .kategori-box{height:320px}
    .form-text{margin-bottom:15px}
    .header-menu ul li.current-menu-item a{color:var(--sari)}
    .header-menu ul li a:before{background:var(--sari);top:auto;bottom:-2px;left:0}
    .blog-first-content{padding:0 40px}
    .blog-first-title h2{font-size:24px}
    .blog-content{margin:80px 0}
    .teklif-al-box{margin-bottom:30px}
    .blog-list-box-image{height:180px}
    .blog-list-box-content h3 a{font-size:18px}
    .blog-list-box{height:auto;padding-bottom:20px}
    .blog-top-right{justify-content:start;margin-bottom:30px}
    .icindekiler-sidebar{padding-right:0}
    .big-title h1{font-size:50px}
    .hello strong{font-size:40px}
    .hello img{width:45px}
    .big-title{margin-bottom:20px}
    .contact-form{margin-bottom:0}
    .adres,.mail,.telefon{margin-bottom:10px}
    .big-title-2 p{width:100%}
    .about-content-2{padding-right:0;margin-bottom:50px}
    .about-2{margin-top:0;margin-bottom:50px}
    .header-menu ul li ul {
        position: relative;
        width: 100%;
    }

    .header-menu ul li ul li {
        padding: 0px;
    }

    .header-menu ul li.menu-item-has-children ul li a {
        padding: 10px 0px;
        color: #000000;
        font-weight: 300;
    }

    .header-menu ul li a {
        width: auto;
        float: left;
    }

    .header-menu ul li.menu-item-has-children:hover:before {
        transform: rotate(180deg);
    }

    .header-menu ul li:hover > ul li a {
        font-size: 12px;    
        padding: 25px 0px;
    }

    .header-menu ul li ul li:before {
        top: 6px !important;
        right: 0px !important;
        font-size: 14px;
    }

    .header-menu ul li ul li:hover ul {
        float: left;
        display: block !important;
        right: 0px;
        background: transparent;
        border: none;
    }
}

@media only screen and (max-width:479px){
    .main-content h1{font-size:16px}
    .main-content h2{font-size:34px}
    .main-content p{width:100%;font-size:14px}
    .main{padding:50px 0 70px}
    .deneyim-box{width:120px;height:130px}
    .deneyim-box strong{font-size:40px;line-height:60px}
    .deneyim-box p{font-size:16px}
    .about-big{width:80%;margin-left:0;height:250px}
    .about-small{width:130px;height:130px;bottom:-180px;margin-left:-30%;border:5px solid #fff}
    .shape-2{right:5px;top:-30px}
    .shape-1{border-bottom:100px solid var(--kirmizi);border-right:120px solid transparent;bottom:-20px;left:-20px}
    .about-imgs{margin-bottom:80px}
    .about-content h2{font-size:28px}
    .about-content p,.about-content ul li{font-size:14px}
    .about-content a,.main-content a{font-size:14px}
    .index-about{margin-bottom:50px}
    .yorum-info{width:100%;position:relative}
    .yorum-content{width:100%;margin-top:15px;margin-bottom:15px}
    .owl-nav{top:auto;margin-top:4px;right:auto;left:0}
    .owl-next,.owl-prev{margin-left:0;margin-right:10px}
    .index-hizmetler{width:100%;float:left}
    .index-yorumlar{margin-bottom:50px}
    .hizmet-content-box{margin-bottom:30px}
    .hizmet-box-content p{font-size:14px}
    .hizmet-box-content h3{font-size:22px}
    .index-markalar{padding:50px 0;margin:30px 0}
    .marka-box{width:calc(50% - 30px);padding:15px;height:70px}
    .marka-button a{font-size:14px}
    .kategori-col{margin-top:30px}
    .kategori-box{height:380px}
    .kategori-box p{font-size:14px;line-height:24px}
    .index-kategoriler{margin-bottom:50px}
    .footer-description{width:100%}
    .footer-title{margin-top:30px}
    .footer{padding:20px 0 80px}
    .header-menu{width:250px}
    .header-menu ul li a{font-size:14px}
    .form-text{width:100%}
    .mobil-action{display:flex}
    .search-form input[type=search]{width:100%}
    .breadcrumb{width:100%;float:left;margin-bottom:5px}
    .search-form{width:100%;float:left;margin-bottom:20px}
    .breadcrumb-head{padding:20px 0}
    .breadcrumb a,.breadcrumb span{font-size:14px}
    .title h1{font-size:40px}
    .blog-first{margin-top:10px;display:block}
    .blog-first-image{width:100%;height:200px;margin-bottom:15px}
    .blog-first-content{width:100%;padding:0 25px}
    .blog-first-title span{font-size:14px}
    .blog-first-title h2{font-size:20px}
    .blog-first-description a{margin-bottom:25px}
    .blog-content{margin:50px 0}
    .teklif-al-box img{position:relative;right:0;width:60%;margin-left:20%;margin-top:20px;margin-bottom:20px}
    .teklif-al-box{display:block;height:auto}
    .teklif-al-box .ortala{width:100%;margin-bottom:25px;padding:0 25px}
    .blog-list-box-content{padding:0 25px}
    .load-more-row{margin-top:20px}
    .load-more-row span{font-size:14px;padding:15px 40px}
    .blog-top-right{display:block;margin-bottom:10px;margin-top:0}
    .yazar-img{width:30px;height:30px}
    .tags a,.yazar-name{line-height:30px}
    .blog-detail-title h1{font-size:24px;line-height:34px;width:100%}
    .blog-image{margin-top:10px}
    .icindekiler-sidebar{margin-bottom:15px}
    .teklif-al-box.detail-teklif-al{height:auto}
    .teklif-al-box.detail-teklif-al img{width:60%;max-height:initial}
    .teklif-al-box.detail-teklif-al .ortala{width:100%}
    .teklif-al-box.detail-teklif-al .ortala p{margin-bottom:20px}
    .blog-detail-content h2{font-size:30px}
    .blog-detail-content h3{font-size:22px}
    .ilgili-icerikler .title h2{font-size:30px}
    .yazilar-slider{margin-top:15px}
    .yazilar-slider .blog-list-box-image{height:130px}
    .yazilar-slider .blog-list-box-content{padding:0 15px}
    .yazilar-slider .blog-list-box-content h3 a{font-size:14px;line-height:22px}
    .yazilar-slider .blog-list-box-content p{font-size:12px;min-height:auto;margin-bottom:10px}
    .yazilar-slider .blog-list-box-content a{font-size:12px}
    .yazilar-slider .blog-list-box{height:auto}
    .owl-dots{margin-top:0}
    .hizmet-content h2{font-size:26px}
    .hizmet-img{margin-top:20px}
    .icons-row{display:block;width:calc(100% + 20px);margin-left:-10px}
    .icon-box{float:left;width:calc(50% - 20px);margin:10px}
    .hizmet-row{margin:30px 0}
    .ref-logo{padding:10px;height:90px}
    .hizmet-referanslar{margin:30px 0;padding:20px 0}
    .accordionButton strong{font-size:14px}
    .accordionButton{height:auto;padding:10px 0;margin-bottom:10px}
    .hizmet-sss{margin-top:10px;margin-bottom:50px}
    .hello strong{font-size:30px}
    .hello img{width:35px}
    .big-title h1{font-size:36px}
    .big-title h1 br{display:none}
    .contact-form{padding:25px 15px;margin-top:15px}
    .contact-form h2{font-size:24px}
    .contact-form p{font-size:14px;margin-bottom:20px}
    .contact-form ul li{width:calc(100% - 20px);margin:8px 10px}
    .contact-form ul li .form-text{margin-bottom:0}
    .contact-information{padding-left:0;margin-bottom:30px}
    .big-title-2 h1:before{width:80px}
    .hizmet-list{margin:50px 0}
    .referanslar-row{margin:40px 0}
    .referans-logo{padding:20px;height:80px}
    .hata-content h1 {
        font-size: 32px;
    }

    .hata-content p {
        font-size: 14px;
        font-weight: 300;
    }

    .hata-content p br {
        display: none;
    }

    .hata-content {
        margin-bottom: 50px;
        text-align: center;
    }

    .hata-content a {
        font-size: 13px;
    }
}