﻿/*-----------------------------------------------------------------------------------

    Template Name: Looki - Beauty & Cosmetics eCommerce Bootstrap 5 Template
    Template URI: site.com
    Description: Looki - Beauty & Cosmetics eCommerce Bootstrap 5 Template
    Author: Hastech
    Author URI: site.com
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

   [ 01. Theme default CSS ]
   [ 02. header CSS ]
   [ 02.1 header sticky CSS ]
   [ 02.2 search-form CSS ]
   [ 02.3 cart-links CSS ]
   [ 02.4 offcanvas-menu-toggler CSS ]
-----------------------------------------------------------------------------------*/
/**************************** 
[ 01. Theme default CSS ]
*****************************/
/* Google Fonts */
/*@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");*/
/*---------------------------*
 #Template default CSS
*----------------------------*/

:root {
    --blue: rgb(0, 0, 255);
    --darkblue: #0b0338;
    --white: #ffffff;
    --colororange: #fd984c;
    --colorheader: #180161; /*#B5B5C3*/
    --listtablecolor: #180161;
    --colorredwinston: #ef4056;
    /*#eaeded*/
    --listtabletrhoverbg: #d1e3fc; /*#f7f7f7*/
    --listtabletrbgeven: #eff5fb82; /*#f7f7f7*/ /*#ecf4ff*/ /*#f2f8ff*/
    --colordarkblue: #0b0338;
    --ffaAnjomanwebVF: 'Anjomanweb VF';
    --ffapeyda: 'peyda';
    --ffairansharp: 'iransharp';
    --ffairansansdn: 'iransansdn';
    --ffadana: 'dana';
    --ffapeyda: 'peyda';
    --ffaSGFanoos-Regular: 'SGFanoos-Regular';
    --ffaYekanBakh: 'YekanBakh';
    --ffaAnjoman: 'Anjoman';
    --ffaByekan: 'byekan';
    /*--bs-body-font-family: 'YekanBakh';*/
    --bs-body-font-family: 'YekanBakh', 'calibri';
    /*    --bs-body-font-family: 'Vazirmatn';*/
    /*--listtablecolor:#1b1839;*/
    --bs-body-font-size: 1.1rem;
    --ts-color-primary: #0b0338; /*5a5ac9*/
    --ts-color-primary-light: #e3e3ff;
    --specialcolor: #380365;
}



* {
}

*, ::after, ::before {
    box-sizing: border-box;
    direction: rtl;
}

a {
    text-decoration: unset;
    color: inherit;
}

    a:hover {
        text-decoration: unset;
        color: inherit;
    }

.displaynone {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    text-align: right;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    color: #565656;
    justify-content: center;
    align-items: center;

    /*
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 50%,rgba(209,209,209,1) 50%,rgba(254,254,254,1) 100%) center/cover no-repeat;
    min-height: 100vh;
    */
    
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.sectiontitle {
    color: white;
    font-size: 20pt;
    font-weight: bold;
}

main, #topnav, #navbarcontainer, #section_banner, #divdiscount, #sectionProduct, #section_blog, #section_customersinner, #section_desc_4_inner {
    max-width: 1676px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}



#section_footer, #section_blog, #section_customers, #section_desc_4, #sectiondiscount {
    padding: 30px 0;
}

.navbar-top ul li img { 
    width:16px; height:11px; 
    padding-left:5px;
}
/*
#navbar {
    height: 70px;
    background-color: #eee;
    font-weight: bold;
    font-size: 12pt;
    padding: 5px 10px;
}

    #navbar .nav-item {
        padding: 0 10px;
    }

    #navbar a, #navbar .dropdown-item, #navbar .dropdown-menu {
    }

        #navbar a:hover {
            background-color: #eee;
            color: #565656 !important;
        }

#navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

header {
    background-color: #eee;
    font-weight: bold;
    font-size: 13pt;
    padding: 10px 10px;
}





header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    margin-top: 70px;
}

    header #logo img {
        width: 130px;
        height: 50px;
        padding-top: 10px;
    }

    header #logo {
    }

    header #search {
    }

#navbar #register {
    padding-top: 5px;
    background-color: #fff;
    width: max-content;
}

#navbar #lang {
    padding-top: 5px;
}

#navbar #cart {
    padding-top: 5px;
}

    #navbar #cart img {
        width: 32px;
        height: 32px;
    }


*/
#section_banner {
    width: 100%;
    position: relative;
}

    #section_banner .row, #nav-tabContent .row {
        --bs-gutter-x: 0rem;
    }

    #section_banner img {
        width: 100%;
        padding: 0px;
        max-height: 300px;
        margin: 0px;
    }

    #section_banner .imgmain img {
        height: 300px;
    }

    #section_banner .imgsecond img {
        height: 150px !important;
    }



