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

/* body */
body{
    direction: rtl;
    background: #F4F4F4;
    overflow-x: hidden;
}

/* nav */
.navbar{
    background: #f9feffe8;
    position:sticky;
    top: 0px;
    z-index: 1;
    animation: nav 1s ease-in-out;
}
@keyframes nav{
    from{
        opacity: 0;
        transform: translateY(-100%);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

nav .logo-n{
    display: inline-block;
    width: 65px;
    margin-left: 15px;
    margin-right:15px ;
}

.navbar-nav a{
    display: inline-block;
    font-size: 21px;
}
.navbar .active{
    text-decoration:dotted underline rgb(48, 35, 227);
}
.navbar-nav a:hover{
    color: rgb(64, 63, 63);
    text-decoration:underline;
}

/* main */
.main{
    margin-top: 4%;
}

.main .right{
    animation: right 1.5s ease-in-out;
}
@keyframes right{
    from{
        opacity: 0;
        transform: translateX(-100%);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

.main .left{
    animation: left 1.5s ease-in-out;
}
@keyframes left{
    from{
        opacity: 0;
        transform: translateX(100%);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

.main h2{
    margin-bottom: 40px;
    font-size: 45px;
}

.main p{
    font-size: 18px;
    width: 70%;
}

.main .logo-m{
    display: inline-block;
    width: 60%;
}

.main button{
    transition: all 0.3s ease-in-out;
    padding-top: 1px;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 1px;
    background-image: linear-gradient(to right,#A4EAC5,#F9FEFF);
    font-size: 21px;
    border: 1px solid #2CB8DB;
    border-radius: 15px;
}
.main button:hover{
    background-image: linear-gradient(to left,#2CB8DB,#A4EAC5);
    color: white;
}

/* section-2 */
.section-2{
    margin-top: 5%;
}

.section-2 h2{
    margin-bottom: 80px;
    padding-right: 3%;
}

.section-2 .card{
    padding: 3.7%;
    background: #ffffff4b;
    border: 1px solid #98A7EB;
}

.section-2 hr{
    margin: 20px 0;
    width: 70%;
    color: #0d29ca;
    border: 1px solid;
}

.section-2 p{
    font-size: 20px;
    width: 80%;
}

/* section-3 */
.section-3{
    margin-top: 7%;
    margin-bottom: 5%;
}

.section-3 .head{
    background:#1842ac32;
    padding: 20px;
    width: 100%;
}

.items{
    display: flex;
    justify-content: space-between;
    padding: 2%;
    overflow-x: scroll;
}

.items .item{
    display: grid;
    background: #9fb5ee24;
    /* background-image: linear-gradient(to left, rgba(119, 119, 211, 0.427), #ebafe567); */
    border-radius: 15px;
    margin-left: 30px;
    padding: 1%;
    border:1px solid rgba(34, 34, 34, 0.486);
}

.items .item span{
    display: inline-block;
    background: #000;
    width: 250px;
    height:200px;
    padding: 2px;
}

.items .item button{
    margin-top: 15px;
    padding-top: 1px;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 1px;
    background-image: linear-gradient(to right, #a4eac565, #f9feff53);
    font-size: 21px;
    border: 1px solid #2CB8DB;
    border-radius: 11px;
}

/* secion-4 */

.section-4{
    display: grid;
    text-align: center;
    background-image: linear-gradient(to right, rgba(172, 241, 172, 0.411),hsla(200, 55%, 74%, 0.475));
    margin-top: 6%;
    margin-bottom: 5%;
    padding: 3%;
    border: 1px solid black;
}

.section-4 button{
    display: flex;
    justify-self: center;
    align-items: center;
    margin-top: 15px;
    padding: 5px;
    background-image: linear-gradient(to right,rgba(133, 225, 133, 0.394),rgba(255, 255, 255, 0.386));
    border: 1px solid rgb(150, 206, 219);
    border-radius: 10px;
}

button img{
    display:inline-block;
    width: 90px;
    height:fit-content;
    margin-right: 10px;
}

/* contact */

.contact{
    background-image: linear-gradient(to top, rgba(121, 209, 235, 0.296), rgba(116, 243, 190, 0.485)),url(../images/مهرجان\ الكرازة.png);
    background-position:center ;
    background-size: contain;
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin-bottom: 3%;
    padding: 3%;
    border: 1px solid rgba(0, 98, 255, 0.765);
}

.contact .text{
    display: grid;
    align-content: center;
}

.contact .text hr{
    width: 32%;
    border: 1.2px solid black;
}

.contact .text p{
    font-size: 20px;
    width: 65%;
    margin-top: 20px;
}

.contact button{
    display: grid;
    justify-self: center;
    font-size: 20px;
    margin-top: 20px;
    padding-top: 3px;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 3px;
    background-image: linear-gradient(to right, #A4EAC5, #F9FEFF);
    font-size: 21px;
    border: 1px solid #2CB8DB;
    border-radius: 10px;
}

/* footer */
footer{
   background: #302F2F;
   color: white;
   width: 100%;
   padding: 2%;
}

footer hr{
    color: #ced0d9;
}

footer a{
    margin-top: 15px;
}

footer .a::after{
    content: "___";
    margin-right: 5px;
    margin-left: 5px;
}