/* Color pallet  */
/* Indigo dye:      003D58
Lapis Lazuli:       30638E
Background:         F5F5F5
Caribbean Current:  00798C
Amaranth red:       D1495B
hunyadi yellow:     EDAE49 
*/


/* General styles  */
body {
    background-color: #f5f5f5;
    font-family: 'Bree Serif', serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.1875rem;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;

}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6875rem;

}

h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3125rem;
    /* was 21px */
}

h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

/* Body text styles */
.b1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: lighter;
}

.b2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
}

.b3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: lighter;

}

.b4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: lighter;
    color: #ffffff;
}

.b5 {
    font-size: 1.2rem;
    /* font-weight: lighter; */
}

p {
    font-size: 1rem;
    font-weight: lighter;
}


.italic {
    font-style: italic;
    font-weight: normal;
    font-size: smaller;
}

.title {
    font-size: 1.2rem;
    /* font-weight: bold; */
    color: #30638E;
}

.bg {
    background-color: #f5f5f5;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;

    }

    h4 {
        font-size: 1.25rem;

    }

    h5 {
        font-size: 1rem;

    }

    h6 {
        font-size: 0.875rem;
    }

    .b1,
    .b2,
    .b3,
    p {
        font-size: 1.0rem;
    }
}

/* Navigation bar styles  */
.nav-wrapper {
    background-color: white;

}

.nav-wrapper .brand-logo img {
    height: 50px;
    padding: 1px;
    vertical-align: middle;

}

.nav-wrapper a {
    color: #30638E;
    font-size: 0.9rem;
    /* margin-left: -5px;
    margin-right: -5px; */
}

.nav-wrapper a:hover {
    color: #003D58;
    font-weight: normal;
    background-color: #f5f5f5;
}


.nav-wrapper a.active {
    color: #003D58;
    font-weight: bold;
    background-color: #f5f5f5;
}

.nav-wrapper ul li a {
    text-transform: uppercase;
}

.nav-wrapper .material-icons {
    margin-right: 5px;
    padding-right: 5px;/
}

@media only screen and (max-width: 600px) {
    .nav-wrapper .material-icons {
        margin-right: 3px;

    }
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;

}


#languageDropdown {
    font-size: 1rem;
}

/* style the dropdown arrow */
#languageDropdown~.select-dropdown {
    font-size: 1rem;
}

/* Adjust the margin of the arrow in the LANGUAGE dropdown */
.nav-wrapper i,
.nav-wrapper [class^="material-icons"],
.nav-wrapper [class*="material-icons"],
.nav-wrapper i.material-icons {
    font-size: 24px;
    height: 25px;
    line-height: 65px;
    margin-left: 3px;
    margin-right: -15px;
    margin-top: 2px;
    color: #252525;
}

/* LANGUAGES part  */
.select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ffffff;
    outline: none;
    height: 3rem;
    /* Adjust the height as needed */
    line-height: 3rem;
    /* Adjust the line height as needed */
    width: 100%;
    font-size: 1rem;
    /* Adjust the font size as needed */
    margin: 0 0 8px 0;
    margin-top: 9px;
    padding: 0;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
}

.select-wrapper {
    position: relative;
    margin: 0 0 8px 0;
    padding: 0;
}

.select-wrapper .caret {
    position: absolute;
    color: #003D58;
    right: 28px;
    top: 65%;
    transform: translateY(-50%);
}

/* Parallax Styles  */
.move {
    margin-top: 1.875rem;
}

.parallax-container {
    min-height: 270px;
    height: auto;
}

.icon-camera {
    color: rgb(30, 169, 123);
}

.avatar {
    width: 4rem;
    height: auto;
    border-radius: 50%;

}


.parallax-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgb(0, 0, 0);
    /* Text color */
    font-size: 2.5rem;
    font-weight: lighter;
}

.text-lighter {
    font-weight: lighter;
}

/* Ensure Responsive Images */
.slider .slides img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: block;
}

.slider {
    width: 100%;
}

.carousel-text {
    font-size: 1.8rem;
    margin-top: -1rem;
    /* padding-top: 10px; */
}

@media only screen and (max-width: 600px) {
    .carousel-text {
        padding-top: 5rem;
        font-weight: 300;
        font-size: 1.5rem;

        /* Smaller size for mobile screens */
    }
}

.read-more-btn {
    margin-top: 1rem;
    /* margin-bottom: 1rem; */
    color: white;
    background-color: #003D58;
}

.btn-floating {
    background-color: #30638E;
}

.read-more-btn:hover {
    background-color: #30638E;
    color: white;
}


.fcards2 {
    margin-top: 2rem;
    padding-bottom: 1rem;
    padding-top: 0.1rem;
    background-color: #ffffff;
}

.fcards3 {
    margin-top: 2rem;
    padding-bottom: 1rem;
    padding-top: 0.1rem;
    background-color: #f5f5f5;
}

.margin-top-30 {
    /* margin-top: 30px; */
    padding-top: 20px;
    /* margin-top: 3rem; */
}