#section_body {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: right;
}

#nav-tabContent .tab-pane {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#sectiondiscount {
    background-color: var(--specialcolor);
    padding: 40px 0;
}

    #sectiondiscount #divdiscount .Plist {
    }



.nav-tabs, .nav-link, .nav-link:active {
    border: 0px;
    justify-content: center;
}

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #fff;
        background-color: var(--darkblue);
        border-color: #eee;
    }

    .nav-tabs .nav-link {
        border: 0px;
        font-size: 16px;
        font-weight: bold;
        color: inherit;
    }

.tab-content {
    padding: 0px !important;
    margin: 0px !important;
}

/*--- STRAT : CARD ---------------*/

.productgrid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.card {
    border: 0px;
    background-color: inherit;
    transition: .3s;
}

    .card:hover {
        transform: translateY(-1px);
        /*box-shadow: 0 5px 20px rgba(0,0,0,.1);*/
    }


.productgrid .cardinner {
    border: 2px solid #eee;
    margin: 5px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    padding: 10px !important;
    min-height: 400px !important;
}

    .cardinner:hover {
        background-color: #f2f5ff;
        border: 2px solid var(--darkblue);
        border-radius: 5px 5px 5px 5px;
    }


.card-img {
    border-radius: 0px;
    border: 0px;
    padding: 1px;
    text-align: center;
    padding: 10px 10px;
    height: 185px;
    
}

    .card-img img {
        max-width: 164px;
        max-height: 164px;
        min-width: 164px;
        min-height: 164px;
        border-radius: 5px 5px 5px 5px;
    }

.card .separator {
    width: 80%;
    border: 0px;
    border-bottom: 1px solid #eee;
    margin-right: auto;
    margin-left: auto;
    margin: 10px auto;
}

.card-body {
     

}

    .card-body .card-title {
        font-size: 16px;
        line-height: 200%;
        font-family: var( --bs-body-font-family) !important;
        font-weight:bold;
        color:#000;
        
        
    }

    .card-body .langen {
        font-family: Tahoma !important;
        font-weight: normal;
        font-size: 12px;
        margin: -15px 0 0px 0 !important;
    }

    .card-body .card-text {
    }

    .card-body .priceshow {
        position:absolute;
        bottom: 8px;
        left: 20px !important;
    }

    .card-body .card-price {
        font-weight: bold;
        font-size: 18px;
        line-height: 200%;
        text-align: left !important;
        vertical-align:bottom;
    }

    .card-body .card-priceold {
        text-decoration: line-through;
        font-size: 12px;
        color: #565656;
        font-weight: bold;
    }

    .card-body .card-discount {
        font-size: 11px;
        padding: 1px 4px;
        background-color: var(--colorredwinston);
        
        width: max-content;
        border-radius: 5px;
        color: #fff;
    }

    .card-body .priceshow .currencyunit {
        font-size: 11px;

    }

/*--- END : CARD ---------------*/


.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    filter: var(--bs-carousel-control-icon-filter);
    border: 0px;
    opacity: .5;
    transition: opacity .15s ease;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    margin-right: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.dropdown-menu {
    border-radius: 0px;
}

    .dropdown-menu .dropdown-item {
        text-align: right !important;
    }




/*********************/

#section_desc_4 {
    padding: 15px 0;
    min-height: 90px;
    background-color: #eee;
    position: relative;
}

    #section_desc_4 #section_desc_4_inner {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

        #section_desc_4 #section_desc_4_inner .divtitle {
            margin: 0 20px 0 5px;
        }

        #section_desc_4 #section_desc_4_inner .title {
            font-weight: bold;
            font-size: 14pt;
        }

    #section_desc_4 .divider {
        height: 2.25rem;
        width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(207 213 219 / var(--tw-bg-opacity, 1));
        padding: 0px;
    }



#section_customers {
    background-color: #eee;
    min-height: 200px;
}

#section_customersinner {
}

