﻿
/* Customize your styles here */
body {
    margin: 0; /* Reset margin */
    background-color: #f5f5f5;

}

.full-container {
    width: 100%;
}

.main-container {
    padding: 0px;
}
/* Adjust the navbar size */
.navbar-container {
    border-top: 2px solid #4a3d8dc2;
    margin: 0 auto;
    padding: 0px; /* Add padding for spacing */
}

.navbar {
    position: relative;
    min-height: 50px;
    border: 1px solid transparent;
}

.navbar-default {
    background-color: #f4f4f7;
    box-shadow: 0px 8px 5px #EEEEEE;
    border-color: #e7e7e7;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 1px;
}
/* Adjust logo size */
.navbar-brand {
    float: left;
    height: 80px;
    font-size: 18px;
    line-height: 20px;
    padding: 3px;
}

    /* Updated change: Display the logo image as a block and set its height to 100% */
    .navbar-brand > img {
        display: block;
        height: 100%;
        margin-top: 4px;
    }

/* Adjust navbar right */
.navbar-right {
    float: right !important;
    height: 80px;
    padding-top: 18px;
    margin-right: 0px;
}

.navbar-left {
    float: left !important;
    height: 80px;
    padding-top: 18px;
}

/* Add hover effect to the menu items */
.navbar-default .navbar-right > li > a:hover {
    background-color: #bb1212;
    color: #ffffff;
    border-radius: 5px;
}
/* Add hover effect to the menu items */
.navbar-default .navbar-right > li > a {
    background-color: #514688;
    color: #ffffff;
    border-radius: 5px;
    padding:10px;
}

/* Adjust the alignment of <i> elements in the navbar */
.navbar-left > li > i,
.navbar-right > li > i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0px; /* Adjusted margin */
    color: #514688;
}

/* Adjust the alignment of <a> elements in the navbar */
.navbar-left > li > a,
.navbar-right > li > a {
    display: inline-block;
    vertical-align: middle;
}

