@font-face {
    font-family: Apercu;
    src: url(asset-img/Apercu/Apercu-bold.otf);
 }

@font-face {
    font-family: Apercu-Light;
    src: url(asset-img/Apercu/ApercuLight.otf);
 }
 
 * {
    font-family: Apercu;
 }

 /* Navbar */
 nav.main-navbar.sticky-top.navbar.navbar-expand-lg.navbar-light.bg-light {
    background:#000000 !Important;
    padding:10px 0;
}

nav.main-navbar.sticky-top.navbar.navbar-expand-lg.navbar-light.bg-light p{
    margin:0;
    color:white;
    font-family:Apercu;
    font-weight:bold;
    font-size:24px;
}

a.navbar-brand.main-logo {
    display:inline-block;
    width:13%;
}

a.navbar-brand.main-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.menu-main-navbar.collapse.navbar-collapse {
    flex-grow:0;
}

.home-site{
    display:flex;
    align-items:center;
    gap:10px;
}

.home-site a{
    color:white;
    text-decoration:none;
}

/*  */

/* Section Product Slide */
.slide-product {
    background:#000;
    padding:20px;
    margin-top:10px;
}

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

.product-desc h3{
    color:#FED634;
    text-transform:uppercase;
    font-family: Apercu-Light;
    font-size:56px;
}

.product-desc p{
    color:white;
    font-size:20px;
    font-family: Apercu-Light;
}

.card-product{
    padding:0 4em;
}

.card-product .product-img{
    height:240px;
}

.card-product .product-img img{
    height:100%;
    width:100%;
    object-fit:contain;
}

/* Arrow */
.wrap-carousel-slide .owl-nav{
    position: absolute;
    width: 100%;
    top: 35%;
}

.wrap-carousel-slide .owl-nav > button{
    position: absolute;
}

.wrap-carousel-slide .owl-nav > button.owl-prev {
    left:-10%;
}

.wrap-carousel-slide .owl-nav > button.owl-next {
    right: -10%;
}

.wrap-carousel-slide .owl-nav > button:focus{
    outline: none;
}

.wrap-carousel-slide .owl-nav > button img{
    height:50px;
}


/*  */

/* Main Content */
.main-content {
    padding:4em 0;
}

.main-content h2{
    color:#000;
    text-align:center;
    font-size:40px;
}

.line{
    background:#707070;
    display:block;
    margin:24px auto;
    height:1.5px;
    width:350px;
}

.btn-group-content {
    display:flex;
    justify-content:center;
    flex-flow:column;
    align-items:center;
    gap:10px;
}

.btn-group-content a{
    display:flex;
    justify-content:center;
    text-decoration:none;
    padding:10px;
    border-radius:10px;
    font-size:24px;
    width:600px;
    font-family: Apercu-Light;
}

.btn-group-content a.btn-yes{
    background:#FFD70D;
    color:#000000;
}

.btn-group-content a.btn-no{
    background:#7D8081;
    color:#ffffff;
}

/* Product Type */

.item.product-type {
    display:flex;
    align-items:center;
    flex-flow:column;
    justify-content:center;
    gap:20px;
    text-decoration:none;
    border:1px solid #7D8081;
    transition:.2s;
}

.item.product-type:hover{
    border:1px solid #FFD70D;
}

.item.product-type h3{
    color:#000000;
    padding-bottom:16px;
    font-family: Apercu-Light;
}

/* Nav */

.wrap-carousel-product-type .owl-nav{
    position: absolute;
    width: 100%;
    top: 35%;
}

.wrap-carousel-product-type .owl-nav > button{
    position: absolute;
}

.wrap-carousel-product-type .owl-nav > button.owl-prev {
    left:-10%;
}

.wrap-carousel-product-type .owl-nav > button.owl-next {
    right: -10%;
}

.wrap-carousel-product-type .owl-nav > button:focus{
    outline: none;
}

.wrap-carousel-product-type .owl-nav > button img{
    height:50px;
}

/* Btn Prev Next */
.btn-nex-prev {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 20px;
}

.btn-nex-prev a{
    background: #7D8081;
    padding:10px;
    border-radius:5px;
    color:#fff;
    text-decoration:none;
}

a.btn-prev{
    background:#7D8081;
}

a.btn-next{
    background:#000;
}

/* Product Type */

