*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header{
    width: 90%;
    margin: auto;
}

.bar  {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
}

.logo-image{
    width: 12rem;
    height: 6rem;  
   }

   .bar ul {
    align-items: center;
    text-align: center;
   height: 4rem;
}


.header ul{
    display: flex;
    justify-content: space-between;
    text-decoration: none;
}

.header ul li{
    display: flex;
    list-style: none;
    text-decoration: none;
}

.header ul li a{
    margin: 0 1rem;
    font-size: 25px;
    padding: 8px;
    color: white;
    text-decoration: none;
}

.header ul li a:hover{
    border-radius: 15px;
    color: #70CACB;
    text-decoration: none;
}

.action-button{
    padding-top: 10px;
    height: 4rem;
    background-color: #70CACB;
    font-size: 20px;
    border-radius: 30px;
}

.action-button a{
    
    color: black !important;
    font-size: 20px;
 }

 



.heading{
    background-color: darkblue;
    color: white;
    width: 80%;
    margin: 2rem auto ;
    font-size: 30px;
    gap: 4rem;
    padding: 1rem ;
    align-items: center;
    text-align: center;
    border-radius: 5px;
}

.button{
    background-color: red;
    color: white;
    padding: 1rem;
    border-radius: 20px;
    margin: 1rem 0;
    font-size: 20px;
    border: none;
}

.button2{
    background-color: red;
    color: white;
    padding: 18px;
    border-radius: 20px;
    border: none;
    font-size: 20px;

}

.logo-main{
    margin-top: 2rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    
}


.logo-main div{
    padding: 1rem;
    margin-right: 1rem;
    width: 33rem;
    border: 1px solid gold;
    border-radius: 10px;
}

.logo-main div h2 {
    margin-bottom: 10px;
    color: red;
}

.logo-main div p{
    font-size: 28px;
}
.para2{
    width: 80%;
    margin: auto;
    align-items: center;
    text-align: center;
    color: rgb(226, 23, 23);

}

.para3{
    width: 80%;
    margin: auto;
    padding: 1rem;
    
}

.computer{
    margin: auto;
    padding:9px 5rem;
    
    
}

.para-main{
    background-color: bisque;
    width: 80%;
    margin: auto;
    display: flex;
      
}

.para-child{
    display: flex;

}

.para-child div{
  

}

.para-child2{
    display: flex;
    margin: auto;
    padding: 0 3rem;
    gap: 2rem;
}

.para-child3{
    width: 80%;
    margin: auto;
    padding:1rem;
    
}
.parent-div{
    margin: 2rem 0;
    display: flex;
}
   
   

.parent-div1{
    width: 80%;
    margin: auto;
}

.parent-div1 div {
    margin: 2rem 0;
}

.para-child3 {
    width: 50%;
    margin-right: 2rem;
    font-size: larger;
    line-height: 2rem;
    border: 3px solid goldenrod;
    border-radius: 20px;
}

.roll{
    padding: 1rem;
    display: flex;
    margin:auto;
    width: 80%;
    background-color: bisque;

}

.Featured{
    display: flex;
    margin: auto;
    width: 80%;
    align-items: center;
    justify-content: space-between;}

.button-con:hover{
    background-color: red;
    border: 3px solid red;
    color: red;
}

.market-div{
    background-color: black;
    color: white;
    /* align-items: center; */
    text-align: center;
    margin: auto;
    width: 80%;
    padding:15px;
}

.button-con2:hover{
    color: white;
    border: none;
    background-color: white;
    width:15%;
    margin: auto;
    text-decoration: none;

}
.parent-mother{
    display: flex;
    width: 80%;
    margin: auto;
    padding: 40px;
    gap: 20px;
    flex-direction: row;
}

.slide1{
    width:80%;
    margin: auto;
    display: flex;
    background-color: red;
    color: white;
    align-items: center;
    padding: 1rem 20px;
}

.slide-2{
    display: flex;
    padding: 1rem 20px;
}

.main-div19{
    width: 80%;
    margin: auto;
    display: flex;
    padding: 2rem 20px;
    gap: 40px;
    justify-content: space-between;
    color: wheat;
}


.main-div{
    background-color:#222;
}

.small-div{
    width: 80%;
    margin: auto;
    color: blue;
    align-items: center;
    text-align: center;
}

.feature-div{
    width: 80%;
    margin: auto;
    text-align: center;
    color: red;
}

.image-div{
    width: 80%;
    margin: auto;
}
.image-div1{
    margin: 2rem 0;
    display: flex;
    gap: 8.4rem;
  
}

.image-div1 img{
    height: 4rem;
    width: 100%;
   
    
}

.cases-div{
    width: 80%;
    margin: 3rem auto;
    display: flex;
    height: 25vh;
    gap: 4rem;
    padding: 1rem ;
    justify-content: space-between;
}

.case-one{
    width: 80%;
    margin: auto;
    display: flex;
    color: wheat;
    
    }

