@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   font-family:'Poppins',sans-serif;
}
.contact
{
   position:relative;
   min-height:100vh;
   padding:50px 100px;
   display:flex;
   justify-content:center;
    align-items:center;
   flex-direction:column;
   background:url(../images/home-img.jpeg);
   background-size:cover;
}

.contact .content
{
    max-width:800px;
    text-align:center;
}
.contact .content h1
{
   font-size:36px;
   font-weight:500;
   color:#d3ad7f;
   text-align: center;
   text-transform: uppercase;
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
   font-size: 4rem;
   
  
    
}
.contact .content h1 span{

   font-size:36px;
   font-weight:500;
   color: white;
    text-align: center;
   text-transform: uppercase;
   padding-bottom: 3.5rem;
   font-size: 4rem;
}
.contact .content p
{
   font-weight:300;
   color:#fff;
}
.containerrr
{
   width:100%;
   display:flex;
   justify-content:center;
   align-items:center;
   
}
.containerrr .contactInfo
{
   width:50%;
   display:flex;
   flex-direction:column;
}
.containerrr .contactInfo .boxxx
{
   position: relative;
   padding: 20px 0;
   display: flex;
}
.containerrr .contactInfo .boxxx .icon
{
   min-width:60px;
   height:60px;
   background: #fff;
   display:inline-flex;
   justify-content:center;
   align-items:center;
   border-radius: 50%;
   font-size: 22px;
}
.containerrr .contactInfo .boxxx .text
{
    display:inline-block;
    margin-left:20px;
    font-size:16px;
    color:#fff;
    flex-direction:column;
    font-weight:300;
}

.containerrr .contactInfo .boxxx .text h3
{
   font-size:36px;
   font-weight:500;
   color:#d3ad7f;
 
   text-transform: uppercase;

   font-size: 2.5rem;
}
.contactForm
{
   width:50%;
   padding:15px;
   background:#13131a;
   text-align: center;
}
.contactForm h2
{
   font-size:30px;
   
   font-weight:500;
   color: white;
   text-transform: uppercase;
}
.contactForm .inputBox
{
   position:relative;
  width:100%;
  margin-top:10px;
  text-align: center;
 
}
.contactForm .inputBox input,
.contactForm .inputBox textarea
{
  width:100%;
  padding:10px 0;
  font-size:16px;
   margin:10px 0;
   border:none;
  
   outline:none;
   resize:none;
   color: white;
   background-color: black;
}

.contactForm .inputBox span
{
   position:absolute;
   Left:0;
   padding:5px 0;
   font-size:16px;
   margin:10px 0;
   pointer-events:none;
   transition:0.5s;
   color:#666;
}

.contactForm .inputBox input:focus ~ span,
.contactForm .inputBox input:valid ~ span,
.contactForm .inputBox textarea:focus ~ span,
.contactForm .inputBox textarea:valid ~ span

{
             
    color: #e91e63;
    font-size: 16px;
    transform:translateY(-20px);
}

.contactForm .inputBox input[type="submit"]
{
    width:100px;
    background:#00bcd4;
    color:#fff;
    border:none;
    cursor:pointer;
    padding:10px;
    font-size:18px;
}


@media(max-width:800px)
{
    .contact
   {
        padding:50px;
   }
    .containerrr
   {
        flex-direction:column;
   }
    .containerrr .contactInfo
   {
        margin-bottom:40px;
   }
   .containerrr .contactInfo,
   .contactForm
   {
        width:100%;
   }
 
}
@media(max-width:600px)
{
    .contact
   {
        padding:50px;
   }
   .contact .content
   {
        padding:50px;
   }

    .containerrr
   {
        flex-direction:column;
   }
    .containerrr .contactInfo
   {
        margin-bottom:40px;
   }
   .containerrr .contactInfo,
   .contactForm
   {
        width:120%;
   }
 
}
@media(max-width:450px)
{
    
   .containerrr .contactForm
  
   {
      width:125%;
      
     
     
      
   } 
}
@media(max-width:420px)
{
    
   .containerrr .contactForm
  
   {
      width:130%;
      
      
     
     
      
   } 
}
@media(max-width:360px)
{
    
   .containerrr .contactForm
  
   {
      width:135%;
      
     
     
      
   } 
}
@media(max-width:300px)
{
    
   .containerrr .contactForm
  
   {
      width:140%;
      
     
     
      
   } 
}