:root {
  --primary-color: #9e762f;
  --secondary-color: #002037;
  --prime-light: #af9c7c;
  --prime-lighter: #e7daca;
}
.headlines .title {
  font-weight: bold;
  color: var(--primary-color);
}
@media (max-width: 500px) {
  .title {
    align-items: center;
    font-size: 1rem;
  }
}

/* Nav bar Start */
.navbar-lg {
  box-shadow: 0 6px 8px -6px var(--prime-light);
  position: fixed; 
  /* TO be Revised*/
  width: 100%;
  z-index: 100; /* TO be Revised*/
  background-color: white;
  /*margin-bottom: 200px; */
  /* TO be Revised*/
}
.nav-social-icon a {
  color: var(--secondary-color);
  font-size: 1.3rem;
}
.nav-social-icon a:hover {
  color: var(--primary-color);
  transition: ease-in-out 0.2s;
}
.nav-logo {
  width: 65px;
  height: 70px;
}

.navbar-a-links li a {
  color: var(--secondary-color);
  font-weight: 700;
}
.navbar-a-links li a:hover {
  color: var(--primary-color);
  border-bottom: solid 1px var(--secondary-color);
}
/* Nav bar End */
/* Slider Start */

/* Slider ENd */
/* Headilin */
.headlines {
  font-family: "Fugaz One", cursive;

  color: #002037;
}
/* Mission and Vision Start */
.slider-style {
  /*z-index:-10;*/
}

.slider-img {
    /*position:absolute;*/
  filter: grayscale(10%);
  opacity: 90%;
  display:block;
  
  margin-top:70px;
}
.first-main-slide {
  position: relative;
}
.slider-text-inner {
  width: 60%;
  color: white;
}

/*  */
.float {

  width: 37px;
  height: 37px;
  background-color: rgb(25, 151, 25);
  border: rgb(25, 151, 25) solid 1px;
  color: white;
  border-radius: 50px;
  text-align: center;
  font-size: 20px;

  /*z-index:2147483647;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.float:hover {
  color: rgb(25, 151, 25);
  background-color: white;
}
.number {
  width: 140px;
  text-decoration: none;
  background-color: var(--secondary-color);
  box-sizing: border-box;
}
.email {
  background-color: #389aff;
    border:#389aff;
}
.email:hover{
    background-color: white;
    color:#389aff;
    border:#389aff solid 1px;
}
.phone{
    background-color:#f1d592;
    border: solid 1px #f1d592;
    color:white;
}

.phone:hover{
    color: #f1d592;
    border:solid 1px :#f1d592;
    background-color:white;
}

.plus-min{
    background-color: var(--secondary-color);
    border:var(--secondary-color) solid 1px;
    color:white;
}
.plus-min:hover{
    color: var(--secondary-color);
    background-color:white;
}
}

#myDIVs {
z-index:2147483647;
  position: fixed;
  top: 150;
  right: 10;
}
.div-num {
  z-index:2147483647;
  position: fixed;
  top: 115;
  right: 60;
  background-color: none;
  border: none;
}
.number-icon {
  z-index:2147483647;
  position: relative;
  background-color: var(--secondary-color);
  padding: 5px 7px 5px 7px;
  border-radius: 20px;
  border: solid 1px var(--secondary-color);
  color: white;
}
.hide-display {
  z-index:2147483647;
  position: fixed;
  top: 110;
  right: 10;
}

.pop-up {
text-align: center;
  font-size: 20px;
  border-radius:50px;
    right: 10px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
      position: fixed;
  width: 37px;
  height: 37px;
  bottom: 40;
  background-color:#002037;
  border:#002037 solid 1px;
  color:white;
}

.pop-up:hover{
    background-color:white;
    color:#002037;
    border:#002037 1px solid;
}

.my-float {
  margin-top: 40px;
}
/*  */
/* .mv-fluide*/
/*{*/
/*    margin-top:40px;*/
  /*background-color: #9e762f;*/
  /*backdrop-filter: blur(10px);*/
/*} */
.vision {
  box-shadow: 0 6px 10px 3px var(--prime-light);
  /* border-radius: 5px; */
  transition: ease-in-out 0.2s;
}
.vision:hover {
  transform: scale(1.05);
}
.span-vision {
  color: var(--primary-color);
  font-weight: 600;
  font-style: italic;
}
.sapn-mission {
  color: var(--secondary-color);
  font-weight: 600;
  font-style: italic;
}
.span-vision:hover {
  color: var(--secondary-color);
  border-bottom: var(--primary-color) 1px solid;
  transition: 0.6s;
  font-style: normal;
}
.sapn-mission:hover {
  color: var(--primary-color);
  border-bottom: var(--secondary-color) 1px solid;
  transition: 0.6s;
  font-style: normal;
}
/* Mission and Vision End */
/* Our Service  Start*/
.services-fluide {
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #a1abe049 33%,
    #e6d6d688 66%,
    #ffffff 100%
  );
}

