/*==================================
  Shoaa.ir
  Atieh Sazan Shoaa
==================================*/


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


:root{

    --primary:#0B1736;
    --gold:#C89A3D;
    --light:#F6F7FA;
    --text:#555;
    --white:#fff;

}


html{

    scroll-behavior:smooth;

}


body{

    direction:rtl;

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

    background:#fff;

    color:var(--primary);

    line-height:2;

    overflow-x:hidden;

}


a{

    text-decoration:none;

}


img{

    max-width:100%;

    display:block;

}


.container{

    width:92%;

    max-width:1200px;

    margin:auto;

}





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


header{

    position:fixed;

    top:0;

    right:0;

    left:0;

    height:85px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(12px);

    z-index:1000;

    box-shadow:
    0 5px 20px rgba(0,0,0,.06);

}



.header-box{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    height:58px;

}



nav{

    display:flex;

    gap:35px;

}



nav a{

    color:var(--primary);

    font-size:16px;

    transition:.3s;

}



nav a:hover{

    color:var(--gold);

}



.header-btn{

    background:var(--gold);

    color:#fff;

    padding:10px 25px;

    border-radius:35px;

    transition:.3s;

}



.header-btn:hover{

    background:var(--primary);

}




/*========================
 Mobile Button
========================*/


.menu-btn{

    display:none;

    cursor:pointer;

}



.menu-btn span{

    display:block;

    width:28px;

    height:3px;

    margin:6px;

    background:var(--primary);

    border-radius:10px;

}



/*========================
 Mobile Menu
========================*/


.mobile-menu{

    display:none;

    position:fixed;

    top:85px;

    right:-100%;

    width:270px;

    height:100vh;

    background:#fff;

    padding:30px;

    z-index:999;

    box-shadow:-10px 0 30px rgba(0,0,0,.1);

    transition:.3s;

}



.mobile-menu a{

    display:block;

    padding:15px 0;

    color:var(--primary);

    border-bottom:1px solid #eee;

}


.mobile-menu.active{

    right:0;

}

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


.hero{

    min-height:100vh;

    padding-top:85px;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f7f8fb
    );

}



.hero-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}



.hero-content{

    flex:1;

}



.tag{

    display:inline-block;

    background:#fff3d9;

    color:var(--gold);

    padding:7px 18px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:25px;

}



.hero h1{

    font-size:58px;

    font-weight:900;

    color:var(--primary);

    line-height:1.4;

    margin-bottom:15px;

}



.hero h2{

    font-size:30px;

    font-weight:600;

    color:var(--gold);

    margin-bottom:25px;

}



.hero p{

    max-width:560px;

    color:var(--text);

    font-size:18px;

    line-height:2.2;

    margin-bottom:35px;

}




.hero-buttons{

    display:flex;

    gap:18px;

}



.main-btn{

    background:var(--gold);

    color:#fff;

    padding:14px 35px;

    border-radius:40px;

    transition:.3s;

}



.main-btn:hover{

    background:var(--primary);

}



.second-btn{

    border:2px solid var(--primary);

    color:var(--primary);

    padding:12px 35px;

    border-radius:40px;

    transition:.3s;

}



.second-btn:hover{

    background:var(--primary);

    color:#fff;

}




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


.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}



.hero-image img{

    width:380px;

    max-width:100%;

    filter:
    drop-shadow(
    0 25px 40px rgba(0,0,0,.15)
    );

    animation:logoMove 5s ease-in-out infinite;

}



@keyframes logoMove{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }


    100%{

        transform:translateY(0);

    }

}


/*========================
 Section Title
========================*/


.section-title{

    text-align:center;

    margin-bottom:60px;

}


.section-title span{

    color:var(--gold);

    font-size:15px;

}



.section-title h2{

    font-size:40px;

    color:var(--primary);

    margin-top:10px;

}





/*========================
 About
========================*/


.about{

    padding:100px 0;

    background:#fff;

}



.about-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:var(--light);

    padding:45px;

    border-radius:25px;

}



.about-box p{

    color:var(--text);

    font-size:18px;

    line-height:2.3;

}





/*========================
 Services
========================*/


.services{

    padding:100px 0;

    background:var(--light);

}



.service-grid{

    display:grid;

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

    gap:25px;

}



.service-card{

    background:#fff;

    padding:35px 25px;

    border-radius:22px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}



.service-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);

}



.service-card h3{

    color:var(--primary);

    font-size:22px;

    margin-bottom:15px;

}



.service-card p{

    color:var(--text);

    font-size:15px;

    line-height:2;

}



/*========================
 Contact
========================*/


.contact{

    padding:100px 0;

    background:#fff;

}



.contact-box{

    text-align:center;

}



.contact-box > p{

    color:var(--text);

    font-size:18px;

    margin-bottom:40px;

}



.contact-items{

    display:grid;

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

    gap:25px;

}



.contact-items div{

    background:var(--light);

    padding:30px;

    border-radius:20px;

}



.contact-items h3{

    color:var(--gold);

    margin-bottom:10px;

}



.contact-items span{

    color:var(--text);

}





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


footer{

    background:var(--primary);

    color:#fff;

    text-align:center;

    padding:35px 0;

}



footer img{

    height:165px;

    margin:0 auto 20px;

}



footer p{

    font-size:14px;

    opacity:.9;

}





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


@media(max-width:992px){


    .hero-box{

        flex-direction:column;

        text-align:center;

        gap:35px;

    }



    .hero-image{

        order:-1;

    }



    .hero-image img{

        width:280px;

    }



    .hero p{

        margin-left:auto;

        margin-right:auto;

    }



    .hero-buttons{

        justify-content:center;

    }



    .service-grid{

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

    }



    .contact-items{

        grid-template-columns:1fr;

    }

}





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


@media(max-width:768px){


    header{

        height:75px;

    }



    .logo img{

        height:42px;

    }



    nav,

    .header-btn{

        display:none;

    }



    .menu-btn{

        display:block;

    }



    .mobile-menu{

        display:block;

    }



    .hero{

        padding-top:95px;

    }



    .hero-image img{

        width:190px;

    }



    .hero h1{

        font-size:38px;

    }



    .hero h2{

        font-size:23px;

    }



    .hero p{

        font-size:16px;

    }



    .hero-buttons{

        flex-direction:column;

        width:100%;

    }



    .main-btn,

    .second-btn{

        width:100%;

        text-align:center;

    }



    .section-title h2{

        font-size:30px;

    }



    .service-grid{

        grid-template-columns:1fr;

    }



    .about-box{

        padding:25px;

    }


}