/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
   
}

body {
    background-color: #DCFCE7;
    background-image: url('https://raw.githubusercontent.com/piru72/AUST-BUDDY-WEB/master/Images/handshake%20(1)%202.png?token=GHSAT0AAAAAACCTNOV57KVSFQ7AI7NXHGSSZGE7HHA');
    background-repeat: repeat; /* Image will be repeated in both directions */
    background-size: 9rem;
    background-position: 20px 20px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

.nav {
    color: white;
}

.information-form {
    background-color: white;
}

.text-primary {
    color: #16A34A;
}

.btn-primary {
    background-color: #16A34A ;
}
.fw-bold {
    color: #16A34A;
}
.form-label {
    color: #16A34A;
}

.btn-primary:hover {
    background-color: #16A34A;
}

.btn-primary:active {
    background-color: #16A34A;
}
/* Remove default styles for anchor elements */
a.btn-primary {
    text-decoration: none;
}


@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900|Open Sans:400,600,800");

h1,
h2,
h3,
h4,
h5,
h6,
div,
input,
p,
a {
    font-family: "Open Sans";
    margin: 0px;
}

    a,
    a:hover,
    a:focus {
        color: inherit;
    }



.container-fluid,
.container {
    max-width: 1200px;
}

.card-container {
    padding: 100px 0px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}


.profile-card-2 {
    max-width: 300px;
    background-color: #fff;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
    background-position: center;
    overflow: hidden;
    position: relative;
    margin: 10px auto;
    cursor: pointer;
    border-radius: 10px;
}

    .profile-card-2 img {
        transition: all linear 0.25s;
    }

    .profile-card-2 .profile-name {
        position: absolute;
        left: 30px;
        bottom: 70px;
        font-size: 30px;
        color: #fff;
        text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
        font-weight: bold;
        transition: all linear 0.25s;
    }

    .profile-card-2 .profile-icons {
        position: absolute;
        bottom: 30px;
        right: 30px;
        color: #fff;
        transition: all linear 0.25s;
    }

    .profile-card-2 .profile-username {
        position: absolute;
        bottom: 50px;
        left: 30px;
        color: #fff;
        font-size: 13px;
        transition: all linear 0.25s;
    }

    .profile-card-2 .profile-icons .fa {
        margin: 5px;
    }

    .profile-card-2:hover img {
        filter: grayscale(100%);
    }

    .profile-card-2:hover .profile-name {
        bottom: 80px;
    }

    .profile-card-2:hover .profile-username {
        bottom: 60px;
    }

    .profile-card-2:hover .profile-icons {
        right: 40px;
    }


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

@media (min-width: 992px) {
    .rounded-lg-3 {
        border-radius: .3rem;
    }
}

.card-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 0 0 calc(33.3333% - 20px); /* Three cards in a row */
    margin: 10px;
    /* Add other styling for the card as needed */
}

/* Media query for responsiveness on smaller screens */
@media (max-width: 768px) {
    .card {
        flex: 0 0 calc(50% - 20px); /* Two cards in a row on smaller screens */
    }
}

.course-icon {
    width: 65%;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}

.course-card {
    padding: 1.5em .5em .5em;
    border-radius: 2em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}


/* Add styling for the border */
.form-outline {
    border: 2px solid #16A34A; /* Change the color and size as needed */
    padding: 1px; /* Optional: Add padding to create some space between the border and the content */
    margin-top:1rem;
}
.form-label {
    padding-top: 1rem;
}

/* Style for Extra Large Screen */
@media (max-width:3920px) {
    .btn-sq-responsive {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 200px !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 200px !important;
        font-size: 24px;
        margin: 1rem;
        text-align: center;
        overflow: hidden;
        white-space: pre-wrap; /* Prevents text wrapping */
    }
}

/* Style for Large Screen */
@media (max-width:991px) {
    .btn-sq-responsive {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 150px !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 150px !important;
        margin: 1rem;
        font-size: 18px;
        text-align: center;
        overflow: hidden;
        white-space: pre-wrap; /* Prevents text wrapping */
    }
}

/* Style for Medium Screen */
@media (max-width:767px) {
    .btn-sq-responsive {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 100px !important; /* whatever width you want for medium screen */
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100px !important; /* whatever height you want for medium screen */
        margin: 1rem;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        white-space: pre-wrap; /* Prevents text wrapping */
    }
}

/* Style for Small Screen */
@media (max-width:575px) {
    .btn-sq-responsive {
        width: 50px !important; /* whatever width you want for mobile screen */
        max-width: 100% !important;
        max-height: 100% !important;
        height: 50px !important; /* whatever height you want for mobile screen */
        font-size: 5px;
        padding: 10px;
        font-size: 7px;
        text-align: center;
        overflow: hidden;
        white-space: pre-wrap; /* Prevents text wrapping */
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.footer {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
}

/* Adjust the font size and line height for the footer */
.nav-item.nav-link {
    font-size: 16px;
    line-height: 1;
}

/* Override any padding within the footer */
.footer footer {
    padding: 0 !important;
}