.padding-top-2 {
    /* margin-top: 30px; */
    padding-top: 2rem;
    /* margin-top: 3rem; */
}

.valign {
    padding: 30px;
}

.padding-left {
    padding-left: 30px;
    margin-bottom: 30px;
}

.round-image {
    border-radius: 50%;
    max-height: 250px;
    max-width: 250px;
    object-fit: cover;
    /* padding: 20rem; */
}

.round-image2 {
    border-radius: 1%;
    max-height: 350px;
    max-width: 350px;
    object-fit: cover;
    /* padding: 20rem; */
}

.no-shadow-bg-border {
    box-shadow: none !important;
    /* Removes the shadow */
    background: transparent !important;
    /* Makes the background transparent */
    border: none !important;
    /* Removes the border */
}

.customers {
    width: 100%;
    padding-top: 0.1rem;
    background-color: #ffffff;
}


#prev,
#next {
    cursor: pointer;
}

/* Center the "Know More" button */
.caption {
    position: relative;
}

.centered-button {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}



/* Styles for mobile view (small screens) */
@media (max-width: 600px) {

    .footer-one .col.l6.s12.flex {
        justify-content: unset;
    }

    .footer-icon {
        margin: 5px 0;
    }
}

/* Custom styling for the table */
table.responsive-table {
    border: none;
    border-collapse: collapse;
    /* Collapse cell borders */
    width: 100%;
    /* Make the table full-width within its container */
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #d4d4d4;
    font-weight: lighter;
}

/* Styling for table header row */
table.responsive-table thead {
    font-weight: lighter !important;
}

/* Styling for table header cells */
table.responsive-table th {
    text-align: left;
    padding: 10px;
}


/* Styling for table body cells */
table.responsive-table td {
    padding: 10px;
    font-weight: 400;
}

.slider {
    position: relative;
}

.slider-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    z-index: 2;
}

.slider-center i {
    font-size: 36px;
    cursor: pointer;
    z-index: 3;

}

.slider .indicators {
    position: absolute;
    bottom: 50px;
    z-index: 2;

}

@media screen and (max-width: 600px) {
    .slider .indicators {
        display: none;
    }
}

/* Prev & Next icons */
.slider-center .material-icons {
    color: #cacaca;
    font-size: 3rem;
}

/* CSS for mobile screens */
@media only screen and (max-width: 600px) {
    .customer-logo {
        width: 40%;
        height: auto;
        margin: 0 auto;
        padding-bottom: 1rem;
    }
}

/* CSS for tablet screens */
@media only screen and (min-width: 601px) {
    .customer-logo {
        width: 80%;
        height: auto;
    }
}

.schedule-btn {
    background-color: #30638E;
    color: white !important;
    font-size: 0.8rem !important;
}

.schedule-btn:hover,
.schedule-btn:active,
.schedule-btn a:hover,
.schedule-btn a:active {
    font-size: 0.8rem !important;
    color: #003D58 !important;

}

.page-title {
    margin-top: 0.5rem;
    font-size: 2.1rem;

}

@media only screen and (max-width: 600px) {
    .we-work-with-title {
        margin-top: -10px;

    }
}

.about-row .card-image {
    height: auto;

}


.white-bg {
    padding-bottom: 1rem;
    padding-top: 2rem;
    background-color: #ffffff;
}

/* Footer Styles */
/* Ensure the footer sticks to the bottom */
.footer {
    /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #003D5B;
    color: white;
}

/* Footer Styles  */
.footer-one {

    background-color: #30638E;
    padding-top: 1.875rem;
    padding-bottom: 0.575rem;
}

.footer-two {

    background-color: #003D5B;
    padding-top: 0.4rem;
    border-top: 1px solid white;
    margin-bottom: -0.8rem;
}

