@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Urbanist", sans-serif!important;
    background-color: #F3F3F3;
    scroll-behavior: smooth;
}
.dot {
    color: #FF6B00;
}
.navbar {
    background-color: #FF6B00!important;
    color: white!important;
}
.navbar-brand {
    color: white!important;
    font-weight: 600;
    font-size: 30px;
    margin-right: 50px;
}
.navbar-nav {
    margin-left: 50px;
}
.nav-item {
    color: white!important;
    font-size: 20px;
    margin-right: 14px;
}
.hero {
    background-image: url('https://phonestop.nl/assets/img/herobg.png');
    background-size: cover;
    background-position: center;
    padding: 15vh 0 15vh 0;
    color: white;
}
.hero h1 {
    font-size: 72px;
    font-weight: 600;
}
.hero p {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 300;
}
.phone-show-card {
    padding: 10px;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
}
.phone-show-card img {
    height: 120px;
    margin-top: 10px;
}
.phone-show-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 14px;
}
.kiezen h2 {
    font-size: 48px;
    font-weight: 600;
}
.kiezen p {
    font-size: 24px;
    color: #5b5b5b;
}
.kiezen img {
    border-radius: 10px;
}
.mt-10 {
    margin-top: 7rem;
}
.mb-10 {
    margin-bottom: 7rem;
}
.klimaat-hero {
    background-image: url('http://192.168.0.31/phonestop/assets/img/klimaatbg.png');
    background-size: cover;
    background-position: center;
    padding: 10vh 0 10vh 0;
    color: white;
}
.klimaat-hero h1 {
    font-size: 48px;
    font-weight: 600;
    margin-top: 20px;
}
.klimaat-hero p {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 300;
}
.klimaat-hero h3 {
    font-size: 24px;
    font-weight: 600;
    color: #313131;
}
.white-badge {
    background-color: #fff;
    color: #3B8A4D;
    font-size: 24px;
    font-weight: 600;
    padding: 8px 20px 8px 20px;
    border-radius: 10px;
}
.blog h1 {
    font-size: 48px;
    font-weight: 600;
}
.blog-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}
.blog-card h3 {
    margin-top: 10px;
    font-weight: 600;
}
.blog .secondary {
    font-size: 24px!important;
}
.blog-card p {
    margin-top: 10px;
    color: #5b5b5b;
}
.blog-card img {
    width: 100%;
    border-radius: 10px;
}
.footer {
    background-color: #313131;
    color: white;
    border-top: 10px solid #FF6B00;
}
.footer a {
    color: white;
}
footer h1 {
    font-weight: 600;
}
.reviews {
    background-color: #e5e5e5;
    padding: 10vh 0 10vh 0;
}
.reviews h1 {
    font-weight: 600;
}
.reviews .review-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-top: 20px;
}
.review-card p {
    margin-top: 10px;
    color: #000000;
}
.review-card h5 {
    margin-top: 10px;
    font-weight: 600;
}
.review-card i {
    margin-right: 6px;
    font-size: 24px;
    color: #FF6B00;
}
.repareren h1 {
    font-size: 48px;
    font-weight: 600;
}   
.repareren p {
    font-size: 24px;
    color: #5b5b5b;
}
.repareren .card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    border: none;
}
.repareren .card .icon {
    padding: 10px;
    font-size: 24px;
    color: #fff;
    background-color: #FF6B00;
    border-radius: 10px;
}
.repareren .card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: -1px;
}
.repareren .card p {
    margin-bottom: -2px;
}
.primarybtn {
    background-color: #FF6B00;
    color: white;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
    border: none;
}
.primarybtn:hover {
    color: white;
}

