:root {
    --color-dominant: #F5F5F5;
    --color-secondary: #E0E0E0;
    --color-secondary-hover: #FFFFFF;
    --color-accent: #B0B0B0;
    --color-accent-hover: #909090;
    --color-text: #333333;
    --color-text-light: #000000;
    --shadow: rgba(0,0,0,0.15);

    --bg-mobile: #F5F5F5;
    --bg-tablet: #E8F0FE;
    --bg-desktop: #EDE7F6;

    --text-mobile: #333333;
    --text-tablet: #1A237E;
    --text-desktop: #311B92;
}

body {
    background-color: var(--bg-mobile);
    font-family: 'Segoe UI';
    color: var(--text-mobile);
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    width:100%;
    height:80px;
    background-color:var(--color-secondary);
    box-shadow:0 4px 4px var(--shadow);
    padding:0 20px;
    z-index:500;
}

.headerGroup {
    display:flex;
    align-items:center;
    gap:2rem;
}

.headerGroup button {
    font-size:2rem;
    padding:0.5rem 1rem;
    border:0;
    background:transparent;
    color:var(--color-text);
    cursor:pointer;
    transition:0.2s ease;
    font-family:'Franklin Gothic Medium';
}

.headerGroup button:hover {
    color:var(--color-accent-hover);
    transform:translateY(2px);
}

#Logo {
    text-align:center;
    font-size:1.5rem;
}

#mobileMenuBtn {
    display:none;
    font-size:2rem;
    cursor:pointer;
    background:transparent;
    border:0;
}

#mobileMenu {
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    position:absolute;
    top:100px;
    left:0;
    width:100%;
    background-color:var(--color-secondary);
    box-shadow:0 4px 4px var(--shadow);
    z-index:600;
}

#mobileMenu button {
    width:100%;
    text-align:left;
    padding:1rem;
    border-bottom:1px solid var(--shadow);
}

#Skills ul{
    list-style-type:none;
}

#About, #Hero, #Mission, #Skills, #Images, #Contact {
    border:1px solid rgb(0,0,0);
    border-radius:12px;
    text-align:center;
    box-shadow:0 5px 10px var(--shadow);
    transition:0.5s ease;
    overflow:hidden;
    padding:5vh 1vh;
    background-color:var(--color-secondary);
    width:40%;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:20px 0;
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;
}

.skill {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    transition: 0.3s ease;
    box-shadow: 0 3px 6px var(--shadow);
    cursor: default;
}

.skill:hover {
    background-color: var(--color-accent-hover);
  
    
}
#Images {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
}

#About:hover, #Hero:hover, #Mission:hover, #Skills:hover, #Images:hover, #Contact:hover {
    background-color:var(--color-secondary-hover);
    transform:translateY(-4px);
}

.callBtn, .emailBtn {
    color:var(--color-text-light);
    border:none;
    padding:8px 13px;
    border-radius:7px;
    font-size:18px;
    cursor:pointer;
    display:inline-block;
    box-shadow:0 4px #A0A0A0;
    margin:5px;
    transition:0.3s ease;
}

.callBtn { background-color:var(--color-accent); }
.callBtn:active { transform:translateY(2px); box-shadow:0 2px #808080; }

.emailBtn { background-color:var(--color-accent); }
.emailBtn:active { transform:translateY(2px); box-shadow:0 2px #808080; }

.BlueLink { color:var(--color-accent); text-decoration:none; }
.BlueLink:hover { color:var(--color-accent-hover); }

#meimg {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
}

#meimg img, .rebbeimages img {
    max-width:100%;
    height:auto;
    width:15vh;
    transition:0.2s ease;
}

#meimg img:hover, .rebbeimages img:hover {
    transform:translateY(4px);
    box-shadow:1px 3px 5px var(--shadow);
}

h2 {
    font-weight:bold;
    color:var(--color-text-light);
    margin-bottom:10px;
}

footer {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background-color:var(--color-secondary);
    padding:10px 5px;
    width:100%;
}

#modal {
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:1000;
}
/*different queires*/
@media (max-width:1024px) {
    #LeftGroup, #RightGroup { display:none; }
    #mobileMenuBtn { display:block; }
    #About, #Hero, #Mission, #Skills, #Images, #Contact { width:90%; padding:3vh 1vh; }
    #meimg img, .rebbeimages img { width:12vh; }
}
/*phgine*/
@media (max-width:600px) {
    #mobileMenu button { font-size:0.9rem; }
    #Logo { font-size:1.2rem; }
    #meimg img, .rebbeimages img { width:10vh; }
}
/*tablet*/
@media (min-width:768px) and (max-width:1023px) {
    body {
        background-color:var(--bg-tablet);
        color:var(--text-tablet);
    }

    #About, #Hero, #Mission, #Skills, #Images, #Contact {
        width:70%;
        padding:4vh 2vh;
    }

    h2 { font-size:1.8rem; }
    .headerGroup button { font-size:1.5rem; }
    #meimg img, .rebbeimages img { width:18vh; }
}
/*comp*/
@media (min-width:1024px) {
    body {
        background-color:var(--bg-desktop);
        color:var(--text-desktop);
    }

    #About, #Hero, #Mission, #Skills, #Images, #Contact {
        width:50%;
        padding:6vh 3vh;
    }

    h2 { font-size:2.2rem; }
    .headerGroup button { font-size:2rem; }
    #meimg img, .rebbeimages img { width:20vh; }

    footer { font-size:1.2rem; }
}

/*keyframes animation for the skills*/
.skill:hover{
animation: skills 1s ease infinite!important;
}
@keyframes skills{
   
    33%{
        transform:rotate(10deg);
    }
66%{
transform:rotate(-10deg);
}
 100%{
        transform: rotate(0deg);
    }
}