.Gallary-col {
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #a1abe049 33%,
    #e6d6d688 66%,
    #ffffff 100%
  );
}
/* Our Service  End*/

/* Uniqueness Start*/
.uniquenss-card {
  padding: 5%;
  box-shadow: 0 6px 10px 3px var(--prime-light);
}

/* Contact Start */
.contact-form {
  /* border-top: solid .1px rgb(214, 196, 163);
  border-bottom: solid 1px var(--primary-color); */
  box-shadow: 0 0 1px var(--prime-light);
}
.bg-animate {
  width: 100%;
  height: fit-content;
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color)
  );
  animation: animate 20s linear infinite;
}

.gallary img {
  border-radius: 10px;
  opacity: 0.8;
}
.gallary img:hover {
  opacity: 1;
}
.gal-pics {
  border-radius: 10px;
  height: 30vh;
  width: 100%;
}
.gal-pics:hover {
  filter: contrast(140%);
  transform: scale(1.02);
  transition: ease-in-out 0.3s;
}

/* Projects */
.projects-div h5 {
  color: var(--primary-color);
  font-style: italic;
  opacity: 100%;
}
.project-btn {
  background-color: var(--secondary-color);
  border: none;
  color: white;
  padding: 0.8% 4%;
  border-radius: 8px;
}
.project-btn:hover {
  background-color: #011524;
  transition: 0.3s;
}

.project-pics {
  border-radius: 8px;
  height: 330px;
}
/*@media (max-width:992px)*/
/*{*/
/*    ..project-pics{*/
/*         height: 300px;*/
/*    }*/
/*}*/
/* Form Formspree */
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm fieldset,
#fs-frm optgroup,
#fs-frm label,
#fs-frm #card-element:disabled {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  border: none;
  border-radius: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#fs-frm label,
#fs-frm legend,
#fs-frm ::placeholder {
  font-size: 0.825rem;
  margin-bottom: 0.5rem;
  padding-top: 0.2rem;
  display: flex;
  align-items: baseline;
}

/* border, padding, margin, width */
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm #card-element {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.75em 1rem;
  margin-bottom: 1.5rem;
}
#fs-frm input:focus,
#fs-frm select:focus,
#fs-frm textarea:focus {
  background-color: white;
  outline-style: solid;
  outline-width: thin;
  outline-color: gray;
  outline-offset: -1px;
}
#fs-frm [type="text"],
#fs-frm [type="email"] {
  width: 100%;
}
#fs-frm [type="button"],
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
  width: auto;
  background-color: var(--secondary-color);
  color: white;
  cursor: pointer;
  border-radius: 20px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
#fs-frm [type="button"]:focus,
#fs-frm [type="submit"]:focus,
#fs-frm [type="reset"]:focus {
  outline: none;
}
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
  margin-bottom: 0;
}
#fs-frm select {
  text-transform: none;
}

#fs-frm [type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  width: auto;
  margin: 0 0.5em 0 0 !important;
}

#fs-frm [type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/* address, locale */
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
  display: inline;
}
#fs-frm fieldset.locale input[name="city"] {
  width: 52%;
}
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
  width: 20%;
}
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"] {
  margin-right: 3%;
}
/* End */

/* Footer Style Start */
footer {
  background-color: var(--secondary-color);
  color: white;
}
.contact-info-paragraph {
  line-height: 10px;
}
.navigation-list li {
  list-style-type: none;
  margin-left: -7%;
  line-height: 40px;
}
.navigation-list a {
  color: white;
  text-decoration: none;
}
.footer-social-icons {
  color: white;
}
.footer-social-icons:hover {
  color: var(--primary-color);
}
.footer-icons-hover:hover {
  color: var(--primary-color);
}
.footer-heading {
  color: #9e762f;
}
.footer-heading:hover {
  color: white;
}

/* Projects Page */
/*#myDIV {*/
/*  display: none;*/
/*}*/

.img-container {
  position: relative;
  
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
}
.img-container:hover .overlay {
  height: 100%;
  background-color: #002037;
  opacity: 70%;
}
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: white;
  z-index: 600;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
