/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Vazirmatn, sans-serif;
}


body{

    background:#06192d;
    color:white;
    direction:rtl;

}


img{

    max-width:100%;
    display:block;

}


a{

    text-decoration:none;
    color:white;

}





/* =========================
   TOP BAR
========================= */


.topbar{

    height:42px;
    background:#c89426;
    color:#111;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 50px;

    font-size:13px;

}


.top-right{

    display:flex;
    gap:25px;

}


.top-left{

    font-weight:700;

}





/* =========================
 HEADER
========================= */


header{


    height:75px;

    background:#07182b;

    display:flex;

    align-items:center;

    padding:0 50px;

    position:relative;

}



.logo{

    margin-right:auto;

    width:180px;

}


.logo img{

    width:160px;

}



nav{

    display:flex;

    height:100%;

    align-items:center;

    gap:0;

}



nav a{

    height:100%;

    display:flex;

    align-items:center;

    padding:0 22px;

    font-size:14px;

    transition:.3s;

}



nav a:hover,
nav .active{


    background:#d10022;

}



.search{

    font-size:22px;

    margin-left:20px;

}





/* =========================
 HERO
========================= */


.hero{

    min-height:520px;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
    90deg,
    rgba(3,17,35,.95),
    rgba(5,25,45,.65)
    ),

    url("../images/hero-bg.jpg");

    background-size:cover;

    background-position:center;


    display:flex;

    align-items:center;

    padding:50px;

}



.hero-wave{

position:absolute;

bottom:-2px;

left:0;

width:100%;

height:140px;

z-index:3;

}


.hero-content{

    width:50%;

    z-index:2;

}


.hero-content h1{


font-size:42px;

color:#d5a52d;

margin-bottom:10px;

font-weight:900;


}


.hero-content h2{


font-size:35px;

line-height:1.8;

margin-bottom:20px;


}



.hero-content p{

font-size:17px;

line-height:2;

color:#ddd;

max-width:600px;

}




.hero button{


margin-top:35px;

background:#d40024;

border:none;

color:white;

padding:15px 40px;

font-size:16px;

cursor:pointer;

transition:.3s;


}



.hero button:hover{

background:#ff173d;

}





.hero-products{


width:50%;

display:flex;

align-items:center;

justify-content:center;

gap:15px;

z-index:2;


}