.navbar-default .navbar-left > li > a {
    color: #514688;
    font-size: 15px;
}
/* Maintain active color for specific link */
.custom-active-color.active > a,
.custom-active-color > a:focus {
    background-color: #8d9cd7 !important; /* Set the active background color */
    color: #ffffff !important; /* Set the active text color */
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #a9a6c8;
}
/* Add the media query for smaller mobile devices */
@media (max-width: 479px) {
 
    .navbar-collapse {
        padding-left: 20px;
        border-top: 1px solid #8d9cd7;
        box-shadow: 0px 8px 5px #EEEEEE;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 1px;
        background-color: #f3f3f6;
    }

    .navbar-toggle {
        position: relative;
        padding: 9px 10px;
        margin-top: 8px;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .navbar-brand {
        float: left;
        height: 60px;
        font-size: 16px;
        line-height: 18px;
    }
}


/* Add the media query for smaller mobile devices */
@media (max-width: 479px) {
    ul .navbar-nav.navbar-right {
        float: left !important;
        margin-top: 40px; /* Increased margin-top value */
    }

    .navbar-collapse {
        padding-left: 20px;
        border-top: 1px solid #8d9cd7;
        box-shadow: 0px 8px 5px #EEEEEE;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 20px;
        background-color: #f3f3f6;
    }

    .navbar-toggle {
        position: relative;
        padding: 9px 10px;
        margin-top: 8px;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .navbar-brand {
        float: left;
        height: 60px;
        font-size: 16px;
        line-height: 18px;
    }
}

/* Add the media query for larger mobile devices */
@media (min-width: 480px) and (max-width: 991px) {
    ul.navbar-nav.navbar-right {
        float: left !important;
        margin-top: 30px;
    }

    .navbar-collapse {
        padding-left: 25px;
        border-top: 1px solid #8d9cd7;
        box-shadow: 0px 8px 5px #EEEEEE;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 20px;
        background-color: #f3f3f6;
    }

    .navbar-toggle {
        position: relative;
        padding: 9px 10px;
        margin-top: 8px;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .navbar-brand {
        float: left;
        height: 70px;
        font-size: 18px;
        line-height: 20px;
    }
}

/* Add the media query for smaller mobile devices */
@media (max-width: 479px) {
    /* Adjust styles for smaller devices */
    .full-container,
    .main-container,
    .services-box,
    .footer {
        width: 100%;
        padding: 15px; /* Add padding for spacing */
    }

    .service-image {
        max-width: 100%; /* Adjust image width */
        height: auto;
    }
}

/* Add the media query for larger mobile devices */
@media (min-width: 480px) and (max-width: 991px) {
    /* Adjust styles for medium-sized devices */
    .full-container,
    .main-container,
    .services-box,
    .footer {
        width: 100%;
        padding: 20px; /* Add padding for spacing */
    }

    .service-image {
        max-width: 100%; /* Adjust image width */
        height: auto;
    }
}


/* Add style to Slider-Home */
.Slider-Home {
    position: relative; /* Add positioning */
    text-align: center;
    color: #fff;
    height: auto;
    width:100%;
    margin-top: 2px;
    margin-bottom:20px;
}
.Slider-Home img {
    width: 100%;
    height: auto;
 }
.carousel-control.left {
    background-image: linear-gradient(to right,rgb(195 198 216 / 50%) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-control.right {
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgb(214 214 223) 100%);
}

.carousel-indicators .active {
    background-color: #5f368f;
}
.carousel-indicators li {
    border: 1px solid #b383cd;
}
/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
    .Slider-Home img {
        height: auto;
        max-width: 100%;
    
    }
    .Slider-Home {
        height: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}


.container-services {
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
}
/* Adjust the new section styles */
.HeaderOurServices {
    padding: 10px 0;
    text-align: center;
    background-color: #f9f9f9;
    margin-bottom: 15px;
    box-shadow: 0px 2px 2px #4a3d8dc2;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
}

    .HeaderOurServices h2 {
        margin: 0;
        font-size: 35px;
        font-weight: 900;
        text-align: center;
        color: #514688;
    }

/* Add hover effect to the .services-box */
.services-box {
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    padding-bottom: 15px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

/* Apply the hover effect */
.services-box:hover {
        transform: translateY(-5px); /* Move the box upwards on hover */
        box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
 }
/* Adjust styles for smaller devices */
.services-box {
    margin-bottom: 10px;
}
.service-title {
    margin-bottom: 10px;
    background-color: #ebebf7;
    border-bottom: 1px solid #d5d6e0;
    padding-top: 1px;
    padding-bottom: 10px;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
}

    .service-title a {
        color: #514688;
        text-decoration: none;
    }


.service-image {
    width: 95%;
    height: auto;
    border-radius: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 1px 1px #e3e3e3;
    margin-left:10px;
    margin-right:10px;
}


/* About Us Section Styles */

.lineseparator {
    padding: 5px 0;
    /*border: solid 1px #f8f8f8;*/
    box-shadow: 0px 2px 2px #e6e4ef;
    border-radius: 1px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
    margin-top: 5px;
    margin-bottom: 8px;
}

.about-us-container {
    padding: 15px;
    margin-top: 25px;
    padding-bottom: 0px;
    max-width: 100%;
    margin-bottom:25px;
}

/* Adjust the new section styles */
.HeaderAboutUs {
    padding: 10px 0;
    text-align: center;
    background-color: #f9f9f9;
    margin-bottom: 15px;
    box-shadow: 0px 2px 2px #4a3d8dc2;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
}

.HeaderAboutUs h2 {
        margin: 0;
        font-size: 35px;
        font-weight: 900;
        text-align: center;
        color: #514688;
  }

/* Add hover effect to the .services-box */
.aboutus-box {
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    padding-bottom: 15px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

    /* Apply the hover effect */
    .aboutus-box:hover {
        transform: translateY(-5px); /* Move the box upwards on hover */
        box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
    }
/* Adjust styles for smaller devices */
.aboutus-box {
    margin-bottom: 10px;
}

.aboutus-title {
    margin-bottom: 10px;
    background-color: #ebebf7;
    border-bottom: 1px solid #d5d6e0;
    padding-top: 1px;
    padding-bottom: 10px;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, rgb(204 196 216 / 12%), #f2f2f2 15%, rgb(201 198 211 / 15%) 20%);
}

 .aboutus-title a {
        color: #514688;
        text-decoration: revert;
    }
.aboutus-box p {
    font-family: Arial, sans-serif; /* Change the font family as desired */
    font-size: 16px; /* Change the font size as desired */
    line-height: 1.5; /* Adjust line height as desired */
    color: #333; /* Change text color as desired */
    padding-right: 10px;
    padding-left: 10px;
    text-align: justify; /* Justify the text */
}

/* Team Section Styles */

.HeaderOurTeam {
    padding: 10px 0;
    text-align: center;
    background-color: #f9f9f9;
    margin-bottom: 20px;
    margin-top: 20px;
    box-shadow: 0px 2px 2px #4a3d8dc2;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.0001), #f5f5f5 15%, rgba(255,255,255,.15) 20%);
}

    .HeaderOurTeam h2 {
        margin: 0;
        font-size: 35px;
        font-weight: 900;
        text-align: center;
        color: #514688;
    }

.our-team-section {
    background-color: #f6f6fa;
    margin-top: 20px;
}

.team-card {
    background-color: #f3f3f6;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

    .team-card img {
        border-radius: 50%;
        width: 300px;
        height: 300px;
        background-size: cover;
        background-repeat: no-repeat;
        box-shadow: 0px 2px 20px 10px #51468866;
    }

    .team-card h3 {
        margin-top: 10px;
        font-size: 24px;
    }

    .team-card h4 {
        color: #777;
        font-size: 18px;
        margin-top: 5px;
    }

.icone-Info {
    margin-bottom: 20px;
}

.icone-Info a:hover {
        text-decoration: none;
}
.icone-Info a:active{
    text-decoration: none;
 }
.contact-icon {
    font-size: 30px;
    color: #9695d2;
    padding-left:5px;
    padding-right:5px;
}

.description {
    margin-top: 15px;
    margin-bottom: 0px;
    display: none;
    text-align:left;
}
.description p {
        font-family: Arial, sans-serif; 
        font-size: 16px;
        color: #333;
        text-align: justify;
    }
/* Add a hover effect */
.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
}


/* Add style to Slider-Home */
.googleMap {
    position: relative; /* Add positioning */
    margin-top: 15px;
}

.googleMap img {
        width: 100%;
        height: 700px;
    }
/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media (max-width: 768px) {
    .googleMap img {
        height: auto;
        width: 100%;
    }

    .googleMap {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}
@media (max-width: 479px) {
    .googleMap img {
        height: auto;
        width: 100%;
    }

    .googleMap {
        height: auto;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}
    .footer {
        margin-top: 0px;
        border-radius: 5px;
        padding-bottom: 10px;
        text-align: center;
        /*background: repeating-linear-gradient(45deg, rgb(180 171 208 / 0%), #f5f5f5 15%, rgb(227 227 227 / 15%) 20%);*/
        /* border: 1px solid rgb(234 236 248 / 15%); */
        box-shadow: 0px 0px 60px #877eb1;
        margin-top: 30px;
        height: auto;
    }

    .container-footer {
        border-top: 1px solid #EEEEEE;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .navbar-default-footer {
        padding-top: 18px;
        border: 0px;
        box-shadow: 0px 0px 0px rgb(0, 0, 0, 0.00);
        background: repeating-linear-gradient(45deg, rgb(180 171 208 / 0%), #f5f5f5 15%, rgb(227 227 227 / 15%) 20%);
    }

    .navbar-left-footer {
        float: left !important;
        height: 60px;
        padding-top: 1px;
    }

        .navbar-left-footer > li > a {
            color: #332d92;
            font-size: 15px;
            font-weight: 600;
        }

    .n
    .socailIcon-footer {
        margin-top: 8px;
    }

    .m-1 {
        border: 0px;
        color: #fff;
    }

    .btnfooter {
        border: 0px;
        color: #332d92;
    }

    .copyrith {
        padding: 15px;
        padding-bottom: 0px;
        margin-top: 1px;
        border-radius: 1px;
        border-top: 1px dotted #ad97d5;
    }

    .navbar-left-footer i {
        font-size: x-large;
    }

    .socailIcon-footer i {
        font-size: x-large;
    }
    /* Media query for screens smaller than 768px (typical mobile screens) */
    @media (max-width: 768px) {
        /* Adjust the footer container width */
        .footer.container.full-container {
            width: 100%;
        }

        Center the social icons
        .socailIcon-footer {
            text-align: center;
        }

        Remove the left padding from the contact information
        .navbar-left-footer {
            padding-left: 0;
        }

        .socailIcon-footer {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 0px;
        }

        .navbar-default .navbar-collapse, .navbar-default .navbar-form {
            padding-bottom: 20px;
            margin-bottom: 60px;
        }
    }


