@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&display=swap');

/* General Body Styles */
body {
    margin: 0;
    padding: 0;
    font-family: "Faculty Glyphic", sans-serif;
    background-color: #0d1137;
}

/* Root Variables */
:root {
    --primary-color: #0C2340;
    --secondary-color: #fbd802;
    --hover-effect: rgba(255, 255, 255, 0.2);
}

/* Navbar Styling */
.navbar {
    background-color: var(--primary-color);
    padding: 0px;
    top: 0;
}

.navbar-brand {
    padding: 0px;
    margin: 0px 10px;
    opacity: 1;
    animation: slideRight 1.5s ease forwards;
}

@keyframes slideRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

/* Navbar Links */
.nav-link {
    padding: 0.5rem 1rem;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 100;
    animation: slideTop .5s ease forwards;
    opacity: 0;
    padding: 1px;
    margin: 0px 5px;
}

.navbar-toggler-icon {
    color: yellow;

}

@keyframes slideTop {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.nav-link:hover {
    color: var(--secondary-color);
}

/* Hover Animation for Navbar Links */
.navbar-nav li::after {
    content: '';
    display: block;
    height: 2px;
    background-color: var(--secondary-color);
    width: 0;
    transition: width 0.3s ease-in-out;
}

.navbar-nav li:hover::after {
    width: 100%;
}

/* Toggler Button Styling */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* Navbar Collapse Styling */
.collapse.navbar-collapse {
    background-color: var(--primary-color);
}

/* Navbar Dropdown Styling */
.dropdown-menu {
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%281,1,1,0.7%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    color: #f9a825;
    box-shadow: 1px 1px 2px 1px rgba(0, 255, 255, 1),
        0px 2px 2px 0px rgba(0, 0, 0, 0.11),
        0px 4px 4px 0px rgba(0, 0, 0, 0.11),
        0px 6px 8px 0px rgba(0, 0, 0, 0.11),
        0px 8px 16px 0px rgba(0, 0, 0, 0.11);
    
    border-radius: 5px;
}   

/* Responsive Adjustments */
@media (max-width: 768px) {
    .nav-link {
        font-size: 16px;
    }

}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 50px;
    }

    .nav-link {
        padding: 0.4rem 0.8rem;
    }

    .navbar-nav li:hover::after {
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .nav-link {
        font-size: 1rem;
    }

    .navbar-brand img {
        height: 80px;
    }
}

/* first section  */

#welcome {
    background-image: url('/images/Mainimg.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}

.content1 h1 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
    /* color:#EE204D; */
    color: #F2003C;
    text-shadow: 2px 2px 2px rgb(60, 4, 4);
    animation: fadeInRight 1s ease-in-out;
}

.content1 h5 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #FFD700;
    text-shadow: 2px 2px 2px rgb(27, 26, 1);
    animation: fadeInLeft 1s ease-in-out;

}


@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(200px);
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translatey(100px);
    }

    to {
        opacity: 1;
    }
}

/* first scetion                                                                  */
#about {
    background-color: #0d1137;
    color: #ffffff;
}

#about h2 {
    text-align: center;
    font-size: 2rem;
    color: #f9a825;
    margin-bottom: 5px;
    margin-top: 10px;
}

/* Button Styles */
.button-group {
    text-align: right;
}

.btn-primary {
    background-color: #034694;
    border: none;
}

.btn-primary:hover {
    background-color: #012d67;
}

/* Image Styling */
#about img {
    /* border: 5px solid #ffffff; */
    border-radius: 10px;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

/* Paragraph Styling */
#about p {
    font-size: 1rem;
    line-height: 1.7;
}

/* Highlighted Section */
#about h2 span {
    color: #f9a825;
}

.text-warning {
    margin: 5px 0px;
}

/* Contact Card */
.contact-card {
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
    max-width: 400px;
    width: 100%;
    box-shadow: 1px 4px 13px 1px rgba(0, 255, 255, 1),
        0px 2px 2px 0px rgba(0, 0, 0, 0.11),
        0px 4px 4px 0px rgba(0, 0, 0, 0.11),
        0px 6px 8px 0px rgba(0, 0, 0, 0.11),
        0px 8px 16px 0px rgba(0, 0, 0, 0.11);
}

.contact-card .icon {
    background-color: #f46c23;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    margin-right: 15px;
}
.icon a{
    color: white;
}

.contact-card .phone-number a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f46c23;
}

.contact-card small {
    color: #ccc;
    font-size: 0.9rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .contact-card {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    #about h1 {
        font-size: 1.8rem;
    }

    #about img {
        max-height: 600px;
    }

    .button-group {
        text-align: center;
    }

    .btn {
        margin: 5px 0;
    }

    .contact-card {
        margin: 20px auto;
        max-width: 100%;
        flex-direction: row;
        align-items: flex-start;
    }

    .contact-card .icon {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    #about h1 {
        font-size: 1.5rem;
    }


    #about p {
        /* margin-top: 5px; */
        font-size: 0.9rem;
    }

    #about img {
        max-height: 500px;
    }

    .contact-card {
        max-width: 100%;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .contact-card .icon {
        margin-bottom: 10px;
    }
}

/* secound section  */

/* theard section  */
#consultancy h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #f9a825;
}

#consultancy h5 {
    color: white;
}

#consultancy .card {
    border: none;
    /* border-radius: 8px; */
    transition: transform 0.2s ease-in-out;
}

#consultancy .card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

#consultancy .card img {
    object-fit: cover;
    height: auto;
    max-height: 400px;
    width: 100%;
    border-radius: 8px 8px 0 0;
}

