/*=========================================
  ONE QR PRODUCT PAGE
  Part 2A
=========================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/*=========================================
 Root Variables
=========================================*/

:root{

    --shop-primary:#102B55;
    --shop-primary-dark:#0D2346;
    --shop-secondary:#FDB515;

    --shop-white:#ffffff;
    --shop-light:#f8f8f8;
    --shop-border:#ECECEC;
    --shop-text:#1d1d1d;
    --shop-text-light:#6b7280;
    --shop-success:#1FA64A;

    --shop-shadow:0 12px 35px rgba(16,43,85,.08);

    --shop-transition:.35s ease;

    --shop-radius:18px;

}


/*=========================================
 Global
=========================================*/

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

body{
    font-family:'Outfit',sans-serif;
    overflow-x:hidden;
}

body.shop-page{
    background:var(--shop-light);
    color:var(--shop-text);
}

.shop-page main img{
    max-width:100%;
    display:block;
}

.shop-page main a{
    text-decoration:none;
}

.shop-page main ul{
    padding-left:18px;
}


.container{

    max-width:1320px;

}


/*=========================================
 Breadcrumb
=========================================*/

.breadcrumb-section{

    background:#fff;

    border-bottom:1px solid var(--border);

    padding:18px 0;

}

.breadcrumb{

    margin:0;

    font-size:15px;

}

.breadcrumb-item a{

    color:var(--primary);

    transition:.3s;

}

.breadcrumb-item a:hover{

    color:var(--secondary);

}

.breadcrumb-item.active{

    color:#888;

}


/*=========================================
 Product Section
=========================================*/


.product-section{
    padding:55px 0 70px;
}

.product-main-row{
    align-items:flex-start;
}

/*=========================================
  PRODUCT EXTRA
=========================================*/

.product-extra{
    width:100%;
    margin-top:35px;
}


.product-gallery{
    background:#fff;
    border-radius:var(--radius);
    padding:28px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}


/*=========================================
 Main Product Image
=========================================*/

.product-main-image{

    background:#fff;

    border:1px solid var(--border);

    border-radius:16px;

    height:560px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.product-main-image img{

    max-height:470px;

    transition:.4s;

    cursor:zoom-in;

}

.product-main-image:hover img{

    transform:scale(1.04);

}


/*=========================================
 Thumbnail Gallery
=========================================*/

.thumbnail-wrapper{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.thumb{

    width:95px;

    height:95px;

    border-radius:14px;

    border:2px solid transparent;

    background:#fff;

    cursor:pointer;

    overflow:hidden;

    transition:var(--transition);

    display:flex;

    justify-content:center;

    align-items:center;

}

.thumb img{

    max-height:75px;

}

.thumb:hover{

    transform:translateY(-6px);

    border-color:var(--secondary);

    box-shadow:0 10px 22px rgba(0,0,0,.08);

}

.thumb.active{

    border-color:var(--secondary);

}


/*=========================================
 Product Information
=========================================*/
.product-info{
    background:#fff;
    padding:30px;
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    height:auto;
}

.product-title{

    font-size:42px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;

}

.product-subtitle{

    color:#6d6d6d;

    font-size:18px;

    margin-bottom:25px;

}


/*=========================================
 Rating
=========================================*/

.rating-area{

    display:flex;

    align-items:center;

    gap:5px;

    margin-bottom:28px;

}

.rating-area i{

    color:var(--secondary);

    font-size:18px;

}

.rating-area span{

    margin-left:10px;

    color:#777;

    font-size:15px;

}


/*=========================================
 Price
=========================================*/

.price-section{

    margin-bottom:30px;

}

.price-section h2{

    font-size:48px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:6px;

}

.price-section p{

    color:#6d6d6d;

    font-size:15px;

}


/*=========================================
 Specifications
=========================================*/

.product-specifications{

    margin-top:25px;

}

.spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid #F2F2F2;
}

.spec-row:last-child{

    border-bottom:none;

}

.spec-row div{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:500;

    color:var(--primary);

}

.spec-row div i{

    font-size:18px;

    color:var(--secondary);

}

.spec-row span{

    color:#555;

    font-size:15px;

    text-align:right;

}


/*=========================================
 Stock Badge
=========================================*/

.stock{

    margin-top:25px;

}

.stock-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#EAF8EF;

    color:var(--success);

    font-weight:600;

    padding:10px 18px;

    border-radius:40px;

    font-size:15px;

}

.stock-badge i{

    font-size:10px;

}
/*=========================================
    Premium Package Card
=========================================*/

/*=========================================
  WHAT'S INCLUDED
=========================================*/

.package-section{
    width:100%;
    margin:0;
}

.package-title{
    font-size:24px;
    font-weight:700;
    color:#102B55;
    margin:0 0 16px;
}

.package-card{
    width:100%;
    background:#fff;
    border:1px solid rgba(16,43,85,.08);
    border-radius:18px;
    padding:24px 26px;
    box-shadow:0 8px 25px rgba(16,43,85,.06);
}

.package-header{
    display:flex;
    align-items:center;
    gap:18px;
}

