* {
    margin:0;
    padding:0;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.blue {
    background-color: #2f4157;
    color:white;
    width: 100%;
    height: 50vh;
    display:flex;
 

    align-items: center;
}

.container {
    width: 80%;
    margin: 0 auto;

  
}

.blue-content {
    display: flex;
    flex-direction: row;
 
    width: 100%;
}

.image-div {
 
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 50vw;               /* Width is 30% of the viewport width */
    height: 50vw;              /* Height is also set to 30% of the viewport width */
    max-width: 200px;          /* Maximum size for larger screens */
    max-height: 200px;         /* Ensure maximum height is the same */
   
    border-radius: 50%;        /* Makes the container circular */
    overflow: hidden;          /* Ensures the image is cropped to the circle */
    display: flex;             /* Centers the image within the div */
    align-items: center;
    justify-content: center;
  

}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
  
}
/*.blue-content img {
    width: 100%;
    border-radius: 50%;

 
}*/

.main-content {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left:20px;
    padding-right:20px;

    width: 80%;

   
   
}

.main-content-top {

}

.main-content-bottom {

}

.social-media-icons {
   
    display: flex;
    flex-direction: row;
 
    justify-content: right;

  
  
}

.social-media-icons a {

    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: right;
}

.social-media-icons a img {
width:50%;

}

/* White starts */

.white {
    width: 100%;
    height: 50vh;
    display:flex;
    background-color: #f3eeea;
    align-items: center;
}

.white-content {
 
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
   
    height: 50vh;
 
}

.vertical-content {
   
    display: flex;
    flex-direction: column;
    width: 50%;
    font-size: 3rem;
    color:#2f4157;
    display: inline;
    }

.contact-icon {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding-top:20px;
  padding-bottom:20px;
    border-bottom: 1px solid #2f4157;
  }

  .contact-icon img {
    width: 10%;
  }

.contact-button {
  
    width: 50%;
   text-align: center;
   font-size:3rem;
   color:white;
   height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  


}

.contact-button a {
  
    text-align: center;
    font-size:3rem;
    color:white;
    background-color: #2f4157;
    border-radius: 30px;
    padding:10px 15%;
    cursor: pointer;
  
}

.logo-div {
    width: 30vw;               /* Width is 30% of the viewport width */
    height: 30vw;              /* Height is also set to 30% of the viewport width */
    max-width: 200px;          /* Maximum size for larger screens */
    max-height: 200px;         /* Ensure maximum height is the same */
   
    border-radius: 50%;        /* Makes the container circular */
    overflow: hidden;          /* Ensures the image is cropped to the circle */
    display: flex;             /* Centers the image within the div */
    align-items: center;
    justify-content: center;
   
}

.logo-div img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

.logo-div-mobile {
    display: none;
}

hr {
    margin-top:20px;
}





/* Mobile CSS Starts */

@media (max-width: 767px) {

    .container {
        width: 90%;
        margin: 0 auto;
     
    
      
    }
    .blue {
        background-color: #2f4157;
        color:white;
        width: 100%;
        height: 80vh;
        display:flex;
   
        align-items: center;
    }
    
    
    .blue-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80vh;
      

      
    }
    .image-div {
        width: 100%;
       
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 50%;
        max-height: 50%;
    
        margin:0;
        padding:0;
   
    }

.image-container {
    width: 70vw;               /* Width is 30% of the viewport width */
    height: 70vw;              /* Height is also set to 30% of the viewport width */
    max-width: 500px;          /* Maximum size for larger screens */
    max-height: 500px;         /* Ensure maximum height is the same */
   
    border-radius: 50%;        /* Makes the container circular */
    overflow: hidden;          /* Ensures the image is cropped to the circle */
    display: flex;             /* Centers the image within the div */
    align-items: center;
    justify-content: center;
    
  

}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    
    /*.image-div img {
        width: 100%;
        border-radius:0;
        height: 100%;
        object-fit:contain;
      
   
      
        
    }*/
    
    .main-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 0.95rem;
      
        padding:0;
   
        height: 50%;

    }
    
    .main-content-top {
      

    }
    
    .main-content-bottom {
        
    }
    
    .social-media-icons {
    
        display: flex;
        flex-direction: row;
     
        justify-content: center;
        margin: 0 auto;
    
        align-items: center;
   
  
      
      
    }
    
    .social-media-icons a {
    
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
   
        align-items: center;
    }
    
    .social-media-icons a img {
    width:70%;
    
    }
    
    /* Mobile White starts */
    
    .white {
        width: 100%;
        height: 70vh;
        display:flex;
        flex-direction: column;
        background-color: #f3eeea;
        align-items: center;
    }
    
    .white-content {
     
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
  
     
    }
    
    .vertical-content {
       
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 2rem;
        color:#2f4157;
        
      

        }
    
    .contact-icon {
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      padding-top:20px;
      padding-bottom:20px;
     border-bottom: 1px solid #2f4157;

      }
    
      .contact-icon img {
        width: 10%;
      }
    
    .contact-button {
      
        width: 100%;
       text-align: center;
       font-size:3rem;
       color:white;
       border-radius: 0;
    
       padding:0;
       margin-top:50px;
       
    
    }
    
    .contact-button a {
      
        text-align: center;
        font-size:2rem;
        color:white;
        background-color: #2f4157;
        border-radius: 0;
        width: 100% !important;
        cursor: pointer;
        margin:0;
        padding:0;
        display: block;
        border-radius: 20px;
      
    }

    .logo-div {
        display: none;
    }

    .center-logo-div {
        width: 100%;
    
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:20px;
    }

    .logo-div-mobile {
        display:block;
        width: 30vw;               /* Width is 30% of the viewport width */
        height: 30vw;              /* Height is also set to 30% of the viewport width */
        max-width: 200px;          /* Maximum size for larger screens */
        max-height: 200px;         /* Ensure maximum height is the same */
   
        border-radius: 50%;        /* Makes the container circular */
        overflow: hidden;          /* Ensures the image is cropped to the circle */
        display: flex;             /* Centers the image within the div */
        align-items: center;
        justify-content: center;
    }
    .logo-div-mobile img {
        width: 100%;
        border-radius:0;
        height: 100%;
        object-fit:contain;
    }
  }