#consultancy .card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f46c23;
}

.card-body {
    background-color: #00416A;
    color: white;
    /* border-radius: 8px 8px 0 0; */
}

@media (min-width: 1200px) {
    #consultancy {
        padding: 2rem;
    }

    #consultancy .card img {
        max-height: 500px;
    }
}

@media (max-width: 992px) {
    #consultancy h2 {
        font-size: 1.8rem;
    }

    #consultancy .card img {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    #consultancy h2 {
        font-size: 1.5rem;
    }

    #consultancy .card img {
        max-height: 250px;
    }
}

@media (max-width: 576px) {
    #consultancy h2 {
        font-size: 1.5rem;
    }

    #consultancy .card img {
        max-height: 300px;
    }

    #consultancy .card-title {
        font-size: 18px;
    }
}

/* theard section  */

/* fourth section  */
#Certificate {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

/* Header styles */
#Certificate h2 {
    color: #f9a825;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Image container styles */
.image-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

/* Individual image div styles */
#carousel1,
#carousel2 {
    flex: 1 1 45%;
    max-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #f0f0f0;
    padding: 10px;
}

#carousel1 img,
#carousel2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive styles */
@media (max-width: 992px) {
    #Certificate h2 {
        font-size: 1.8rem;
    }

    .image-container {
        flex-direction: column;
    }

    #carousel1,
    #carousel2 {
        max-width: 100%;

    }
}

@media (max-width: 576px) {
    #Certificate h2 {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .image-container {
        flex-direction: column;
    }

    #carousel1,
    #carousel2 {
        max-width: 100%;
    }
}



/* fourth section  */

/* Section Heading */
#payment h2 {
    font-size: 2rem;
    color: #f9a825;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
}

.payment-options li span {
    color: #f46c23;
}

/* Online Payment Box */
.online-payment {
    background-color: #00416A;
    width: 100%;
    max-width: 500px;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 4px 13px 1px rgba(0, 255, 255, 1),
        0px 2px 2px 0px rgba(0, 0, 0, 0.11),
        0px 4px 4px 0px rgba(0, 0, 0, 0.11),
        0px 6px 8px 0px rgba(0, 0, 0, 0.11),
        0px 8px 16px 0px rgba(0, 0, 0, 0.11);

}

.reservation {
    background-color: #00416A;
    width: 100%;
    max-width: 500px;
    color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 1px 4px 13px 1px rgba(0, 255, 255, 1),
        0px 2px 2px 0px rgba(0, 0, 0, 0.11),
        0px 4px 4px 0px rgba(0, 0, 0, 0.11),
        0px 6px 8px 0px rgba(0, 0, 0, 0.11),
        0px 8px 16px 0px rgba(0, 0, 0, 0.11);
}

.reservation p {
    padding: 5px 5px;
    margin-bottom: 10px;
}
.reservation a{
    color: white;
}

.reservation i {
    font-size: 30px;
    padding: 0px 10px;
    color: #f46c23;
}

/* Payment Details Styling */
.payment-details {
    font-size: 1rem;
    margin-bottom: 15px;
}

.payment-details span {
    color: #f46c23;
    font-weight: 1000;
    font-size: 1.1rem;
}

/* Highlighted Text Styling */
.highlight {
    color: #f46c23;
    font-weight: bold;
    font-size: 1.1rem;
}

/* List Items */
.list-unstyled li {
    color: white;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive Adjustments */
@media (min-width: 1200px) {
    #payment {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .payment-options {
        flex: 1;
        margin-right: 20px;
    }

    .payment-details-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    #payment h2 {
        font-size: 1.8rem;
    }

    .online-payment {
        width: 100%;
    }
}

@media (max-width: 768px) {

    #payment h2 {
        font-size: 1.6rem;
    }

    .payment-details {
        font-size: 0.95rem;
    }

    .highlight {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {

    .online-payment {
        padding: 10px;
        font-size: 0.9rem;
    }

    .payment-details p {
        margin-bottom: 10px;
    }

    .reservation i {
        font-size: 25px;
        padding: 0px 10px;
        color: #f46c23;
    }

    #payment h2 {
        margin-bottom: 5px;
    }

}

/* footer section  */

.footer {
    background-color: var(--primary-color);
}

.footer h5 {
    font-size: 1.2rem;
    border-bottom: 2px solid #f46c23;
    display: inline-block;
    padding-bottom: 5px;
}

.footer p,
.footer a {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer a:hover {
    color: #f46c23;
    text-decoration: underline;
}

.footer img {
    max-width: 100%;
    height: auto;
}

.footer hr {
    margin: 20px 0;
}

/* Section Styling */
.follow-section {
    border-radius: 10px;
    background-color: #00416A;
    color: #f46c23;
    box-shadow: 1px 4px 13px 1px rgba(0, 255, 255, 1),
        0px 2px 2px 0px rgba(0, 0, 0, 0.11),
        0px 4px 4px 0px rgba(0, 0, 0, 0.11),
        0px 6px 8px 0px rgba(0, 0, 0, 0.11),
        0px 8px 16px 0px rgba(0, 0, 0, 0.11);
}

.follow-section p {
    margin-bottom: 10px !important;

}

.follow-section .follow-text {
    font-size: 1.2rem;
    text-transform: lowercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons a {
    color: #00FFFF;
}

.social-link {
    font-size: 1.8rem;
    color: #ad8965;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.3s ease;
}

.social-link:hover {
    transform: scale(1.2);
    color: #ffffff;
}