*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
  transition: 0.25s;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
  @media only screen and (max-width: 75em) {
    html {
      font-size: 50%;
      box-sizing:border-box;
  
    } }

body {
  font-family: "Nunito", sans-serif;
  color: #6D5D4B;
  font-weight: 300;
  line-height: 1.6; 
  overflow-x:hidden;  
}

.bs{
   box-shadow: 2px 2px 18px grey;
}

.container{
  display:grid;
  background-color: white;
  width:100%;
}

.header{
  background-color:white;
  display:grid;
  grid-template-columns: fit-content(25px) auto max-content ;
  gap:15px;
  width:85%;
  justify-self: center;
  padding:10px;
  align-items:center;

}

.header__logo{
  height:20px;
  text-align: center;
  color:purple;
  font-weight: 1000;
  align-content: center;
  
}
.header__links{
 
  display:grid;
  grid-auto-flow:column;
  padding: 0 40px;
  align-content:center;
  text-align:center;
  justify-content:center;
}
.header__links > a {
  text-decoration :none;
  color:Black;
  font-weight:bold;
  font-size:1.5rem;
  margin-right:40px;
}

.header__button{
  align-content:center;
  
  
}
.header__button > a{

  border:1px solid purple; 
  border-radius: 4px;
  box-sizing:border-box;
  text-align: center;
  padding:5px 20px;
  display:block;
  text-transform: uppercase;
  color:purple;
  text-decoration: none;
  font-weight: 600;
}

.header__button > a:hover{
  color:white;
  background-color:purple
}


.hero{
  height: 80vh;
  background-color: black;
  display:grid;
  grid-template-columns:55% auto; 
  position:relative;
  margin-bottom:60px;

}
.hero__clipped{
  background-color:black;
  position:relative;
  clip-path: polygon(0 0, 100% 0, 83% 100%, 0% 100%);
  z-index: 4;
}




#myVideo {
  position:absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.info__box{
 
  height:100%;
  z-index:1;
  text-align:start;
  align-content:center;
  font-size: 4.5rem;
  line-height:none;
  color:white;
  font-weight: bold;
}


.hero__form {
  position:absolute;
  display:grid;
 /* align-items:center;*/
  text-align:center;
  background-color:rgba(255,255,255, 0.88);
  box-shadow: 5px 5px 18px grey;
  border-radius: 30px;
  width:75%;
  z-index: 40;
  bottom: -12.5%;
  left:12.5%;
  padding-bottom:6rem;

}

.hero__form--inline--submit{
  display:inline-block;
  width: 20%;
  margin-right:10px;
}
.hero__form--inline--submit > input[type=submit]{
  width:100%;
  
}

.hero__form--inline{
  width:100%;
  justify-content:center;
  display:flex;
  
}

.hero__form--inline > input[type=text],.hero__form--inline > input[type=email] {
  
  background-color: white;
  display:inline-block;
  color: Red;
  border-radius: 4px;
  cursor: pointer;
  width: 20%;
  padding: 10px;
  margin-right:10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  
}

.hero__form:hover{
  cursor:pointer;
  background-color:purple;  
  color:white;
}
.hero__form:hover .hero__form--inline--submit > input[type=submit]{
   background-color:white;
  color:purple;
  
}

.hero__form>div>span{
  color:purple;
}
.hero__form:hover .hero__form >div>span {
  color:white;
}


      @media only screen and (max-width: 75em) {
        .hero{
          height:75vh;
          position:relative;
          grid-template-columns:auto;
          background:none;
          
        }

        .hero__clipped{
          clip-path:none;
          width:100%;
          z-index:1;
          
        }
        .info__box{
          position:absolute;
          top:0;
          
          z-index:4;
          width:100%;
          background-color:rgba(0,0,0,0.65);
         /* text-align:center;*/
          justify-content:center;
          font-size: 3.5rem;
          
        }
        
        .hero__form{
          bottom:0;
          width:95%;
          left:2.5%;
          padding:0;
        }
      }



