@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/* custom.css */

/* CSS Variables */
:root {
    --primary-color: #22C3E9; /* Example primary color */
    --primary-color2: #1F9CB8; /* Example primary color */
    --secondary-color: #333; /* Example secondary color */
    --font-family: "Montserrat", sans-serif; /* Base font family */
    --font-family2: "Ubuntu", sans-serif; /* Base font family */
    --font-family3: "Familjen Grotesk", sans-serif;; /* Base font family */
    --yellow: #FFBD13;
    --blue: #4383FF;
    --blue-d-1: #3278FF;
    --light: #F5F5F5;
    --grey: #AAA;
    --white: #FFF;
    --shadow: 8px 8px 30px rgba(0,0,0,.05);
}
select {
    height: 100%;
}
/* end Review Form */
.form-label1{
  font-family: var(--font-family2);
  font-weight: 500;
  font-size: 18px;
  line-height: 27.58px;
}
.form-label2{
  font-family: var(--font-family2);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.28px;
  color: rgba(0, 0, 0, 0.67);
  padding-bottom: 10px;
}
/* Global Styles */
body {
    font-family: var(--font-family);
    color: var(--secondary-color);
    margin: 0;
    padding: 0;
}

/* Navbar Styles */
.navbar {
    background-color: #fff;
    padding: 10px;
}

.navbar-brand {
    color: #000;
    font-weight: bold;
    font-size: 24px;
}

.nav-link {
    color: #000;
    margin-right: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 21.94px;
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 24.38px;
}