.package-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    background:linear-gradient(135deg,#FDB515,#F7A600);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.package-icon i{
    font-size:24px;
    color:#fff;
}

.package-header h6{
    margin:0;
    font-size:21px;
    font-weight:700;
    color:#102B55;
}

.package-header p{
    margin:4px 0 0;
    color:#7A7A7A;
    font-size:14px;
}

.package-divider{
    height:1px;
    background:#ECECEC;
    margin:20px 0;
}

.package-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid #F5F5F5;
}

.package-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.package-item span{
    font-size:16px;
    color:#102B55;
    font-weight:500;
}

.package-item strong{
    min-width:38px;
    height:38px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#FDB515,#F7A600);
    color:#fff;
    font-size:15px;
    font-weight:700;
}
/*=========================================
  PRODUCT BUTTONS
=========================================*/

.button-group{
    display:flex;
    gap:14px;
    width:100%;
    margin-top:22px;
}

.button-group .btn{
    flex:1;
    width:50%;
    height:56px;
    border-radius:12px;
    padding:14px 20px;
    font-size:17px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:var(--transition);
}

.add-cart-btn{
    background:#FDB515 !important;
    color:#fff !important;
    border:none !important;
}

.add-cart-btn:hover{
    background:#e6a300 !important;
    color:#fff !important;
    transform:translateY(-2px);
}

.buy-btn{
    background:#102B55 !important;
    color:#fff !important;
    border:none !important;
}

.buy-btn:hover{
    background:#0D2346 !important;
    color:#fff !important;
    transform:translateY(-2px);
}

/* Wishlist */

.wishlist-btn{

    border:1px solid var(--border);
    background:#fff;
    color:var(--primary);

}

.wishlist-btn:hover{

    background:var(--primary);
    color:#fff;
    border-color:var(--primary);

}


/*=========================================
  SERVICE FEATURES
=========================================*/

.service-icons{
    width:100%;
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.service-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 16px;
    min-height:115px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:var(--transition);
}

.service-item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.service-item i{
    font-size:30px;
    color:var(--primary);
    margin-bottom:9px;
}

.service-item p{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:var(--secondary);
}

/*=========================================
 Product Description
=========================================*/

.product-description{

    padding-top:20px;
    padding-bottom:70px;

}

.product-description .nav-tabs{

    border:none;
    gap:20px;

}

.product-description .nav-link{

    border:none;
    border-radius:12px;
    background:#fff;
    color:var(--primary);
    padding:14px 28px;
    font-weight:600;
    transition:var(--transition);
    box-shadow:0 6px 15px rgba(0,0,0,.05);

}

.product-description .nav-link:hover{

    background:var(--secondary);
    color:var(--primary);

}

.product-description .nav-link.active{

    background:var(--primary);
    color:#fff;

}


/*=========================================
 Tab Content
=========================================*/

.tab-content{

    background:#fff;
    border-radius:18px;
    padding:40px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);

}

.tab-content h3{

    color:var(--primary);
    margin-bottom:20px;
    font-weight:700;

}

.tab-content ul{

    padding-left:20px;

}

.tab-content ul li{

    margin-bottom:14px;
    color:#555;
    line-height:28px;

}


/*=========================================
 Specification Table
=========================================*/

.table{

    margin-bottom:0;

}

.table tbody tr{

    border-color:#efefef;

}

.table th{

    width:220px;
    color:var(--primary);
    font-weight:600;
    padding:16px;

}

.table td{

    color:#555;
    padding:16px;

}


/*=========================================
 Horizontal Line
=========================================*/

.product-info hr{

    margin:28px 0;
    border-color:#ececec;

}


/*=========================================
 Hover Effects
=========================================*/

.product-gallery,
.product-info,
.tab-content{

    transition:var(--transition);

}

.product-gallery:hover,
.product-info:hover,
.tab-content:hover{

    box-shadow:
    0 18px 40px rgba(16,43,85,.12);

}


/*=========================================
 Smooth Animation
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.product-gallery{

    animation:fadeUp .6s ease;

}

.product-info{

    animation:fadeUp .8s ease;

}

.product-description{

    animation:fadeUp 1s ease;

}


/*=========================================
 Button Icons
=========================================*/

.button-group .btn i{

    margin-right:8px;

}


/*=========================================
 Thumbnail Active Effect
=========================================*/

.thumb.active{

    border:2px solid var(--secondary);
    box-shadow:0 8px 18px rgba(253,181,21,.25);

}
/*=========================================
    RESPONSIVE CSS
    Part 2C
=========================================*/


/*=========================================
Large Desktop (1600px+)
=========================================*/

@media (min-width:1600px){

    .container{
        max-width:1450px;
    }

    .product-title{
        font-size:48px;
    }

    .price-section h2{
        font-size:56px;
    }

    .product-main-image{
        height:650px;
    }

    .product-main-image img{
        max-height:540px;
    }

}


/*=========================================
Desktop (1400px)
=========================================*/

@media (max-width:1400px){

    .product-main-image{
        height:520px;
    }

}