.product-type.row {
    flex-wrap:wrap;
    justify-content:center;
}

.product-type-card {
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column;
    transition:.2s;
    border:1px solid #7D8081;
    padding: 0;
}

.product-type-card:hover{
    text-decoration:none;
    border:1px solid #FFD70D;
}

.product-type-card img{
    margin-bottom:16px;
    width:100%;
    height:250px;
    object-fit:cover;
}

.product-type-card h3{
    color:#000000;
    font-family:Apercu-Light;
}

.product-type-card p{
    color:#000000;
    text-align: center;
    font-family:Apercu-Light;
}

.desc-product-type {
    height:70px;
}

/* Result */
.item.product-type.result h3 {
    margin:0;
    margin-top:16px;
    font-family: Apercu-Light;
    padding:0;
}

.desc-product-type-result p{
    padding:0;
    text-align:center;
    margin:0;
    font-family:Apercu-Light;
}


.desc-product-type-result{
    height:30px;
    margin:10px 10px;
}

.item.product-type.result {
    gap:0;
}

.btn-learn-configure {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:10px;
    margin-top:10px;
    padding:16px;
}

.btn-learn-configure a{
    padding:5px 16px;
    color:white;
    border-radius:5px;
    transition:.2s;
}

.btn-learn-configure a:hover{
    text-decoration:none;
}

a.learn-more{
    background:#7D8081;
}

a.configure{
    background:#000000 ;
}

a.configure:hover{
    color:#000;
    background:#FFD70D;
}

/* Configuration */
.conf-content {
    padding-top:40px;
}

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

.order-code-text p{
    margin:0;
    color:#707070;
}

.reset-conf a{
    background:#000;
    color:#ffff;
    padding:10px;
    border-radius:10px;
    transition:.2s;
}

.reset-conf a:hover{
    text-decoration:none;
}

.form-conf{
    margin-top:2em;
}

.form-conf form input{
    width:24em;
    height:40px;
    margin-bottom:10px;
    margin-right:24px;
    border:1px solid #707070;
}

.form-conf form input#email{
    width:50em;
}

/* Product Range */
.product-title-conf {
    display:flex;
    align-items:center;
    gap:10px;
}

.product-title-conf img{
    height:24px;
}

.product-range {
    margin-top:2em;
    margin-bottom:2em;
}

.product-range h3{
    color:#707070;
    font-weight:bold;
    font-family:roboto,sans-serif;
    font-size:20px;
    margin:0;
}

.product-title .line{
    background: #707070;
    display: block;
    margin: unset;
    margin-top:10px;
    margin-bottom:10px;
    height: 1.5px;
    width: 100%;
}

/* Product Range List */
.product-range-list {
    display:flex;
    margin-top:20px;
    gap:32px;
}

.product-range-image {
    height:180px;
    width:180px;
    margin-bottom:16px;
    transition:.2s;
    border:2px solid transparent;
    border-radius:20px;
}

.product-range-image:hover{
    border:2px solid #FED634;
}

.product-range-image img{
    height:100%;
    width:100%;
}

.product-range-card h3{
    color:#000000;
    font-size:16px;
    text-align:center;
    font-family:Apercu-Light;
}

/* Part 2 */

/* Mounting Option */
a.mounting-card {
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    border:2px solid #D2D3D3;
    margin-bottom:30px;
    transition:.2s;
    padding:10px;
}

a.mounting-card img{
    height:60px;
    width:60px;
    object-fit:contain;
}

a.mounting-card:hover{
    border:2px solid #FED634;
}

a.mounting-card p{
    margin:0;
    font-size:14px;
    color:#000000;
    font-family:Apercu-Light;
}

.mounting-option-content.row {
    margin-top:20px;
}

/* SCDM Rating */
a.scdm-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.scdm-card:hover{
    border:2px solid #FED634;
}

a.scdm-card p{
    margin:auto;
    color:#000000;
    font-size:15px;
    font-family:Apercu-Light;
}

.scdm-rating-content.row {
    margin-top:20px;
}

/* Light Source */
a.light-source-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.light-source-card:hover{
    border:2px solid #FED634;
    color:#000;
}

a.light-source-card p{
    margin:auto;
    color:#000000;
    font-family: Apercu-Light;
    font-size:15px;
}

