@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap);
.our-group h3,.prgraph-title
{
    font-family:Poppins,Helvetica;
    color:#fff
}

.Software,.hardware,.header,.prgraph-title{
    background-repeat:no-repeat
}.back-button,.title::after,.up-button:hover{
    background-color:#f24e1e
}
@font-face{
    font-family:'Metal Gear Solid 2';
    src:url('../fonts/MGS2.ttf') format('truetype')
}
body{
    background-color:#0b1143;
    overflow-x:hidden!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    left:0!important;
    right:0!important
}
a{
    text-decoration:none;
    color:#fff
}
.back-button{
    width:50px;
    height:50px;
    z-index:444;
    position:absolute;
    border-radius:4px;
    top:20%;
    right:10%;
    cursor:pointer;
    transition:opacity .3s ease-in-out
}
.header,.our-group{
    position:relative;
    background-size:cover
}
.header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* شيل height:90vh و background-image */
}

@media (max-width: 768px) {
    .header {
        margin-top: 50%; /* لو محتاجها */
    }
}

.back-button #i{
    padding:10px 15px;
    color:#fff;
    font-size:1.5rem
}
.prgraph-title{
    margin-top:80px;
    background-image:url('../img/itdivision/UNDERtextrec.webp');
    background-size:cover;
    padding:10px;
    font-size:1.4rem;
    text-align:justify
}
.our-group,.our-group h1,.so-hd{
    text-align:center
}
.header-title .title{
    font-weight:500;
    color:#fff;
    font-family:"Metal Gear Solid 2";
    font-size:4.5rem;
    z-index:2;
    margin-top:25%;
    margin-left:5%
}
.title::after{
    display:block;content:" ";
    width:140px;
    height:8px;
    margin-left:10px
}
.our-group{
    background-image:url('../img/itdivision/centerimage.webp');
    margin:3% 20%;
    transition:transform .5s;cursor:pointer
}
.our-group:hover{
    transform:scale(.9)
}
.our-group h3{
    font-weight:500;
    font-size:2.2rem
}
.our-group h1{
    font-family:'Keania One-Regular',Helvetica;
    font-weight:400;
    color:#fc3900;
    font-size:4rem;
    margin-top:2%
}
.Software,.hardware{background-size:cover;font-family:Jawbreak-Sans,Helvetica;color:#fff;border:3px solid #f24e1e;border-image-slice:1;border-image-source:linear-gradient(20deg,to left,rgb(167,86,66),#a02a07);border-bottom:none;border-top:none;border-radius:70px;transform:scale(.97);margin:0 15%;padding-bottom:7%}.Software h6,.hardware h6{font-family:Poppins,Helvetica;font-weight:500;font-size:1.6rem;padding-left:2%}
.Software h1,.hardware h1{padding-left:2%;font-size:2.4rem;padding-top:25px}.Software:hover,.hardware:hover{transition:.5s; background-color: #4169E1;}.up-button{display:none;background-color:#fd3900;border-radius:4px;width:50px;height:50px;position:fixed;bottom:20px;right:20px;cursor:pointer;transition:opacity .3s ease-in-out;color:#fff}.up-button #to-top-button{font-size:1.5rem;margin-left:30%;margin-top:25%}
@media screen and (max-width:992px){
    /*.header-title .title
    {
        font-size:4rem;
        position:absolute;
        bottom:10px;
        left:10px;
        margin:0
    }
    /*.header{
        background-position:50% 50%;
        width:100%;
        height:90vh
    }*/
}
@media screen and (max-width:768px){
    /*.header{
        background-position:55% 80%;
        width:100%;
        height:90vh
    }*/
}
@media screen and  (min-width:200px) and (max-width:299px){
    .header-title .title
    {
        font-size:2rem;
        position:absolute;
        top:15%;
        left:30%;
        margin:0
    }
}
    

@media screen and  (min-width:460px) and (max-width:581px){
    .header-title .title
    {
        font-size:4rem;
        position:absolute;
        top:19%;
        left:30%;
        margin:0
    }
}
@media screen and  (min-width:581px) and (max-width:768px){
    .header-title .title
    {
        font-size:5rem;
        position:absolute;
        top:28%;
        left:35%;
        margin:0
    }
}
@media screen and  (min-width:300px) and (max-width:460px){
    .header-title .title
    {
        font-size:3rem;
        position:absolute;
        top:15%;
        left:30%;
        margin:0
    }
}
@media (max-width: 768px) {
  .title .break {
    display: inline; /* يفضلوا جنب بعض */
  }
}
@media screen and  (min-width:832px){
    .header-title .title
    {
        font-size: clamp(2rem, 5vw, 6rem); 
        position:absolute;
        top:60%;
        left:5%;
        margin:0
        
    }
    .title .break {
    display: block; /* تنزل لسطر جديد */
  }
}
/* وضع Z Fold مفتوح */
@media screen and (min-width:769px) and (max-width:832px) {
  .header-title .title {
    font-size: 4.5rem;
    position: absolute;
    top: 25%;
    left: 5%;
    margin: 0;
  }
  .title .break {
    display: block; /* تنزل لسطر جديد */
  }
}

@media screen and (max-width:500px){

    /*.header{
        background-position:65% 100%;
        width:100%;
        height:90vh
    }*/
    .title::after{
        width:100px;
        height:5px;
        margin-left:5px
    }
}