@font-face {
    font-family: irsans;
    src: url("../fonts/IRANSansWeb.woff2")format("woff2");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: irsans;
    scroll-behavior: smooth;
}

/* HOME START */

.home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.home-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 1200px;
}

.home-rast {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.home-rast #h1 {
    color: dimgray;
    font-size: 40px;
}

.home-rast #h1-2 {
    color: blue;
    font-size: 40px;
}

.home-rast p {
    color: gray;
}

.home-rast a {
    text-decoration: none;
    margin-top: 30px;
    font-size: 18px;
}

.home-rast a span {
    color: red;
}

.home-rast a i {
    color: white;
    background-color: red;
    padding: 14px 15px;
    border-radius: 50%;
    font-size: 15px;
    box-shadow: 3px 0px 5px 0px rgba(255, 0, 0, .8);
}

/* HOME END */
/* Social Banner START */

.social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.social-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 1200px;
    background-color: rgb(90, 90, 255);
    border-radius: 15px;
    padding: 30px;
}

.social-container::after {
    content: "";
    position: absolute;
    width: 1225px;
    height: 150px;
    transform: rotate(-4deg) translateX(42px);
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-radius: 15px;
    z-index: -1;
    transition: all .5s;
}

.social-container:hover::after {
    transform: rotate(0deg) translateX(42px);
}

.social-rast {
    color: white;
}

.social-chap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
}

.social-chap-telegram {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
    transition: all .5s;
    text-decoration: none;
    width: 175px;
}

.social-chap-telegram i {
    color: white;
    background-color: blue;
    padding: 14px 15px;
    border-radius: 50%;
    font-size: 25px;
    transition: all .5s;
}

.social-chap-telegram p {
    color: black;
    transition: all .5s;
}

.social-chap-telegram:hover {
    background-color: rgb(0, 0, 200);
}

.social-chap-telegram:hover i {
    color: blue;
    background-color: white;
}

.social-chap-telegram:hover p {
    color: white;
}

.social-chap-instagram {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
    transition: all .5s;
    text-decoration: none;
    width: 175px;
}

.social-chap-instagram i {
    color: white;
    background-color: blue;
    padding: 14px 15px;
    border-radius: 50%;
    font-size: 25px;
    transition: all .5s;
}

.social-chap-instagram p {
    color: black;
    transition: all .5s;
}

.social-chap-instagram:hover {
    background-color: rgb(0, 0, 200);
}

.social-chap-instagram:hover i {
    color: blue;
    background-color: white;
}

.social-chap-instagram:hover p {
    color: white;
}

/* Social Banner END */
/* PRODUCTS START */

.product {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.product-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    width: 1200px;
}

.product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.product-top .product-top-rast p {
    color: gray;
}

.product-top .product-top-chap a {
    text-decoration: none;
    color: black;
    padding: 7px 15px;
    border-radius: 10px;
    border: 2px solid gray;
    transition: all .5s;
}

.product-top .product-top-chap a i {
    transform: translateY(1.5px) translateX(-2px);
    transition: all .5s;
}

.product-top .product-top-chap a:hover {
    padding: 7px 15px 7px 25px;
}

.product-top .product-top-chap a:hover i {
    transform: translateY(1.5px) translateX(-10px);
    color: red;
}

.product-container .swiper {
    width: 100%;
    background-color: white;
    padding: 10px 0px;
    display: flex;
}

.products-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: 2px solid #D1DBE8;
    border-radius: 10px;
    padding: 10px;
    width: 230px;
    transition: all .5s;
    background-color: white;
}

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

.products-card-takhfif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.products-card-takhfif p {
    color: #f21919;
    border-radius: 5px;
    font-size: 13px;
}

.products-card-takhfif .mojod {
    color: green;
}

.products-card-takhfif .namojod {
    color: red;
}

.products-card-takhfif .mojod i,
.products-card-takhfif .namojod i {
    transform: translateY(2px);
}

.products-card-img img {
    width: 100%;
    border-radius: 10px;
}

.products-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    flex-direction: column;
    width: 100%;
    margin-bottom: 5px;
}

.products-card-title p {
    color: #929292;
    font-size: 12px;
}

.products-card-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 5px 7px;
    border-radius: 10px;
    background-color: #f7f7f7;
    width: 100%;
    height: 60px;
}

.products-card-price .card-price-rast p {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

.products-card-price .card-price-rast #p-del {
    text-decoration: line-through;
    color: #aaa;
    font-weight: normal;
    margin-bottom: 0;
}

.products-card-price .card-price-chap a {
    text-decoration: none;
    color: black;
    border-radius: 50%;
    background-color: #dddddd;
    padding: 10px 13px 6px 13px;
}

/* PRODUCTS END */
/* CONTACT-BOX START */

.contactbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.contactbox-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 1200px;
}

.contactbox-address,
.contactbox-phone,
.contactbox-email {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 15px;
    background-color: white;
    border: 2px solid #D1DBE8;
    border-radius: 10px;
    width: 375px;
    padding: 15px;
    position: relative;
}