.sv_w{ 
 
  font-size: 2.0rem;
  line-height:none;
  font-weight: bold;
  display:grid;
  grid-template-column: auto auto auto;
  grid-auto-flow:column;
  column-gap:1px;
  

}
.c{
  display:grid;
  align-content:center;
  justify-content:center;
}



.services{
  /*height:100vh;*/
  background-color:white;
  margin-top: 12vh;
  /*border: 2px solid pink;*/
}

.services__clipssection{
  /*height:50%;*/
  width:85%;
  margin:auto;
  padding:20px;
  /*border:2px solid red;*/
  display:grid;
 /* align-items: center; */
  justify-content:center;
  grid-auto-flow:column;
  grid-template-columns:auto auto auto ;
  box-shadow:none;
}
  


.single_clip {
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  background-color: black;
  height:100%;
  position:relative;
  border-radius: 7px;
  box-shadow: 5px 15px 18px grey;
  
}

.tag{
  position:absolute;
  width:85%;
  height:20%;
  background-color:rgba(128,0,128,0.5); 
  bottom: 15%;
  clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);;
  border:0.5px solid white;
  text-align:start;
  padding-left:12.5%;
  color:white;
  display:grid;
  align-content:center;
  font-size:2rem;
  font-weight:bold;
}
.single_clip:hover{
  cursor:pointer;
   clip-path: polygon(-200% 0%, 100% 0%, 80% 100%, 0% 100%);
}

@media only screen and (max-width: 75em){
  .services{
    margin-top:0;
  }
  
  .services__clipssection{
    grid-auto-flow:row;
    grid-template-columns: auto;
    row-gap:30px;
  }
  
  
  
}

.image{
  display:block;
  height:100%;
  width:100%;
  height:auto;
  }

.bold{
  font-weight:bold;
  font-size: 5rem;
}

@media only screen and (max-width: 75em){
  .bold{
    font-size:2.3rem;
  }
}
.purple{
  color:purple;
}


.beyond_hero{
  
}


.relat{
  position:relative
}

.overlay{
  position:absolute;
  left:110%;
  top: 50%;
}

.services__values> div> span{
  color:black;
  font-size:1.5rem;
  font-weight:bold;
}



.cream{  background-color:rgba( 255, 253, 248, 0.8); }
.full_width{
  width:100%;
}

.Wprocess{
  background-color:rgba( 255, 253, 248, 0.8);

  padding:100px 0;
  text-align:center;
  display:grid;
  width:85%;
  justify-self: center;
  align-items:center;
 
  
}

.process__grid{
  display:grid;
 /* grid-auto-flow:column; */
 
  padding 10px;
  margin: 0 8rem;


  grid-template-columns:auto auto auto;
}

.process__animate{
  display: grid; 
  color: black;
  font-weight:bold;
  font-size: 1.5rem;
}


@media only screen and (max-width: 75em){
  .Wprocess{
    width:95%;
  }
  .process__grid{
    grid-template-columns:auto;
    margin-top:20px;
  }
  .icon__process{
  
  margin-top:35px;
   
}
}

.icon__process{
  width:30%;
  color:purple;
  justify-self:center;
  margin-bottom: 20px;
  margin-top:20px;
   
}

.down__trans{
  transform: translateY(100%);
}
.up__trans {
  transform: translateY(-50px);
}
.contact_form{
  height: 75vh;
  /*border: 2px solid red;*/
  background-color:rgba( 255, 253, 248, 0.8);
  width:85%;
  justify-self:center;
  grid-auto-flow:column;
  grid-template-columns:1fr 1fr;
  column-gap: 10px;
  
}
.bg{ background-image:url("https://www.dropbox.com/scl/fi/p0sopx5dkcaxg4p409bip/1742461916657.png?rlkey=sr5em9rhbc1mmsnvk5npsxeux&st=y0n625m1&raw=1");
margin:75px 0 0;  
background-position-x:center;
background-repeat: no-repeat; 
}

.inside__grid{
  display:grid;
  height:100%;
 
  /*width:100%;*/
}