.hero-products img{


width:230px;

filter:drop-shadow(0 20px 25px #000);


}



.hero-products img:nth-child(2){

transform:translateY(70px);

width:180px;

}


.hero-products img:nth-child(3){

width:140px;

transform:translateY(90px);

}








/* =========================
 WHY
========================= */


.why{


background:#071d35;

padding:80px 50px 50px;


}



.why h2,
.products h2{


text-align:center;

font-size:30px;

color:#d6a72b;

margin-bottom:50px;


}



.why h2:after,
.products h2:after{


content:"";

display:block;

width:60px;

height:3px;

background:#c90024;

margin:15px auto;


}




.features{


display:grid;

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

gap:20px;


}




.feature{


text-align:center;

padding:20px;


border-left:1px solid #34485c;


}



.icon{


font-size:40px;

color:#d4a52a;

margin-bottom:15px;


}


.feature h3{

color:#d4a52a;

font-size:18px;

margin-bottom:15px;

}



.feature p{


color:#ccc;

line-height:2;

font-size:14px;


}








/* =========================
 PRODUCTS
========================= */


.products{


padding:60px 50px;

background:#06182d;


}



.product-grid{


display:grid;

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

gap:25px;


}



.card{


border:1px solid #44515d;

background:#0a213b;

text-align:center;

overflow:hidden;


transition:.3s;


}



.card:hover{


transform:translateY(-10px);

}



.card img{


height:220px;

width:100%;

object-fit:cover;

background:#07182b;


}



.card h3{


margin:20px 0;

color:#d7a62d;

font-size:19px;


}



.card p{


padding:0 20px;

color:#ddd;

line-height:2;

min-height:70px;


}




.card a{


display:inline-block;

background:#d00023;

padding:12px 30px;

margin:20px;

font-size:14px;


}








/* =========================
 STATS
========================= */


.stats{


background:linear-gradient(
90deg,
#c40022,
#9b0018
);


display:grid;

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

padding:40px 50px;


}



.stats div{


text-align:center;

border-left:1px solid rgba(255,255,255,.3);


}



.stats strong{


display:block;

font-size:35px;

margin-bottom:10px;


}


.stats span{

font-size:15px;

}







/* =========================
 RESPONSIVE
========================= */


@media(max-width:1000px){


header{

padding:20px;

}


nav{

display:none;

}



.hero{


flex-direction:column;

padding:40px 20px;

}



.hero-content,
.hero-products{


width:100%;

text-align:center;

}



.hero-products{


margin-top:40px;


}



.features{

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

}



.product-grid{

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

}



.stats{

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

gap:30px;

}


}





@media(max-width:600px){



.topbar{

padding:0 15px;

font-size:11px;

}



.hero-content h1{

font-size:28px;

}


.hero-content h2{

font-size:22px;

}


.features,
.product-grid,
.stats{


grid-template-columns:1fr;


}


.why,
.products{


padding:40px 20px;


}


}

/* =========================
ABOUT
========================= */


.about{

background:#081b31;

padding:90px 60px;

display:flex;

align-items:center;

gap:70px;


}



.about-image{

width:50%;

}



.about-image img{

width:100%;

border-radius:10px;

box-shadow:0 20px 40px #0008;

}



.about-content{

width:50%;

}



.about-content h2{


font-size:32px;

color:#d5a42c;

margin-bottom:25px;


}



.about-content p{


line-height:2.2;

color:#ddd;

margin-bottom:15px;

font-size:16px;


}



.about-content button{


background:#d00025;

border:none;

padding:15px 40px;

color:white;

font-size:16px;

margin-top:20px;

cursor:pointer;


}








/* =========================
APPLICATIONS
========================= */


.applications{


background:#061629;

padding:70px 50px;


}



.applications h2{


text-align:center;

font-size:30px;

color:#d5a42c;

margin-bottom:50px;


}




.app-grid{


display:grid;

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

gap:25px;


}



.app-grid div{


height:180px;

border:1px solid #34495b;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:#092039;

transition:.3s;


}



.app-grid div:hover{


transform:translateY(-8px);

border-color:#d5a42c;


}



.app-grid span{


font-size:45px;

margin-bottom:15px;


}



.app-grid h3{


color:white;

font-size:18px;


}










/* =========================
CTA
========================= */


.cta{


padding:80px 30px;

text-align:center;


background:

linear-gradient(
90deg,
rgba(198,145,35,.95),
rgba(150,0,20,.95)
);



}



.cta h2{


font-size:32px;

margin-bottom:20px;


}



.cta p{


font-size:18px;

margin-bottom:30px;


}



.cta a{


display:inline-block;

background:#07182b;

padding:15px 45px;

color:white;


}







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



footer{


background:#040f1d;


}



.footer-container{


display:grid;

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

gap:40px;

padding:60px 50px;


}



.footer-col h3{


color:#d5a42c;

font-size:20px;

margin-bottom:25px;


}



.footer-col p{


color:#ccc;

line-height:2;

font-size:14px;


}



.footer-col a{


display:block;

color:#ddd;

margin-bottom:12px;

font-size:14px;


}



.footer-col a:hover{


color:#d5a42c;


}



.social{


display:flex;

gap:15px;


}



.social span{


border:1px solid #555;

padding:10px 15px;

font-size:13px;


}




.copyright{


text-align:center;

padding:20px;

border-top:1px solid #263647;

color:#aaa;

font-size:13px;


}








/* =========================
RESPONSIVE ADDITION
========================= */


@media(max-width:900px){


.about{


flex-direction:column;

padding:50px 25px;


}


.about-image,
.about-content{


width:100%;

}



.app-grid{


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

}



.footer-container{


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

}


}




@media(max-width:550px){


.app-grid,
.footer-container{


grid-template-columns:1fr;

}


.cta h2{


font-size:24px;

}



}

/* =========================
PAGE TEMPLATES
========================= */

.page-content,
.single-content,
.search-content {
    padding: 60px 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header,
.single-header,
.search-header {
    margin-bottom: 40px;
}

.page-title,
.single-title,
.search-title {
    font-size: 36px;
    color: #d5a42c;
    margin-bottom: 20px;
}

.search-title span {
    color: #fff;
}

.page-body,
.single-body {
    line-height: 2;
    color: #ddd;
    font-size: 16px;
}

.single-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    color: #aaa;
    font-size: 14px;
}

.single-thumbnail {
    margin: 30px 0;
    border-radius: 10px;
    overflow: hidden;
}

.single-thumbnail img {
    width: 100%;
    height: auto;
}

.single-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #34485c;
}

