@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

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

        body{
            background-color: #0A1A2F;
            font-family: "Montserrat";
            
        }
        main{
            margin-top: 2rem;
        }

        input,select,button{
            font-family: "Montserrat";
          
        }
      .container {
       width: 100%;
       min-height: 100vh; /* use min-height, not fixed height */
       display: flex;
       flex-direction: column;
       }

        header{
            display: flex;
            height: 4rem;
            width: 100%;
            background-color: rgb(9, 9, 39);
            align-items: center;
            margin-bottom: 2rem;
        }
        header h1{
             margin-left: 2rem;
             font-family: 'Poppins', sans-serif;
             font-size: 45px;
             font-weight: bold;
             background: linear-gradient(90deg, #007BFF, #00C851); /* Blue → Green */
             background-clip: text;
             -webkit-background-clip: text; /* for Chrome, Safari */
             color: transparent;            /* fallback */
             -webkit-text-fill-color: transparent; /* ensures text is transparent on Safari */
   
        }
     .form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        height: auto; /* remove fixed % height */
           }
        form{
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .f{
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .f label{
            color: #D9D9D9;
        }
        .quote {
        color: #00C851;
        text-align: center;
     margin: 2rem 1rem; /* spacing so it won’t overlap */
       }
        .button{
            margin-top: 0.5rem;
            display: flex;
            justify-content: center;
        }
        button{
            background-color: #4CAF50;
            color: black;
            padding: 10px;
            border-radius: 0.4rem;
            outline: none;  
            transition: transform 0.3s ease;
        }
        button:hover {
           transform: scale(1.1);
           color: aqua;
        }

        option{
            padding:1rem;
        }
        select, input {
            height: 2.2rem;
            width: 100%;
            max-width: 16rem;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            background-color: aliceblue;
        }
        .intro{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            align-content: center;
            text-align: center;
        }
        .intro h2{
            color: #FFFFFF;
        }
        .intro p{
            color: #EED9B7;
        }

        
       @media screen and (max-width: 400px) {
           input,select{
            width: 100%;
           }
         }
        .maps {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-top: 2rem;
         }

       .map {
         width: 150px;
         height: 150px;
         text-align: center;
         gap: 30px;   /* increase gap between maps */
         margin-top: 2rem;
         margin-bottom: 2rem;
        }


        iframe{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .map p{
          color: #EED9B7;
        }
        h3{
            color: #FFFFFF;
            text-align: center;
            margin-top: 3rem;
        }
        h3 span{
            color: #4CAF50;
            font-size: 1.3rem;
        }
        .map span{
            color: rgb(154, 158, 183);
        }

       @media screen and (max-width: 600px) {
          .map {
              width: 120px;
              height: 120px;
          }
      
          header h1 {
              font-size: 28px;
          }
     }