.footer-logo {
    width: 8rem;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.footer-icon {
    width: 3rem;
    padding: 5px;
}

.footer-one .col.l6.s12.flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-icon {
    margin-left: 10px;
}

/* Paddings  */
.padding-l-r {
    padding: 1rem 2rem;
    margin-bottom: -1rem;
}


.btn-rectangle {
    border-radius: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
}

/* mobile view menu correction  */
@media only screen and (max-width: 992px) {
    .sidenav {
        padding-top: 60px;

    }
}

/* reducing the distance between the icon and the text  */
.sidenav li a .material-icons.left {
    margin-right: 5px;
    padding-right: 15px;
}

sub.required {
    color: red;
    vertical-align: top;
    position: relative;
}

.required-info {
    color: red;
    font-weight: smaller;
    margin-left: 0.8rem;
}

.input-field {
    margin-bottom: -20px;
}

.icon-padding {
    padding-right: 5px;
}

/* Custom styling for the language selector dropdown */
.dropdown-content li>a,
.dropdown-content li>span {
    color: #30638E;
    font-size: 0.8rem;
}

/* Hover and active styles */
.dropdown-content li>a:hover,
.dropdown-content li>span:hover,
.dropdown-content li>a.active,
.dropdown-content li>span.active {
    background-color: #f5f5f5;
    color: #003D58;
}

/* Styling for the language dropdown trigger */
.dropdown-trigger {
    color: #30638E;
    font-size: 1rem;

}

/* Adjust the caret icon color */
.dropdown-content li>a,
.dropdown-content li>span,
.dropdown-content li>a.active,
.dropdown-content li>span.active,
.dropdown-trigger i {
    color: #30638E;
}

/* Styling for the language dropdown button */
.dropdown-content li>button {
    color: #30638E;
    font-size: 0.9rem;
}

/* Background color on hover for the dropdown button */
.dropdown-content li>button:hover {
    background-color: #f5f5f5;
    color: #003D58;
}

/* Active styles for the dropdown button */
.dropdown-content li>button.active {
    background-color: #f5f5f5;
    color: #003D58;
}

/* Remove the line under the select language dropdown */
.dropdown-content.select-dropdown {
    border-bottom: none;
    box-shadow: none;
}


/* Remove the default line under the select language dropdown */
.select-wrapper input.select-dropdown {
    border-bottom: none;
    box-shadow: none;
}

.lang {
    margin-top: 0.5rem;
    text-transform: uppercase;
    font-weight: light;
    font-size: smaller;
}

.lang option {
    text-transform: uppercase;
    font-weight: light;
    font-size: small;
}

.lang-placeholder {
    text-transform: uppercase;
    font-weight: light;
    font-size: small;
}

.lang-placeholder span {
    text-transform: uppercase;
    font-weight: light;
    font-size: small;
}

.mobile-lang {
    padding-left: 2.5rem;
    color: black;
}

.custom-image {
    height: auto;
    /* height: 200px; */
    object-fit: cover;
}

.hvr {
    color: #ffffff;
}

.hvr:hover {
    color: #EDAE49;
}


.container1 {
    display: flex;
    align-items: center;
    justify-content: center;

}

.icon-and-text {
    display: flex;
    align-items: center;
}

.icon1 {
    font-size: 2rem;
    margin-right: 10px;
}

.table-of-contents {
    font-family: 'Open Sans', sans-serif;
    /* padding: 2rem 0 0 0; */
    font-size: 1rem;
    font-weight: lighter;
    line-height: 1.5rem;

}

/* Custom style for Materialize CSS Scrollspy indicator */
.table-of-contents a {
    font-size: 1.2rem;
    font-weight: lighter;
    color: #003D5B;

}

.table-of-contents a.active {
    padding-left: 1rem;
    font-weight: normal;
    border-left: 3px solid #30638E;

}

.table-of-contents a:hover {
    padding-left: 1rem;
    font-weight: normal;
    color: #003D5B;
    border-left: 3px solid #30638E;
}

.mt {
    margin-top: -1.8rem;
}

.hide {
    display: none;
}


.card-header {
    display: flex;
    justify-content: space-between;
    /* align-items: flex-start; */
    align-items: center;
}

.card-title {
    flex-grow: 1;
}

.card-img {
    max-width: 20rem;
    height: auto;
    margin-left: 10px;

}

.divider {
    /* border-bottom: 1px solid #003D5B; */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.divide {
    /* border-bottom: 1px solid #003D5B; */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.margin-minus {
    margin-bottom: -1.8rem;
}

.push-up {
    margin-top: -2.5rem;

}

.menu-item {
    padding: 0.5rem 0;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-20 {
    margin-top: 20px;
}

.padding-top-50 {
    padding-top: 50px;

}

.padding-t-b {
    padding-top: 50px;
    padding-bottom: 50px;
}

.padding-top-1 {
    padding-top: 1rem;

}

.title-border {
    border-bottom: 1px solid #003D5B;
    padding-bottom: 1rem;
    font-weight: bold;
    width: 65%;
}

.padding-bottom-1 {
    padding-bottom: 1rem;
}

.pulse {
    z-index: 1001;
}


.fslider {
    position: relative;
    /* Changed from fixed to relative */
    width: 100%;
    height: 100vh;
    /* Full-screen height */
    z-index: 1;
    /* Ensure it's above other content but below fixed elements */
    top: 0;
}

/* Ensure the flex container (.row) within fcards stretches its children */
.fcards .row {
    display: flex;
    flex-wrap: wrap;
}

/* Optional: Ensure flex items (columns) stretch equally */
.fcards .col {
    display: flex;
    flex-direction: column;
}

/* Make the card stretch within the column */
.fcards .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Optional: Make card-content fill the available space, pushing actions (if any) to the bottom */
.fcards .card-content {
    flex-grow: 1;
}

/* #pauseButton {
    position: absolute;
    top: 90%;

    left: 50%;

    transform: translateX(-50%);
    z-index: 1000;

} */
#pauseButton {
    position: relative;
    top: 280px;
    /* Adjust as needed */
    z-index: 1001;
    /* Ensure it's above the navigation dots */
}

.darken-image {
    position: relative;
}

.darken-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Change the opacity here (0.5 is 50%) */
}


/* If you need any help with the code,
please let me know. I will be happy to help you. Thank you. shaheen@web2web.ca``` */