@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
:root{
    --main-color:#1f232a;
    --primary-color: #ce962e;
    --black:#444;
    --white:#fff;
    --bg: #f2f2f2;
    --bg-color:#fff;
    --icon-color:#fff;
    --we :#66666684;
    --black-text:#444;
    --light-black:#666;
    --darck-text:#333;
    --color-hover:#666;
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
    --box-shadow:.4rem .4rem 1rem #ccc,
}


*{
    font-family: 'Cairo', sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
    transition: .2s linear;
    text-transform: capitalize;
}




html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

html::-webkit-scrollbar{
    width: 1rem;
}

html::-webkit-scrollbar-track{
    background: var(--white);
}

html::-webkit-scrollbar-thumb{
    background: var(--primary-color);
}

section{
    padding: 3rem 9%;
}
body{
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    background:var(--bg-color)

}
/*body mode toggler Start*/
body.active{
    --black:#ce962e;
    --light-color:#ddd;
    --bg-color:#0c0f21;
    --bg: #313156;
    --darck-text:#fff;
    --color-hover:#fff;
    --black-text:#ce962e;



}


/*body mode toggler End*/

/*dark mode toggler Start*/
#menu-btn{    
    color:#ce962e;
    display: none;
}

#theme-toggler{
    z-index: 1000;
    height: 3rem;
    width: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    text-align: center;
    color:var(--black);
    background: var(--bg-color);

}
/*dark mode toggler End*/

/*header Nanbar Start*/
.heading{
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 3rem;
    margin-top: 2rem;
    color:var(--black)
}

.header{
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: border-box;
    position: sticky;
    height: 69px;
    top: 0; left: 0; right: 0;
    background-color: black;
    z-index: 1000;
    text-transform: capitalize;
}


.header .logo img{
    width: 10rem;
    height: 10rem;
    
}

.header .navbar a{
    font-size: 16px;
    margin-left:35px;
    color: #ce962e;
    font-family: 'Cairo', sans-serif;
}
.header .navbar a img{
    width: 30px;
    height: 20px;
    border-radius: 3px;
    background-size: 100% 100%;
}
.header .navbar .language{
    width: 80px;
    height: 50px;
    background: var(--primary-color);
}



.header .icons div{
    cursor: pointer;
    font-size: 30px;
    color: white;
    margin-left: 2rem;
}

.header .icons div:hover{
    color:#ce962e;
}

#menu-btn{
    display: none;
}
/*header Nanbar End*/

/*About Start */
#particles-js{
    width: 100%;
    height: 95vh;
    background-size: 100%  100%;
    position: relative;
    background-color: black;
}
#particles-js .admin {
    width: 250px;
    height: 400px;
    background-image: url(../images/karim.3.png);
    background-size: 100% 100%;
    margin-bottom: 265px;
    position: absolute;
}
/**
#particles-js .admin:hover{
    width: 180px;
    height: 180px;
}
 **/

#particles-js{
    display: flex;
    justify-content: center;
    align-items: center;
}
.admin {
    display: flex;
    justify-content: center;
    align-items: center;
}
#particles-js .name {
    position: absolute;
    margin-top: 220px;
    color: white;
    font-size: 35px;
    margin-bottom: 150px;
    letter-spacing: normal;
}

    #particles-js .name2 {
    position: absolute;
    margin-top: 330px;
    color: white;
    margin-bottom: 160px;
    font-size:20px;

}

#maintenance,#administration ,#design, #writing ,#improvement,#Shahar{
    font-size: 20px;
}




/*About Start*/
/*add background img Start */
.loader {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: green;
    position: absolute;
    margin-bottom: 250px;
    animation: animloader 2s linear infinite;
}
@keyframes animloader {
    0% {
    transform: scale(0);
    opacity: 1;
}
    100% {
    transform: scale(1);
    opacity: 0;
    }
}
/*add background img End */

/*Button Start*/
.wrapper{
    margin-top: 180px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.add{
    display: block;
    width: 170px;
    height: 50px;
    line-height: 46px;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    border: 3px solid sandybrown;
    color: sandybrown;
    font-size: 17px;
    position: relative;
    overflow: hidden;
    background: transparent;
    text-transform: uppercase;
    transition: all .35s;
}

.add:before,
.add:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    background: sandybrown;
    z-index: -1;
    transition: all .35s;
}
.add:before{
    opacity: .5;
}
.add:after{
    transition-delay: .2s;
}
.add:hover{
    color: #fff;
}

