@import url('https://fonts.googleapis.com/css2?family=Alice&family=Genos&family=Gloock&family=Jost:ital@0;1&family=Nunito:ital,wght@0,400;0,600;1,400&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*{
  margin:0 ;
  padding: 0 ;

}

body{
 background-image: url(/assets/Ace_Home_background.svg);
 background-size: cover;  
 overflow-x: hidden; 
 background-repeat: no-repeat;

}


ul  
{
  list-style: none;
}


ul a,
ol a
{
  text-decoration: none;
}

/* NavBar  */

.sr-only {

  visibility: hidden;

}


.Header{
  height :7vw;
  max-width: 98% ;
 
}

.headerlist{
  display : flex;
  justify-content :flex-end;
  align-items: center;
 margin-right: 0.5vw;
 text-align: center;
 padding-top: 1vw;
  
 }

.headerlist li{
  margin-left: 1vw;
}
.logo{
  margin-right:auto;
 
}
.logo img{
  width: 7vw;
  margin-left: 3vw;
}

.Navlist{
  display : flex;
  justify-content: space-evenly;
 font-size: 1.5vw;
}

.Navlist li a{
  color: rgb(5,5,50);
  padding: .5vw;
  border-radius: 1vw;
  font-family: 'Philosopher', sans-serif;
  font-style: italic;
  
}


.Navlist li a:hover{
 color: white;
 background-color: rgb(5,5,50);
}

.NavigationMenuResponsive{
  display : none;
}

/* Home Page CSS */

.HomePage-HeroContent{
   
  max-width: 100%;
    
 }


 .HomePage-focusitem{
  margin :3vw auto;
  max-width:90%;
  display:flex;
  text-align: center; align-items: center;
 }
 
 .HomePage-header-content{
  color: rgb(255, 255, 255);
 padding-top: 1vw;
 padding-left: 2vw;
  max-width: 40%;
  
  }
  
  .HomePage-header-content h2{
   font-size: 2vw;
   font-family: 'Philosopher'  , sans-serif;
   margin : .5vw , .5vw;
   font-style: italic;
   color:rgb(255, 255, 255);
   
  }
  .HomePage-fancytext span{
    background-image: linear-gradient(270deg ,rgb(156, 61, 148), rgb(83, 77, 240) );
    background-size: 0% .25vw;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 300ms ease;
  }
  .HomePage-fancytext span:hover {
    
    background-size: 100% .25vw;
    
  }
  .HomePage-header-content p{
   font-size: 1.5vw;
   font-family:'Philosopher', sans-serif ;
   margin-top: 1vw;
   font-style: italic;
   padding: 1vw 2vw;
   
  }
  .HomePage-focusitem{
   display: flex;
   flex-basis: 100%;
   align-items: center;
  
  }
 .HomePage-focusimg {
   padding:1vw ;
   padding-top: 1.5vw;
   background-color: rgb(0, 0, 0);
   border-radius: 10px;
   
   
 }
 .HomePage-focusimg img{
 border-radius: 10px;
   width: 98%;
  
 
 }
 

 /* Home Page About us section  */


 .Home-Page-Team-Intro{
  max-width: 90%;
 margin: 2vw auto;
 }

 .Home-Page-profile{
  padding: 1vw 2vw;
 }

 .Meghana{
  width: 100%;
  height: 32vw;
  background-image:linear-gradient(135deg,rgb(37, 45, 82),rgb(80, 67, 197));
  z-index:8;
  margin-top:20vw;
  border-radius: 1vw;
}
 .Meghana h4{
  position : relative;
  left: 62vw;
  top: 2vw;
  color: white;
  font-family: 'Philosopher', sans-serif;
  font-size:2vw;
  font-style: italic;
  

 }
 .Meghana img{
  position : relative;
  left: 62vw;
  margin: 1vw;
  top:4vw;
  width:12vw;
  

 }

 .Nitin{
  width: 42vw;
  background-image: linear-gradient(135deg , rgb(34, 34, 73),rgb(65, 65, 114));
  margin-inline: 20%;
  margin-top:-48vw;
  z-index: 25;
  border-radius: 1vw;
}
.Nitin h4{
  position : relative;
  left: 42vw;
  top:-10vw;
  color: white;
  font-family: 'Philosopher', sans-serif;
  font-size:2vw;
  font-style: italic;

 }
 .Nitin img{
  position : relative;
  left: 22vw;
  margin: 1vw;
  width:12vw;
  
 }
 .Home-Page-Team-content{
padding : 2vw 3vw;
font-family: 'Philosopher', sans-serif;
color: white;
text-align: center;
font-size: 1.75vw;
font-style: italic;

 }
 .ButtonPlacement{
padding : 2vw 3vw;
font-family: 'Philosopher', sans-serif;
color: white;
text-align: center;
font-size: 1.75vw;
font-style: italic;

 }