.light-source-content.row {
    margin-top:20px;
}

.row.light-source-content.opacity-low a.light-source-card {
    opacity:30%;
}

.row.light-source-content.opacity-low a.light-source-card:hover {
    opacity:100%;
}

/* Others */
a.others-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.others-card:hover{
    border:2px solid #FED634;
    color:#000;
}

a.others-card p{
    margin:auto;
    color:#000000;
    font-size:15px;
    font-family:Apercu-Light;
}

.others-content.row {
    margin-top:20px;
}

.row.others-content.opacity-low a.others-card {
    opacity:30%;
}

.row.others-content.opacity-low a.others-card:hover {
    opacity:100%;
}

/* Driver */
a.driver-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.driver-card:hover{
    border:2px solid #FED634;
}

a.driver-card p{
    margin:auto;
    color:#000000;
    font-size:15px;
    font-family:Apercu-Light;
}

.driver-content.row {
    margin-top:20px;
}

/* Tuneable */
a.tuneable-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.tuneable-card:hover{
    border:2px solid #FED634;
}

a.tuneable-card p{
    margin:auto;
    color:#000000;
    font-size:15px;
    font-family:Apercu-Light;
}

.tuneable-content.row {
    margin-top:20px;
}

/* Control option */
a.control-option-card {
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #7D8081;
    padding:10px;
    height:70px;
    transition:.2s;
    width:100%;
    text-decoration:none;
}

a.control-option-card:hover{
    border:2px solid #FED634;
}

a.control-option-card p{
    margin:auto;
    color:#000000;
    font-size:15px;
    font-family:Apercu-Light;
}

.control-option-content.row {
    margin-top:20px;
}

/* Protection */
.ip-rating{
    margin-bottom:20px;
}

.ip-rating h3{
    font-size:18px;
    font-style:italic;
    margin-left:20px;
}

/*  */

.ip-rating-list {
    display:flex;
    margin-top:16px;
    gap:16px;
}

a.ip-rating-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    height:90px;
    width:90px;
    border:2px solid #7D8081;
    transition:.2s;
    text-decoration:none;
    padding:10px;
}

a.ip-rating-btn p{
    margin:0;
    color:#000000;
    font-size:28px;
    font-family: Apercu-Light;
}

.ip-rating-text {
    background:#D2D3D3;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
}

.ip-rating-btn.low-opacity{
    opacity:30%;
}

.ip-rating-btn.low-opacity:hover{
    opacity:1;
}

.ip-rating-btn.low-opacity:focus{
    border:2px solid #FFD70D;
    opacity:1;
}

/* Dimming options */
.dimming-options-content {
    display:flex;
    margin-top:16px;
    gap:40px;
}

a.dimming-card{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    width:100px;
    border:2px solid #7D8081;
    transition:.2s;
    text-decoration:none;
    padding:14px;
}

a.dimming-card p{
    margin:0;
    color:#000000;
    text-align:center;
    font-family:Apercu-Light;
}

.dimming-card-content {
    background:#D2D3D3;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
}

a.dimming-card:hover{
    border:2px solid #FFD70D;
    opacity:1;
}

/* Correlated Color */

.correlated-color-content {
    display:flex;
    margin-top:16px;
    gap:40px;
}

a.correlated-card{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    width:100px;
    border:2px solid #7D8081;
    transition:.2s;
    text-decoration:none;
    padding:14px;
}

a.correlated-card p{
    margin:0;
    color:#000000;
    text-align:center;
    font-family: Apercu-Light;
}

.correlated-card-content {
    background:#D2D3D3;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
}

a.correlated-card:hover{
    border:2px solid #FFD70D;
    opacity:1;
}

/* Color rendering index */

.color-rendering-content {
    display:flex;
    margin-top:16px;
    gap:40px;
}

a.color-rendering-card{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    width:100px;
    border:2px solid #7D8081;
    transition:.2s;
    text-decoration:none;
    padding:14px;
}

a.color-rendering-card p{
    margin:0;
    color:#000000;
    text-align:center;
    font-family: Apercu-Light;
}

.color-rendering-card-content {
    background:#D2D3D3;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
}

a.color-rendering-card:hover{
    border:2px solid #FFD70D;
    opacity:1;
}

/* Optic Shade */
.optic-shade-content {
    display:flex;
    margin-top:16px;
    gap:40px;
}

