* {
    padding: 0;
    box-sizing: border-box;
    margin: 0;

}

body {
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*navigation styles*/

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #b12929;
    color: white;
}

#active {
    background-color: #ddd;
    color: #000;

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: relative;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .text-logo-container {
        display: none;
        height: 0;
        width: 0;
        background-image: none;

    }

    .welcome-container {
        display: block;
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .welcome-content p {
        display: block;
        text-align: center;
        font-size: 14px;
        margin: auto;
        width: auto;
        height: auto;
    }

}

/*text logo*/
.text-logo-container {
    background-image: url("../assets/images/IMG-20240709-WA0043.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    width: 100%;
    height: 40vh;
    margin: auto;
    padding: 0;
    text-align: center;
    align-items: center;
    gap: 10px;
}


/*main logo*/
.main-logo {
    display: block;
    width: 100%;
    height: 300px;
    align-items: center;
    margin: auto;
    padding: auto;

}

.main-logo div {
    margin: auto;
}

/*welcome-container*/
.welcome-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: auto;
    padding: 10px;
}

.welcome-content {
    width: auto;
    margin: 10px;
    padding: 10px;
}

/*carousel*/
.carousel-container {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    position: relative;
    width: 270px;
    height: 160px;
    overflow: hidden;
    background-color: #cdcdcd;
}

.carousel-item .slide-image {
    width: 270px;
    height: 160px;
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 270px;
    border: none;
    top: 0;
    left: 100%;
}

.carousel-item.active {
    left: 0;
    transition: all 0.3s ease-out;
}

.carousel-item div {
    height: 100%;
}


/*hero container*/
.highlight-container {
    animation: changeImage 18s linear infinite;
    width: 100%;
    background-position: center;
    background-size: cover;
    height: 40vh;
    align-items: center;
    border-radius: 4px;
    box-shadow: #333;

}

@keyframes changeImage {
    0% {
        background-image: url("../assets/images/IMG-20240709-WA0006.jpg");
    }

    25% {
        background-image: url("../assets/images/IMG-20240709-WA0004.jpg");
    }

    50% {
        background-image: url("../assets/images/IMG-20240709-WA0005.jpg");
    }

    100% {
        background-image: url("../assets/images/IMG-20240709-WA0012.jpg");
    }

}

/*centered div*/

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
}

.centered-content p {
    margin-bottom: 20px;
    padding: 30px;
    margin: 0;
    text-indent: 0;
    text-align: center;
    align-items: center;
}

.centered-content h1 {
    margin-bottom: 20px;
}

