*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
html{
    scroll-behavior: smooth;
}

.container{
    width: 85%;
    margin: auto;
}

*::selection{
    background-color: #D85454;
    color: #ffffff;
}
/*========================width=====================*/
/* .home-section{
    width: 100%;
} */

body{
    overflow-x: hidden;
}










a{
    color: inherit;
    text-decoration: none;
    
}
   div img{
    width: 100%;
    display: block;
   }
   .cursor{
    cursor: pointer;
   }
   /*==============header==========*/
 .shake-click:hover {
    animation: shake 0.8s;
    animation-iteration-count: infinite;
   }
   @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  .list1:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    /* position: absolute; */ /*دى المشكله كان بيتحرك بالنسبه لل viewport */
    background:#CE1212;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .list1:hover:after { 
    width: 100%; 
    left: 0; 
    top: 0;
  }
  /* .dark-mood{
    background-color: #252525;
    color: white;
} */
.bottom-button{
    border: solid #CE1212 12px ;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 30px;
   padding: 5px 20px;
    margin-right: 30px !important;
}
.border{
    border-radius: 20px red solid;
}
.video-btn{
    justify-content: center;
    align-items: center;

}
/* .icon{
    display: inline-block;
} */
.icon{
    border-radius:20px ;
    border: white solid 20px;
    display: inline-block;
    z-index: 1;
}
   
   .span4{
    color: black;
   }
.span4:hover{
color:#CE1212;
}

   /*=======colors=======*/
   .main-color{
    color: RGB(33, 37, 41);
   }
   .sec-color{
    color:#CE1212;
   }
   .forth-color{
    color: 
    RGB(55, 55, 63);
   }
   .five-color{
    color: 
    RGB(79, 79, 90);
   }
   
   .six-color{
    color :RGB(127, 127, 144);
   }
.seven-color{
    color: #FFFFFF;
}
.eight-color{
    color:#595959;
}

.background-sec3{
    background-color: #EEEEEE;
}
   /*=======fonts=======*/
   .font-f1{
    font-family:Amatic SC  ;
}
   .font-f2{
    font-family:Open Sans  ;
}
   .font-f3{
    font-family: Inter  ;
}
.w-20{
    width:20%;
}
.w-520{
    width:520px;
}
.w-33{
    width:33%;
}
.w-30{
    width:100%;
}
.w-3{
    width:30%;
}
.w-40{
    width:40%;
}
.w-50{
    width:50px;
}
.w-icon{
   width: 50%;
}
.home-section{
    height: 100vh;
}
/*====================navbar=================*/
.moon{
   width: 10%; 
}

.span2:hover{
    color: #000000;
}
.span1 {
    color: #CE1212;
}
.span2 {
    color: RGB(127, 127, 144);
}
.span3 {
    color:white;
}
/*====================fonts=======================*/
.fw-700{
    font-weight: 700;
}
.fw-900{
    font-weight: 900;
}
.fw-600{
    font-weight: 600;
}
.fw-400{
    font-weight: 400;
}
.fs-50{
    font-size: 50px;
}
.fs-30{
    font-size: 30px;
}
.fs-25{
    font-size: 25px;
}
.fs-65{
font-size: 65px;
}
.fs-18{
font-size: 18.72px;
}
.fs-17{
        font-size: 17px;
    }