.single-tags a {
    display: inline-block;
    background: #0a213b;
    padding: 8px 15px;
    margin: 5px;
    border: 1px solid #44515d;
    border-radius: 4px;
    font-size: 13px;
}

.single-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #34485c;
}

.single-navigation a {
    color: #d5a42c;
    transition: 0.3s;
}

.single-navigation a:hover {
    color: #fff;
}

/* Search Results */
.search-results article {
    padding: 30px;
    margin-bottom: 20px;
    background: #0a213b;
    border: 1px solid #44515d;
    border-radius: 8px;
}

.result-title {
    font-size: 24px;
    margin-bottom: 15px;
}

.result-title a {
    color: #d5a42c;
    transition: 0.3s;
}

.result-title a:hover {
    color: #fff;
}

.result-excerpt {
    color: #ddd;
    line-height: 1.8;
    margin-bottom: 15px;
}

.result-meta {
    color: #aaa;
    font-size: 13px;
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
}

.search-no-results p {
    font-size: 18px;
    color: #ddd;
    margin-bottom: 30px;
}

/* 404 Error */
.error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.error-title {
    font-size: 120px;
    color: #d40024;
    font-weight: 900;
    margin-bottom: 20px;
}

.error-subtitle {
    font-size: 32px;
    color: #d5a42c;
    margin-bottom: 20px;
}

.error-message {
    font-size: 18px;
    color: #ddd;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-button {
    background: #d40024;
    padding: 15px 40px;
    color: white;
    border: none;
    transition: 0.3s;
}

.error-button:hover {
    background: #ff173d;
}

/* Search Form */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.search-field {
    flex: 1;
    padding: 12px 15px;
    background: #0a213b;
    border: 1px solid #44515d;
    color: white;
    border-radius: 4px;
}

.search-field:focus {
    outline: none;
    border-color: #d5a42c;
}

