@charset "UTF-8";

/* default */

* {
        transition: all 0.4s;
}

html {
        scroll-behavior: smooth;
}

body {
        padding: 0;
        margin: 0;
}

p, h1, h2, h3, h4, h5, h6, span, i, a, pre {
        margin: 0;
        padding: 0;
        text-decoration: none;
        box-sizing: border-box;
}

a {
        display: inline-block;
        cursor: pointer;
        transition: all 0.4s;
}



/* fonts */

.font-v1 {
        font-family: "Vazir", sans-serif;
        font-weight: 100;
}


.font-v3 {
        font-family: "Vazir", sans-serif;
        font-weight: 300;
}


.font-v5 {
        font-family: "Vazir", sans-serif;
        font-weight: 500;
}


.font-v9 {
        font-family: "Vazir", sans-serif;
        font-weight: 900;
}


.font-vb {
        font-family: "Vazir", sans-serif;
        font-weight: bold;
}


.font-vn {
        font-family: "Vazir", sans-serif;
        font-weight: normal;
}

.j-content {
        text-align: justify;
}

p {
        line-height: normal;
}



/* font size */

.fs-90 { font-size: 90px; }

.fs-50 { font-size: 50px; }

.fs-30 { font-size: 30px; }

.fs-18 { font-size: 18px; }

.fs-12 { font-size: 12px; }

.fs-10 { font-size: 10px; }









/* colors */