.secondarybtn {
    background-color: #fff;
    color: #FF6B00;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    margin-right: 20px;
    border: 2px solid #fff;
}
.secondarybtn:hover {
    color: #FF6B00;
    text-decoration: none;
}
.secondarybtn2 {
    border: 2px solid #fff;
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    margin-right: 20px;
}
.secondarybtn2:hover {
    background-color: #fff;
    color: #FF6B00;
    text-decoration: none;
    transition-duration: .3s;
}
.banner {
    background-color: #fff;
    color: #FF6B00;
    padding: 8px 0 8px 0;
}
.banner p {
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: -0.1px;
}
.support .card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-top: 20px;
    border: none;
}
.support .card h2 {
    font-size: 36px;
    font-weight: 600;
}
.banner .fact {
    margin-top: 10px;
    margin-right: 28px;
    font-weight: 600;
}
.banner .fact i {
    margin-right: 9px;
}
.card {
    border: none;
    padding: 25px;
    border-radius: 10px;
}
.form-control {
    background-color: #f6f5f5;
    border: none;
    padding: 25px;
    border-radius: 10px;
}
.support .card p {
    margin-top: -11px;
}
.support .card h3 {
    font-weight: 600;
}
.support .card .first {
    margin-bottom: 24px;
}
.faq button {
    margin-top: 15px;
    padding: 10px 20px 10px 20px;
    border: 1px solid #fff;
    font-size: 24px;
    border-radius: 10px;
    background-color: #ffffff;
}
.hero .card {
    color: black!important;
    border-radius: 15px;
}
.hero .card .form-control {
    color: #000000!important;
}
.hoe-het-werkt {
    background-image: url('https://media.discordapp.net/attachments/1183564624671555667/1287563753218510899/image.png?ex=66f940f0&is=66f7ef70&hm=84859386be7553cf107900906c0e90e5c92fc857ce6a1976eef82d7e4ed2cc04&=&format=webp&quality=lossless&width=1922&height=620https://media.discordapp.net/attachments/1183564624671555667/1287563753218510899/image.png?ex=66f940f0&is=66f7ef70&hm=84859386be7553cf107900906c0e90e5c92fc857ce6a1976eef82d7e4ed2cc04&=&format=webp&quality=lossless&width=1922&height=620');
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
}
.hoe-het-werkt h4 {
    font-size: 24px;
    font-weight: 600;
}
.hoe-het-werkt p {
    font-size: 18px;
    color: #5b5b5b;
    font-weight: 400;
}
.hoe-het-werkt h1 {
    font-weight: 600;
}
.primarybtn:hover {
    text-decoration: none;
}
.thirthbtn {
    background-color: #ff6a0036;
    color: #FF6B00;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
    border: none;
}
.calculator h2 {
    font-size: 36px;
    font-weight: 600;
}
.calculator .info {
    background-color: #ff6a002d;
    color: #FF6B00;
    padding: 20px 20px 5px 20px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 17px;
}
.calculator .info i {
    margin-right: 10px;
}
.shop img {
    width: 125%;
}
.shop .price {
    font-weight: 600;
    color: #FF6B00;
    font-size: 20px;
    margin-left: 5px;
}
.shop h5 {
    font-weight: 600;
    font-size: 22px;
}
.shop .pill {
    font-weight: 500;
    color: #ff6a00;
    color: #004268;
    background-color: #ff6a0058;
    padding: 4px 10px 4px 10px;
    border-radius: 10px;
    margin-bottom: 40px;
}
.order-details h2 {
    font-weight: 600;
}
#price {
    font-size: 2;
}
.reparatie-cards {
    background-color: #fff;
    padding: 8px 10px 5px 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.reparatie-cards h3 {
    font-weight: 600;
}
.card h3 {
    font-weight: 600;
}
h1 {
    font-weight: 600;
}
.overzicht {
    list-style-type: none;
    padding: 0;

}
@media only screen and (max-width: 600px) {
    #heromobile {
        display: block;
    }
    #herodesktop {
        display: none;
    }
    #verkoopcardsmobile {
        display: block;
    }
    #verkoopcardsdesktop {
        display: none;
    }
    #infocardsmobile {
        display: block;
    }
    #infocardsdesktop {
        display: none;
    }
    .hero h1 {
        font-size: 46px;
    }
    .hero .secondarybtn {
        background-color: #fff;
        color: #FF6B00;
        padding: 10px 20px 10px 20px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
        display: flex;
        margin-bottom: 20px;
    }
    .phone-show-card {
        display: none;
    }
    #bannerdesktop {
        display: none;
    }
    #bannermobile {
        text-align: center;
        font-weight: 600;
    }
    .card {
        margin-bottom: 25px;
    }
    .shop img {
        width: 100%;
    }
    #desktopcart {
        display: none;
    }
    #mobilecart {
        display: block;
    }
    #timeline {
        display: none;
    }
}