.left_side_grid{ 
 /* border:5px dotted pink;*/
  overflow:hidden;
  height:100%
}
.right_side_grid{
 height:100%
}

@media only screen and (max-width: 75em){
  
    .contact_form{
     width:95%;
  grid-template-columns: auto;
  position:relative;}
  .bg {
   display:none;
  
  }

  
  }



.flags{
    width:95%;
    background-color: purple;
    border-radius:15px;
    margin:10px auto;
    position:relative;
    display:grid;
    align-items: center;
    align-content:center;
    text-align:center;
   
    
}

.margin_need{
  color:white;
  padding: 30px;
  margin: 55px;
  
}
@media only screen and (max-width: 75em){
  .flags{
  
    margin:12.5px auto;
  }
  
  .margin_need{
  color:white;
  padding: 30px;

  
}
  
}

.reviews{
  height:30vh;
}

.testimonial__item{
  z-index:0;
  position:absolute;
  color:white;
  font-size:3rem;
  animation-delay:1s;
  /*animation-fill-mode:forwards;
  /*animation-name: showcase;*/
  animation-duration: 25.1s;
  animation-iteration-count:infinite;
  
  background-color:purple;
}

@media only screen and (max-width: 75em){
  .testimonial__item{
    font-size:1.5rem;}
  .reviews{
    height:auto;
    padding:22px 4px;
    margin:25px auto;
  }
}

.fa {
  margin-right:15px;
}
.footer__grid {
  height:65vh;
  width:100%;
  background-color:rgb(50,50,50);
  display: grid;
  gap:10px;
  padding:100px 7.5% 50px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  color:white;
  z-index: 100;
}
.footer__grid >  div{
  font-size: 2rem;
}

.item1{
  grid-column: 1 ;
  grid-row: 1 / span 4;
}
.item2{
  grid-column: 2 /;
  grid-row: 1 / span 4;
}

.item2 > span{
  font-size: 1.5rem;
  display:block;
}
.item3{
  grid-column: 3 /span 3;
  grid-row: 1 / span 4;
  padding:10px;
}

.footer_form{
  grid-gap:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
 
}


input[type=submit]{
  background-color: purple;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  
}

#item3_form{
  justify-self: right;
  grid-row:2;
  grid-column:1/ span 2;
  
}

#item3_form>input[type=submit]{
  background-color: white;
  color: Purple;
}

input[type=text], select, textarea, input[type=email] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
 /* resize: vertical;*/
  margin-bottom:10px;
  
}


.item4{
  grid-row: 5 / span 2;
  grid-column: 1/ span 5;
  /*border: 1px solid #ccc;*/
  display:grid;
  align-content:center;
  /*grid-auto-flow:column;*/
  gap:20px;
  justify-content:center;
  text-align:center;
}
.item4>div>span{
  margin-right:30px
}

.form__container{
  background-color:transparent;
  width:100%;
  padding:10px;
 /* border:1px solid green;*/
}


@media only screen and (max-width: 75em){
  .footer__grid{
    height:auto;
    grid-template-columns:auto;
    grid-template-rows:auto auto auto auto; 
  }
  .footer__grid > div{
    font-size:2.5rem;
  }
  .item1{
    grid-row:1
  }
  .item2{
    grid-row:2
  }
  .item3 {
    grid-column:1;
    grid-row:3;
    padding:1px;
  }
  
}


.services__values{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:fit-content(25%) fit-content(40%);
 /* border:1px solid red;*/
  column-gap: 15px;
  justify-content:space-between;
  align-items:center;
  margin:auto;
 /* height:50%; */
  width:85%;
  padding:20px;
}

.services__maps{
  height:694px;
  display:grid;
  grid-template-columns:fit-content(55%) 35%;
  grid-auto-flow:column;
  justify-content: center;
  align-items:center;
 /* padding:0 245px 0 200px; */
  background-color:rgba( 255, 253, 248, 0.8);
}

