main {

  background: var(--surface);

  border-radius: 32px 32px 0 0;

  margin-top: -60px;

  position: relative;

  z-index: 2;

  padding-top: 40px;

}

header{

  height: auto;

  padding-bottom: 60px;

}
#pop{
  animation: pulseRed 4s infinite;
  border-radius: 24px;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  padding: 32px;

  margin-bottom: 40px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

#pop h1{
  font-size: 22px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0px rgba(229, 57, 53, 0.4);
    border-color: #e53935;
  }
  50% {
    box-shadow: 0 0 25px rgba(229, 57, 53, 1);
    border-color: #ff6b6b;
  }
  100% {
    box-shadow: 0 0 0px rgba(229, 57, 53, 0.4);
    border-color: #e53935;
  }
}

#pop span{
  color: red;
}
.service-card {

  background:

    linear-gradient(

      135deg,

      var(--surface) 0%,

      var(--surface) 35%,



      var(--accent) 35%,

      var(--accent) 39%,



      var(--background) 39%,

      var(--background) 100%

    );

  border-radius: 24px;

  padding: 32px;

  margin-bottom: 40px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);

}



.service-card:nth-child(2) {

  background:

    linear-gradient(

      135deg,

      var(--surface) 0%,

      var(--surface) 55%,



      var(--accent) 55%,

      var(--accent) 59%,



      var(--background) 59%,

      var(--background) 100%

    );

  border-radius: 24px;

  padding: 32px;

  margin-bottom: 40px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);

}



.service-card:nth-child(3) {

  background:

    linear-gradient(

      45deg,

      var(--surface) 0%,

      var(--surface) 46%,



      var(--accent) 46%,

      var(--accent) 50%,



      var(--background) 50%,

      var(--background) 100%

    );

  border-radius: 24px;

  padding: 32px;

  margin-bottom: 40px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);

}



.service-content{

    display: flex;

    align-items: center;

}



.service-left{

    width: 43%;

}



.service-left h4{

    text-align: center;

    padding-right: 30%;

}



.service-card img{

    width: 35%;

    height: auto;

}



.service-card:nth-child(2) img{

    width: 85%;

    height: auto;

}

.service-right{

    width:57%;

    flex:end;



}

.service-right p{

    margin-top:8px;

    font-size: 1.1rem;

    text-align: center;

}

.service-card:nth-child(2) .service-left{

    width:55%;

}

.service-card:nth-child(2) .service-right{

    width:45%;

    flex:end;

}

.service-right:nth-child(2) h5{

    text-align: end;

}

.service-right:nth-child(2) p{

    text-align: end;

}



.service-card:nth-child(3) .service-left{

    width:55%;

}

.service-card:nth-child(3) .service-right{

    width:45%;

    flex:end;

}

.service-card:nth-child(3) h4{

    text-align: end;

}



.pbp{

    width: 65%;

    margin-top: 2%;

    margin-left: auto;

    margin-right: auto;

}



.pbp p{

    color: var(--accent);

}



.left{

    display: inline-block;

    width: 70%;

}



.right{

    display: inline-block;

    vertical-align: top;

    width: 25%;

}



.service-card:nth-child(even) {

  border-left: 6px solid var(--accent);

}



.service-card:nth-child(odd) {

  border-right: 6px solid var(--secondary);

}





/* FAQ */

.service-card-faq {

  background: var(--background);

  

  border-radius: 24px;

  padding: 32px;

  margin-bottom: 40px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);

}

.service-card-faq:nth-child(odd){
	border-right: 6px solid var(--secondary);
}

.service-card-faq:nth-child(even){
border-left: 6px solid var(--accent);
	
}


.service-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.service-desc {

  font-size: 1.05rem;

  margin-bottom: 16px;

}



.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;

}

#cghi{
  width: 24px;
  height: auto;
  border-radius: 8px;
}

.faq-item.active .faq-answer {

  min-height: 30px;
  max-height: 500px;

}



.faq-question {

  width: 100%;

  background: none;

  border: none;

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

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

  margin-bottom: 10px;

  font-size: 1.15rem;

  font-weight: bold;

  text-align: left;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.faq-item.active .icon {

  transform: rotate(45deg);

}

p > span{
  color: var(--accent);
  font-weight: bold;
}