html {
    
    background-color:#ffffff;
    margin: 0; 
    padding: 0;
    scroll-behavior: smooth;
   
  }

  body{
    
    margin: 0;

  }
a, u{
  text-decoration: none;
}



/**********************    Navigation Bar    *********/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #000000;
  overflow: hidden;
  width:100%
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "futura-pt";
  /*font-family: avenir,helvetica,sans-serif;*/
  font-size:3vw

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: rgb(129, 12, 239);
  color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/**********************    Navigation Bar end    *********/




/********************** Header ********************************************/

  .header{
    min-height: 460px;
     display: flex;
    justify-content: center;
    
    

    align-items: center;
    background-position: 100%;
    
   
    overflow: hidden;
    overflow: clip;
    padding: 1em;
    padding-bottom: 0;
    position: relative;
    
  }


.header img{
 
  height: 503px;
  object-fit: cover; 
  position: absolute;
  width: 100%;


 
}


/********************** Header End ********************************************/









/*****************   Button *******************************************/


#Consult-btn{
  animation: fadeInAnimation ease 2s; 
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
   
  flex-direction: column;   
  
  text-align: center;
  font-weight: bold;
  font-family: "futura-pt"; 
  font-size: min(max(15px, 1vw), 120px);
  color: rgb(255, 255, 255);



  width: 200px;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: rgb(129, 12, 239);
  border-radius: 5px;
  border:none;
  

  position: absolute;
  margin-top: 50px;
  left:50%;
  margin-left: -100px;

  


  
}
#Consult-btn:hover{
 
  background-color: rgb(183, 106, 255);
  color: rgb(255, 255, 255);
  transition: 0.6s;

}





#submit-btn{

  background: rgb(129, 12, 239);
  font-family: Arial, sans-serif;
  color: #ffffff;

  
 
 
  border-radius: 5px;
  
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  
  cursor: pointer;
  display: block;

  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
 
  

}
#submit-btn:hover {
  filter: contrast(115%);
}
#submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}



/*****************   Button End *******************************************/










/***************** Text Style*******************************/
h1{
  animation: fadeInAnimation ease 1s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  color:#ffffff;
  

  font-family: "futura-pt"; 
  font-size: min(max(40px, 5.5vw), 120px);
  padding:0;
  margin: 0;
  text-align: center;
  display: block;

  font-weight:400;


  box-sizing: border-box;
  
  
  

}


h2{
    
  animation: fadeInAnimation ease 2s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  color:#ffffff;


  font-family: "futura-pt"; 
  font-size: min(max(20px, 2vw), 120px);
  padding:0;
  margin: 0;
  text-align: center;
  display: block;

  font-weight:400;


    
  }

h3{
  
  animation: fadeInAnimation ease 2s; 
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color:#ffffff;


   font-family: "futura-pt"; 
   position: absolute;
   font-family: "proxima-nova";
   font-weight: 400;

  }

h5{
  padding-top: 5vh;
  padding-bottom: 5vh;

  box-sizing: border-box;
 
 
  margin-block-start: 30px;
  margin-block-end: 0;
  display: block;



  color:#000000;
  line-height: 1.5;
  /*margin-block-end: 0;
  margin-block-start: 0;*/
  font-family: "DM Sans",sans-serif;

  font-size: min(1.25rem) !important;
  text-align: center;
  align-items: center;
  
  
  font-weight:400;
  margin-top:min(30px,5vw);
  margin-bottom:min(30px,5vw);
  
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  margin-left: auto ;
  margin-right: auto ;
  max-width: 450px;
  
  

}


h6{
  color:#000000;
  line-height: 1.15;

 
  font-weight:400;
  font-family: 'Source Sans Pro', sans-serif;

  font-size:  max(2.0vw,10px);
  margin: 0;
  width:35vw;
  
 
 
  
}
/*********************    End Style Text ******************/





/*************  Home Body ********8**************/