.contactbox-address::after,
.contactbox-phone::after,
.contactbox-email::after {
    content: "";
    position: absolute;
    height: 10px;
    bottom: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 91%;
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: -1;
    transition: all .5s;
}

.contactbox-address .contactbox-icon img,
.contactbox-phone .contactbox-icon img,
.contactbox-email .contactbox-icon img {
    transform: translateY(5px);
}

.contactbox-address .contactbox-desc p,
.contactbox-phone .contactbox-desc p,
.contactbox-email .contactbox-desc p {
    color: #929292;
    font-size: 13px;
}

/* CONTACT-BOX END */
/* Contact Banner START */

.contactbanner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.contactbanner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 1200px;
    background-color: rgb(90, 90, 255);
    border-radius: 15px;
    padding: 30px;
}

.contactbanner-container::after {
    content: "";
    position: absolute;
    width: 1225px;
    height: 80px;
    transform: rotate(-4deg) translateX(42px);
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-radius: 15px;
    z-index: -1;
    transition: all .5s;
}

.contactbanner-container:hover::after {
    transform: rotate(0deg) translateX(42px);
}

.contactbanner-rast {
    color: white;
}

.contactbanner-rast p {
    font-size: 14px;
}

.contactbanner-chap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
}

.contactbanner-chap #ticket {
    text-decoration: none;
    color: black;
    background-color: white;
    padding: 10px 25px;
    border-radius: 10px;
    border: 2px solid black;
    transition: all .5s;
}

.contactbanner-chap #ticket:hover {
    color: white;
    background-color: black;
    border: 2px solid white;
}

.contactbanner-chap #call {
    text-decoration: none;
    color: white;
    background-color: black;
    padding: 10px 25px;
    border-radius: 10px;
    border: 2px solid white;
    transition: all .5s;
}

.contactbanner-chap #call:hover {
    color: black;
    background-color: white;
    border: 2px solid black;
}

/* Contact Banner END */
/* BLOG START */

.blog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 100px 0px;
    padding: 0px 10px;
}

.blog-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 1200px;
    gap: 20px;
}

.blog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.blog-top-rast p {
    position: relative;
    transform: translateX(-35px);
    color: gray;
}

.blog-top-rast p::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 4px;
    right: -35px;
    top: 40%;
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-radius: 5px;
}

.blog-top-chap a {
    text-decoration: none;
    color: black;
    padding: 7px 15px;
    border-radius: 10px;
    border: 2px solid gray;
    transition: all .5s;
}

.blog-top-chap a i {
    transform: translateY(1.5px) translateX(-2px);
    transition: all .5s;
}

.blog-top-chap a:hover {
    padding: 7px 15px 7px 25px;
}

.blog-top-chap a:hover i {
    transform: translateY(1.5px) translateX(-10px);
    color: red;
}

.blog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    gap: 10px;
}

.blog-bottom-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 0 10px 0;
    border-radius: 10px;
    border: 2px solid #D1DBE8;
    width: 300px;
}

.blog-bottom-box-img img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.blog-bottom-box-title {
    padding: 0px 10px 15px 10px;
    width: 100%;
}

.blog-bottom-box-about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    padding: 15px 10px 0px 10px;
    border-top: 2px dotted #D1DBE8;
}

.blog-bottom-box-about p {
    color: gray;
    font-size: 12px;
}

.blog-bottom-box-about a {
    text-decoration: none;
    color: white;
    border: 2px solid blue;
    background-color: blue;
    transition: all .5s;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
}

.blog-bottom-box-about a:hover {
    background-color: white;
    color: blue;
}

/* BLOG END */















/* RESPONSIVE START */