/*Home page slide show*/

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot_ {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot_:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/*Home page slide show* ends here/

  /*Services accordian*/
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.activee,
.accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.activee:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

/*end of Services accordian*/
/*Product Details*/
.main-container_box {
    background-color: #333;
    justify-content: center;
    align-items: center;
    display: flex;
    color: rgb(0, 0, 0);
}

.container {
    height: auto;
    width: 368px;
    background-color: rgb(236, 234, 234);
    border: 2px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    box-shadow: rgba(41, 40, 40, 0.2);
    gap: 30px;
    transition: transform 0.2s ease-in-out;
    margin: 3px;
}

.container_box {
    padding-top: 30px;
    padding-bottom: 40px;
    display: flex;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    flex-wrap: wrap;
    margin-top: 20px;
}

.container:hover {
    transform: scale(1.1);
}

.cardutility {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
}

.des {
    text-align: center;
    padding: 5px;
    margin: 1px;
    border-radius: 10px;
    text-justify: auto;
}

.spaceicon {
    gap: 10px;
}

.btnid {
    border-radius: 100%;
    height: 50px;
    width: 50px;
    position: relative;
}

.img {
    width: 340px;
    height: 230px;
    border-radius: 10px;
    border: 5px solid white;
}

.course-title {
    font-size: 25px;
}

.response {
    margin-left: 20px;
}

.explorer_link {
    border: 1px solid white;
    border-radius: 5px;
    margin: 2px 0 0 70px;
    background-color: aliceblue;
}

.link_a {
    color: rgb(0, 0, 0);
    text-decoration: none;
}

.ratings {
    padding-top: 20px;
}

@media only screen and (max-width: 376px) {
    .main-container_box {
        background-color: #333;
    }

    .container {
        height: fit-content;
        width: auto;
        border-radius: 5px;
        gap: 10px;
    }

    .img {
        width: 240px;
        height: 130px;
        border-radius: 10px;
        border: 5px solid white;
        margin-left: 25px;
    }

    .response {
        margin-left: 10px;
        display: none;
    }

    .ratings {
        margin: 5px 0 0 50px;
        padding: 3px;
    }

    .course-title {
        font-size: 10px;
    }
}

/*responsive carousel*/

.list {
    display: flex;
    gap: 8px;
    padding: 16px;

    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    background-color: white;
}

.item {
    flex-shrink: 0;
    width: auto;
    height: 40vh;
    background-color: rgb(255, 255, 255);
    scroll-snap-align: center;
    border-radius: 5px;
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    font-family: sans-serif;
    font-size: 64px;
    font-weight: bold;
}

.footer-container {
    padding: 0;
    margin: 0;
    width: 98vw;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;

}

ul {
    list-style: none;
}

a {
    text-decoration: unset;
}

a:hover {
    text-decoration: underline;
}

ul>li>a {
    color: #fff;
}

ul>li {
    line-height: 1.5em;
}

.footer {
    display: block;
    width: 100%;
    position: relative;
    background: black;
    padding: 150px 25px 50px 25px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.footer-start {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    width: 90%;
    margin: auto;
    padding: 80px 100px;
    background: #333;
    border-radius: 15px;
}

.start-learning {
    position: absolute;
    left: 0;
    right: 0;
    top: -150px;
}

.footer .inner {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 20px;
    max-width: 1180px;
    margin: auto;
    text-align: left;
}

.main-logo {
    position: relative;
    display: flex;
    align-items: center;
}

.main-logo .logo {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.main-logo .logo>img {
    display: block;
    width: 100%;
    min-width: 40px;
}

.logo-info {
    text-align: left;
    line-height: 20px;
}

.text {
    font-size: 17px;
    line-height: 17px;
    color: #fff;
    letter-spacing: .18em;
    font-weight: 600;
}

.copyright {
    color: #fff;
    font-size: 12px;
    line-height: 12px;
}

.footer .column {
    width: 100%;
    font-size: 14px;
    text-align: left;
}

.footer .column .column-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0.5em;
    color: #fff;
}

.footer .column .column-title:not(:first-child) {
    margin-top: 1em;
}

.illustration {
    left: 8%;
    position: absolute;
    top: -28px;
}

a.button {
    display: inline-flex;
    position: relative;
    height: 60px;
    margin-right: 20px;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    background: #fff;
    color: #705df2;
    border-radius: 36px;
    font-size: 16px;
    font-weight: 700;
    padding: 0 30px;
    text-decoration: unset;
    box-shadow: 0px 24px 74px rgb(60 0 189 / 20%);
}

.section-title {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
}

.section-sub-heading {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}

.section-sub-heading span {
    opacity: 0.6;
}

.section-sub-heading strong {
    font-weight: 600;
}

@media only screen and (max-width: 990px) and (min-width: 200px) {

    .footer .inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .start-learning {
        position: unset;
    }

    .footer-start {
        width: 100%;
        display: block;
        padding: 30px 20px;
        margin: 30px 0;
    }

    .section-title {
        font-size: 14px;
    }

    .section-sub-heading {
        font-size: 18px;
    }

    footer.footer {
        padding-top: 0;
    }

    a.button {
        height: 50px;
        margin-top: 10px;
    }

    .column.is-logo {
        order: 4;
    }
}

@media only screen and (max-width: 990px) {
    .footer .inner {
        display: block;
        /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    }

    .start-learning {
        position: unset;
    }

    .footer-start {
        width: 100%;
        display: block;
        padding: 30px 20px;
        margin: 30px 0;
    }

    .section-title {
        font-size: 14px;
    }

    .section-sub-heading {
        font-size: 18px;
    }

    footer.footer {
        padding-top: 0;
    }

    a.button {
        height: 50px;
        margin-top: 10px;
    }

    .main-logo {
        display: block;
    }
}

/*grid container*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 80%;
    align-items: center;
    text-align: center;
    margin: auto;
    padding: 30px;
}

.grid-item {
    background-color: rgb(238, 238, 238);
    border-radius: 8px;
    padding: 20px;
    height: auto;
    cursor: pointer;
}

.grid-item:hover {
    transform: scale(1.03);
    background-color: #a0051A;
}

@media only screen and (max-width: 600px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

/*Menus style*/
.menus-container {
    display: block;
    background-color: #ffffff;
    width: 80%;
    height: auto;
    margin: auto;
    padding: 30px;
}

.menus-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 90%;
    background-color: rgb(255, 255, 255);
    margin: auto;
    padding: 30px;

}


.menu {
    background-color: #a81d30;
    border-radius: 8px;
    padding: 20px;
    height: auto;
    cursor: pointer;
    align-items: center;
    text-align: left;
    color: white;
}

.menu:hover {
    transform: scale(1.03);
}

.menu-pictures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 90%;
    background-color: rgb(255, 255, 255);
    margin: auto;
    padding: 10px;
}