/* Home page Services Section CSS */
.HomePage-Services{
  max-width: 100%;
  margin: 5vw auto;
}

.HomePage-Services-Block{
  max-width: 90%;
  margin: 0 auto;
}
.services{
  margin : 2vw auto;
  width: 90%;
  gap: 1.2vw;
  display : grid;
  height: 100%;
  background-color: black;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr   ;
  grid-template-areas: 
 
  "CLP CLD CLD blank1 blank2 blank3"
  "CLP blank4  ARD ARD ARP ARP"
  "blank5 CSD CSD CSP CSP blank6 ";
  

}

.blank1 , .blank4,.blank6 ,.blank5{
  background-color: #103255;
}
 
  .blank3 {
  background-color: #0A66C2;
}


.CLP{
  grid-area: CLP ;
}
.CLD{
  grid-area: CLD ;
}
.CSP{
  grid-area: CSP ;
}
.CSD{
  grid-area: CSD;
}
.ARP{
  grid-area: ARP ;
}
.ARD{
  grid-area: ARD ;
}
.blank1{
  grid-area:blank1;
}
.blank2{
  grid-area:blank2;
}
.blank3{
  grid-area:blank3;
}
.blank4{
  grid-area:blank4;
}
.blank5{
  grid-area:blank5;
}
.blank6{
  grid-area:blank6;
}
 
 .CLP img{
  width:100%;
  object-fit: contain;
  overflow: hidden;
  padding : 1vw; 
} 
.CSP img{
  width:100%;
  object-fit: contain;
  overflow: hidden;
  padding : 1vw;
}

.ARP img{
  width:100%;
  object-fit: contain;
  overflow: hidden;
  padding: 1vw;
  margin: 0 auto;
}

.CLP ,.CSP ,.ARP{
  width: 20vw;
  text-align: center;
  height: 100%;
  margin-top: 1vw;
}
.CLD ,.CSD ,.ARD p{
color: white;
 padding: 4vw 2vw 2vw 2vw;
 font-size: 1.75vw;
 font-family: 'Genos', sans-serif;
 text-align: center;
 font-style:italic;
 vertical-align: top;
 }