/*=========================================
Laptop
=========================================*/

@media (max-width:1200px){

    .product-title{
        font-size:36px;
    }

    .price-section h2{
        font-size:42px;
    }

    .product-info{
        padding:30px;
    }

    .product-main-image{
        height:470px;
    }

}


/*=========================================
Tablet Landscape
=========================================*/

@media (max-width:991px){

    .product-section{

        padding-top:35px;

    }

    .product-gallery{

        margin-bottom:35px;

    }

    .product-title{

        font-size:34px;

    }

    .price-section h2{

        font-size:38px;

    }

    .button-group{

        flex-direction:column;

    }

    .button-group .btn{

        width:100%;

    }

    .service-icons{

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

    }

    .product-main-image{

        height:450px;

    }

    .tab-content{

        padding:30px;

    }

}


/*=========================================
iPad Portrait
=========================================*/

@media (max-width:768px){

    section{

        padding:35px 0;

    }

    .product-info{

        padding:25px;

    }

    .product-title{

        font-size:30px;

    }

    .product-subtitle{

        font-size:16px;

    }

    .price-section h2{

        font-size:34px;

    }

    .product-main-image{

        height:380px;

    }

    .product-main-image img{

        max-height:300px;

    }

    .thumbnail-wrapper{

        gap:12px;

    }

    .thumb{

        width:75px;
        height:75px;

    }

    .thumb img{

        max-height:55px;

    }

    .service-icons{

        gap:15px;

    }

    .service-item{

        padding:18px;

    }

    .tab-content{

        padding:25px;

    }

    .table th{

        width:170px;

    }

}


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

@media (max-width:576px){

    .breadcrumb{

        font-size:13px;

    }

    .product-gallery{

        padding:18px;

    }

    .product-info{

        padding:20px;

    }

    .product-title{

        font-size:26px;

        line-height:1.3;

    }

    .rating-area{

        flex-wrap:wrap;

        gap:3px;

    }

    .rating-area span{

        width:100%;

        margin-left:0;

        margin-top:6px;

    }

    .price-section h2{

        font-size:30px;

    }

    .product-main-image{

        height:300px;

    }

    .product-main-image img{

        max-height:240px;

    }

    .thumbnail-wrapper{

        justify-content:center;

        gap:10px;

    }

    .thumb{

        width:65px;

        height:65px;

    }

    .thumb img{

        max-height:45px;

    }

    .quantity-box{

        width:150px;

    }

    .quantity-box button{

        width:45px;

        height:50px;

    }

    .quantity-box input{

        width:60px;

    }

    .button-group{

        gap:12px;

    }

    .button-group .btn{

        width:100%;

        padding:14px;

        font-size:15px;

    }

    .service-icons{

        grid-template-columns:1fr;

    }

    .service-item{

        padding:18px;

    }

    .product-description .nav-tabs{

        display:flex;

        flex-direction:column;

        gap:12px;

    }

    .product-description .nav-link{

        width:100%;

        text-align:center;

    }

    .tab-content{

        padding:20px;

    }

    .table{

        font-size:14px;

    }

    .table th{

        width:120px;

        font-size:14px;

    }

    .table td{

        font-size:14px;

    }

}


/*=========================================
Small Mobile
=========================================*/

@media (max-width:400px){

    .product-title{

        font-size:23px;

    }

    .price-section h2{

        font-size:28px;

    }

    .product-main-image{

        height:260px;

    }

    .product-main-image img{

        max-height:200px;

    }

    .thumb{

        width:58px;

        height:58px;

    }

    .thumb img{

        max-height:40px;

    }

    .quantity-box{

        width:140px;

    }

    .quantity-box button{

        width:42px;

        font-size:20px;

    }

    .quantity-box input{

        font-size:16px;

    }

}


/*=========================================
Landscape Mobile
=========================================*/

@media (max-height:500px) and (orientation:landscape){

    .product-main-image{

        height:260px;

    }

    .product-main-image img{

        max-height:180px;

    }

}


/*=========================================
Image Transition
=========================================*/

.product-main-image img,
.thumb,
.service-item,
.button-group .btn{

    transition:all .35s ease;

}


/*=========================================
Smooth Scroll
=========================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================
Selection Color
=========================================*/

::selection{

    background:#102B55;

    color:#fff;

}


/*=========================================
Scrollbar (Chrome)
=========================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:#102B55;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0D2346;

}
@media (max-width:991px){

    .service-icons{
        grid-template-columns:repeat(2,1fr);
    }

    .button-group{
        flex-direction:row;
    }

    .button-group .btn{
        width:50%;
    }

}
@media (max-width:576px){

    .product-section{
        padding:35px 0 50px;
    }

    .product-info{
        padding:22px;
    }

    .product-gallery{
        padding:18px;
    }

    .button-group{
        flex-direction:column;
    }

    .button-group .btn{
        width:100%;
    }

    .service-icons{
        grid-template-columns:1fr;
        gap:12px;
    }

    .package-card{
        padding:20px;
    }

    .package-header h6{
        font-size:18px;
    }

}