@media only screen and (max-width: 600px) {
    .menus-item {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;

    }

    .menu-pictures {
        display: grid;
        grid-template-columns: repeat(1, 1fr);

    }

    .menus-container {
        display: block;
        width: 100%;
    }

    #menu-1 {
        margin: 0;
        padding: 0;
    }
}


/*Ceo profile*/
.ceo-profile {
    animation: ceoimageChange 120s linear infinite;
    background-position: center;
    background-size: cover;
}

@keyframes ceoimageChange {
    0% {
        background-image: url("../assets/images/ceo1.jpg");
    }

    25% {
        background-image: url("../assets/images/ceo2.jpg");
    }

    50% {
        background-image: url("../assets/images/ceo3.jpg");
    }

    100% {
        background-image: url("../assets/images/ceo4.jpg");
    }

}

/*testimonial container*/

.testimonials-container {
    width: 80%;
    margin: 20px auto;
    background-color: #eee9ea;
    height: auto;
    border-radius: 8px;
}

.testimonial-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    border-bottom: #333 1px solid;
}

.comment-rating {
    display: block;
    width: 80%;
    padding: 30px;
    border-left: #333 2px solid;
}

.testimonial-prof {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 30px 80px;
}

/*contact page*/
.contact-container {
    width: 80%;
    margin: 20px auto;
    background-color: #ffffff;
    height: auto;
    border-radius: 8px;
}

/*faq container*/
.faq-container {
    width: 80%;
    margin: 20px auto;
    background-color: #ffffff;
    height: auto;
    border-radius: 8px;
}

/*Loader*/
/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #b12929;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#myDiv {
    display: block;
    text-align: center;
}

/*contact us styling*/
/* Style inputs */
input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Style the container/contact section */
.contact-container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}

/* Create two columns that float next to eachother */
.column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

    .column,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

/*ceo profie*/
.ceo-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
}

.title {
    color: grey;
    font-size: 18px;
}

button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

#ceo-cont {
    text-decoration: none;
    font-size: 22px;
    color: black;
}

button:hover,
a:hover {
    opacity: 0.7;
}

/*image gallery with services*/
div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsiveness {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsiveness {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsiveness {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*testimony page*/
.testimony-container {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}

/* Clear floats after containers */
.testimony-container::after {
    content: "";
    clear: both;
    display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.testimony-container img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
}

/* Increase the font-size of a span element */
.testimony-container span {
    font-size: 20px;
    margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
    .testimony-container {
        text-align: center;
    }

    .testimony-container img {
        margin: auto;
        float: none;
        display: block;
    }
}