.section-sub-content{
  opacity:0;
  height:0;
  overflow:hidden;
  transition:.35s;
}
.section-sub-content.selected{
  height:auto;
  opacity:1;
}

/*  */
/* web design content */
/*  */

/* web design website demos */
#web-design-content{
  /* padding-top:10px; */
  min-height:560px;
}

#web-des-demo-options-container{
  width:40%;
  margin-right:50px;
}

.web-des-demo-option .accordion-arrow:after{
  border-top:6px solid transparent;
  border-right:0 solid currentColor;
  border-left:8px solid currentColor;
  border-bottom: 6px solid transparent;
}
.selected.web-des-demo-option > .accordion-header .accordion-arrow:after{
  transform:rotate(270deg);
}
#web-design-content .webpage{
  height:400px;
  padding:0;
  overflow:hidden;
}
/* styles for the individual webpages are in separate stylesheet */

#web-design-content .button-container{
  margin-top: 40px;
}

/* toggle switch (specific to this page, other styles are in site-styles) */
#frequency-container .toggle-switch-container{
  margin:25px 0;
}

/* packages */
.packages-container{
  margin:50px 0;
}
.package-container{
  border: 1px solid #e3e3e3;
  border-radius:8px;
  max-width:30%;
  margin:0 10px;
  position:relative;
  color:inherit;
  top:0;
  background-image:linear-gradient(0deg, transparent, transparent);
  transition:.35s;
}

@media (hover: hover) and (pointer: fine) {
  .package-container:hover{
    top:-10px;
    box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
  }
}

.core .package-title h3,
.core .active-text .list-icon{
  color:#57ac62;
}
@media (hover: hover) and (pointer: fine) {
  .core:hover .package-title{
    color:#57ac62;
  }
  .core:hover button{
    border-color:#57ac62;
  }
  .core button:hover{
    background-color:#57ac62;
    border-color:#57ac62;
  }
  .core:hover{
    /* background-image:linear-gradient(0deg, #57ac6210, transparent); */
  }
}

.basic .package-title h3,
.basic .active-text .list-icon{
  color:#6fc5c6;
}
@media (hover: hover) and (pointer: fine) {
  .basic:hover .package-title{
    color:#6fc5c6;
  }
  .basic:hover button{
    border-color:#6fc5c6;
  }
  .basic button:hover{
    background-color:#6fc5c6;
    border-color:#6fc5c6;
  }
  .basic:hover{
    /* background-image:linear-gradient(0deg, #6fc5c610, transparent); */
  }
}

.deluxe .package-title h3,
.deluxe .active-text .list-icon{
  color:#8c6fc6;
}
@media (hover: hover) and (pointer: fine) {
  .deluxe:hover .package-title{
    color:#8c6fc6;
  }
  .deluxe:hover button{
    border-color:#8c6fc6;
  }
  .deluxe button:hover{
    background-color:#8c6fc6;
    border-color:#8c6fc6;
  }
  .deluxe:hover{
    /* background-image:linear-gradient(0deg, #8c6fc610, transparent); */
  }
}

.golden .package-title h3,
.golden .active-text .list-icon{
  color:#ffcc00;
}
@media (hover: hover) and (pointer: fine) {
  .golden:hover .package-title{
    color:#ffcc00;
  }
  .golden:hover button{
    border-color:#ffcc00;
  }
  .golden button:hover{
    background-color:#ffcc00;
    border-color:#ffcc00;
  }
  .golden:hover{
    /* background-image:linear-gradient(0deg, #ffcc0005, transparent); */
  }
}

/* package title */
.package-title{
  padding:20px 20px 10px 20px;
  text-align:center;
  transition:.35s;
}
.package-title .inactive-text{
  margin-bottom:0;
}
.package-title .accordion-arrow{
  display:none;
  color:var(--foreground);
}

/* package content */
.package-content{
  padding:20px;
  font-weight:bold;
  font-size:13px;
}
.package-content ul{
  position:relative;
  z-index:2;
}
/* .list-icon{
  margin-right:10px;
  width:14px;
  height:14px;
  line-height:0;
  transition:.35s;
} */
.active-text{
  font-weight:bold;
}
/* .inactive-text{
  color:#cccccc;
} */
.best-for-text{
  z-index:1;
  margin:30px 0;
  font-weight:normal;
}
.package-content .button-container{
  margin-top:40px;
}

.other-questions-link-container{
  padding:20px;
}
/*  */
/*  */



/* service items (graphic design and other) */
.service-item-container{
  position:relative;
  top:0;
  padding:20px;
  border: 1px solid transparent;
  border-radius:8px;
  margin:0;
  margin-bottom:10px;
  transition:.35s;
}
@media (hover: hover) and (pointer: fine) {
  .service-item-container:hover{
    box-shadow:0px 8px 17px -8px rgb(0 0 0 / 10%);
    border-color:#e3e3e3;
    margin-bottom:20px;
    top:-5px;
  }
}
.service-item-container h4{
  margin-bottom:20px;
}
.service-item-icon-container{
  margin:0 60px 0 40px;
  /* margin-right:20px; */
  /* background-color:currentColor; */
  width:70px;
  height:70px;
}


/* responsive styles */
@media only screen and (max-width:1200px){
  #web-design-content > .flex-container{
    flex-wrap:wrap;
  }
  #web-des-demo-options-container{
    /* margin-right:20px; */
    /* width:35%; */
    margin-right:0;
    width:100%;
  }
  #web-des-demo-content-container{
    display:none;
  }
  .packages-container{
    flex-wrap:wrap;
  }
  .package-container{
    margin:0 0 20px 0;
    max-width:48%;
    cursor:pointer;
  }
  .package-content{
    font-size:inherit;
  }
}

@media only screen and (max-width: 760px){
  .package-container{
    width:100%;
    max-width:100%;
    flex:auto;
  }
  .package-content{
    transition:.15s;
    opacity:0;
    display:none;
    pointer-events:none;
    padding:0 20px;
  }
  .package-content .button-container{
    flex:none;
    height:auto;
  }
  .selected > .package-content{
    opacity:1;
    pointer-events:all;
    display:block;
    padding:20px;
  }
  .package-title{
    text-align:left;
    padding-left: 40px;
    padding-right: 30px;
  }
  .package-title .accordion-arrow{
    display:block;
  }
  .selected > .package-title .accordion-arrow:after{
    transform:rotate(180deg);
  }
}
@media (hover: hover) and (pointer: fine) and (max-width: 760px) {
  .package-container:hover{
    top:auto;
    margin-bottom:20px;
    box-shadow:none;
  }
}
/* small mobile */
@media only screen and (max-width: 580px){
  .section-sub-nav{
    flex-wrap:wrap;
    justify-content:center;
  }
  .sub-nav-item-container{
    /* width:100%; */
  }
  .service-item-container{
    flex-wrap:wrap;
    justify-content:center;
  }
  .service-item-icon-container{
    margin:0 0 20px 0;
    /* margin-bottom:20px; */
  }
  .service-item-container h4{
    text-align: center;
    margin-bottom:10px;
  }
  .service-item-container h6{
    text-align:center;
    margin-bottom:20px;
  }
}