#section_blog {
    margin-bottom:40px;
}

    #section_blog .sectiontitle, #section_customers .sectiontitle, #sectionProduct .sectiontitle {
        color: #000;
    }

    #section_blog .card-img {
    }

        #section_blog .card-img img {
            border-radius: 0px;
            border: 0px;
            padding: 1px;
            text-align: center;
            padding: 0px;
            max-width: 100%;
            max-height: 100%;
            border-radius: 5px 5px 5px 5px;
        }

    #section_blog .card {
    }

    #section_blog .cardinner {
        border: 2px solid #eee;
        margin: 5px;
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
        padding: 10px !important;
        min-height:550px;
    }


        #section_blog .cardinner:hover {
            background-color: #eee;
            border-radius: 55px 5px 25px 5px;
        }

    #section_blog .separator {
    }

    #section_blog .card-body {
        padding-bottom: 43px !important;
    }

    #section_blog .card-title {
    
    }

    #section_blog .date {
        font-size: 9pt;
        text-align: left;
        padding: 5px 0 0 15px;
    }

    #section_blog .card-text {
        font-size: 10pt;
        text-align: justify !important;
        
    }

    #section_blog .readmore {
        padding: 5px 15px;
        background-color: var(--darkblue);
        margin: 5px;
        border-radius: 25px 5px 5px 5px;
        text-align: center;
        color: #eee;
        bottom:10px;
        left:25px;
        position:absolute;

    }
    #section_blog .readmore i{
        font-size:9px; margin-right:7px;
    }

        #section_blog .readmore:hover {
            
        }





#blog-list {
    
}

    #blog-list .sectiontitle, #section_customers .sectiontitle, #sectionProduct .sectiontitle {
        color: #000;
    }

    #blog-list .card-img {
        
    }

        #blog-list .card-img img {
            border-radius: 0px;
            border: 0px;
            padding: 1px;
            text-align: center;
            padding: 0px;
            max-width: 100%;
            max-height: 100%;
            border-radius: 5px 5px 5px 5px;
        }

        

    #blog-list .card {
        
    }

        #blog-list > div:first-of-type {
            align-items: flex-start;
        }


    #blog-list .cardinner {
        border: 2px solid #eee;
        margin: 5px;
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
        padding: 10px !important;
        align-self: stretch;
        min-height:285px;
    }

.full-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.full-height-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}


        #blog-list .cardinner:hover {
            background-color: #eee;
            border-radius: 55px 5px 25px 5px;
        }

    #blog-list .separator {
    }

    #blog-list .card-body {
        padding:10px;
    }

    #blog-list .card-title {
    }

    #blog-list .date {
        font-size: 9pt;
        text-align: right;
        padding: 5px 0 0 15px;
    }

    #blog-list .card-text {
        font-size: 10pt;
        text-align: justify !important;
    }

#blog-list .readmore {
    padding: 5px 15px;
    background-color: var(--darkblue);
    margin: 5px;
    border-radius: 25px 5px 5px 5px;
    text-align: center;
    color: #eee;
    left:0px;
    position: relative;
    width: max-content;
    bottom: 10px;
    /*
    
    
        
        */
}

        #blog-list .readmore i {
            font-size: 9px;
            margin-right: 7px;
        }

        #blog-list .readmore:hover {
        }




.blog-single img {
    max-height: 600px;
}



.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    border-radius: 0px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

.order3 {
    order: 3;
}

.order4 {
    order: 4;
}

.order5 {
    order: 5;
}

.flex-end {
    align-items: flex-end;
}
.product-tab-menu { margin:15px 0;
}


#section_footer {
    min-height: 400px;
    background-color: var(--darkblue);
}


#childbody {
    
}
#childbodyinner {
    margin: 20px 0 100px 0 !important;
}

footer {
    border-radius: 85px 0 0 0;
    background-color: var(--darkblue) !important;
    color: #edecec;
    font-weight: bold;
    margin-top: -10px;
}

    footer h2, .footer-menu li a {
        color: #edecec;
    }
        .footer-menu li a:hover { color:#565656;
        }

#section_footertop {
    font-weight:bold;
    visibility:hidden;
    display:none;
    
}
    #section_footertop i {
        color: var(--blue);
        padding:0 10px;
        font-size:40px;
    }
    #section_footertop p {
        font-size: 18px;
    }

#divnewsletter {
    width: 300px;
    background-color: var(--specialcolor);
    height: 400px;
    border-radius: 85px 5px 5px 5px;
    margin-top: -120px;
    padding: 40px 20px 10px 20px;
    text-align: center;
}
    #divnewsletter i {
        font-size:50pt;
        
    }
    #divnewsletter p {
        font-size: 17pt;
        padding-top: 20px;
    }

    .coppy-right .container {
        min-height: 70px;
        background-color: #000;
        border-radius: 85px 85px 0px 0px;
        padding: 20px 150px 0px 5px;
    }

        .coppy-right .container p  {
            font-weight: normal;
            color: #eff5fb82;
            line-height: 150%;
        }
        .coppy-right .container a {
            color: var(--blue);
        }

            .news-letter-btn {
                background-color: var(--darkblue);
            }

.badge span{
    color:#fff;
}