.services h4{
  color: white;
  font-size: 2vw;;
  padding-top: 2vw;
  font-style: italic;
  font-family: 'Philosopher', sans-serif;
  
}
.services a{
  text-decoration: none;
}
.CLD , .CSD ,.ARD{
 
  background: linear-gradient(black 50%,  #0A66C2 50% );
  background-size: 100% 200%;
  background-position: 0 0%;
  cursor : pointer;
  transition: .5s;
  z-index: 10; 
  position:relative
 }
 
 .CLD:hover{
   background-position: 0 100%;
 }
 .CSD:hover{
   background-position: 0 100%;
 }
 .ARD:hover{
   background-position: 0 100%;
 }
 .grid-container > div {position:relative}

/* About Us Page CSS */
.Aboutus{
 
 max-width: 90%;
 margin: 3vw auto;
 
  }

.Section-Heading{
  max-width: 100%;
  font-family: 'Philosopher' , sans-serif;
  font-size: 2vw;
  color:white;
  font-style: italic;
  padding-left: 2vw;
  margin: 2vw auto;
  
  }
  
   .About-Us-Company-Intro{
    width: 90%;
     
    display :flex;
    justify-content: space-around;
    margin: 2vw auto;;
    align-items: center;
    background-color: rgba(181, 157, 245, 0.274);
    
  } 
  
  .About-Us-IMG-Collage{
    
    max-width: 50%;
    display: grid;
    height: 100%;
    
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    
  
    
  }
  
  .About-Us-IMG-Collage img{
    width: 18vw;
    padding: 5vw;
    height: 12vw;
  }
  .About-Us-collage-item:first-of-type{
  
    grid-column : 1/span 2;
    grid-row: 1 / span 2;
    
  }
  .About-Us-collage-item:nth-of-type(2){
  
    grid-column : 1.5/span 2;
    grid-row: 2/ span 3;
    margin-top: -3vw;
  }
  .About-Us-collage-item:last-of-type{
  
    grid-column : 2/span 3;
    grid-row: 2/ span 3;
    margin-top: 3vw;
    
  }
  
  .About-Us-Co_intro_desc{
    width: 65%;
  }
  
  .About-Us-Co_intro_desc p{
    margin: 1vw;
    font-style: italic;
    font-size: 1.5vw;
    padding: 2vw;
    text-align: justify;
    color:#faf0ca;
    line-height: 2.25vw;
  
  }
  
  .About-Us-Co_intro_desc p strong{
    text-decoration: underline;
    font-size: 2.5vw;
    font-family: 'philosopher';
    
  }

  /* Team Section About us page */
.OurCombo{
  width: 90%;
  margin: 2vw auto;
}


.combo{
  display : grid;
  width: 90%;
  margin:2vw auto;
  background-color: rgba(181, 157, 245, 0.274);
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: 1fr 1fr ;
  place-items: top;
 
  

}
.combo__item:first-of-type{
  grid-column:1/3;
  grid-row: 1/2;
  padding: 4vw 1vw 3vw 1vw;
  text-align: right;
 
}
.combo__item:nth-of-type(2){
  grid-column:3/4;
  grid-row: 1/2;
  /* background-color: rgb(0, 0, 0); */
  margin: 3vw 2vw ;
  padding: 2.25vw 2.25vw 2.25vw .1vw;

}
.combo__item:nth-of-type(3){
  grid-column: 1/2;
  grid-row: 2/3;
  /* background-color: rgb(0, 0, 0); */
  margin: 2vw 5vw ;
  padding: 2.25vw .1vw 2.25vw 2.25vw;

}
.combo__item:last-of-type{
  grid-column: 2/4;
  grid-row: 2/3;
  padding: 3vw 1vw 1vw 0;
  text-align: left;
 

}

.combo__item p{

 
  color:#faf0ca;
  padding :2vw;
  font-size: 1.5vw;
  line-height: 2vw;
  font-style : italic;
 
}
.combo__item img{
  width :12vw;
}
.combo__item h3{
  font-family: 'philosopher', sans-serif;
  font-size: 2.25vw;
  color:#faf0ca;
  font-style: italic;
}

/* About us page Our Clients Section CSS */

/*CLIENT LIST TABLE */

.About-us-Clients{
width :90%;
margin : 2vw auto;

}

.clientlist{
  width:90%;
  margin: 5vw;
  border-radius: 10px;
  border: 2px solid black;
}

.clientlist th{
  font-size: 2vw;
  border: 2px solid black;
  border-radius: 10px;
 

}

.clientlist tr{
  width: 90%;
  text-align: center;
  font-family: 'philosopher', sans serif;
  font-size: 1.5vw;
  font-style:italic;
  height : 2vw;
    
}
.clientlist td{
  border: 1px solid black;
  border-radius: 10px;
}

/* .clientlist tr:nth-of-type(even){
  background-color: bisque;
} */
.clientlist tr:nth-of-type(even){
   background-color:rgba(196, 241, 255, 0.562);
   font-weight: bold;
   
}
.clientlist tr:nth-of-type(odd){
  color:#faf0ca;
  background-color: rgba(231, 247, 227, 0.274);
  
}

.About-us-Clients-mobile{
     display: none;
    }

/* About Us Page Commitment section  */

.About-Us-Commitment{
  width: 90%;
  margin: 2vw auto;
  }
.About-Us-Commitment p{
  width: 90%;
  text-align: justify;
  font-size: 1.5vw;
  color : #faf0ca;
  margin: 0 auto;
  font-style: italic;
  }

  .About-Us-Commitment-buttondiv{
    width:90%;
    margin: 0 auto;
    
  }
  .About-Us-Commitment-buttondiv p{
   text-align: center;
   margin: 2vw;
   font-family: 'alice', sans-serif;
 
  }
  
  /* .About-Us-Commitment-buttondiv button{
    width: max-content;
    padding: 1vw;
    border-radius: 1vw;
    background-color: #0A66C2;
    margin : 1vw;
  }*/
  .About-Us-Commitment-buttondiv button a{
    color: white;
    text-decoration: none;
    font-family: 'alice', sans-serif;
    font-size: 1.25vw;
    padding: 0 2vw;
  } 



  
/* Maps and Office Locations Contact info */


.MapsLocation{
  width: 90%;
  margin: 2vw auto;
}

.OfficesContactDetail{
  display :flex;
  margin: 0 auto;
  flex-basis: 100%;
  align-items: flex-start;
  justify-content: space-around;
  background-color: rgba(181, 157, 245, 0.274);
 
}
.contactcard1{
  width:27.5%;
  margin: 1vw 0;
}
.contactcard2{
  width:27.5%;
  margin: 1vw 0;
}
.contactcard1 h3 , .contact_info h3,.contactcard2 h3{
  font-family : 'philosopher', sans-serif;
  color: white;
  text-align: center;
  margin: 1vw auto;
  font-size: 2.25vw;
 
}
.contactcard1 p {
  font-family : 'Genos', sans-serif;
  color: white;
  text-align: justify;
  margin: 1vw auto;
  font-size: 1.5vw;
  width: 13vw;
 
}
.contactcard2 p{
  font-family : 'Genos', sans-serif;
  color: white;
  text-align: justify;
  margin: 1vw auto;
  font-size: 1.5vw;
  width: 15vw;
 
}


.contact_info{
 
  width:27.5%;
   margin: 1vw 0;
  
 
  
}
.direct_contact{
  margin-top:1vw;
  font-size: 1.25vw;
  font-family : 'Alice', sans-serif;
  background-color: white;
  margin: 0 auto;
  text-align: center;
}

.gmaps{
  aspect-ratio: 1.5;
  height:120px;
  width:180px;
  margin : 0 auto;
}
.gmaps iframe{
 height: 100%;
 width: 100%;
 
}

/* Products & Services Page CSS */

.PandS-page-Services{
  width: 100%;
  margin-top : 3vw ;
}

.MainBlock{
  width: 90%;
  margin: 0 auto;
}

 
/* Contact Page CSS */

.CompanyName{
  font-family: 'Philosopher', sans-serif;
  font-style: italic;
  margin-right:1vw;
  color: rgb(255, 255, 255);
}
.CompanyName h1{
  font-size: 2.5vw;
}

.CompanyName h4{
  font-size: 1.25vw;
}


.Contact{
  width: 100%;
  margin: 5vw auto;
}

.Contact-CompanyProfile {
  display : flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin:0 auto ;
  font-family:'Genos',sans-serif;
}

.Contact-CompanyProfile img{
  width: 20vw;
  background-color: white;
  padding :1vw;
  border-radius: 3vw;
  
  }

  .Contact-AboutCompany{
    margin: 0 auto;
    padding : 0 5vw;
    text-align: center;

  }
  .Contact-AboutCompany h2{
    font-size: 2.25vw;
    color: white;
    font-family: 'Philosopher',sans-serif;
  }
  .Contact-AboutCompany h3{
    font-size: 1.75vw;
    color: white;
  }
  .Contact-AboutCompany p{
    font-size: 1.75vw;
    color: white;
  }

  .Contact-FormContainer{
    width: 90%;
    margin: 5vw auto;
  }

  .ContactForm{
    display:flex;
    flex-direction : column;
    justify-content: space-evenly;
  }
  .entry{
    width: 40vw;
    margin:1vw auto;
    border-radius: 1vw;
    padding : 1vw;

  }
  .Formbutton{
    width: 15vw;
    margin :0 auto;
    padding : .5vw;
    border-radius: 1vw;
    font-family: 'Alice', sans-serif;
    font-size: 1.25vw;
    background-color: rgb(190, 183, 235);

  }
  .Formbutton:hover{
    width: 15vw;    
    background-color: rgb(107, 87, 238);

  }

  .FormDesc{
    width: 60vw;
    margin:1vw auto;
    border-radius: 2vw;
    padding : 2vw;
  }

  
 /* Social Media presense */

 .Ace-presence{
  background-color: black;
  width:100%;
  margin-top: 3vw ;
 
}

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

}