.services__maps_m{
  background-image: url("https://www.dropbox.com/s/6687x7zca21owxa/MapChart_Map%20(2).png?raw=1");
  width:100%;
  height:100%;
  padding-left:20px;
  background-position-x:right;
  background-repeat: no-repeat; /* Do not repeat the image */
}

.relative{
  position:relative;
  margin:10px 0;

}
label{
  position:absolute;
  font-size:1.5rem;
  color:#ccc;
  background-color:white;
  top:-15px;
  border-radius: 4px;
  padding:2px;
  left:1px

}

.full_height{
  display:block;
  margin-right:0;
  box-sizing:border-box;
  height:calc(100% - 20px);
  width:100%;
  
  
 

}

@media only screen and (max-width: 75em){
   
  .services__values{
    grid-auto-flow:row;
    grid-template-columns:auto;
   
  }
  
  .overlay{
    left:2%;
    z-index:9999;
  }
  
  .services__maps{
     grid-auto-flow:row;
    grid-template-columns:auto;
     position:relative;
  }
  .sv_w{
    grid-template-columns:auto;
    grid-auto-flow:row;
    z-index:9;
   
  }
  
  .services__maps_m{
    position:absolute;
    top:0;
  }
  .ff{
    z-index:8;
  }
}



.bold_beneath{
  font-size:4.0rem; 
  margin-bottom:10px;
}



@keyframes anim-come_down {
    from {
      transform: translateY(-100px);
      opacity: 0;
    }
    to  {
      transform: translateY(0);
      opacity: 1;
    }
  }

@keyframes anim-come_left {
    from {
      transform: translateX(-100px);
      opacity: 0;
    }
    to  {
      transform: translateX(0);
      opacity: 1;
    }
  }

.typeng{
  display:inline-block;
  position:relative;
 /* background-color:pink; */
  /*border-left:1px solid white; */
}

.typengScreen{
  position:absolute;
  width:100%;
  right:0;
  top:0;
  height:100%;
  background-color:black;
  padding:12px;
  border-left:5px solid white;
 
}

@keyframes typendg{
  from{
   
    width:100%;
   
    /* ###### For Typing #######
    
    
       entry.target.style.animation = `typengd 2.5s linear 0s 1 normal forwards, cursor-blink 0.25s linear 0s infinite normal forwards`;
    
    
    */
  }
  
  to{
    width:2px;
    right:-40px;
   
    /*opacity:0*/
  }
}

@keyframes cursor-blink{
 0%{
    
    border:none;
  }
 98% {

   border-color:white;
  }
  
}

@keyframes showcase1{
 1%  {z-index:-1;opacity:0;}
  20%{z-index:78;opacity:1;}
  40%{z-index:0;opacity:0;}
  60%{z-index:0;opacity:0;}
  80%{z-index:0;opacity:0;}
 100% {z-index: 0;opacity:0;}
} 

@keyframes showcase2{
 0%   {z-index:0;opacity:0;}
  20%{z-index:0;opacity:0;}
  40%{ z-index:78;opacity:1;}
  60%{z-index:0;opacity:0;}
  80%{z-index:0;opacity:0;}
 100% {z-index: 0;opacity:0;}
} 

@keyframes showcase3{
 0%   {z-index:0;opacity:0;}
  20%{ z-index:0;opacity:0;}
  40%{z-index:0;opacity:0;}
  60%{z-index:79;opacity:1;}
  80%{z-index:0;opacity:0;}
 100% {z-index: 0;opacity:0;}
} 

@keyframes showcase4{
 0%   {z-index:0;opacity:0;}
  20%{z-index:0;opacity:0;}
  40%{z-index:0;opacity:0;}
  60%{z-index:0;opacity:0;}
  80%{z-index:78;opacity:1;}
 100% {z-index: 0;opacity:0;}
} 

@keyframes showcase5{
 0%  {z-index:0;opacity:0;}
  20%{z-index:0;opacity:0;}
  40%{z-index:0;opacity:0;}
  60%{z-index:0;opacity:0;}
  80%{z-index:0;opacity:0;}
 100% {z-index:78;opacity:1;}
}