body, html {
    width      : 100%;
    height     : 100%;
    margin     : 0px;
    padding    : 0px;
    overflow-x : hidden;
}

.shop-card {
    min-height: 400px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgb(31 31 31 / 12%), 0 1px 4px rgb(31 31 31 / 12%);;
}

.shop-card:active,
.shop-card:hover {
    box-shadow: 0 3px 10px rgb(31 31 31 / 16%),0 3px 10px rgb(31 31 31 / 23%)!important;
}

.shop-card-image-container img {
    object-fit: cover;
    height:170px;
    width: 100%;
    border-radius: 6px 6px 0px 0px;
    object-position: top;
}

.shop-card-body {
    height: calc(100% - 170px);
    position: relative;
}

.shop-card-footer {
    height: 46px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    border-radius: 0px 0px 6px 6px;
}

.shop-card-footer.left-shape {
    opacity: 0.5;
    transform: rotateZ(4deg);
    outline: transparent solid 1px;
    backface-visibility: hidden;
    background-color: rgb(0, 85, 166);
}

.footer-shape {
    height: 50px;
    width: 180%;
    left: -40%;
    bottom: -16px;
    position: absolute;
}

.left-shape {
    opacity: 0.5;
    transform: rotateZ(4deg);
    outline: transparent solid 1px;
    backface-visibility: hidden;
    background-color: #1E2B41;
}

.right-shape {
    transform: rotateZ(-4deg);
    outline: transparent solid 1px;
    backface-visibility: hidden;
    background-color: #1E2B41;
}

.degree-format {
    position: absolute;
    left: 14px;
    bottom: 6px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    line-height: initial;
}

.shop-card-text-container {
    height: calc(100% - 46px);
    padding: 10px;
    position: relative;
}

.shop-card-text-container a {
    position: absolute;
    bottom: 10px;
}

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("https://assets.tapseries.io/Homepage/TAP_Girl.png");
    height: 100%;
    max-height: 700px;
    background-position : left;
    background-repeat   : no-repeat;
    background-size     : contain;
    position            : relative;
}

#logo  {
    height     : 40%;
    max-height : 250px;
    right      : 5%;
    top        : 5%;
    position   : absolute;
}

/* Place text in the middle of the image */
#homepage-title {
    position: absolute;
    color: black;
    font-weight: normal;
    max-width: 800px;
    left: 50%;
    top: 50%;
    transform: translate(-30%,-50%);
}

#homepage-title h1 {
    font-size: calc(4rem + .5vw);
}

#homepage-title p {
  font-size: calc(2rem + .5vw);
}

/****************************
 *     TESTIMONIALS
 ****************************/
#testimonies {
    width            : 100%;
    background-color : #1E2B41;
    color            : white;}

#testimonies .row {
  width        : 80%;
  margin-left  : auto;
  margin-right : auto;}

#testimonies-title {
  margin-top : 20px;
  width      : 100%;}

/**********************
 *   ACCREDITATIONS   *
 **********************/
#accreditations-container {
    background-color : #1E2B41;
    padding          : 15px 0px;
}

.accreditation-image {
    width : 50%;
}

#ansi-seal {
    float : right;
}

#jackson-county-seal {
    float : left;
}

#odh-text {
    color: white;
}

.info {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://assets.tapseries.io/Homepage/homepage-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: white;
    object-position: top;
}


/****************************
 *     OUR CLIENTS          *
 ****************************/
.carousel_image {
  width     : 100%;
  max-width : 300px;
  height    : auto;}

.carousel {
  margin : 20px auto;
  width  : 90%;}

@media (max-width: 1100px) {
    .hero-image {
        background-color: #111;
        border-top: 1px solid #4e4e4e;
        border-bottom: 1px solid #4e4e4e;
        background-image: linear-gradient(
            to bottom left, rgba(30, 43, 65, 0.54) 0,
            rgba(30, 43, 65, 0.54) 49.9%, transparent 50%),
            linear-gradient(to bottom right, rgba(228, 228, 228, 0.54) 0,

            rgba(161, 154, 154, 0.54) 49.9%, transparent 50%),
            linear-gradient(to top left, rgba(30, 43, 65, 0.54) 0%, rgba(30, 43, 65, 0.54) 49.3%,

            rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(201deg, #4e4e4e 0%, #333 46%, #111 90%);
        color: #fff;
        align-items: center;
        background-blend-mode: normal,difference,normal,normal;
        background-position: top right,top left,right bottom -1px,left top;
        background-repeat: no-repeat;
        background-size: 74% 99.83%,68% 91%,103.8% 20.26%,100% 99.8%;
        display: flex;
        height: 100%;
        max-height: 700px;
        justify-content: flex-start;
        margin: 0;
        position: relative;
    }

    #homepage-title {
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width: 400px;
    }

    #homepage-title h1 {
        color: white;
        font-size: calc(3rem + 0rem);
    }

    #logo {
        max-height: 150px;
    }

    .element-to-rotate {
        font-size: 1rem;
    }
}

.color-btn {
    background-color: rgb(211,211,179); /* Replace 'yourSkinColor' with the appropriate color code */
    /* You might also want to define other styles such as text color to ensure readability */
    color: #000; /* Example: Black text color */
    /* Add any other styles as needed */
    border-radius: 25px;
    border: 2px solid #000;
}

.color-btn:hover {
    background-color: rgb(28,44,68); /* Change to the desired blue color */
    color: white;
}

#about li {
    margin: 15px 0;
}