* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: Arial, Helvetica, sans-serif;

}


/* Navbar */

nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #111;
   padding: 20px 80px;
}


.logo {

    text-align: center;

}


.logo h2 {

    color: white;

    font-size: 36px;

}


.logo span {

    color: #d4a017;

}


.logo p {

    color: #d4a017;

    font-size: 14px;

}


nav ul {

    display: flex;

    list-style: none;

    gap: 35px;

}


nav ul li a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-weight:500;

    font-size: 18px;

}

nav ul li a:hover,

nav ul li a.active{

    color:#D4A63E;

}

.btn {

    background: #d4a017;

    color: white;

    padding: 12px 35px;

    text-decoration: none;

    border-radius: 6px;

     transition:.4s;

}



.btn:hover{

    background:#111;

}


/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:'Poppins',sans-serif;

}

body{

    background:#fff;

    color:#222;

}




.gallery-page {
   width: 80%;
   margin: 100px auto;
}
.gallery-title {
   text-align: center;
   max-width: 650px;
   margin: 0 auto 45px;
}
.gallery-title h5 {
   color: #fcfbf8;
   letter-spacing: 2px;
   margin-bottom: 20px;
   
}
.gallery-title h1 {
   font-size: 42px;
   margin-bottom: 10px;
}
.gallery-title p {
   color: #666;
   line-height: 1.7;
}
.gallery-filter {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin-bottom: 45px;
   flex-wrap: wrap;
}
.gallery-filter button {
   padding: 11px 25px;
   border: 1px solid #D4A017;
   background: transparent;
   border-radius: 25px;
   cursor: pointer;
   transition: .3s;
}
.gallery-filter button:hover,
.gallery-filter button.active {
   background: #D4A017;
   color: white;
}

.swipe-hint{

    display:none;
}
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 230px;
   gap: 20px;
}
.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: 18px;
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s;
}
.gallery-item:hover img {
   transform: scale(1.08);
}
.overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
       transparent,
       rgba(0,0,0,.75)
   );
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 25px;
   color: white;
   opacity: 0;
   transition: .4s;
}
.gallery-item:hover .overlay {
   opacity: 1;
}
.overlay h3 {
   margin-bottom: 5px;
}
.overlay p {
   color: #D4A017;
}

.KI {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 20px;
    color: #777;
    font-size: 11px;
}

.KI p {
    margin: 0;
    color: #919191;
    line-height: 1.7;
    text-align: center;
}

/* Footer */


footer {
    background: #111;
    color: white;
    padding: 40px 100px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.footer-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box i {
    color: #D4A63E;
    font-size: 25px;
}

.footer-item h3 {
    color: #D4A63E;
    margin: 0 0 5px;
}

.footer-item p {
    color: white;
    margin: 0;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #444;
    color: #aaa;
}

/* ================= MOBILE NAVBAR ================= */

.menu-btn{

    display:none;

}

@media(max-width:768px){

nav{

    padding:15px 20px;

    position:fixed;

}

.menu-btn{

    display:block;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

nav{

    display:grid;

    grid-template-columns:40px 1fr 40px;

    align-items:center;

}

.logo{

    justify-self:center;

    text-align:center;

}

.logo h2{

    font-size:28px;

}

.logo p{

    font-size:11px;

}

.call-btn{

    width:40px;

    height:40px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:0;

}

.call-btn::before{

    content:"\f095";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    font-size:16px;

}

.nav-links{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#111;

    display:none;

    flex-direction:column;

    text-align:center;

    padding:25px 0;

    gap:20px;

}

.nav-links.active{

    display:flex;

}


/* ===========================
        MOBILE GALLERY
===========================*/

.gallery-page{
    width:92%;
    margin:20px auto 60px;
}

/* ---------- Title ---------- */

.gallery-title{
    text-align:center;
    margin-bottom:28px;

}

.gallery-title h5{
    color:#D4A017;
    font-size:19px;
    letter-spacing:2px;
    margin-bottom:10px;
    text-transform:uppercase;
    margin-top:99px;
}

.gallery-title h1{
    display:none;
    font-size:31px;
    line-height:1.25;
    color:#111;
    margin-bottom:12px;
}

.gallery-title p{
    
    font-size:15px;
    line-height:1.7;
    color:#666;
    width:95%;
    margin:auto;
}




/* ================= FILTER BUTTONS ================= */

.gallery-filter{
   display:flex;
   gap:5px;
   overflow-x:auto;
   flex-wrap:nowrap;
   justify-content:flex-start;
   margin-bottom:3px;
   padding-bottom:8px;
}

.gallery-filter::-webkit-scrollbar{
   display:none;
}

.gallery-filter button{
   flex:0 0 auto;
   white-space:nowrap;
   padding:12px 9px;
   font-size:13.5px;
   border-radius:25px;
}




/* احذف أسماء المشاريع */

.overlay{
    display:none;
}

/* لأننا ما عدنا نستخدمها */

.vertical,
.horizontal,
.small{

    grid-column:auto;

    grid-row:auto;

}
.swipe-hint{
   display:flex;
   justify-content:center;
   align-items:center;
   gap:12px;
   margin-top:8px;
   margin-bottom:20px;
   color:#777;
   font-size:15px;
   font-weight:500;
}
.swipe-hint span{
   font-size:20px;
   color:#a67c52; /* أو اللون الذهبي تبع موقعك */
}
.swipe-hint p{
   margin:0;
}


/*================== GALLERY GRID =================*/
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(3,1fr));
    grid-auto-rows:150px;
    gap:5px;
}


.KI{
   display:flex;
   justify-content:center;
   align-items:center;
   
   margin-top:10px;
   margin-bottom:20px;
   color:#919191;
   font-size:11px;
   
}

.KI p{
   margin:0;
}


/* ================= FOOTER ================= */

footer{

    padding:35px 20px 15px;

}

.footer-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;

}

.footer-item{

    align-items:flex-start;

    gap:10px;

}

.icon-box i{

    font-size:20px;

}

.footer-item h3{

    font-size:13px;

}

.footer-item p{

    font-size:11px;

}

.footer-item .footr-text{

    font-size:11px;

}

.copyright{

    grid-column:1/-1;

    text-align:center;

    margin-top:25px;

    padding-top:15px;

    font-size:13px;

}

}