.martop30 {margin-top:30px;}
    .full-width-background {
        position: relative;
    }
    .full-width-background::before {
        content: "";
        position: absolute;
        background-color: #f3f3f3;
        width: 100vw;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }

.container-main2b {
    background-color: #f3f3f3;
    padding: 30px 0;
    position: relative;
}

.usph {
    margin-bottom: 10px;
    margin-left: 0px;
    xmargin-bottom: 10px;
    padding: 20px !important;
    background: #f9f9f9;}
.usph:active {background: #ebfdea;}
.usph:hover {background: #ebfdea;}
.buttonfagreen{color: #09df05;}
.usph2 {
    margin-bottom: 10px;
    margin-left: 0px;
    xmargin-bottom: 10px;
    padding: 20px !important;
    background: #f9f9f9;
text-align: center;
}


.collapse {
    display: none
}

.collapse.in {
    display: block
}

tr.collapse.in {
    display: table-row
}

tbody.collapse.in {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height,visibility;
    -o-transition-property: height,visibility;
    transition-property: height,visibility;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}






/* ===== Basisstijlen ===== */
a:hover, .alink:hover {
  color: #000;
  text-decoration: none !important; 
}

/* ===== Contact items - AANGEPAST VOOR PERFECTE UITLIJNING ===== */
.contact-item {
  display: flex;
  align-items: center;
  clear: both;
  margin-bottom: 10px; /* Consistent ruimte tussen items */
}

.contact-item a {
  display: flex;
  align-items: center; /* Centreert iconen en tekst verticaal */
  text-decoration: none;
  color: inherit;
}

.contact-item img {
  margin-right: 20px;
  width: 24px; /* Vaste breedte voor consistentie */
  height: 24px; /* Vaste hoogte voor consistentie */
  object-fit: contain; /* Zorgt dat iconen niet vervormd raken */
  align-self: center; /* Extra zekerheid voor verticale centrering */
}

.contact-text {
  line-height: 24px; /* Gelijk aan icoonhoogte voor perfecte uitlijning */
  vertical-align: middle;
}

/* ===== Links ===== */
.robotolink {
  color: #0dbdf5 !important;
  vertical-align: unset;
}
.robotolink:hover {
  text-decoration: underline !important;
}

/* ===== Lijnstijlen ===== */
.full-width-line {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-top: 10px dotted #f3f3f3;
  margin-bottom: 20px;
}

/* ===== Container stijlen ===== */
.container-main2 { 
  background-color: #fff; 
  padding: 30px 0;
  position: relative;
}

.container-main3 { 
  background-color: #f9f9f9;
  padding: 50px 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

.container-main3 > .container {
  position: relative;
  z-index: 1;
  padding: 0 15px;
}

/* ===== Typografie ===== */
.roboto-kop1 { 
  font: 500 28px/1.2 'Roboto', sans-serif;
  color: #333;
  margin-bottom: 15px;
}

.roboto-kop2 { 
  font: 400 18px/1.2 'Roboto', sans-serif;
  color: #333;
  margin-bottom: 15px;
}

/* ===== Button stijlen ===== */
buttonxx, buttonxx2 {
  background: #f2f2f2;
  display: block;
  padding: 30px 20px 30px 50px;
  border: none;
  border-left: 3px solid #888;
  color: #000;
  margin-bottom: 20px;
  font-size: 14pt;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all .4s cubic-bezier(0.54,0.09,0.29,0.9);
}

buttonxx { margin-top: 10px; }

buttonxx span, buttonxx2 span {
  position: absolute;
  display: block;
  transform: translate(-50%,-50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #eaeaea;
  transition: width .6s cubic-bezier(0.54,0.09,0.29,0.9), 
             height .2s cubic-bezier(0.54,0.09,0.29,0.9);
  z-index: -1;
}

buttonxx:hover span, buttonxx:focus span,
buttonxx2:hover span, buttonxx2:focus span {
  width: 400%;
  height: 400%;
}

buttonxx:active span, buttonxx2:active span {
  background: #e1e1e1;
}

/* ===== Specifieke button kleuren ===== */
a[href="/bestellen"] buttonxx, a[href="/bestellen"] buttonxx2 { border-left-color: #4a90e2; }
a[href="/betalen"] buttonxx, a[href="/betalen"] buttonxx2 { border-left-color: #50b83c; }
a[href="/verzenden"] buttonxx, a[href="/verzenden"] buttonxx2 { border-left-color: #f49342; }
a[href="/retourneren"] buttonxx, a[href="/retourneren"] buttonxx2 { border-left-color: #e63888; }
a[href="/veelgesteldevragen"] buttonxx, a[href="/veelgesteldevragen"] buttonxx2 { border-left-color: #888; }

/* ===== Accordion stijlen ===== */
.hover-lightgrey {
  display: block;
  padding: 18px 25px;
  margin-bottom: 15px;
  background: #fff;
  color: #333;
  text-align: left;
  font: 400 15px/1 'Roboto', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border-radius: 3px;
}

.hover-lightgrey:hover {
  background: #f9f9f9;
  border-color: #d5d5d5;
}

.hover-lightgrey img {
  margin-right: 10px;
  width: 12px;
  height: 12px;
  transition: transform 0.3s;
}

.hover-lightgrey.collapsed img {
  transform: rotate(-90deg);
}

.c1 {
  background: #f7f7f7;
  padding: 20px;
  margin: -5px 0 15px;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 3px 3px;
}

/* ===== Responsieve aanpassingen ===== */
@media (min-width: 768px) {
  .col-sm-6 { padding-right: 20px; padding-left: 0; }
  .pl-md-20 { padding-left: 20px !important; }
  .pr-md-60 { padding-right: 60px !important; }
}

@media (max-width: 767px) {
  .col-6 { !important; padding: 0; }
  buttonxx, buttonxx2 { font-size: 12pt;}
  .container-main3 { padding: 30px 0; display: block !important; }
  .container-main3 > .container { padding: 0 15px; max-width: 100%; }
  .container-main3.faq-header { display: none !important; }
 
  .pr-20 { padding-right: 40px !important; }
  
  /* Mobile optimalisatie voor contact items */
  .contact-item img {
    margin-right: 15px;
    width: 20px;
    height: 20px;
  }
  .contact-text {
    line-height: 20px;
  }
}