a.optic-shade-black,
a.optic-shade-white{
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column;
    gap:10px;
    transition:.2s;
}

a.optic-shade-black p,
a.optic-shade-white p{
    color:#000;
}

a.optic-shade-black .the-content,
a.optic-shade-white .the-content{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100px;
    width:100px;
    border:2px solid #7D8081;
    transition:.2s;
    text-decoration:none;
    padding:14px;
}

a.optic-shade-black .the-content .image-optic-shade-black{
    margin:0;
    color:#fff;
    text-align:center;
    background:#D2D3D3;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    font-size:32px;
    font-family: Apercu-Light;
}

a.optic-shade-white .the-content .image-optic-shade-white{
    margin:0;
    color:#000;
    text-align:center;
    background:#fff;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    border:1px solid #D2D3D3;
    font-size:32px;
    font-family: Apercu-Light;
}

/*  */

a.optic-shade-black,
a.optic-shade-white{
    opacity:30%;
}

a.optic-shade-black:hover,
a.optic-shade-white:hover{
    opacity:1;
}

a.optic-shade-black:focus .the-content, a.optic-shade-white:focus .the-content{
    border:2px solid #FED634;
}

/* Warranty Card */

.warranty-content {
    display:flex;
    gap:20px;
}

a.warranty-card{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column;
    text-decoration:none;
    transition:.2s;
}

a.warranty-card .warranty-card-img{
    height:200px;
    width:200px;
    padding:20px;
    border:2px solid #70707030;
    margin-bottom:16px;
}

a.warranty-card .warranty-card-img img{
    height:100%;
    width:100%;
    object-fit:contain;
}

a.warranty-card .warranty-card-content p{
    margin:0;
    color:rgb(0,0,0,.30);
    transition:.2s;
}

/*  */

a.warranty-card:hover .warranty-card-img{
    border:2px solid #FED634;
}

a.warranty-card:hover p{
    color:#000;
}

/* Initial Shape */
.initial-shape-list {
    display:flex;
    gap:40px;
    margin-top:24px;
    justify-content:flex-start;
}

a.initial-shape-card {
    max-width: 20%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column;
    gap:10px;
    text-decoration:none;
    transition:.2s;
}

a.initial-shape-card:hover .initial-shape-image{
    border:1px solid #FED634;
}

.initial-shape-image{
    width:100%;
    height:160px;
    border:1px solid #D2D3D3;
    border-radius:10px;
    padding:16px;
}

.initial-shape-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.initial-shape-card h3{
    font-size:18px;
    color:#000;
    font-family: Apercu-Light;
}

a.initial-shape-card.low-opacity {
    opacity:30%;
}

a.initial-shape-card.low-opacity:hover{
    opacity:1;
}

/* Size */
.width-height-size{
    display:flex;
    gap:24px;
}

.height-size p,.width-size p{
    font-size:15px;
    margin:0;
    margin-bottom:12px;
    font-family: Apercu-Light;
}

.button-width{
    display:flex;
    gap:20px;
    border:2px solid #FED634 ;
}

.button-width a{
    display:flex;
    height:100px;
    width:100px;
    justify-content:center;
    align-items:center;
    /* border:2px solid #D2D3D3; */
    border:2px solid #FED634 ;
    text-decoration:none;
    padding:12px;
    /* opacity:30%; */
    transition:.2s;
}

.button-width a p{
    color:#000;
    margin:0;
    /* background:#D2D3D3; */
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    width:100%;
    font-size:24px;
    transition:.2s;
}

.button-width a{
    display:flex;
    height:100px;
    width:100px;
    justify-content:center;
    align-items:center;
    /* border:2px solid #D2D3D3; */
    text-decoration:none;
    padding:12px;
    /* opacity:30%; */
    transition:.2s;
}

.button-width.selected a p{
    background:#FED634;
    border:2px solid #FED634 ;
}

.button-width.selected a:hover{
    border:2px solid #FED634 ;
}

.button-width a:hover p{
    background:#FED634;
}

/*  */

.length-size {
    margin-top:20px;
}

.length-size p{
    font-family: Apercu-Light;
}

.length-size form{
    display:flex;
    gap:20px;
}

.length-size form input{
    width:100%;
    height:50px;
}

