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


/* first and main section of home page starts from here*/

/* adjusting width of main row */
.main-section .row {
    width: 100%;
    margin: 0;
    
}
/* setting height and position of both columns content */
.main-section .row .col1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    position: relative;
  }

  .main-section .row .col12 {
    align-items: center;
  }
  /* first column img */ 
  .main-section .row .col1 img {
    width: 85%;
    margin-top: 20px;
  }
  /* first column background vector */
  .main-section .row .col1 .first-vector {
    position: absolute;
    z-index: -1;
    top: 0;
    margin-top: -20px;
  }
  /* 2nd column styling*/
  .main-section .row .col11 {
    padding: max(3vw, 20px);
  }


  .main-section .row .col1 h3 {
    font-family: 'Holtwood One SC', serif;
    font-weight: 700;
    font-size: max(1.8vw,15px);
    /* align-self: center; */
    letter-spacing: 2px;
    border-style: solid;
    padding: 0.5vw;
    border-radius: 40px;
    height: max(3.5vw,30px);
    width: max(18vw,200px);
    text-align: center;
    color: var(--primary-color);
    border-color: #000000;
  }
  .main-section .row .col1 h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 40px;
    margin-top: 20px;
  }

  .main-section .row .col1 h2 span {
    color: var(--primary-color);
  }

  .main-section .row .col1 p {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    padding: 5px;
    font-size: 25px;
    font-weight: 500;
  }

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

  .contact-form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 4vw; */
    border-radius: 30px;
  }

  .contact-form form .mb-3 {
    width: 80%;
    position: relative;
  }

  .contact-form form .mb-3 input {
    margin-top: max(1vw,10px);
    border-radius: 10px;
    height: max(4vw, 40px);
    padding-left: 10%;
    box-shadow: none;
    outline: none;
    border: 2px solid #000000;
  }

  textarea::placeholder {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: max(1.1vw,10px);
    color: rgba(0, 0, 0, 1);
    opacity: 1;
  }

  input::placeholder {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: max(1.1vw,10px);
    /* padding-left: 10px; */
    color: rgba(0, 0, 0, 1);
    opacity: 1;
  }

  .contact-form form .mb-3 textarea {
    margin-top: max(1vw,10px);
    border-radius: 10px;
    padding: 3%;
    box-shadow: none;
    outline: none;
    border: 2px solid #000000;
    width: 100%;
    height: max(15vw, 80px);
  }

  .contact-form form .mb-3 img {
    position: absolute;
    left: 2.5%;
    top: 32%;
    width: max(2.5vw, 25px);
  }

  .contact-form form .mb-3 label {
    position: absolute;
    left: max(10%,35px);
    top: 42%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: max(1.2vw, 15px);
  }
  
  .contact-form form .mb-3 .comment-label {
    position: absolute;
    left: max(4%,25px);
    top: 15%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  }

  .contact-form form button {
    background-color: var(--primary-color);
    font-family: 'Holtwood One SC', serif;
    width: max(15vw,150px);
    height: max(3.5vw,35px);
    border-radius: 20px;
    margin-top: 20px;
    border: #000000;
    color: #000000;
    font-size: max(1.2vw,15px);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-form form button:hover {
    background: linear-gradient(to right, var(--primary-color), #000000);
}

.contact-info {
    margin-top: max(5vw,30px); 
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info .row {
    width: 80%;
}

.contact-info .col-sm-4 {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

.contact-info .col-sm-4 div {
    background-color: #000000;
    display: flex; 
    justify-content: center; 
    align-items: center;
    width: max(6.5vw,80px);
    height: max(6.5vw,80px);
    padding: 20px;
    border-radius: 20px;
}

.contact-info .row .col-sm-4 div img {
    width: max(3vw,30px);
}

.contact-info .col-sm-4 h5 {
    margin-top: 15px;
    color: var(--primary-color);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.contact-info .col-sm-4 p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}