.socialmedia i{
 font-size: 4vw;
  margin: 2vw 2vw;
  padding: 2vw auto;
 
}


.whatsapp a i{
  color:  white;
  background-color:#128C7E; 

}
.linkedin a i{
  color:  white;
  background-color:#0A66C2;

}
.facebook a i{
  color:  white;
  background-color:#3b5998; 

}


/* Footer Css */
.Footer{
  width: 100%;
  margin: 0 auto;
  color: rgb(190, 183, 235);
  text-align: center;
  background-color: black;
}



/* Media Query elements common to all  */

@media only screen and (max-width:900px){
  body{
    background-image: url(/assets/Ace-background-mobile_gr.svg);
    background-size: cover;
    overflow-x: hidden;
  }

   .Navlist {
    flex-direction : column;
    inset: 0 0 0 50%;    
    font-size:3.5vw;
    background-color: rgba(69, 135, 185, 0.85);
    position: fixed;
    transform :translateX(100%) ;
    transition: transform 500ms ease-out ;
    z-index: 90;
    
  }

  .Navlist[data-visible="true"]{
    transform: translateX(0%);

  }


  .Navlist li a{
    color: rgb(0, 0, 0);
    font-weight: bold;

  }

   .CompanyName h1{
    font-size: 4.5vw;
  }
  .CompanyName h4{
    font-size: 2vw;
  }
  .logo img{
    width:8vw;
    margin-left:5vw;
  }
  
  .Navbar{
  width: 7vw;
  align-items:top;
  }
  .CLD ,.CSD ,.ARD p{
    color: white;
     padding: 4vw 2vw 2vw 2vw;
     font-size: 2.25vw;
     font-family: 'Genos', sans-serif;
     text-align: center;
     font-style:italic;
     }
 
}