.length-size form input:focus{
    border: solid #FED634;
    outline:none;
}

/*  */

.line-shape {
    max-width:100%;
    display:flex;
    gap:20px;
}

.line-shape p{
    font-family: Apercu-Light;
}

.line-drawing,.shape{
    width:50%;
}

.line-drawing img,.shape img{
    width:100%;
    height:320px;
    object-fit:contain;
    border-top: solid 2px #dddddd;
    border-left: solid 2px #dddddd;
    border-right: solid 2px #dddddd;
    border-bottom: solid 2px #dddddd;
    border-radius: 3%;
}

/* Finish Option */

.finish-option {
    display:flex;
    align-items:center;
    gap:20px;
}

.finish-option a{
    display:flex;
    align-items:center;
    flex-flow:column;
    justify-content:center;
    text-decoration:none;
    transition:.2s;
}

.finish-option a div{
    border:2px solid #D2D3D3;
    height:120px;
    width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
}

.finish-option a:hover div{
    border:2px solid #FED634;
}

.finish-option a div p{
    margin:0;
    height:100%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #D2D3D3;
    border-radius:5px;
    font-size:32px;
    font-family: Apercu-Light;
}

.finish-option a p.text-finish{
    color:#000;
    margin:0;
    margin-top:16px;
    font-family: Apercu-Light;
}

/*  */

.finish-option a div.image-black p{
    background:#7D8081;
    color:white;
}

.finish-option a div.image-white p{
    background:#fff;
    color:#000;
}

.finish-option a div.image-silver p{
    background:#D2D3D3;
    color:white;
}

/*  */

.custom-color{
    margin-left:20px;
    margin-bottom:9px;
}
.custom-color p{
    font-size:15px;
    margin-left:16px;
    color:#707070;
    font-style:italic;
}

.custom-color form input{
    height:50px;
    width:240px;
    border:2px solid #7D8081;
}

/*  */

.finish-description p{
    font-family: Apercu-Light;
}

.form-option {
    margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    margin-bottom:24px;
}

.form-option p{
    margin:0;
    margin-bottom:10px;
    font-style:italic;
}

.form-option form input{
    height:50px;
    width:280px;
}

.anodised.low-opacity,
.encapsulated-polyurethane.low-opacity{
    opacity:30%;
}

.finish-description a{
    text-decoration:underline;
}

/* Light Distribution */
.light-distribution-content.row{
    margin-top:24px;
}

.light-distribution-content.row select {
    width:100%;
    height:50px;
    margin-bottom:20px;
}

.light-distribution-content.row select:focus{
    outline:none;
    border: solid #FED634;
}

.light-distribution-content.row img{
    width:100%;
    height:auto;
    object-fit:contain;
}

.light-distribution-content.row h4{
    font-size:16px;
    font-style:italic;
}

.light-distribution-content.row p{
    margin-top:16px;
    font-size:16px;
    font-family:Apercu-Light;
}

/* Lumen Maintenance */
.lumen-content{
    margin-top:20px;
}

a.lumen-card {
    display:flex;
    border:2px solid #D2D3D3;
    justify-content:center;
    align-items:center;
    height:70px;
    padding:8px 16px;
    transition:.2s;
    opacity:30%;
    text-decoration:none;
}

a.lumen-card p{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:0;
    background:#D2D3D3;
    height:100%;
    width:100%;
    color:#000;
    font-size:15px;
    font-family: Apercu-Light;
}

a.lumen-card:hover{
    opacity:1;
    border:2px solid #FED634;
}

/* Configuration Complete */

.configuration-complete {
    background:rgb(210,211,211,.3);
    padding:24px;
    margin-top:30px;
}

.configuration-complete p{
    font-family: Apercu-Light;
}

.configuration-complete h3{
    color:#7D8081;
    margin-bottom:20px;
    font-family: Apercu-Light;
}

.configuration-complete-details{
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}

.configuration-complete-details p{
    margin:0;
    color:#707070;
    font-family: Apercu;
}

.btn-download a{
    display:flex;
    align-items:center;
    background:#FED634;
    gap:20px;
    text-decoration:none;
    padding:10px 20px;
    margin-right:40px;
    border-radius:5px;
}

.btn-download a img{
    height:30px;
}

.btn-download a p{
    color:#000;
    text-transform:uppercase;
}


