* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html,
     body {
         background-color: #424144;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100vh;
         position: relative;
         overflow: hidden;
         font-family: 'Montserrat', sans-serif;
     }



     .logo-circle {
         position: absolute;
         top: 60px;
         left: 60px;
         width: 100px;
         height: 100px;
         z-index: 10;
         object-fit: contain;

     }

     /* Big transparent circle */
     .big-circle {
         position: absolute;
         top: 100px;
         left: 20%;
         transform: translateX(-50%);
         width: 1000px;
         height: 1000px;
         background: rgba(222, 211, 245, 0.3);
         border-radius: 50%;
         z-index: 3;
         pointer-events: none;
     }

     .contact-box {
         background: #FFFFFF;
         border: 2px solid #707980;
         border-radius: 8px;
         padding: 60px;
         max-width: 1200px;
         height: 80vh;
         width: 100%;
         position: relative;
         z-index: 2;

     }

     .contact-header {
         color: #4a3fbf;
         position: relative;
         z-index: 6;
     }

     .contact-text {

         color: #4a3fbf;
         position: relative;
         z-index: 6;
     }

     .form-label {
         color: #4a3fbf;
         font-weight: 500;
         margin-bottom: 0;
     }

     .form-control {
         border: none;
         border-bottom: 2px solid #b0aee2;
         border-radius: 0;
         padding-left: 0;
         background: transparent;
         color: #4a3fbf;
     }

     .form-control::placeholder {
         color: #7a6fd1;
         opacity: 1;
     }

     .form-control:focus {
         box-shadow: none;
         border-color: #4a3fbf;
     }

     .submit-btn {
         border: none;
         background: #4a3fbf;
         color: white;
         font-weight: 600;
         margin-top: 25px;
         cursor: pointer;
         display: inline-block;
         text-decoration: none;
         padding: 8px 16px;
         border-radius: 10px;
     }

     .close-btn {
         position: fixed;
         top: 80px;
         right: 100px;
         font-size: 2rem;
         color: #4a3fbf;
         cursor: pointer;
         z-index: 3;
         text-decoration: none;
         background: transparent;
     }

     .close-btn:hover {
         color: #2e2aa0;
         transform: scale(1.2);
         transition: all 0.2s ease-in-out;
     }

     .invalid-feedback {
         font-size: 10px;
         margin-top: 2px;
     }

     @media (min-width: 1680px) and (max-width: 1920px) {
         .big-circle {
             position: absolute;
             top: 170px;
             left: 19%;
             transform: translateX(-50%);
             width: 1400px;
             height: 1400px;
         }

         .close-btn {

             top: 110px;
             right: 160px;
             font-size: 4rem;
         }

         .contact-box {

             padding: 120px 80px;
             max-width: 1650px;
      

         }
     }

     @media (min-width: 1440px) and (max-width: 1680px) {
         .contact-box {
             padding: 100px 80px;
             max-width: 1400px;
     
         }
     }

     @media (min-width: 1300px) and (max-width: 1440px) {
         .contact-box {
             padding: 75px 80px;
             max-width: 1200px;
       
         }

         .close-btn {

             top: 100px;
             right: 100px;
             font-size: 3rem;

         }
     }





     @media(max-width:1300px) {
         .big-circle {
             top: 124px;
             left: 20%;
             transform: translateX(-50%);
             width: 800px;
             height: 800px;
         }

         .contact-box {
             max-width: 1000px;
             margin: 0 20px;
             height: 80vh;
             width: 100%;

         }

        .close-btn {
        position: fixed;
        top: 80px;
        right: 125px;
    }

     }


     @media(max-width:1024px) {
    .close-btn {
        position: fixed;
        top: 80px;
        right: 40px;
    }

     }



     @media(max-width:768px) {
         .small-circle {
             width: 200px;
             height: 200px;
         }

         .big-circle {
             top: 86px;
             left: 15%;
             transform: translateX(-50%);
             width: 800px;
             height: 800px;
         }

    .close-btn {
        position: fixed;
        top: 80px;
        right: 40px;
    }

     }

     @media(max-width:567px) {
         .close-btn {
             position: fixed;
             top: 50px;
             right: 30px;
         }

         .contact-box {
             max-width: 1000px;
             margin: 0 20px;
             height: 85vh;
             width: 100%;

         }

         .big-circle {
             top: 100px;
             left: 0%;
         }

     }

     @media (max-width: 400px) {
         .close-btn {

             right: 45px;
             top: 60px;
         }

         .contact-box {
             height: 80vh;

             padding: 30px;
             margin: -50px 20px 0;
    
         }


         .big-circle {
             top: 85px;
             left: -10%;
             transform: translateX(-50%);
             width: 800px;
             height: 800px;
         }






     }