.btn-primary:hover {
    background-color: var(--primary-color2);
    border-color: var(--primary-color2); /
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.m-2 {
    margin: 0.5rem;
}
/* Set the height of the carousel based on the viewport height */
.carousel-item {
    height: 100vh; /* Set height to 100% of the view height */
    position: relative; /* Required for positioning the overlay */
}

/* Make the image take up the full height of the carousel item */
.carousel-item img {
    height: 100%; /* Make the image fill the height of the carousel item */
    object-fit: cover; /* Make the image cover the space */
}
/* Overlay styles */
.carousel-caption {
    background: linear-gradient(to bottom, rgba(45, 53, 55, 0.75), rgba(5, 57, 69, 0.75));
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    padding: 1rem;

    /* Flexbox properties for centering content */
    display: flex;
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment (optional) */
}
.carousel-caption-body{
    width: 70%;
}
.banner-heading{
    font-family: var(--font-family2);
    font-weight: 500;
    font-size: 49px;
    line-height: 63.2px;
}
.banner-sub-heading{
    font-family: var(--font-family2);
    font-weight: 400;
    font-size: 20px;
    line-height: 22.98px;
    padding-top:15px;
    padding-bottom:15px;
}
.action-btn{
    font-family: var(--font-family2);
    font-weight: 500;
    font-size: 19px;
    line-height: 25.28px;
    padding: 10px 30px;
    border-radius: 12px;
}
/* Footer Styles */
footer {
    font-family: Arial, sans-serif;
    box-shadow: 0px -5px 5px -5px rgb(161 161 161 / 75%);
}

/* Upper Footer */
.upper-footer {
    background-color: #f8f9fa; /* Light background */
    /* Box shadow only on the top */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.upper-footer h5 {
    margin-bottom: 10px;
}

.footer-links a {
    color: #333;
    text-decoration: none;
    margin-right: 10px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Lower Footer */
.lower-footer {
    background-color: var(--primary-color); /* Primary background color */
    color: white;
}

.lower-footer div {
    padding: 5px;
    font-family: var(--font-family2);
    font-weight: 400;
    font-size: 16px;
    line-height: 16.09px;
}
.footer-logo{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 34.13px;
}
.footer-links a{
    font-family: var(--font-family2);
    font-weight: 400;
    font-size: 16px;
    line-height: 20.68px;
    margin-left: 15px;
    margin-right: 15px;
}

.follow-heading {
    font-family: var(--font-family2);
    font-weight: 500;
    font-size: 18px;
    line-height: 20.68px;
}
.footer-follows-link img{
    height:29px;
    width: 29px;
    margin: 5px;
}



/* Hero Banner */
.hero-banner {
    position: relative;
    height: 50vh; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
}

/* Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity as needed */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

/* Heading */
.hero-heading {
    color: white;
    font-family: var(--font-family2);
    font-weight: 500;
    font-size: 35px;
    line-height: 40.22px;
}

/* Breadcrumbs */
.breadcrumb {
    background: none;
    padding: 0;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    font-family: var(--font-family2);
    font-weight: 400;
    font-size: 17px;
    line-height: 22.98px;
}

.breadcrumb .breadcrumb-item.active {
    color: white;
    font-family: var(--font-family2);
    font-weight: 400;
    font-size: 17px;
    line-height: 22.98px;
}

/* Centering Breadcrumbs */
.breadcrumb-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: #fff;
    content: var(--bs-breadcrumb-divider, ">>");
}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
    width: 100%;
    margin: 0 auto;
  }
  
  .container-login100 {
    width: 100%;  
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
  }
  
  
    /* Apply box shadow to the .wrap-login100 container */
    .wrap-login100 {
        width: 100%;
        background: #fff;
        overflow: hidden;
        display: flex;
        margin: 60px 0;
        flex-wrap: wrap;
        border-radius: 10px;
        align-items: stretch;
        flex-direction: row-reverse;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Add a box shadow */
    }
  
  /*==================================================================
  [ login more ]*/
  .login100-more {
    width: calc(100% - 640px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
  }
  
  .login100-more::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
  }
  
  
  
  /*==================================================================
  [ Form ]*/
  
  .login100-form {
    width: 640px;
    min-height: 100vh;
    display: block;
    background-color: #f7f7f7;
    padding: 173px 55px 55px 55px;
  }
  
  .login100-form-title {
    width: 100%;
    display: block;
    font-family: var(--font-family2);
    font-weight: 500;
    font-size: 28px;
    color: #333333;
    line-height: 34.47px;
    text-align: center;

  }
  
  
  
  /*------------------------------------------------------------------
  [ Input ]*/
  
  .wrap-input100 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    height: 50px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  
  .label-input100 {
    font-family: var(--font-family2);
    font-size: 16px;
    color: rgba(0, 0, 0, 0.52);
    line-height: 18.38px;
    font-weight:400;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    padding-left: 24px;
    left: 0;
    top: 15px;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .input100 {
    display: block;
    width: 100%;
    background: transparent;
    font-family: Montserrat-Regular;
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    border:1px solid lightgray;
    padding: 0 26px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  }
  
  input.input100 {
    height: 100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  /*---------------------------------------------*/
  
  .focus-input100 {
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1px;
    left: -1px;
    pointer-events: none;
    border: 1px solid gray;
    border-radius: 10px;
  
    visibility: hidden;
    opacity: 0;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3);
  }
  
  .input100:focus + .focus-input100 {
    visibility: visible;
    opacity: 1;
  
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .eff-focus-selection {
    visibility: visible;
    opacity: 1;
  
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .input100:focus {
    height: 50px;
    border: 1px solid gray;

  }
  
  .input100:focus + .focus-input100 + .label-input100 {
    top: 14px;
    font-size: 0px;
  }
  
  .has-val {
    height: 48px !important;
  }
  
  .has-val + .focus-input100 + .label-input100 {
    top: 14px;
    font-size: 13px;
  }
  
  /*==================================================================
  [ Restyle Checkbox ]*/
  
  .input-checkbox100 {
    display: none;
  }
  
  .label-checkbox100 {
    font-family: var(--font-family2);
    font-size: 14px;
    color: #999999;
    line-height: 18.38px;
    font-weight:400px;
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
  }
  a.txt1{
    font-family: var(--font-family2);
    font-weight:400px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 18.38px;
    text-decoration: none;
  }
  .label-checkbox100::before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    color: transparent;
  
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #6675df;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .input-checkbox100:checked + .label-checkbox100::before {
    color: #6675df;
  }
  
  
  /*------------------------------------------------------------------
  [ Button ]*/
  .container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    font-weight: 700;
    border-radius: 10px;
    border:none;
    background: var(--primary-color);
    font-family: var(--font-family3);
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .login100-form-btn:hover {
    background: #1F9CB8;
  }

  /*==================================================================
[ Overlay Content Container ]
------------------------------------------------------------------*/
.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff; /* Text color */
    text-align: center;
    z-index: 2; /* Ensure it is on top of the background */
    background-color: rgba(0, 0, 0, 0.5); /* Overlay with transparency */
}

/* Heading */
.overlay-heading {
    font-size: 2.5rem; /* Adjust as needed */
    margin-bottom: 10px; /* Spacing between heading and description */
    font-family: var(--font-family3);
    font-weight: 600;
    line-height: 56.25px;
}

/* Description */
.overlay-description {
    font-size: 1.05rem; /* Adjust as needed */
    font-family: var(--font-family3);
    font-weight: 400;
    line-height: 22.5px;
}

  
  
  
  /*------------------------------------------------------------------
  [ Responsive ]*/
  @media(max-width: 1260.66px){
    .banner-heading{
      font-size:42px;
    }
    .carousel-caption-body {
      width: 90%;
      padding:0;
    }
  }

  @media (max-width: 992px) {
    .login100-form {
      width: 50%;
      padding-left: 30px;
      padding-right: 30px;
    }
  
    .login100-more {
      width: 50%;
    }
  }
  
  @media (max-width: 768px) {
    .login100-form {
      width: 100%;
    }
  
    .login100-more {
      display: none;
    }
    .footer-follows-link img {
      height: 24px;
      width: 24px;
    }
    .lower-footer div{
      font-size:14px;
    }
    .login100-form{
      padding: 0px 55px 55px 55px;
    }
  }
  @media (max-width: 767.66px) {
    .banner-heading{
      font-size:31px;
      line-height: 29.2px;
    }
    .banner-sub-heading{
      font-size: 15px;
    }
    .action-btn{
      font-size: 18px;
    }
    .navbar-brand {
      font-size:20px;
    }
    .footer-logo{
      font-size: 20px;
    }
  }
  @media (max-width: 576px) {
    .login100-form {
      padding-left: 15px;
      padding-right: 15px;
       padding-top: 0px; 
       min-height: 70vh;
    }
  }
  
  
  /*------------------------------------------------------------------
  [ Alert validate ]*/
  
  .validate-input {
    position: relative;
  }
  
  .alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    z-index: 100;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 12px;
    pointer-events: none;
  
    font-family: Poppins-Regular;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
  
    visibility: hidden;
    opacity: 0;
  
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
  }
  
  .alert-validate::after {
    content: "\f12a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    z-index: 110;
    color: #c80000;
    font-size: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 18px;
  }
  
  .alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
  }
  
  @media (max-width: 992px) {
    .alert-validate::before {
      visibility: visible;
      opacity: 1;
    }
  }
  
  
  
  /*==================================================================
  [ Social ]*/
  .login100-form-social-item {
    width: 36px;
    height: 36px;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
  }
  .register-link a{
    font-family: var(--font-family2);
    font-weight: 700;
    font-size:14px;
    line-height: 18.38px;
    text-decoration: none;
    color: var(--primary-color);
  }
  .register-link p{
    font-family: var(--font-family2);
    font-weight: 700;
    font-size:14px;
    line-height: 18.38px;
    color: #000;
  }
  .txt2{
    font-family: var(--font-family2);
    font-weight: 400;
    font-size:14px;
    line-height: 18.38px;
    color: #000;
  }
  .login100-form-social-item:hover {
    /* background: #333333; */
    /* color: #fff; */
  }
  
/* Media Queries */
@media (max-width: 768px) {
    /* Styles for small screens */
    .navbar {
        padding: 5px;
    }
}