@media only screen and (min-width: 600px) {
    #bannerdesktop {
        display: block;
    }
    #bannermobile {
        display: none;
    }
    #heromobile {
        display: none;
    }
    #desktopcart {
        display: block;
    }
    #mobilecart {
        display: none;
    }
    #verkoopcardsmobile {
        display: none;
    }
    #verkoopcardsdesktop {
        display: block;
    }
    #infocardsmobile {
        display: none;
    }
    #infocardsdesktop {
        display: block;
    }
}


.winkel-option {
    padding: 15px 20px 10px 15px;
    background-color: #F3F3F3;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}
.winkel-option h4 {
    font-weight: 600;
}

input[type="radio"]:checked + .winkel-option {
    background-color: #ff6a00; /* Change background when selected */
    color: white;
    border-color: #ff6a00;
}

input[type="radio"]:not(:checked) + .winkel-option:hover {
    background-color: #F3F3F3;
}

.navbar-light .navbar-toggler {
    color: rgb(255 255 255);
    border-color: rgb(255 255 255 / 0%);
}
.navbar-toggler:focus, .navbar-toggler:hover {
    text-decoration: none;
    border: none;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.top-member-card {
    color: white;
    background-color: #ff6a00;
    padding: 25px 25px 10px 25px;
    border-radius: 10px 10px 0px 0px;
    transition: .3s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: solid 10px #fc7e24;
}
.top-member-card small {
    font-size: 14px;
}
.bottom-member-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 0px 0px 10px 10px;
    transition: .3s;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: solid 4px #fff;
}
.bottom-member-card img {
    height: 100px;
}
.bottom-member-card h2 {
    font-weight: 600;
    font-size: 36px;
}
.order-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: none;
}
.order-card i {
    font-size: 36px;
    margin-right: 10px;
    margin-bottom: 20px;
    color: #ff6a00;
    background-color: #ff6a0051;
    padding: 20px 22px 20px 22px;
    border-radius: 100%;
}
.order-card h5 {
    font-size: 32px;
    font-weight: 600;
}
.order-card small {
    font-size: 18px;
}
.order-card:hover i {
    background-color: #ff6a00;
    color: white;
    transition: .5s;
}
.ad-banner {
    background-image: url('../img/herobg.png');
    border-radius: 10px;
    color: white;
    padding: 25px 25px 20px 25px;
    background-size: 100%;
}
.ad-banner h1 {
    margin-bottom: 20px;
}
.ad-banner p {
    margin-top: 20px;
    margin-bottom: -2px;
}
.secondary-card {
    background-color: #f4f4f4;
    padding: 25px;
    border-radius: 7px;
}
.secondary-card p {
    margin-top: 10px;
    margin-bottom: -5px;
    color: #5b5b5b;
}
.secondary-card i {
    font-size: 24px;
    color: #5b5b5b;
}
.ultralanding {
    padding: 25px;
    border-radius: 25px;
}
.ultralanding h4 {
    font-size: 24px;
    font-weight: 600;
}
.ultralanding p {
    font-size: 18px;
}
.ultralanding .card-1 {
    background-color: #ff6a00;
    color: white;
    padding: 45px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
}
.ultralanding .card-2 {
    background-color: #fc7e24;
    color: white;
    padding: 45px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
}
.ultralanding .geschiedenis-card {
    background-color: #fff;
    padding: 45px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
}
.ultralanding .geschiedenis-card a {
    color: #313131;
    font-size: 20px;
    font-weight: 600;
}
.ultralanding .card-2 a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
.ultralanding:hover a {
    text-decoration: none;
    transition: .3s;
}
.appie-balie {
    width: 100%;
    border-radius: 25px;
    margin-bottom: 25px;
    height: 330px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../img/appieaandebalie.png');
}
.ultralanding .world-card {
    background-color: #fff;
    padding: 45px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.7)), url("https://www.apple.com/v/environment/z/images/overview/people_carbon_boc__euzia5u8c2ye_large_2x.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 400px 45px 45px 45px;
}
.ultralanding .world-card i {
    font-size: 48px;
    margin-bottom: 20px;
}
.ultralanding .laptop-card {
    padding: 45px;
    background-color: #fff;
    border-radius: 25px;
}
.ultralanding .sec {
    background-color: #f3f3f5;
    padding: 25px 25px 0px 25px;
    border-radius: 25px;
}
.ultralanding .laptop-card a {
    color: #313131;
    font-size: 20px;
    font-weight: 600;
    margin-left: -20px;
}
.ultralanding .recycle-card {
    background-color: #fff;
    padding: 65px 25px 0px 0px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
    margin-top: 25px;
}
.ultralanding .recycle-card svg {
    height: 1px;
}
.ultralanding .recycle-card img {
    margin-bottom: 0px;
    width: 100%;
}
.ultralanding .img-card {
    background-color: #fff;
    padding: 45px;
    border-radius: 25px;
    margin-bottom: 25px;
    border: none;
}
.productpage .in-stock {
    background-color: #00ff3c7a;
    color: #25b146;
    padding: 16px 20px 1px 20px;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 20px;
    border: none;
    text-align: center;
}
.productpage .in-stock i {
    margin-right: 10px;
}
.productpage .prijs h3 {
    font-size: 38px;
    font-weight: 600;
}
.productpage .image-card {
    padding: 75px;
    background-color: #ffffff;
    border-radius: 25px;
    text-align: center;
}
.productpage img {
    height: 200px;
}
.productpage .product-color {
    background-color: #fff;
    padding: 20px;
    border-radius: 100%;
    margin-bottom: 4px;
    width: 40px;
    margin-left: 3px;
}
.productpage .kleuren h4 {
    margin-top: 6px;
}
.productpage .kleuren .winkel-option {
    background-color: #fff;
}
.productpage .opslag .winkel-option {
    font-weight: 600;
    background-color: #fff;
}
.productpage h4 {
    font-weight: 600;
}
.productpage .opslag .winkel-option h4 {
    margin-top: 4px;
    font-weight: 600;
}
.productpage .batterij .winkel-option {
    font-weight: 600;
    background-color: #fff;
}
.productpage .batterij .winkel-option h4 {
    margin-top: 4px;
    font-weight: 600;
}
.productpage .batterij a {
    margin-top: -10px;
    color: #fc7e24;
}
.productpage .batterij a:hover {
    text-decoration: none;
    color: #ff63d0;
}
input[type="radio"]:checked + label {
    accent-color: #ff7900; 
}
/* General radio button styling */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc; /* Light gray border for unselected state */
    border-radius: 50%;
    background-color: white; /* White background */
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    vertical-align: middle; /* Align radio button with text */
    transition: border 0.2s ease-in-out;
  }
  
  /* Radio button checked state */
  input[type="radio"]:checked {
    border: 2px solid orange; /* Orange border */
    background-color: orange; /* Orange fill */
  }
  
  /* White dot for checked state */
  input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 8px; /* Adjust size for centered white dot */
    height: 8px;
    background-color: white; /* White center dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .color {
    padding: 1px 10px 1px 10px;
    border-radius: 100%;
    margin-right: 7px;
    border: 1px solid #c7c7c7;
  }
  .storage {
    background-color: #e7e7e7;
    padding: 4px 10px 4px 10px;
    border-radius: 7px;
    margin-right: 7px;
    font-size: 12px;
  }
  input[type="range" i] {
    appearance: auto;
    cursor: default;
    color: #fff;
    padding: initial;
    border: initial;
    margin: 2px;
}
.color-option {
    padding: 20px 15px 20px 15px;
    border: 2px solid #f3f3f3;
    border-radius: 100%;
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
}
.color-option h4 {
    font-weight: 600;
}

input[type="radio"]:checked + .color-option {
    border: 2px solid #ff6a00;
}

input[type="radio"]:not(:checked) + .color-option:hover {
    background-color: #ff6a00;
}
.image-preview-card {
    background-color: #fff;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    margin-top: 20px;
    border: none;
    border: 2px solid #FFF;
}
.image-preview-card img {
    height: 70px;
    border-radius: 10px;
}
.selected-image {
    border: 2px solid #FF6B00;
}

.productpage .winkel-option h4 {
    margin-top: 4px;
    font-weight: 600;
    font-size: 16px;
}
.nav-pills .nav-link {
    border-radius: .25rem;
    padding: 5px 12.5px;
    background-color: rgba(255, 115, 0, 0.13);
    color: #fc7e24 !important;
    margin-top: 40px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #ff6b00;
}
.conditie-hulp-img {
    width: 100%;
    border-radius: 10px;
    background-color: #F5F5F5;
    margin-top: 20px;
    margin-bottom: 50px;
}
.conditie-hulp-img img {
    padding: 50px 0px 0px 0px;
    height: 200px;
}
.mobilefilterbtn {
    font-weight: 600;
    border: none;
    background-color: #ff6a0027;
    color: #ff6b00;
    padding: 10px 25px;
    margin-right: 10px;
    border-radius: 7px;
    margin-top: 12px;
}
.mobilefilterbtn:hover {
    background-color: #ff6a00;
    color: white;
    transition: .3s;
}
.back-btn {
    background-color: #ff6a0049;
    color: #FF6B00;
    padding: 16px 18px;
    border: none;
    border-radius: 100%;
    text-decoration: none;
    font-weight: 600;
    margin-top: 14px;
}
.bck {
    margin-top: 15px;
}
.order-see-btn {
    color: #000000;
    font-size: 14px;
    text-decoration: none;
    outline: none; /* Remove blue outline */
}
.order-see-btn:hover {
    text-decoration: none;
    color: #ff6a00;
}
.order-see-btn:focus {
    outline: none; /* Remove blue outline on focus */
    box-shadow: none; /* Remove focus box shadow */
    text-decoration: none;
}
.order-item {
    background-color: #eeeeee;
    padding: 20px 10px 10px 25px;
    border-radius: 7px;
}
.order-item h5 {
    font-weight: 600;
    margin-right: 10px;
}
.back-btn:hover {
    color: #e76000;
    background-color: #ffd7d7;
}
.alert-danger {
    background-color: #ff3939;
    color: white;
    border: none;
}
.alert-danger a {
    color: white;
    font-weight: 600;
}
.voordeel-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 25px;
    border: none;
}
.voordeel-card i {
    font-size: 24px;
    margin-right: 10px;
    margin-bottom: 20px;
    color: #ff6a00;
    background-color: #ff6a0051;
    border-radius: 100%;
}
.klarna-payment {
    background-color: #fff;
    padding: 10px 20px 10px 20px;
    margin-top: 25px;
    border-radius: 10px;
    font-weight: 600;
}

.klarna-payment img {
    height: 70px;
    margin-right: 10px;
}
.googlereviews {
    margin-top: 25px;
}
.google-icon i {
    font-size: 54px;
    color: #ff6a00;
}
.googlereviews .review-card {
    margin-bottom: 25px;
}