body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    }
    /* ---Custom scrollbar--- */

    html::-webkit-scrollbar {
        width: 0.8vw;
      }
    html::-webkit-scrollbar-thumb {
        background:   #000;
        border-radius: 190px;
        height: 5px;
      }
   
    html::-webkit-scrollbar-thumb:hover {
        border: 1px solid #ffbc03d3;
        box-sizing: border-box;
        background: transparent;
      } 
    html::-webkit-scrollbar-track {
        background-color:rgba(20, 19, 19, 0.911);
        backdrop-filter: blur(10px);
      }
      
      /* ---End of custom scrollbar--- */
    h1,
    h2,
    h3{
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-style: normal; 
        line-height: 1;   
        text-align: center;
      }
    p{
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-size: 0.9rem;
        font-style: normal;
        font-weight: normal;
        line-height: 1.5; 
        
      }
    .front{  
       
        width: 100%; 
        max-height: 305vh;
        margin: 0;
        background-size: cover;
        z-index: 0;  
        display: block;
      }  
    .left{
        max-height: 305vh;
        flex-basis: 50%;  
        background:linear-gradient(#ffbb00e5, #ffbb00cc), url(back1.jpg)no-repeat center center;
        background-size: cover;
      }
    .left img{
          width: 40%;
          padding-top: 12rem;         
      }
    .left h1{
          margin: 0; 
          padding: 10rem 0 5rem;
          font-size: 3rem;
          font-weight: 700;
          color: #fff;
          text-shadow: 1px 1px 1px #fff,  
         1px 1px 1px #fff,  
         1px 1px 1px #fff,     
         1px 3px 6px rgb(0, 0, 0);
      }
    .left span{
          border-radius: 90%;
          width: 2px;
          height: 2px;
      }
    .right{
          
          max-height: 305vh;
          flex-basis: 50%;
          background:linear-gradient(#030009cc, #030009cc), url(back2.jpg)no-repeat center center;
          background-size: cover;
        }
    .right h1{
          margin: 0;
          font-style: normal;
          font-family: 'Poppins', sans-serif;
          font-size: 1.8rem;
          padding-top: 6rem;
          padding-bottom: 3rem;
          font-weight: 800;
      }
    .right p{
          font-size: .9rem;
          width: 72%;
          margin: auto;
          font-weight: normal;
          padding-bottom: 1.7rem;
          text-align: left;
        text-align: justify;
          
      }
    .right h2{
        font-size: 1.4rem;
        font-weight: 750;
        margin-top: 2rem;
      }
    .right .mail{
          background-color: transparent;
          width: 60%;
          height: 2rem;
          color: #fff;
          font-size: 1.0rem;
          border-radius: 5rem;
          border: 3px solid #FFBC03;
          margin: 1rem 0;
          padding-left: 1rem;
      }
    .right button {
        margin-top: 1rem;
        background-color: #FFBC03;
        padding:0 1.5rem;
        height: 2.8rem;
        border: none;
        box-sizing: border-box;
        border-radius: 4rem;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 2;
        transition: .3s ease background-color;
        color: #fff;
      }
    
    .right button:hover {
        background-color:  rgb(235, 235, 235); 
        color:#000;
      }
    .right .btm-txt{
          margin-top: 1rem;
          margin-bottom: 2.5rem;
          text-align: center;
      }
    .right .icons{
        width: 45%;  
        margin: auto; 
        display: flex;  
      }
    .right .icons img{
          width: 1.8rem;
          height: 1.8rem;
      }
    .icon-1{
        padding-left: 2rem;
        flex-basis: 20%;  
     }
    .icon-2{
        flex-basis: 20%;        
    }
    .icon-3{
        flex-basis: 20%;        
    }
    .icon-4{
        flex-basis: 20%;    
    }
    .right .info{
      padding-top: 1rem;
      width:100%;  
      margin: auto; 
      display: flex;   
    }
    .right .info .p1{
      flex-basis: 40%;  
      text-align: right; 
      margin: auto;     
    }
    .right .info .p2{
      flex-basis: 40%;  
      text-align: left;  
      margin: auto;      
    }
    .right .copy-right{
      margin-top: 1rem;
      text-align: center;
    }
/* Start of media query for a phone*/

@media (min-width: 700px) {
  .front{
      min-height: 125vh;
      display:flex;
      margin: 0;      
  }
  .left{         
    min-height: 125vh;
  } 
  .right{
    min-height: 125vh;
  } 
    .right p{
      text-align: justify;
      text-justify: inter-word;
    }
  
}