.info_container{
  margin-top: 30px;
  
  width: 100%; 
  display: flex;
  flex-direction: row;
  align-items: top;
  
 

}


.girl_with_abs_container{position: relative;
                         width:100% ;
                         margin: 0;
                         padding: 0;
                         
}
.girl_with_abs_container img{
  width: 100%
}
.girl_with_abs_container #Consult-btn{
  
    margin-top: -5.5em;
    left:100%;
    top:100%;
    margin-left: -210px;
  


}

.info{
  
  width: 100%; 
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;


}
.info_header_and_text{
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: 10px;

}


/************** Home Body End ************************/






/*************  Learn Body *************************/

.marble_container{  /* contains cool header style and nav element */
 
  display: flex;
  flex-direction: column;
  background-image:  url('/img/marble2.jpg');
  height: 1200px;
  width:100%;
  margin: 0;
 
 
 

  

}

.cool_header_style{height:700px;} /* contains the beauty image and gray box */
.gray_container{
  display: flex;
  flex-direction: column;
  background-color: #4f4f55;;
  height: 600px;
  width:100%;
  margin-top: 0px;
  position: relative;
 
}
.gray_container img{width:1000px}
.gray_container h1{
  position: absolute;
  left: 50%;
  margin-top: 200px;
  text-transform: uppercase;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.page_element_nav{
  margin-top: 15vw;
  display: flex;
  flex-direction: row;
  justify-content: center;


  
}

.page_element_nav a{
  
  margin-left: 4vh;
  margin-right: 4vh;
  width: 350px;
  padding-top: 1em;
  padding-bottom: 1em;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 5px;
 
    
  
  text-align: center;
  font-weight: bold;
  font-family: "futura-pt"; 
  font-size: min(max(15px, 2vw), 400px);
  color: rgb(255, 255, 255);



 
  
}

.page_element_nav a:hover{
    background-color: rgb(129, 12, 239);
  color: rgb(255, 255, 255);
  transition: 0.6s;
}





.section_break h2{
  color:#716565;
    font-style: italic;
     margin-top: 100px;
    margin-bottom: 100px;
     font-size: min(max(15px, 2vw), 120px);
}

hr{
  width:4%;
  margin-top: 20px
}





.learn_info{
display: flex;
flex-direction:row;
align-items: top;
}

.learn_info img{
  display: block;
  width: 100%;

}

.learn_image_container{   width: 65%;
position: relative;
display: flex;
}

.learn_info_text{
  width: 35%;
  display: flex;
  align-items: center;
  font-size: max(1vw,11px);
    background-image:url("/img/white_marble.jpg");
  background-size:cover;}
  
.learn_image_text{ 
  position: absolute;
  width:100%;
margin-top: 20px; }

p {
  text-align: justify;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000000;
  line-height: 2;
  margin-left: 50px ;
  margin-right: 40px ;
}


/*************  Learn Body End *************************/









/*************  Connect Body *************************/



.connect_body_container{
   background-image:  url('/img/marble2.jpg');
   height: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
  

}

.connect_body_container h1 {
  margin-top: 60px;
   margin-bottom: 80px;
}










#contact_form  {
  width: min(62vw,600px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 350px;

}



input{
    font-family: --apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  
    padding: 0.75rem;
    font-size: 0.93rem;

  
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}







/*************  Connect Body End *************************/





@media  screen and (max-width: 800px){
.page_element_nav{
 
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
 
  height: 300px;
  
  

}

.learn_info{flex-direction:column;}
.learn_image_container{width: 100%;}
.learn_info_text{width: 100%;
                 height:300px}
                 
.gray_container img{width:100%;
                    height:600px;
                    object-fit: cover; }


}


@media  screen and (max-width: 600px){
  .info_container{
    flex-direction:column-reverse;
    align-items: center;
    margin: 0px;
  }
 


.info{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 30px;
 
  
  

}

h6{

  width:50vw
}

}




@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}




.footer{
}