:root {
    --nav-height: 100px;
}


@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {

    /* FF */
    0% {
        opacity: 0;
        -moz-transform: translateX(50px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-ms-keyframes fadeInRight {

    /* IE10 */
    0% {
        opacity: 0;
        -ms-transform: translateX(50px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

@-o-keyframes fadeInRight {

    /* Opera */
    0% {
        opacity: 0;
        -o-transform: translateX(50px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@font-face {
    font-family: "Marcellus";
    src: url('../assets/fonts/Marcellus/Marcellus-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Oswald";
    src: url('../assets/fonts/Oswald/static/Oswald-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "Shadows Into Light";
    src: url('../assets/fonts/Shadows_Into_Light/ShadowsIntoLight-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Kalam";
    src: url('../assets/fonts/Kalam/Kalam-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Britannic";
    src: url('../assets/fonts/Britannic/Britannic.ttf') format('truetype');
}

@font-face {
    font-family: "Copperplate";
    src: url('../assets/fonts/Copperplate/Copperplate/Copperplate.ttf') format('truetype');
}

@font-face {
    font-family: "Segoe-Print";
    src: url('../assets/fonts/segoe-print/segoepr.ttf') format('truetype');
}

@font-face {
    font-family: "Century Gothic";
    src: url('../assets/fonts/century-gothic/Century\ Gothic.ttf') format('truetype');
}

@font-face {
    font-family: "Birthstone";
    src: url('../assets/fonts/Birthstone/Birthstone-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Arima";
    src: url('../assets/fonts/Arima/Arima-VariableFont_wght.ttf') format('truetype');
}

body {
    font-family: "Arima";
}


.hero-title {
    font-size: 3rem;
    font-family: "Marcellus";
    font-weight: 200;
}


.hero-subtitle {
    font-family: 'Shadows Into Light';
    font-size: 3rem;
    font-weight: bold;
}

.subtitle {
    font-family: 'Birthstone';
    font-size: 3rem;
    font-weight: bold;
}

.banner-subtitle {
    font-size: 1rem;
}

.shadow-text {
    text-shadow: -1px -1px #94248c;
}

.hero-container {
    height: calc(100vh - var(--nav-height) + 1px) !important;
    background: linear-gradient(0deg, rgba(41, 41, 41, 0.5), rgba(41, 41, 41, 0.5)), url("../assets/new_hero.jpg");
    background-size: cover;
    background-position: center; /* Centers the image */
}

.hero-img{
    width: 50%;
}

.hero-btn{
    /* width: 100%; */
    background-color: transparent !important;
    
}

.btn-transparent{
    background-color: transparent !important;
    color: #ffd700;
    border-color: #ffd700;

}

.btn-transparent:hover{
    color: #424242;
    border-color: #ffd700;
    background-color: #ffd700 !important;

}

.banner-container {
    height: 50vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../assets/about_us_hero.jpeg");
    background-size: cover;
    background-position: 90% center; /* Moves image slightly to the right */
}

.fade-in-right {
    -moz-animation: fadeInRight 1s ease-in;
    /* Firefox */
    -webkit-animation: fadeInRight 1s ease-in;
    /* Safari and Chrome */
    -ms-animation: fadeInRight 1s ease-in;
    /* IE10 */
    -o-animation: fadeInRight 1s ease-in;
    /* Opera */
    animation: fadeInRight 1s ease-in;
}

#test2 {
    /* font-family: "Britannic"; */
    /* font-family: "Copperplate"; */
    font-family: "Marcellus";
    /* font-family: "Oswald"; */
    /* font-family: "Segoe-Print"; */
    /* font-family: "Shadows Into Light"; */
    font-size: 50px;
    /* font-weight: 700; */
}

#test3 {
    /* font-family: "Britannic"; */
    /* font-family: "Copperplate"; */
    /* font-family: "Marcellus"; */
    font-family: "Oswald";
    /* font-family: "Segoe-Print"; */
    /* font-family: "Shadows Into Light"; */
    font-size: 50px;
    /* font-weight: 700; */
}


#test5 {
    /* font-family: "Britannic"; */
    /* font-family: "Copperplate"; */
    /* font-family: "Marcellus"; */
    /* font-family: "Oswald"; */
    /* font-family: "Segoe-Print"; */
    font-family: "Shadows Into Light";
    letter-spacing: 3px;
    font-size: 50px;
    /* font-weight: 700; */
}

.hideme {
    opacity: 0;
}

.bg-blue {
    background-color: #bbe8fa;
}

.bg-white {
    background-color: white;
}

.bg-white-transparent {
    background-color: rgba(255, 255, 255, 0.7)
}

.bg-navy{
    background-color: #222d4e;
}

.bg-navy-transparent{
    background-color: rgba(34, 45, 78, 0.7);
}

.bg-purple {
    background-color: #94248c;
    /* background-color: rgba(148, 36, 141, 0.8); */

}

.bg-green {
    background-color: #222d4e;

}

.nav-item {
    border-bottom: 1px solid transparent;
}

.nav-item .active {
    color: #ffd700 !important;
    /* text-decoration: underline; */
    border-bottom: 1px solid #ffd700;
}

.nav-link:hover {
    color: #ffd700 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
}



.text-white {
    color: white
}

.text-purple {
    color: #94248c
}

.text-blue{
    color: #222d4e
}

.text-yellow{
    color: #ffd700

}

.text-green {
    color: #222d4e
}

.btn {
    /* border-radius: 20px; */
    /* width: 40% */
    padding: 10px 20px
}

.btn-primary {
    background-color: #ffd700 !important;
    border-color: #ffd700 !important;
    color: #424242;

}

.btn-primary:hover {
    background-color: #f0cc00 !important;
    border-color: #f0cc00 !important;
    color: #424242;
}

.btn-primary:focus {
    background-color: #ffd700 !important;
    border-color: #ffd700 !important;
    color:#424242;
    outline: none;
    box-shadow: none
}

.circle-img {
    border-radius: 50%;
    width: 100%
}

.circle-img2 {
    border-radius: 50%;
    width: 300px
}

@media only screen and (max-width: 991px) {
    .circle-img {
        width: 30%
    }
}

@media only screen and (max-width: 700px) {
    .circle-img {
        width: 50%
    }
}

@media only screen and (max-width: 431px) {
    .circle-img {
        width: 60%
    }
}

p {
    font-size: 1em
}

.quote {
    font-family: 'Shadows Into Light';

}

#anchor {
    scroll-margin-top: 150px
}

.montserrat {
    font-family: 'Montserrat';
    font-size: 20px
}


.shadowsIntoLight {
    font-family: 'Shadows Into Light';
    font-size: 20px
}




.segoe {
    font-family: 'Segoe-Print';
    font-size: 20px
}

.century {
    font-family: 'Century Gothic';
    font-size: 20px
}

.kalam {
    font-family: 'Kalam';
    font-size: 20px
}

.book-col {
    width: 160px;
    padding: 0
}

.pricing-section {
    margin-bottom: 20px;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.pricing-table th, .pricing-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
.pricing-table th {
    background-color: #f4f4f4;
}

@media only screen and (max-width: 550px) {
    .book-col {
        width: 100%
    }
}

@media only screen and (max-width: 767px) {
    #footerBranding {
        justify-content: center !important;
    }

    #socialIcons {
        text-align: center !important;
        justify-content: center !important;
    }

    #twitter {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    #instagram {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    #facebook {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}

.default .form-group {
    margin-bottom: 0 !important;
}

.labelRow {
    padding-bottom: 0;
}

.default textarea.form-control {
    height: calc(1.5em + 0.75rem + 2px) !important;
}

.form-group .btn {
    margin-top: 10px;
    margin-bottom: 10px
}

.default .btn-primary:disabled {
    background-color: #94248c;
    border-color: #94248c;
    color: #fff;
}

.default .col-form-label{
    color: white !important;
}

    .image-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .image-box {
      flex: 1;
      min-width: calc(25% - 20px);
      margin: 10px;
    }
    .image-box img {
      width: 50%;
      height: auto;
    }
    @media (max-width: 768px) {
      .image-box {
        min-width: 100%;
      }
      .image-box img {
        width: 100%; /* Setting the width to 100% on mobile screens */
      }
    }