/* Media Query 360px to 600px */

@media only screen and (min-width: 360px) and (max-width:600px){
  body{
    background-image: url(/assets/Ace-background-mobile.svg);
    background-size: cover;
    overflow-x: hidden;
  }
  .Header{
    padding-top: 2vw;
  }
  .logo img{
    width: 15vw;
    margin-left:10px;
  }
  .CompanyName h1{
  font-size: 5vw;
}

.CompanyName h4{
  font-size: 2.5vw;
}

.NavigationMenuResponsive{
  display : block;
  position : absolute;
  top : 6%;
  right : 3%;
  background-image: url(/assets/Menu_Blk.svg);
  background-size: cover;
  width: 5vw;
  aspect-ratio: 1;
  border: none;
  border-radius:3vw;
  background-color: black;
  z-index: 100;
}

.NavigationMenuResponsive[aria-expanded=true]{
  background-image: url(/assets/Close_Blk.svg);
}


  .Contact{
    margin-top : 10vw;
  }

  .Contact-CompanyProfile img{
    display : none;
    }
    .Contact-AboutCompany h2{
      font-size: 5vw;
      color: white;
      font-family: 'Philosopher',sans-serif;
      font-style: italic;
    }
    .Contact-AboutCompany h3{
      font-size: 3.5vw;
      color: white;
    }
    .Contact-AboutCompany p{
      font-size: 3vw;
      color: white;
    }

    .Footer h4{
      font-size:10px;
    }
    .Footer h5{
      font-size:9px;
    }
    .Formbutton{
    width: 20vw;
    font-size: 3vw;
    }
    .OfficesContactDetail{
      flex-direction: column;
      align-items: center;
  
    }

    .contactcard1 , .contactcard2 , .contact_info{
      width: 60%;
      
    }
    .contactcard1 p , .contactcard2 p{
     font-size: 3vw;
     width:80%;
     text-align: center;
      
    }
    .contactcard1 h3, .contactcard2 h3, .contact_info h3{
     font-size: 4vw;
      
    }
    
    .direct_contact{
      font-size: 2.5vw;
    }
    .About-us-Clients{
      display : none;
    }
    .About-us-Clients-mobile{
      display: block;
      width: 90%;
      margin:0 auto;
    }
    .About-us-Clients-mobile th{
      font-size: 3vw;
    }
    .About-us-Clients-mobile td{
      font-size: 2vw;
    }
    .About-Us-Company-Intro{
      flex-direction: column;
      align-items: center;
      
    }
    .About-Us-Co_intro_desc {
      width: 80%;
    }
    .About-Us-Co_intro_desc p{
      text-align: center;
      font-size:2.5vw;
      font-family: 'Philosopher',sans-serif;
      /* Jost:ital@0;1&family=Nunito:ital,wght@0,400;0,600;1,400&family=Philosopher */
    }
    .About-Us-Co_intro_desc p strong{
      text-align: center;
      font-size:3vw;
    }

    
.combo{
  display : grid;
  height : 100%;
  width: 90%;
  margin:0 auto;
  background-color: rgba(181, 157, 245, 0.274);
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: 1fr 1fr ;
  place-items: center;
 
  

}
    .combo__item h3{
      font-size: 3vw;
          }
    .combo__item p{
      font-size: 2.5vw;
          }
  .combo__item:first-of-type{
            grid-column:1/3;
            grid-row: 1/2;
            padding: 1vw ;
            text-align: right;
            width:80%;           
          }
          
  .combo__item:nth-of-type(2){
            grid-column:3/4;
            grid-row: 1/2;
            /* background-color: rgb(0, 0, 0); */
            padding: 2.25vw 2.25vw 2.25vw .1vw;
          
          }

  .combo__item:nth-of-type(3){
            grid-column: 1/2;
            grid-row: 2/3;
            /* background-color: rgb(0, 0, 0); */
            padding: 2.25vw .1vw 2.25vw 2.25vw;
          
          }

  .combo__item:last-of-type{
            grid-column: 2/4;
            grid-row: 2/3;
            padding: 1vw;
            text-align: left;
            width:80%;
                    
          }

          
          .HomePage-HeroContent{
            margin: 10vw auto;
          }
          .HomePage-focusitem{
            flex-direction: column;

          }
          
          .HomePage-focusimg {
            padding:1vw ;
            padding-top: 1.5vw;
            background-color: rgb(0, 0, 0);
            border-radius: 10px;
            max-width: 80%;
            
          }
          .HomePage-focusimg img{
          border-radius: 10px;
            width: 98%;
           
          }
          
          .HomePage-header-content{
          
            max-width: 80%;
            }

            .HomePage-header-content h2{
              font-size: 3vw;
              
              
             }

             .HomePage-header-content p{
              font-size: 2.5vw;
              
              
             }

          .Meghana{
            width: 100%;
            height: 45vw;
            margin-top:18vw;
            border-radius: 1vw;
          }
           .Meghana h4{
            position : relative;
            left: 65vw;
            top: 2vw;
            color: white;
            font-family: 'Philosopher', sans-serif;
            font-size:2vw;
            font-style: italic;
            
          
           }
           .Meghana img{
            position : relative;
            left: 65vw;
            margin: 1vw;
            top:4vw;
            width:12vw;
            
          
           }
          
           .Nitin{
            width: 55vw;
            margin-inline: 8%;
            margin-top:-60vw;
            border-radius: 1vw;
          }

          .Nitin h4{
            position : relative;
            left: 42vw;
            top:-8vw;
            color: white;
            font-family: 'Philosopher', sans-serif;
            font-size:2vw;
            font-style: italic;
          
           }
           .Nitin img{
            position : relative;
            left: 22vw;
            margin: 1vw;
            width:12vw;
            
           }
           .Nitin p{
           font-size: 2.5vw;
          
           }
           .services{
            margin : 2vw auto;
            width: 90%;
            gap: 1.2vw;
            display : grid;
            height: 100%;
            background-color: black;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows:  1fr 1fr 1fr   ;
            grid-template-areas: 
           
            "CLP blank2 CLD CLD CLD  blank3"
            "CLP ARD ARD ARD ARP ARP"
            "blank6 CSD CSD CSD CSP CSP  ";
            
          
          }


}