/* Others Complete */
.others-complete{
    margin-top:20px;
}


.others-complete p{
    font-style:italic;
    font-family: Apercu-Light;
}

/*Popup*/
.fancybox-content{
    width:80%;
    height:80%;
    background: #D2D3D3 !Important;
}

.fancybox-content img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.popup-content {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column;
}

a.customize-btn {
    display:inline-block;
    margin-top:2em;
    background:#000;
    color:#fff;
    padding:18px 20px;
    border-radius:5px;
    font-family:Apercu-Light;
    text-decoration:none;
    font-size:18px;
}


/* Responsive */

@media (min-width: 1024px) and (max-width: 1280px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
@media (min-width: 480px) and (max-width: 768px) {}

@media (max-width: 480px){
    /* Index */
    .item.card-product {
        flex-flow:column;
    }
    
    .card-product{
        padding:unset;
    }
    
    .btn-group-content a{
        width:unset;
        font-size:16px;
        width:100%;
    }
    
    .main-content h2{
        font-size:32px;
    }

    /* Type */
    .wrap-carousel-product-type .owl-nav > button.owl-prev{
        left:0;
    }
    
    .wrap-carousel-product-type .owl-nav > button.owl-next{
        right:0;
    }

    /* Lighting Solution */
    .product-type.row {
        width:100%;
        margin:auto;
    }
    
    .product-type.row .col-md-4{
        margin-bottom:30px;
    }

    /* Nav */

    nav.main-navbar.sticky-top.navbar.navbar-expand-lg.navbar-light.bg-light p{
        margin-top:14px;
        font-size:15px;
    }

        /* Configuration Here */
    
    .order-code {
        flex-flow:column;
        gap:20px;
    }
    
    .form-conf form input#email{
        width:100%;
    }
    
    .form-conf form input{
        width:100%;
    }
    
    .row{
        width:100%;
        margin:auto;
    }
    /*  */
    .product-range-list{
        flex-flow:column;
    }
    
    .product-range-image{
        width:100%;
    }
    .product-range-image img{
        object-fit:contain;
    }
    /*  */
    
    .initial-shape-list{
        flex-flow:column;
    }
    
    a.initial-shape-card{
        max-width:100%;
    }
    
    /*  */
    
    .width-height-size{
        flex-flow:column;
    }
    
    .length-size form{
        flex-flow:column;
        gap: 0;
    }
    
    .length-size form input{
        margin:18px 0;
    }
    
    /*  */
    .finish-option{
        flex-wrap:wrap;
    }
    
    .custom-color{
        margin-left:0;
    }
    
    .form-option{
        flex-flow:column;
        align-items: flex-start;
        margin-left: 5px;
    }
    
    /*  */
    
    .ip-rating-list{
        flex-wrap:wrap;
    }
    
    /*  */
    .dimming-options-content{
        gap:10px;
        flex-wrap:wrap;
    }
    
    /*  */
    
    .correlated-color-content{
        gap:10px;
        flex-wrap:wrap;
    }
    
    /*  */
    
    .warranty-content{
        margin-top:20px;
        flex-flow:column;
    }
    
    a.warranty-card .warranty-card-img{
        width:100%;
    }
    
    /*  */
    .configuration-complete-details{
        flex-flow:column;
        gap: 20px;
        width: 100%;
    }
    
    .configuration-complete-data{
        width:100%;
    }
    .btn-download a{
        margin-right:0;
        justify-content:center;
    }
    .btn-download{
        width:100%;
    }
}

/* Footer styles */
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000000 !important;
    color: white;
    padding: 20px 0;
    text-align: center;
    font-family: "Apercu";
    font-style: normal;
    font-weight: lighter;
    font-size: 12px;
}
.footer p {
    margin: 0;
}