.search-submit {
    padding: 12px 25px;
    background: #d40024;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}

.search-submit:hover {
    background: #ff173d;
}

/* Pagination */
.search-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.search-pagination a,
.search-pagination span {
    padding: 10px 15px;
    background: #0a213b;
    border: 1px solid #44515d;
    color: #ddd;
}

.search-pagination a:hover,
.search-pagination .current {
    background: #d40024;
    border-color: #d40024;
    color: white;
}

/* =========================
PAGE HERO
========================= */

.page-hero{

    min-height:300px;

    background:linear-gradient(
    90deg,
    rgba(3,17,35,.95),
    rgba(5,25,45,.65)
    ),
    url("../images/hero-bg.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;

}

.page-hero-content{

    text-align:center;

}

.page-hero-content h1{

    font-size:48px;

    color:#d5a52d;

    margin-bottom:15px;

    font-weight:900;

}

.page-hero-content p{

    font-size:20px;

    color:#ddd;

}

/* =========================
ABOUT PAGE
========================= */

.about-page{

    background:#081b31;

    padding:90px 60px;

    display:flex;

    align-items:center;

    gap:70px;

}

.about-page-image{

    width:50%;

}

.about-page-image img{

    width:100%;

    border-radius:10px;

    box-shadow:0 20px 40px #0008;

}

.about-page-content{

    width:50%;

}

.about-page-content h2{

    font-size:36px;

    color:#d5a42c;

    margin-bottom:30px;

}

.about-page-content p{

    line-height:2.2;

    color:#ddd;

    margin-bottom:20px;

    font-size:16px;

}

.about-features{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}

.about-feature{

    text-align:center;

    padding:25px;

    background:#0a213b;

    border:1px solid #44515d;

    border-radius:8px;

}

.about-feature span{

    font-size:40px;

    margin-bottom:15px;

    display:block;

}

.about-feature h3{

    color:#d5a42c;

    font-size:18px;

    margin-bottom:10px;

}

.about-feature p{

    font-size:14px;

    color:#ccc;

    line-height:1.8;

    margin-bottom:0;

}

/* =========================
TEAM SECTION
========================= */

.team-section{

    background:#061629;

    padding:80px 50px;

    text-align:center;

}

.team-section h2{

    font-size:36px;

    color:#d5a42c;

    margin-bottom:15px;

}

.team-section > p{

    font-size:18px;

    color:#ddd;

    margin-bottom:50px;

}

.team-grid{

    display:grid;

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

    gap:30px;

}

.team-member{

    background:#0a213b;

    border:1px solid #44515d;

    border-radius:8px;

    overflow:hidden;

    transition:.3s;

}

.team-member:hover{

    transform:translateY(-10px);

    border-color:#d5a42c;

}

.team-image{

    height:250px;

    overflow:hidden;

}

.team-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.team-member h3{

    color:#d5a42c;

    font-size:18px;

    margin:20px 0 10px;

}

.team-member p{

    color:#ccc;

    font-size:14px;

    margin-bottom:20px;

}

/* =========================
ABOUT PAGE RESPONSIVE
========================= */

@media(max-width:900px){

    .about-page{

        flex-direction:column;

        padding:50px 25px;

    }

    .about-page-image,

    .about-page-content{

        width:100%;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .team-grid{

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

    }

    .page-hero-content h1{

        font-size:36px;

    }

}

@media(max-width:600px){

    .team-grid{

        grid-template-columns:1fr;

    }

    .page-hero{

        padding:40px 20px;

    }

    .page-hero-content h1{

        font-size:28px;

    }

    .page-hero-content p{

        font-size:16px;

    }

}


/* =========================
PRODUCTS ARCHIVE
========================= */

.products-archive{

    background:#06182d;

    padding:60px 50px;

}

.products-filter{

    margin-bottom:50px;

    text-align:center;

}

.products-filter h2{

    font-size:30px;

    color:#d6a72b;

    margin-bottom:30px;

}

.filter-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.filter-btn{

    background:#0a213b;

    border:1px solid #44515d;

    color:#ddd;

    padding:12px 25px;

    cursor:pointer;

    transition:.3s;

    font-size:14px;

    border-radius:4px;

}

.filter-btn:hover,

.filter-btn.active{

    background:#d40024;

    border-color:#d40024;

    color:white;

}

.products-grid{

    display:grid;

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

    gap:30px;

}

.product-card{

    border:1px solid #44515d;

    background:#0a213b;

    text-align:center;

    overflow:hidden;

    transition:.3s;

    border-radius:8px;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:#d5a42c;

}

.product-card img{

    height:220px;

    width:100%;

    object-fit:cover;

    background:#07182b;

}

.product-card h3{

    margin:20px 0;

    color:#d7a62d;

    font-size:19px;

}

.product-card p{

    padding:0 20px;

    color:#ddd;

    line-height:2;

    min-height:70px;

}

.product-card a{

    display:inline-block;

    background:#d00023;

    padding:12px 30px;

    margin:20px;

    font-size:14px;

}

/* =========================
PRODUCTS ARCHIVE RESPONSIVE
========================= */

@media(max-width:900px){

    .products-grid{

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

    }

}

@media(max-width:600px){

    .products-grid{

        grid-template-columns:1fr;

    }

    .filter-buttons{

        gap:10px;

    }

    .filter-btn{

        padding:10px 20px;

        font-size:13px;

    }

}


/* =========================
SINGLE PRODUCT
========================= */

.single-product{

    background:#081b31;

    padding:80px 50px;

}

.single-product-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    max-width:1400px;

    margin:0 auto;

}

.product-gallery{

}

.main-product-image{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:20px;

}

.product-thumbnails{

    display:flex;

    gap:15px;

}

.thumbnail{

    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:5px;

    cursor:pointer;

    border:2px solid #44515d;

    border-radius:5px;

}

.thumbnail.active,

.thumbnail:hover{

    border-color:#d5a42c;

}

.product-details{

}

.product-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:14px;

    color:#aaa;

}

.product-breadcrumb a{

    color:#d5a42c;

}

.product-breadcrumb a:hover{

    color:#fff;

}

.product-details h1{

    font-size:42px;

    color:#d5a42c;

    margin-bottom:20px;

}

.product-meta{

    margin-bottom:30px;

}

.product-category{

    display:inline-block;

    background:#0a213b;

    padding:8px 15px;

    border:1px solid #44515d;

    border-radius:4px;

    font-size:14px;

    color:#ccc;

}

.product-description{

    line-height:2;

    color:#ddd;

    font-size:16px;

    margin-bottom:30px;

}

.product-features,

.product-specifications{

    margin-bottom:30px;

}

.product-features h3,

.product-specifications h3{

    font-size:24px;

    color:#d5a42c;

    margin-bottom:20px;

}

.product-features ul{

    list-style:none;

}

.product-features li{

    padding:10px 0;

    color:#ddd;

    position:relative;

    padding-right:25px;

}

.product-features li:before{

    content:"?";

    position:absolute;

    right:0;

    color:#d5a42c;

}

.product-specifications table{

    width:100%;

    border-collapse:collapse;

}

.product-specifications td{

    padding:15px;

    border-bottom:1px solid #44515d;

    color:#ddd;

}

.product-specifications td:first-child{

    color:#d5a42c;

    font-weight:bold;

    width:150px;

}

.product-actions{

    display:flex;

    gap:15px;

    margin-top:40px;

}

.btn-primary,

.btn-secondary{

    padding:15px 35px;

    font-size:16px;

    border-radius:5px;

    transition:.3s;

}

.btn-primary{

    background:#d40024;

    color:white;

    border:none;

}

.btn-primary:hover{

    background:#ff173d;

}

.btn-secondary{

    background:transparent;

    color:#d5a42c;

    border:2px solid #d5a42c;

}

.btn-secondary:hover{

    background:#d5a42c;

    color:white;

}

/* =========================
RELATED PRODUCTS
========================= */

.related-products{

    background:#06182d;

    padding:80px 50px;

}

.related-products h2{

    text-align:center;

    font-size:36px;

    color:#d6a72b;

    margin-bottom:50px;

}

.related-products-grid{

    display:grid;

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

    gap:25px;

    max-width:1400px;

    margin:0 auto;

}

/* =========================
SINGLE PRODUCT RESPONSIVE
========================= */

@media(max-width:900px){

    .single-product-container{

        grid-template-columns:1fr;

        gap:40px;

    }

    .related-products-grid{

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

    }

    .product-details h1{

        font-size:32px;

    }

}

@media(max-width:600px){

    .single-product,

    .related-products{

        padding:40px 20px;

    }

    .related-products-grid{

        grid-template-columns:1fr;

    }

    .product-actions{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        text-align:center;

    }

    .main-product-image{

        height:350px;

    }

}