.management{
    width:80%;
    margin: auto;
}



   
 
    

    .custom-button{
        display: flex;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        background-color: #4f135e;
        width: 20%;
        padding: 10px 20px;
        border-radius: 50px;
        transition: 0.3s;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }

    .custom-button .arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-left: 15px;
        width: 30px;
        height: 30px;
        background-color: #2ea3f2;
        color: white;
        font-size: 20px;
        font-weight: bold;
        border-radius: 60%;
        transition: 0.3s;
    }
            
    .custom-button:hover {
         background-color: #ddd;
        }
    .custom-button:hover .arrow {
        background-color: #1c80c1;
        }

    .parent-small{
        position: relative;
        width: 80%;
        margin: 1rem auto;
        border: 1px white solid;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* padding: 4rem; */
        text-align: left;
        color: white;
    }

    .fix-div {
        position: absolute;
        left: 16rem;
    }

    .fix-div2 {
        position: absolute;
        left: 28rem;
    }

    .fix-div3 {
        position: absolute;
        left: 40rem;
    }
    .image-div1{
        padding-right: 1rem;
        width: 15rem;
        height: 10rem;
    }
    .image-div2{
        padding-right: 1rem;
        width: 15rem;
        height: 10rem;
    }

    .image-div3{
        padding-right: 1rem;
        width: 15rem;
        height: 10rem;
    }
    
    .chess{
        width: 80%;
        margin: auto;
        display: flex;
        height: 10vh;
        align-items: center;
        justify-content: space-between;
        padding: 0 4rem;
        color: white;
    }
    .media-div{
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: auto;
        color: white;
    }

    .chess a{
        text-decoration: none;
        color: wheat;
    }

    .parent-small a{
        text-decoration: none;
        color: wheat;
    }

    .media-div a{
        text-decoration: none;
        color: wheat;
        padding: 20px 30px;
    }

    /* .custom-down{ 
        display: flex;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        background-color: #d31818;
        width: 20%;
        padding: 10px 20px;
        border-radius: 50px;
    } */

    .arrow-down{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-left: 15px;
        width: 30px;
        height: 30px;
        background-color: #2ea3f2;
        color: white;
        font-size: 20px;
        font-weight: bold;
        border-radius: 60%;
        transition: 3.3s;
        
    }

    
    

    .power{
        display: flex;
        gap: 12rem;

        
    
    }

    .power div img{
        width: 20rem;
        
    }
    /* .power-div {
        display: flex;
    

   }
    */
   .para-child2 h1{
    color: red;
    font-size: 4rem;
    font-weight: bolder;

   }

   .para3 p{
    line-height: 35px;
    font-size: 20px;
   }
   .para-child2 p{
    font-size: 20px;
   }

   .parent-div1 h1{
    color: darkblue;
   }

   .para-child3 h1{
    font-weight: bolder;
    color: red;
   }

   .para-child3 p{
    font-weight: bold;
   }

   .parent-div1 p{
    font-weight: bold;
   }

   .main-div19 a{
    text-decoration: none;
    color:purple;
   }

   .main-div19 a:hover{
    color: white;
    border: none;
   }

   .digital{
    color: darkblue;
    font-size: 30px;
   }

   .button-con2 a{
    text-decoration: none;
   }

   .shasaf{
    width: 80%;
    margin: auto;
   }

   .shasaf-main{
    width: 80%;
    margin: auto;
    display: flex;
    gap: 15px;
    font-weight: bold;
    color: wheat;
    padding: 40px ;
   }
   .shasaf-div{
    background-color: #5e4d13;
    padding:3rem ;
    border-radius: 12rem;
    align-items: center;
    text-align: center;
    
   }

   .shasaf-main div {
    width: 33rem;
   }

   .shasaf-div1{
    background-color: #5e4d13;
    padding: 3rem;
    border-radius: 12rem;
    align-items: center;
    text-align: center;
   }

   .shasaf-div2{
    background-color: #5e4d13;
    padding: 3rem;
    border-radius: 12rem;
    align-items: center;
    text-align: center;

   }

   .shasaf-div3{
    background-color: #5e4d13;
    padding: 3rem;
    border-radius: 12rem;
    align-items: center;
    text-align: center;
   }
   .shasaf{
    color: white;
    font-weight: bold;
   }
   
   
   .Crusader-div{
    display: flex;
    justify-content: space-between;
    color: white;
   }
   .powersurface-div{
    display: flex;
    justify-content: space-between;
    color: white;
   }


   @media screen and (max-width: 768px) {
    .header ul {
        flex-direction: column;
        align-items: center;
    }

    .header{
        margin-bottom:  20rem;
    }

    .heading {
        width: 100%;
        padding: 10px;
    }

    .main-div{
        background-color: yellow;
        width: 100%;
        padding: 0 5px;
        margin: auto;
        /* overflow: hidden; */
       }

       .logo-image{
        width: 8rem;
        height: 5rem; 
       }

       .logo-main {
        flex-direction: column;
       }

       .logo-main div {
        width: 98%;
        margin: 10px auto;
       }

       .image-div1 {
        width: 100%;

        flex-direction: column;
       }

       .image-div {
        width: 100%;
       }

       .image-div1 img {
        margin: auto;
        width: 100%;
        height: 30vh;
       }

       .parent-div1{
        width: 80%;
        margin: auto;
    }
    
    .parent-div1 div {
        margin: 2rem 0;
    }
.roll  {
    width: 100%;
    flex-direction: column;
} 

.para-child3 {
    line-height: 2rem;
    width: 100%;
    margin-right: 0;
    line-height: 1rem;
    border: 2px solid goldenrod;
   
}
.para-child3 h1 {
    font-weight: 30px;
    line-height: 2.5rem;
    color: red;
    margin-bottom: 1rem;
}

.custom-button {
    display: flex;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: #4f135e;
    width: 50%;
    padding: 10px 15px;
    
}
    
    .para-child div{
      width: 80%;
      margin-top: 100rem;
    
    }

    .para-main {
        width: 100%;
        padding: 10px;
        margin: auto;
        flex-direction: column
    ;
    }

       .shasaf-main, .power {
        flex-direction: column;
       }
       
    .parent-small {
        display: flex;
        flex-direction: column;
    }

    .fix-div {
        top: 16rem;
        left: 0;
    }
}