/* ===============================
   Fajr Al Yamamah Main Style
================================ */

*{
box-sizing:border-box;
}

body{

margin:0;

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

background:#f7f5f0;

color:#222;

direction:rtl;

}



a{

text-decoration:none;

}





/* ===============================
   Header
================================ */


.site-header{

background:#071B33;

padding:8px 0;

box-shadow:0 5px 25px rgba(0,0,0,.18);

}



.header-container{

width:92%;

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}




.brand{

display:flex;

align-items:center;

gap:12px;

}




.logo{

width:55px;

height:55px;

object-fit:contain;

}





.brand-text h2{

margin:0;

color:#D9B86F;

font-size:22px;

font-weight:900;

}




.brand-text span{

color:white;

font-size:12px;

}





.main-menu{

display:flex;

gap:22px;

}



.main-menu a{

color:white;

font-size:15px;

font-weight:bold;

transition:.3s;

}



.main-menu a:hover{

color:#D9B86F;

}





.header-buttons{

display:flex;

gap:10px;

}




.btn-login{

background:white;

color:#071B33;

padding:10px 18px;

border-radius:12px;

font-weight:bold;

}




.btn-request{

background:#B98B3D;

color:white;

padding:10px 18px;

border-radius:12px;

font-weight:bold;

}





/* ===============================
   Hero
================================ */


.hero{

min-height:600px;

display:flex;

align-items:center;

background:

linear-gradient(

135deg,

rgba(7,27,51,.95),

rgba(11,43,87,.85)

),

url('../images/hero.jpg');


background-size:cover;

background-position:center;

color:white;

}



.hero-container{

width:92%;

max-width:1200px;

margin:auto;

}



.hero h1{

font-size:55px;

line-height:1.3;

}



.hero p{

font-size:20px;

line-height:2;

max-width:750px;

}



.gold{

color:#D9B86F;

}





/* ===============================
   Products
================================ */



.products-page{

padding:70px 0;

}



.container{

width:92%;

max-width:1200px;

margin:auto;

}



.page-title{

text-align:center;

color:#071B33;

font-size:42px;

}





.products-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}





.product-card{

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.1);

transition:.3s;

}




.product-card:hover{

transform:translateY(-8px);

}





.product-card img{

width:100%;

height:260px;

object-fit:cover;

}





.product-content{

padding:25px;

}




.product-content h2{

color:#071B33;

font-size:24px;

}





.product-content p{

color:#666;

line-height:1.8;

}





.price{

color:#B98B3D;

font-size:25px;

font-weight:bold;

}




.details-btn{

display:block;

background:#071B33;

color:white;

padding:14px;

border-radius:14px;

text-align:center;

margin-top:20px;

}





/* ===============================
   Product Details
================================ */


.product{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin:60px auto;

}



.box{

background:white;

padding:35px;

border-radius:30px;

box-shadow:0 15px 40px rgba(0,0,0,.1);

}



.product-image img{

width:100%;

border-radius:25px;

}



.product h1{

color:#071B33;

font-size:42px;

}





.description{

font-size:18px;

line-height:2;

color:#555;

}




.info{

display:flex;

gap:15px;

margin-top:25px;

}



.info div{

background:#f7f5f0;

padding:15px;

border-radius:15px;

flex:1;

text-align:center;

}





/* ===============================
   Buttons
================================ */



.btn-primary{

background:#071B33;

color:white;

padding:14px 25px;

border-radius:14px;

font-weight:bold;

}



.btn-gold{

background:#B98B3D;

color:white;

padding:14px 25px;

border-radius:14px;

font-weight:bold;

}





/* ===============================
   Footer
================================ */



.site-footer{

background:#071B33;

color:white;

margin-top:70px;

padding-top:50px;

}




.footer-container{

width:92%;

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}



.footer-column h3{

color:#D9B86F;

}



.footer-column a{

display:block;

color:white;

margin-bottom:12px;

}



.footer-column p{

color:#ddd;

line-height:1.8;

}





.footer-logo{

width:55px;

height:55px;

object-fit:contain;

}



.footer-bottom{

text-align:center;

margin-top:40px;

padding:20px;

border-top:1px solid rgba(255,255,255,.15);

}





/* ===============================
   Search
================================ */



.search-box{

display:flex;

gap:10px;

margin-bottom:30px;

}



.search-box input{

flex:1;

padding:15px;

border-radius:15px;

border:1px solid #ddd;

}





.search-box button{

background:#071B33;

color:white;

border:0;

padding:15px 30px;

border-radius:15px;

}





.categories{

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:center;

margin-bottom:40px;

}



.categories a{

background:white;

padding:12px 20px;

border-radius:50px;

border:1px solid #ddd;

}





/* ===============================
   Responsive
================================ */



@media(max-width:900px){


.header-container{

flex-direction:column;

}


.main-menu{

flex-wrap:wrap;

justify-content:center;

}


.products-grid{

grid-template-columns:1fr;

}



.product{

grid-template-columns:1fr;

}



.footer-container{

grid-template-columns:1fr;

}



.hero h1{

font-size:38px;

}



}