a:hover:before,
a:hover:after{
    top: 0;
}
/*Button End*/

/*loaderss titles Start*/
.loaderss{
    display: block;
    position: relative;
    height: 32px;
    width: 100px;
    background: linear-gradient(green 4px, transparent 0) no-repeat;
    background-position: 0 14px;
    box-sizing: border-box;
    overflow: hidden;
    margin: auto;
}
.loaderss:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 24px;
    height: 24px;
    background: #ce962e;
    animation: ballbns 1s linear infinite alternate ;
}
@keyframes ballbns {
    0% {  left: 0; transform: translateX(0%) rotate(45deg); }
    100% {  left: 100%; transform: translateX(-100%) rotate(45deg); }
}
/*loaderss titles End*/

/*Sosyal medya Start*/
.sosyal .facebook, .twitter, .instagram, .whatsapp, .linkedin{
    width: 50px;
    height: 50px;
    background-color: #e6e6e6;
    border-radius: 10px;
    float: left;
    margin: 5px;
    margin-bottom: 50px;
}
.sosyal .facebook, .twitter, .instagram, .whatsapp, .linkedin{
    font-size: 30px;
}
.sosyal{
    margin-top: 560px;
    position: absolute;
}
.sosyal{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sosyal .facebook, .twitter, .instagram, .whatsapp, .linkedin{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sosyal .facebook, .twitter, .instagram, .whatsapp, .linkedin i{
    color: #1f232a;
}

.sosyal .facebook{
    background-color: #1877f2;
    color: white;
}
.sosyal .twitter{
    background-color: #1da1f2;
    color: white;
}
.sosyal .instagram{
    background: linear-gradient(to top right , #feda77 ,#f58529 ,#dd217b ,#8134af ,#515bd4 );
    color:var(--white)
}
.sosyal .whatsapp{
    background-color: #25d366;
    color: white;
}
.sosyal .linkedin{
    background-color: #0a66c2;
    color: white;
}
.sosyal .linkedin i{
    color: white;
}
/*Sosyal medya End*/

/* services Start */

.services .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}

.services .box-container .box{
    padding: 2rem;
    text-align: center;
    border: 0.1rem solid var(--main-color);
    box-shadow: var(--box-shadow);
    background:var(--bg)
}

.services .box-container .box img{
    height: 18rem;
    margin-bottom: 1rem;
}

.services .box-container .box h3{
    font-size:20px;
    color: var(--primary-color);
}
.services .box-container .box h3:hover{
    color:var(--black)
}

/* services Ebd */

/*skills section starts*/
.category .box-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(15rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

.category .box-container .box {
    text-align: center;
    border-radius: .5rem;
    border: 0.2rem solid #333;
    padding: 2rem;
    background:var(--bg);
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
            
            
}

.category .box-container .box img {
    height: 6rem;
    margin-bottom: .5rem;
}

.category .box-container .box h3 {
    font-size: 1.7rem;
    color:var(--black);
}
/*skills section End*/


/***/


.services .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.services .box-container .box{
    flex:1 1 30rem;
    border-radius: .5rem;
    background:var(--bg);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:2rem;
    text-align: center;
}

.services .box-container .box i{
    color:#ce962e;
    font-size: 5rem;
    padding:1rem 0;
}



.services .box-container .box h3{
    color:var(--black);
    font-size: 2.5rem;
    padding-top:1rem;
}

.services .box-container .box h3:hover{
    color:#ce962e;
}

.services .box-container .box p{
    color:var(--darck-text);
    font-size:1.7rem;
    padding:1rem 0;
    line-height: 2;
}





/**/

.box-container{
    width: 95%;
    margin: auto;
}

.btn{
    display: inline-block;
    margin-top: 1rem;
    padding:.8rem 3rem;
    color: white;
    font-size:30px;
    cursor: pointer;
}

.btn:hover{
    letter-spacing: .2rem;
}

.portfolio .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}


.portfolio .box-container .box{
    flex:1 1 30rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    position: relative;
    overflow:hidden;
    height:100%;
}

.portfolio .box-container .box img{
    height: 100%;
    width:100%;
    object-fit: cover;
}

.portfolio .box-container .box .content{
    height: 100%;
    width:100%;
    position: absolute;
    top:0; left:-100%;
    background: rgba(0, 0, 0, 0.49);

    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio .box-container .box:hover .content{
    left:0;
}

/*portfolio section End*/

.content {
    display: none; /* إخفاء المحتوى بشكل افتراضي */
}
/* اختيار الصور والمشروع*/
.button-container {
    display: flex; /* لجعل الأزرار جنب بعض */
    gap: 20px; /* مسافة بين الأزرار */
    justify-content: center;
    align-items: center;
    
}

button {
    padding: 20px;
    border: none;
    border-radius: 50%; /* دائري */
    cursor: pointer;
    font-size: 15px;
    display: flex;
    justify-content: center;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
}
button.active {
    background-color: #4CAF50; /* لون الزر عند النقر */
    color: white;
}
/* اختيار الصور والمشروع*/


/*front-end section starts*/

.front-end .work-experience{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.front-end .work-experience .boxx{
    flex:1 1 30rem;
    border-radius: .5rem;
    background:var(--bg);
    padding:2rem;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

}

.front-end .work-experience .boxx i{
    color:var(--primary-color);
    font-size: 5rem;
    padding:1rem 0;
}


.front-end .work-experience .boxx h3{
    color:var(--black);
    font-size: 2.5rem;
    padding-top:1rem;
}
.front-end .work-experience .boxx h3:hover{
    color:var(--primary-color)
}

.front-end .work-experience .boxx p{
    color:var(--darck-text);
    font-size:1.7rem;
    padding:1rem 0;
    line-height: 2;
}
.front-end{
    padding: 1rem 11%;
}

/*front-end section End*/




/*contact section starts*/
.buttons{
    display: inline-block;
    margin-top: 1rem;
    padding:.8rem 3rem;
    background:#222;
    margin: auto;
    color:#fff;
    font-size: 1.7rem;
    cursor: pointer;
}
.buttons{
    width:100%;
}

.buttons:hover{
    background:var(--primary-color);
    letter-spacing: .2rem;
}


.contact .row{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    gap:1.5rem;
}

.contact .row .image{
    flex:1 1 40rem;
}


.contact .row .image img{
    width: 100%;
}

.contact .row form{
    flex:1 1 40rem;
    padding:1rem 2rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border-radius: .5rem;
    background:#fff;
}

.contact .row form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact .row form .inputBox input,
.contact .row form .number,
.contact .row form textarea{
    width:100%;
    border-radius: .5rem;
    font-size: 1.7rem;
    color:#ce962e;
    padding:1rem;
    margin:1rem 0;
    border:.1rem solid rgba(0,0,0,.1);
    text-transform: none;
}

.contact .row form .inputBox input:focus,
.contact .row form .box:focus,
.contact .row form textarea:focus{
    border-color: var(--green);
}

.contact .row form .inputBox input{
    width:49%;
}

.contact .row form textarea{
    height:20rem;
    resize: none;
}

.contact{
    padding: 1rem 11%;
}
.contact .row form .buttons{
    margin:.5rem 0;
}
/*contact section End*/


/*Sosyal medya footer Start*/
.footer{
    width: 100%;
    height: 130px;
    background-color :#222;
    position: relative;
}

.footer .link-footer{
    width: 70%;
    height: 80px;
    position: absolute;
}
.footer{
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-footer{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer .link-footer .facebook2, .twitter2, .linkedin2, .instagram2, .gmail2, .github2{
    width: 45px;
    height: 45px;
    border-radius: 5px;
    background:var(--we);
    margin: 5px;
}

.footer .link-footer .facebook2, .twitter2, .linkedin2, .instagram2, .gmail2, .github2{
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer .link-footer .facebook2, .twitter2, .linkedin2, .instagram2, .gmail2, .github2{
    font-size: 30px;
    color: black;
}
.footer .link-footer .facebook2, .twitter2, .linkedin2, .instagram2, .gmail2, .github2 i:hover{
    color: white;
}
.footer .link-footer .github2{
    color: white;
}

.footer .link-footer .facebook2:hover{
    background-color: #1877f2;
}
.footer .link-footer .twitter2:hover{
    background-color: #1da1f2;
}
.footer .link-footer .linkedin2:hover{
    background-color: #0a66c2;
}
.footer .link-footer .instagram2:hover{
    background: linear-gradient(to top right , #feda77 ,#f58529 ,#dd217b ,#8134af ,#515bd4 );
}
.footer .link-footer .github2:hover{
    background-color: black;
}
.footer .link-footer .gmail2:hover{
    background-color: #ec1234;
}

/*Sosyal medya footer End*/