.fs-16{
    font-size: 16px;
}
.fs-15{
    font-size: 15px;
}
.fs-14{
    font-size: 14px;
}
.fs-24{
    font-size: 24px;
}
.py-25{
    padding-block: 25px;
}
.filter{
    filter: drop-shadow(4px 4px 9px #000a);
}
.fixed{
    position: fixed;
}
.margin-top1{
    margin-top: 60px;
}
/* .px-5{
    padding-block: 5px;
} */

/*========border========*/
.border1{
    border: solid 4px transparent;
}


/*=======flexxx========*/
.d-flex{
    display: flex;
}
.space1{
    justify-content: space-between;
}
.space2{
    justify-content:space-evenly;
}
.space3{
    justify-content:space-around;
}
.space4{
    justify-content:center;
}
.align-center{
    align-items: center;
}
/*===========spaces============*/
.text-align{
    text-align: center;
}

.margin1{
    margin-left:5%;
    margin-right:5% ;
}
.margin2{
    margin:50px 0 50px 0;
}
.margin3{
    margin: 20px 0;
}
.margin4{
    margin:5px ;
}
.margin5{
    margin-bottom:10px;
}
.margin6{
    margin: 20px 0 20px 0;
}
.margin7{
    margin: 50px 38px;
}
.margin8{
    margin: 25px 0;
}
.margin10{
    margin-right: 10px;
}
.margin11{
    margin: 10px 0;
}
.margin12{
    margin-left: 15px;
}
.margin-top2{
    margin-top: 90px;
}
.margin-top3{
    margin-top: 5px;
}
.margin-top4{
    margin-bottom: 5px;
}
.margin-bottom2{
    margin-bottom: 90px;
}
.margin-bottom3{
    margin-bottom: 10px;
}

.margin-bottom4{
    margin-bottom: 10px;
}
.margin-bottom5{
    margin-bottom: 25px;
}
.padding{
    padding:40px 5px;
}
.padding1{
    padding: 20px;
}

.padding25{
    padding: 25px;
}
.padding-top1{
    padding-top: 30px;
}
.padding-top2{
    padding-top: 5px;
}
.padding-top3{
    padding: 40px 5px 40px 5px;
}
.padding-bottom2{
    padding-bottom: 25px;
}
.padding-left{
    padding-left:5px;
}
.padding-all{
    padding: 10px 10px 10px 10px;
}
.padding-a{
    padding: 5px;
}
.paddingg{
    padding: 0 15px;
}

/*================page2====================*/

.hover-img{
    border-radius: 200px;
    background-color: rgb(255, 255, 255);
    width: 500px;
    height: 500px;
    transition: transform .8s;
    padding: 20px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -ms-border-radius: 200px;
    -o-border-radius: 200px;
}

   .hover-img:hover{
transform: scale(1.2);
   }

/*=================Page3==============*/
/* .gab{
    gap: 20px;
} */

.flex{
    flex-direction: column;
}
/* .pic{
  position: relative;
} */
.pic1{
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    /* opacity: 1;
    transition: opacity 1s,transform 1s; */
}
.content1{
    background-color:rgba(0,0,0, 0.6);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 80px;
    opacity: 0;
    transition: opacity .5s,tranform .5s,all .5s;
    -webkit-transition: opacity .5s,tranform .5s,all .5s;
    -moz-transition: opacity .5s,tranform .5s,all .5s;
    -ms-transition: opacity .5s,tranform .5s,all .5s;
    -o-transition: opacity .5s,tranform .5s,all .5s;
}
.pic1:hover .content1{
    opacity: 1;
   top: 0;
}
.pic1:hover img{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.content1 h2{
color: #FFFFFF;
padding-top: 50px;
padding-bottom: 5px;
}
.content1 p{
color: #DDDDDD;
padding-bottom: 30px;
}
.img1{
    width: 100%;
    transition: transform .5s;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -ms-transition: transform .5s;
    -o-transition: transform .5s;
}
/*======================page4======================*/
.mab{
    width: 100%;
    height: 350px;
}

.border2{
    border:white 10px solid;
    background-color:#F5F5F5;
    z-index: 0;
}
.iconn{
    border: solid #CE1212 25px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    z-index: 1;
}
/*==================foooter================*/
.footer-img{
    width:30px;
}
.input-width{
    width: 500px;
}

/*=======background-colors=======*/
.test1{
    background-color: rgb(24, 24, 224);
}
.test2{
    background-color: rgb(170, 162, 52);
}
.test3{
    background-color: rgb(0, 241, 133);
}
.test4{
    background-color: rgb(195, 84, 186);
}
.test5{
    background-color: rgb(49, 208, 195);
}
.test6{
    background-color:RGB(238, 238, 238);
}
.test7{
    background-color:white;
}
.test9{
    background-color: tomato;
}
.test10{
    background-color:
    RGBA(0, 0, 0, 0);
}
.test11{
    background-color:#FFFFFF;
}
.test12{
    background-color:#0D0A0A;
}
.test13{
    background-color:#E61414;
}
.test14{
    background-color:#CE1212;
}