.service-type-div{
    background: rgb(243, 243, 243);
}
.service-type-div-share{
    background: rgb(243, 243, 243);
}
.service-type-div-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 72px 24px;  
}
.service-type-pic-div{
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(255, 126, 21, 0.18);
}

.service-type-pic-div::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(#ff6b3563, #ff6b35a3);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-type-pic-div:hover::after{
     opacity: 0.3;
}
.service-type-pic-div img{
     display: block;
     width: 100%;
     height: 400px;
     object-fit: cover;    /* crops to fit */
     transition: transform 0.4s ease;
}


.service-type-pic-div img:hover{
    transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(255, 126, 21, 0.18);
}

.service-type-details-div{
  flex: 1;
}

.details-logo{
    display: inline-flex;
    background: #ff6b35;
    border-radius: 12px;
    padding: 10px 14px;
    color: white;
    font-size: 26px;
    margin-bottom: 14px;
}
.service-details-title{
    font-size: 36px;
    margin: 0 0 10px;
    
}

.service-details-subtitle{
    font-size: 18px;
    margin: 0 0 16px;
    color: #484848;
    line-height: 1.7;
}

.service-features{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    color: #484848;
    margin-bottom: 32px;
}

.service-page-link a{
    display: inline-block;
    color: white;
    text-decoration: none;
    background: linear-gradient(#ff5e23, #f5a652);
    border-radius: 12px;
    padding: 12px 24px;
    margin-top: 12px;
    transition: transform 0.4s ease;
}

.service-page-link a:hover{
    transform: scale(1.08);
     box-shadow: 0 10px 20px rgba(255, 126, 21, 0.18);
}
.service-web-pic-div{
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(69, 149, 246, 0.489);
}

.service-web-pic-div::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(#3878f063, #3853daa3);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-web-pic-div:hover::after{
     opacity: 0.3;
}
.service-web-pic-div img{
     display: block;
     width: 100%;
     height: 400px;
     object-fit: cover;    /* crops to fit */
     transition: transform 0.4s ease;
}


.service-web-pic-div img:hover{
    transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(33, 21, 255, 0.18);
}

.details-logo.web{
    background: #4461f1;
}

.service-page-link.web a{
    background: linear-gradient(#2447f6, #8396f7)
}

.service-page-link.web a:hover{
      box-shadow: 0 10px 20px #657be747;
}

.service-software-pic-div{
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(217, 26, 176, 0.34);
}

.service-software-pic-div::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(#ed2fa463, #f023d8a3, #af23f0a3);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-software-pic-div:hover::after{
     opacity: 0.3;
}
.service-software-pic-div img{
     display: block;
     width: 100%;
     height: 400px;
     object-fit: cover;    /* crops to fit */
     transition: transform 0.4s ease;
}


.service-software-pic-div img:hover{
    transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(255, 21, 165, 0.18);
}

.details-logo.software{
    background: #f023d8ec;
}

.service-page-link.software a{
    background: linear-gradient(#ed2fa4, #f023d8f9, #af23f0)
}

.service-page-link.software a:hover{
      box-shadow: 0 10px 20px #7e0aa147;
}

.service-type-div-share.mobile{
    display: none;
}

.technology-box{
    display: inline-block;
    padding: 72px 0;
    margin: 0;
    width: 95%;
    
}

.services-drive.technology{
    background: #ffffff;
}

.service-title.technology{
    font-size: 37px;
}
.technology-box-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-items: center; 
    padding-bottom: 12px;
}

.technology-box-card{
    display: inline-block;
    background: linear-gradient(90deg, rgb(250, 253, 255), white);
    border: 1px solid rgb(216, 214, 214);
    border-radius: 12px;
    width: 170px;
    padding-top: 32px;
    margin-bottom: 12px;
    font-size: 20px;
    color: rgb(137, 136, 136);
    line-height: 64px;
    transition: transform 0.4s ease, border 0.4s ease;
}

.technology-box-card:hover{
    transform: translateY(-4px);
    border: 1px solid rgb(250, 112, 0);
    color: rgb(250, 112, 0);

}

.technology-box-card p{
    font-size: 14px;
    color: black;
    padding: 0px;
}

.technology-box-card > *{
  display: block;
  margin: 0 auto;
}

.ucretsize-danis.services{
    background: linear-gradient(135deg, rgb(250, 104, 0), rgb(245, 209, 63));
 
}

.danismanlik-subtitle.services{
       color: white;
}

.btn.primary{
    background: white;
    color: rgb(250, 104, 0);
}

.btn.primary:hover{
    box-shadow: 0 10px 20px rgba(254, 254, 254, 0.489);
}

.technology-box.mobile{
    display: none;
}

@media(max-width:768px){
  .service-type-div-share.desktop{
    display: none;
  }

  .service-type-div-share.mobile{
    display: block;
  }

  .service-type-div-inner{
    display: inline-block;
  }

  .service-type-details-div{
    margin-top: 60px;
  }

  .technology-box.desktop{
    display: none;
}

  .technology-box.mobile{
    display: block;
}

.technology-box.mobile .technology-box-line{
    gap: 10px;
}
    
}