/* Media Query 601px to 899px */
@media only screen and (min-width: 601px) and (max-width:899px){
  body{
    background-image: url(/assets/Ace-background-mobile-600-899.svg);
   
  }
  .Header{
    /* padding-top: 2vw; */
    margin-bottom: 10vw;
    width: 100%;
  }
  .logo img{
    width: 12vw;
    margin: left 10vw;;
  }
  .CompanyName h1{
  font-size: 4.5vw;
}

.CompanyName h4{
  font-size: 2.5vw;
}

.NavigationMenuResponsive{
  display : block;
  position : absolute;
  top : 6%;
  right : 3%;
  background-image: url(/assets/Menu_Blk.svg);
  background-size: cover;
  width: 5vw;
  aspect-ratio: 1;
  border: none;
  border-radius:3vw;
  background-color: black;
  z-index: 100;
}

.NavigationMenuResponsive[aria-expanded=true]{
  background-image: url(/assets/Close_Blk.svg);
}
  .Contact{
    margin-top : 10vw;
  }

  .Contact-CompanyProfile img{
    display : none;
    }
    .Contact-AboutCompany h2{
      font-size: 4vw;
      color: white;
      font-family: 'Philosopher',sans-serif;
      font-style: italic;
    }
    .Contact-AboutCompany h3{
      font-size: 3vw;
      color: white;
    }
    .Contact-AboutCompany p{
      font-size: 2.5vw;
      color: white;
    }

    .Footer h4{
      font-size:10px;
    }
    .Footer h5{
      font-size:9px;
    }
    .Formbutton{
    width: 20vw;
    font-size: 2vw;
    }
    .Navlist {
      
      font-size:2.5vw;
      ;
    }

    .Meghana{
      width: 100%;
      height: 32vw;
      margin-top:18vw;
      border-radius: 1vw;
    }
     .Meghana h4{
      position : relative;
      left: 62vw;
      top: 2vw;
      color: white;
      font-family: 'Philosopher', sans-serif;
      font-size:2vw;
      font-style: italic;
      
    
     }
     .Meghana img{
      position : relative;
      left: 62vw;
      margin: 1vw;
      top:4vw;
      width:12vw;
      
    
     }
    
     .Nitin{
      width: 50vw;
      margin-inline: 8%;
      margin-top:-50vw;
      border-radius: 1vw;
    }
    
    .Nitin h4{
      position : relative;
      left: 52vw;
      top:-8vw;
      color: white;
      font-family: 'Philosopher', sans-serif;
      font-size:2vw;
      font-style: italic;
    
     }
     .Nitin img{
      position : relative;
      left: 30vw;
      margin: 1vw;
      width:12vw;
      top: 2vw;
      
     }
     .Nitin p{
     font-size: 2vw;
    
     }
     .HomePage-HeroContent{
      margin: 10vw auto;
    }
    .HomePage-focusitem{
      flex-direction: column;

    }
    
    .HomePage-focusimg {
      padding:1vw ;
      padding-top: 1.5vw;
      background-color: rgb(0, 0, 0);
      border-radius: 10px;
      max-width: 80%;
      
    }
    .HomePage-focusimg img{
    border-radius: 10px;
      width: 98%;
     
    }
    
    .HomePage-header-content{
    
      max-width: 80%;
      }

      .HomePage-header-content h2{
        font-size: 3vw;
        
        
       }

       .HomePage-header-content p{
        font-size: 2.5vw;
        
        
       }
       .Button {
        background: #5f55e7;
        margin: 0 auto;
        border: none;
        width: max-content;
        color : white;
        transform: skewX(160deg) ;
        border-radius: 5px;
        z-index:0;
        position :relative;
      
      }
      .Button:hover {
        background: #2b22a1;
        
        color : white;
        
      }
      .Button:active{
        background: tomato;
        color : rgb(0, 0, 0);
      
      }
    
      .Button a{
        
        font-size: 2.5vw;
        padding: 0 2vw;
       
       
      }
      .ButtonPlacement .Button a{
        text-decoration: none;
        font-style: italic;
        font-family:'Philosopher',sans-serif;
        padding: 0 2vw;
        color: white;
        font-size: 2.5vw
       
      }
      /* About Us Page CSS */

      .Aboutus{
 
       
        margin: 15vw auto;
        
         }

      .About-Us-Commitment-buttondiv button a{
        
        font-size:3vw;
        padding: 0 2vw;
      } 
      .About-Us-Commitment p{
        
        font-size: 2.5vw;
        
        }


      .services{
        margin : 2vw auto;
        width: 90%;
        gap: 1.2vw;
        display : grid;
        height: 100%;
        background-color: black;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows:  1fr 1fr 1fr   ;
        grid-template-areas: 
       
        "CLP CLD CLD CLD blank2 blank3"
        "CLP ARD ARD ARD ARP ARP"
        "CSD CSD CSD CSP CSP blank6 ";
        
      
      }
  }

  .Button {
    background: #5f55e7;
    margin: 0 auto;
    width: max-content;
    height: 4vw;
    color : white;
    transform: skewX(160deg) ;
    border-radius: 5px;
    z-index:0;
    position :relative;
  
  }
  .Button:hover {
    background: #2b22a1;
    
    color : white;
    
  }
  .Button:active{
    background: tomato;
    color : rgb(0, 0, 0);
  
  }

  .ButtonPlacement .Button a{
    text-decoration: none;
    font-style: italic;
    font-family:'Philosopher',sans-serif;
    padding: 0 4vw;
    color: white;
    font-size: 1.25vw
   
  }
.ButtonPlacement{
  max-width: 80%;
  padding-inline: auto;

}
 
 /* Javascript Snowflake declaration */

.snowflake{
  
  position:absolute;
  background-image: url(img/snowflake.svg);
  background-size: cover;
  border-radius: 50px;
  animation: fall 8s linear infinite;

}
@keyframes fall{
  0%{
    transform: translate(50%,50%);
    opacity:1;
  }
  100%{
    transform: translate(50%,1000%);
    opacity:0;
  }
}