@media screen and (max-width:480px) {

    .home {
        margin: 50px 0;
    }

    .home-container {
        flex-direction: column;
        gap: 30px;
    }

    .home-rast #h1 {
        font-size: 26px;
    }

    .home-rast #h1-2 {
        font-size: 23px;
    }

    .home-rast p {
        font-size: 12px;
    }

    .home-rast a {
        display: none;
    }

    .home-chap img {
        width: 100%;
    }

    .social-container {
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    .social-container .social-chap {
        flex-direction: column;
        gap: 15px;
    }

    .social-container::after {
        width: 90%;
        height: 470px;
        transform: translateY(-32px) rotate(-3deg);
    }

    .social-container:hover::after {
        transform: translateY(-32px) rotate(-3deg);
    }

    .product-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .product-container .swiper {
        width: 230px;
    }

    .contactbanner-container {
        width: 100%;
        flex-direction: column;
        gap: 40px;
    }

    .contactbanner-rast h3 {
        font-size: 16px;
    }

    .contactbanner-rast p {
        font-size: 10px;
    }

    .contactbanner-chap a {
        font-size: 8px;
    }

    .contactbanner-container::after {
        width: 95%;
        height: 200px;
        transform: translateY(-32px) rotate(-3deg);
    }

    .contactbanner-container:hover::after {
        transform: translateY(-32px) rotate(-3deg);
    }

    .contactbox-container {
        flex-direction: column;
        gap: 15px;
    }

    .contactbox-address,
    .contactbox-phone,
    .contactbox-email {
        width: 100%;
    }

    .blog-container {
        width: 100%;
    }

    .blog-top {
        flex-direction: column;
        gap: 10px;
    }

    .blog-bottom {
        flex-direction: column;
        gap: 15px;
    }

}











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

    .home-container {
        flex-direction: column;
        gap: 30px;
    }

    .home-chap img {
        width: 100%;
    }

    .social-container {
        width: 100%;
    }

    .social-container .social-chap {
        flex-direction: column;
        gap: 15px;
    }

    .social-chap-instagram {
        width: 125px;
    }

    .social-chap-instagram p {
        font-size: 13px;
    }

    .social-chap-telegram {
        width: 125px;
    }

    .social-chap-telegram p {
        font-size: 13px;
    }

    .social-container::after {
        width: 95%;
        height: 330px;
        transform: translateX(28px) rotate(-4deg);
    }

    .social-container:hover::after {
        transform: translateX(28px) rotate(-4deg);
    }

    .product-container {
        width: 100%;
    }

    .product-container .swiper {
        width: 470px;
    }

    .contactbanner-container {
        width: 100%;
        gap: 5px;
    }

    .contactbanner-chap {
        flex-direction: column;
        gap: 10px;
    }

    .contactbanner-rast h3 {
        font-size: 16px;
    }

    .contactbanner-rast p {
        font-size: 10px;
    }

    .contactbanner-chap a {
        font-size: 7px;
    }

    .contactbanner-container::after {
        width: 97%;
        height: 130px;
        transform: rotate(-5deg) translateX(32px);
    }

    .contactbanner-container:hover::after {
        width: 99%;
        height: 110px;
        transform: rotate(0deg) translateX(37px);
    }

    .contactbox-container {
        flex-direction: column;
        gap: 15px;
    }

    .contactbox-address,
    .contactbox-phone,
    .contactbox-email {
        width: 100%;
    }

    .blog-container {
        width: 100%;
    }

    .blog-bottom {
        flex-direction: column;
        gap: 15px;
    }

}
















@media screen and (min-width:769px) and (max-width:1050px) {

    .home-container {
        width: 100%;
    }

    .home-rast {
        width: 100%;
    }

    .home-rast #h1 {
        font-size: 24px;
    }

    .home-rast #h1-2 {
        font-size: 24px;
    }

    .home-rast p {
        font-size: 14px;
    }

    .home-chap img {
        width: 100%;
    }

    .social-container {
        width: 100%;
    }

    .social-chap-instagram {
        width: 125px;
    }

    .social-chap-instagram p {
        font-size: 13px;
    }

    .social-chap-telegram {
        width: 125px;
    }

    .social-chap-telegram p {
        font-size: 13px;
    }

    .social-container::after {
        width: 97%;
        height: 170px;
        transform: translateX(30px) rotate(-5deg);
    }

    .social-container:hover::after {
        width: 99%;
        height: 150px;
        transform: translateX(35px) rotate(0deg);
    }

    .product-container {
        width: 100%;
    }

    .product-container .swiper {
        width: 720px;
    }

    .contactbanner-container {
        width: 100%;
        gap: 5px;
    }

    .contactbanner-chap a {
        font-size: 13px;
    }

    .contactbanner-container::after {
        width: 98%;
        height: 90px;
        transform: rotate(-4deg) translateX(32px);
    }

    .contactbanner-container:hover::after {
        width: 99%;
        height: 90px;
        transform: rotate(0deg) translateX(36px);
    }

    .contactbox-container {
        flex-direction: column;
        gap: 15px;
    }

    .contactbox-address,
    .contactbox-phone,
    .contactbox-email {
        width: 100%;
    }

    .blog-container {
        width: 100%;
    }

    .blog-bottom {
        display: grid;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

}
















@media screen and (min-width:1050px) and (max-width:1250px) {

    .social-container {
        width: 100%;
    }

    .social-container::after {
        width: 97%;
        height: 170px;
        transform: translateX(30px) rotate(-5deg);
    }

    .social-container:hover::after {
        width: 99%;
        height: 150px;
        transform: translateX(35px) rotate(0deg);
    }

    .product-container {
        width: 100%;
    }

    .product-container .swiper {
        width: 100%;
    }

    .contactbanner-container {
        width: 100%;
    }

    .contactbanner-container::after {
        width: 98%;
        height: 90px;
        transform: rotate(-4deg) translateX(32px);
    }

    .contactbanner-container:hover::after {
        width: 99%;
        height: 90px;
        transform: rotate(0deg) translateX(36px);
    }

    .contactbox-container {
        width: 100%;
        gap: 15px;
    }

    .contactbox-address,
    .contactbox-phone,
    .contactbox-email {
        width: 100%;
    }

    .blog-container {
        width: 100%;
    }

    .blog-bottom {
        display: grid;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

}

/* RESPONSIVE END */