/* Selected styles */
    /* Style untuk opsi pertanyaan */
    .option-group {
        margin-bottom: 10px;
    }

    .option-item {
        cursor: pointer;
        /* padding: 10px; */
    }

    .range-product {
        height:180px;
        width:180px;
        margin-bottom:16px;
        border: 2px solid transparent; /* Warna border default */
        border-radius:20px;
    }

    .mnt-card {
        display: flex;
        align-items: center;
        gap: 30px 10px;
        text-decoration: none;
        border: 2px solid #D2D3D3;
         /* border: 2px solid transparent; Warna border default */
        /* margin-bottom: 10px; */
        transition: .2s;
        padding: 10px;
        padding-bottom: 10px;
    }

    .mnt-card input[type="radio"] {
        /* Additional styling for the radio button if needed */
        cursor: pointer;
        margin-right: 10px; /* Adjust as needed for spacing */
    }
    
    .mnt-card label {
        cursor: pointer;
        display: flex;
        align-items: center;
        /* Additional styling for the label box */
    }

    .mnt-card p {
        margin:0;
        font-size:14px;
        color:#000000;
        font-family:Apercu-Light;
    }

    .mnt-card.selected [type="radio"]{
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border: 2px solid #FED634;
        margin-bottom: 30px;
        transition: .2s;
        padding: 10px;
    }

    .mnt-card img{
        height:60px;
        width:60px;
        object-fit:contain;
    }

    .scdm-card {
        display:flex;
        justify-content:center;
        align-items:center;
        border:.75px solid #D2D3D3;
        /* padding:10px; */
        height:70px;
        transition:.2s;
        width:100%;
        text-decoration:none;
        border-radius: 10px;
    }

    .scdm-card input[type="radio"] {
        /* Additional styling for the radio button if needed */
        cursor: pointer;
        margin-right: 10px; /* Adjust as needed for spacing */
    }
    
    .scdm-card label {
        cursor: pointer;
        display: flex;
        align-items: center;
        /* Additional styling for the label box */
    }

    .scdm-card p{
        margin:auto;
        color:#000000;
        font-size:14px;
        font-family:Apercu-Light;
    }

    .intl-shape-card {
        max-width: 20%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-flow:column;
        gap:10px;
        text-decoration:none;
        transition:.2s;
    }

    .intl-shape-card:hover .intl-shape-image{
        border:1px solid #FED634;
    }

    .dimm-options-content {
        display:flex;
        margin-top:16px;
        gap:40px;
    }

    .dimm-card-size {
        height:120px;
        width:120px;
        margin-bottom:16px;
        /* border: 2px solid #D2D3D3; Warna border default */
        /* border-radius:1px; */
    }

    .dimm-card-size p{
        margin:0;
        color:#000000;
        text-align:center;
        font-family:Apercu-Light;
        font-size: 28px;
    }
    

    .dimm-card {
        /* height:120px;
        width:120px; */
        margin-bottom:16px;
        /* border: 2px solid #D2D3D3; Warna border default */
        /* border-radius:1px; */
    }

    .dimm-card p{
        margin:0;
        color:#000000;
        text-align:center;
        font-family:Apercu-Light;
    }

    .dimm-card-white p{
        margin:0;
        color:#ffffff;
        text-align:center;
        font-family:Apercu-Light;
    }

    .dimm-card-content {
        background:#D2D3D3;
        height:100%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:5px;
    }

    .ip-card-content {
        background:#D2D3D3;
        height:100%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:5px;
        margin-bottom: 16px;
    }

    .ip-card-content.bg-black {
        background:#000000 !important;
    }

    .ip-card-content.bg-yellow {
        background:#FED634 !important;
    }

    .ip-card-content.bg-custom {
        background:#bebebd !important;
    }

    .ip-card-content.bg-anodised {
        background:#b0b0af !important;
    }

    .ip-card-content.bg-encapsulated {
        background:#9f9f9e !important;
    }

    .ip-card-content h3 {
        color: #000000;
        font-size: 16px;
        text-align: center;
        font-family: Apercu-Light;
    }

    .ip-card-content.bg-white {
        border: 2px solid #D2D3D3 !important;
        background:#D2D3D3 !important; /* Warna border default */
    }

    .ip-card p{
        margin:0;
        color:#000000;
        text-align:center;
        font-family:Apercu-Light;
        font-size: 28px;
    }

    .lumm-card-content {
        background:#D2D3D3;
        height:100%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:5px;
    }

    .lumm-card-content p{
        margin:0;
        color:#000000;
        text-align:center;
        font-family:Apercu-Light;
        font-size: 17px;
    }

    .option-item:hover{
        border:2px solid #FED634;
    }

    .range-product img{
        height:100%;
        width:100%;
    }

    Style untuk opsi pertanyaan yang dipilih
    .option-item.selected {
        border-color: #FED634;
    }