.text-light-gray { color: #E5E5E5; }

.bg-light-gray { background-color: #E5E5E5; }


.text-gray { color: #757575; }

.bg-gray { background-color: #757575; }






.text-light-pink { color: #FFCDCD; }

.bg-light-pink { background-color: #FFCDCD; }

.bg-light-pink:hover { background-color: #FFAEAE; }


.text-pink { color: #FFAEAE; }

.bg-pink { background-color: #FFAEAE; }




.text-light-brown { color: #FFEDCF; }

.bg-light-brown { background-color: #FFEDCF; }

.bg-light-brown:hover { background-color: #FFEDCF; }


.text-brown { color: #D0A086; }

.bg-brown { background-color: #D0A086; }




.text-light-yellow { color: #FFF9EB; }

.bg-light-yellow { background-color: #FFF9EB; }

.bg-light-yellow:hover { background-color: #FFCF73; }


.text-yellow { color: #FFCF73 }

.bg-yellow { background-color: #FFCF73; }






.text-light-orange { color: #FDDB99; }

.bg-light-orange { background-color: #FDDB99; }

.bg-light-orange:hover { background-color: #FF9961; }


.text-orange { color: #FF9961 }

.bg-orange { background-color: #FF9961; }






.text-light-green { color: #AFDDBF; }

.bg-light-green { background-color: #AFDDBF; }

.bg-light-green:hover { background-color: #6CC4BE; }


.text-green { color: #6CC4BE; }

.bg-green { background-color: #6CC4BE; }


.text-dark-green { color: #395003; }

.bg-dark-green { background-color: #395003; }


.bg-ws {
        background-color: #26D367;
}






.text-light-blue { color: #D2EAFF; }

.bg-light-blue { background-color: #D2EAFF; }


.bg-light-blue:hover { background-color: #82D1F2; }


.text-blue { color: #82D1F2; }

.bg-blue { background-color: #82D1F2; }


.text-sierra-blue { color: #F7FAFB; }

.bg-sierra-blue { background-color: #F7FAFB; }


.text-dark-blue { color: #162755; }

.bg-dark-blue { background-color: #162755; }






.text-light-purple { color: #E0DDFF; }

.bg-light-purple { background-color: #E0DDFF; }


.text-purple { color: #413F7C; }

.bg-purple { background-color: #413F7C; }






.instagram-color { background: linear-gradient(45deg, rgba(51,7,185,1) 0%, rgba(187,69,255,1) 50%, rgba(255,219,95,1) 100%); }

.gr-green { background: linear-gradient(45deg, rgba(31,185,62,1) 0%, rgba(68,239,97,1) 100%); }

.email-color { background: linear-gradient(45deg, rgb(255, 171, 86) 0%, rgb(255, 234, 164) 100%); }

.telegram-color { background: linear-gradient(45deg, rgb(85, 163, 235) 0%, rgba(184, 205, 255, 1) 100%); }


.gr-rahat {
        background: linear-gradient(to left, RGB(173, 206, 36) 0, RGB(37, 175, 236) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

.gr-beige {
        background: rgb(243,225,194);
        background: -moz-radial-gradient(circle, rgba(243,225,194,1) 0%, rgba(255,247,232,1) 100%);
        background: -webkit-radial-gradient(circle, rgba(243,225,194,1) 0%, rgba(255,247,232,1) 100%);
        background: radial-gradient(circle, rgba(243,225,194,1) 0%, rgba(255,247,232,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3e1c2",endColorstr="#fff7e8",GradientType=1);
}

.gr-red {
        background: rgb(255,121,121);
        background: linear-gradient(90deg, rgba(255,121,121,1) 0%, rgba(233,56,56,1) 100%);
}

.gr-purple {
        background-image: linear-gradient(to top left, rgba(65, 63, 124, 1) 0%, rgba(127, 126, 156, 1) 100%);
}

.gr-yellow {
        background: rgb(255,228,191);
        background: -moz-radial-gradient(circle, rgba(255,228,191,1) 0%, rgba(206,219,255,0) 47%, rgba(255,255,255,0) 100%);
        background: -webkit-radial-gradient(circle, rgba(255,228,191,1) 0%, rgba(206,219,255,0) 47%, rgba(255,255,255,0) 100%);
        background: radial-gradient(circle, rgba(255,228,191,1) 0%, rgba(206,219,255,0) 47%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a0c1ff",endColorstr="#ffffff",GradientType=1);
}

.gr-fade {
        mask-image: linear-gradient(360deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 15%, rgba(255,255,255,1) 100%);
        
}

.gr-gray-br {
        background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 60%, rgba(247, 250, 251, 1) 100%);
}

.gr-gray-bl {
        background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 0) 60%, rgba(247, 250, 251, 1) 100%);
}


.bg-blur {
        background: rgba( 255, 255, 255, 0.8);
        /* box-shadow: 0 8px 20px 0 rgba( 31, 38, 130, 0.35 ); */
        backdrop-filter: blur( 15px );
        -webkit-backdrop-filter: blur( 15px);

}

.bg-blur-blue {
        background: rgba( 210, 234, 255, 0.8);
        /* box-shadow: 0 8px 20px 0 rgba( 31, 38, 130, 0.35 ); */
        backdrop-filter: blur( 15px );
        -webkit-backdrop-filter: blur( 15px);

}

.bg-img2 {
        background-image: url("../Photos/Home/Bg-img/IMG_5508.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
}



/* icon size */

.icon-1 {
        width: 17px;
}

.icon-2 {
        width: 24px;
}

.icon-3 {
        width: 20px;
}

.icon-4 {
        width: 15px;
}

.icon-5 {
        width: 30px;
}

.icon-6 {
        width: 27px;
}

.icon-7 {
        width: 50px;
}

.icon-8 {
        width: 35px;
}



/* size and spacing */


.h250 {
        height: 250px;
}


.h150 {
        height: 200px;
}

.h50 {
        height: 80px;
}

.w-400 {
        width: 400px;
}

.m-top {
        margin-top: -230px;
}

.m-top2 {
        margin-top: -120px;
}




/* border */

.border-solid {
        border: solid 1px #6F6F6F;
}

.border-solid-2 {
        border: solid 2px #6F6F6F;
}

.border-t {
        border-top: solid 1px #6F6F6F;
}

.border-b {
        border-bottom: solid 1px #6F6F6F;
}


















/* shadow */

.shadow1 {
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.shadow-white {
        text-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px, rgba(255, 255, 255, 0.3) 0px 2px 2px, rgba(255, 255, 255, 0.3) 0px 4px 4px, rgba(255, 255, 255, 0.3) 0px 8px 8px, rgba(255, 255, 255, 0.3) 0px 16px 16px;
}

.shadow2 {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.text-stroke {
        -webkit-text-stroke: 2px white;
}



/* roundness */
.rounded-all { border-radius: 30px !important; }

.rounded-all2 { border-radius: 18px !important; }

.rounded-all3 { border-radius: 10px !important; }

.rounded-t { border-radius: 30px 30px 0 0 !important; }

.rounded-b { border-radius: 0 0 30px 30px !important; }

.rounded-s { border-radius: 0 30px 30px 0 !important; }

.rounded-e { border-radius: 30px 0 0 30px !important; }


.rounded-ts { border-radius: 0 30px 0 0 !important; }

.rounded-te { border-radius: 30px 0 0 0 !important; }

.rounded-t2 { border-radius: 20px 20px 0 0 !important; }

.rounded-b2 { border-radius: 0 0 20px 20px !important; }






/* media */
@media screen and (max-width: 768px) {

        /* font size */
        .fs-span { font-size: 80px; }

        .fs-span2 { font-size: 60px; }


        .fs1 { font-size: 40px; }

        .fs2 { font-size: 40px; }

        .fs3 { font-size: 30px; }

        .fs4 { font-size: 19px; }

        

        .p-sticky {
                position: static;
        }


        .bg-img1 {
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9)), url("../Photos/Home/Bg-img/IMG_5444.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: bottom;
        }

        .h1-title {
                text-align: center;
        }

        .navbar-transform {
                margin-top: -90px;
        }


        .sidenav {
                width: 100vw;
        }

}


@media screen and (min-width: 768px) {

        /* font size */
        .fs-span { font-size: 120px; }

        .fs-span2 { font-size: 100px; }


        .fs1 { font-size: 70px; }

        .fs2 { font-size: 70px; }

        .fs3 { font-size: 30px; }

        .fs4 { font-size: 25px; }



        .p-sticky {
                position: static;
        }


        .bg-img1 {
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9)), url("../Photos/Home/Bg-img/IMG_5479.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: bottom;        
        }



        .h1-title {
                text-align: right;
        }


        .navbar-transform {
                margin-top: -90px;
        }


        .sidenav {
                width: 450x;
        }

}

@media screen and (min-width: 992px) {

        /* font size */
        .fs-span { font-size: 140px; }

        .fs-span2 { font-size: 120px; }


        .fs1 { font-size: 80px; }

        .fs2 { font-size: 90px; }

        .fs3 { font-size: 30px; }

        .fs4 { font-size: 25px; }


        .p-sticky {
                position: sticky;
                top: 0;
                left: 0;
                right: 0;
        }


        .bg-img1 {
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9)), url("../Photos/Home/Bg-img/IMG_5479.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: bottom;
        }


        .h1-title {
                text-align: right;
        }


        .navbar-transform {
                margin-top: 0;
        }


        .sidenav {
                width: 450px;
        }

}






/* style */

/* top navigation section */

.nav-z {
        z-index: 2300;
}

.nav-z2 {
        z-index: 2000;
}

.nav-z3 {
        z-index: 2500;
}


.top-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.bottom-nav-flex {
        display: flex;
        justify-content: space-around;
        align-items: center;
}

.img-logo {
        width: 150px;
}

.img-logo-m {
        width: 135px;
}

.img-person {
        width: 100px;
        height: 100px;
}


.login-btn {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s;
}

.title-info-cont {
        display: flex;
        justify-content: center;
        align-items: center;
}

.title-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
        width: 100%;
}

.title-info:hover {
        transform: translateY(-10px);
}

.item-2:hover {
        transform: translateY(-15px);
}

.title-info img {
        width: 50px;
}

.page-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.page-nav-links a {
        color: black;
}

.search-bar-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
}


.search-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;

}

.product-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.navbar-hover {
        border: solid 1px #fff;
}

.navbar-hover:hover {
        border: solid 1px #000;
        background-color: #fff;
        padding: 2px 15px;
}

/* mobile menu icon */
.nav-icon-container {
        display: inline-block;
        cursor: pointer;
}

.bar1, .bar2, .bar3 {
        width: 18px;
        height: 2px;
        background-color: #333;
        transition: 0.4s;
}

.bar2 {
        margin: 5px 0;
}

.change .bar1 { transform: translate(0, 7px) rotate(-45deg);}

.change .bar2 { opacity: 0;}

.change .bar3 { transform: translate(0, -7px) rotate(45deg);}






/* offcanvas */

.offcanvas {
        height: 85vh !important;
        border-top: solid 1px #6F6F6F !important;
        border-left: solid 1px #6F6F6F !important;
        border-right: solid 1px #6F6F6F !important;
        border-radius: 30px 30px 0 0;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.small-bar {
        width: 50px;
        height: 4px;
}


.social-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
        width: 100%;
}

#loginSection {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: space-between;
        transition: all 0.4s;
}





/* login section */

/* The side navigation menu */
.sidenav {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: -2px;
        box-sizing: border-box;
        border-top: 1px solid #6F6F6F;
        border-left: 1px solid #6F6F6F;
        border-right: 1px solid #6F6F6F;
        height: 0; /* 100% Full-height */
        position: fixed; /* Stay in place */
        z-index: 2400; /* Stay on top */
        bottom: 0; /* Stay at the top */
        overflow-y: hidden; /* Disable horizontal scroll */
        padding-top: 0; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;        
}

/* The navigation menu links */
.sidenav a {
        transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
        color: #000000;
}

.submit-btn {
        padding: 5px 0;
}






/* products */

.prog-cont {
        height: 6px;
        width: 100px;
}

.products-hover:hover {
        transform: translateY(-15px);
}

.product-title-hover:hover {
        text-decoration: underline;
}


/* footer */

.footer-head1 {
        border-top: solid 1px #6F6F6F;
        border-right: solid 1px #6F6F6F;
        border-radius: 0 30px 0 0;
}

.footer-head2 {
        border-top: solid 1px #6F6F6F;
        border-left: solid 1px #6F6F6F;
        border-radius: 30px 0 0 0;
}

.footer-body{
        border-bottom: solid 1px #6F6F6F;
        border-left: solid 1px #6F6F6F;
        border-right: solid 1px #6F6F6F;
        border-radius: 0 0 30px 30px;
}




@font-face {
        font-family: YekanBakh;
        src: url("Fonts/YekanBakh-Fat.ttf");
}

@media screen and (max-width: 768px) {
        .book-title {
        margin-right: 0;
        }

        h1 {
        font-size: 33px !important;
        }
}

@media screen and (min-width: 992px) {
        .book-title {
        margin-right: -190px;
        }

        h1 {
        font-size: 40px !important;
        }
}

@media screen and (min-width: 1200px) {
        .book-title {
        margin-right: -250px;
        }

        h1 {
        font-size: 45px !important;
        }
}

@media screen and (min-width: 1400px) {
        .book-title {
        margin-right: -290px;
        }

        h1 {
        font-size: 50px !important;
        }
}

h1 {
        font-family: YekanBakh !important;
}

.sticky-section {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
}