* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body{margin: 0; font-family: "ROBOTO", sans-serif; background-color: #000000; color: #ffffff;}
/* -------------------------------------------------------sec-one-box ----- */
.sec-one-box{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    background-image: url(images/contactInfoImg.jpg);
    background-color: #000000a8;
    background-blend-mode: overlay;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed;  
    border-radius: 0px 0px 25px 25px;
}
.sec-one-box h1{
    flex: 100%;
    font-size: 6vw;
    text-shadow: 1.5px 2px 0 #0a0a0ada;
    letter-spacing: 0.3rem;
    color:rgb(242, 242, 247);
    transition: all 0.3s ease;
    z-index: 2;
}
/* ------------------------------------------------ sec-two-box ------ */
.sec-two-box{
  font-size: larger;
  padding: 60px 40px 60px 40px;
  text-align: center;
    }
    .sec-two-box-child{
      display: flex;
      flex-wrap: wrap;
      gap: 2%;
    }
    .sec-two-box-child-one{
      flex: 25%;
      text-align: center;
      border: 2px solid #ffffff;
      border-radius: 5px;
      padding: 20px;
      margin-top: 20px;
    }
    .sec-two-box-child-two{
      flex: 25%;
      text-align: center;
      border: 2px solid #ffffff;
      border-radius: 5px;
      padding: 20px;
      margin-top: 20px;
    }
    .sec-two-box-child-three{
      flex: 25%;
      text-align: center;
      border: 2px solid #ffffff;
      border-radius: 5px;
      padding: 20px;
      margin-top: 20px;
    }
     /* ------------------------------------------------sec-three-box ------- */
.sec-three-box{
    font-size: larger;
    margin-top: 40px;
    padding: 60px 40px 60px 40px;
    background-color: #4267b2;
    text-align: center;
      }
      .sec-three-box-child{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
        padding-top: 0px;
        
      }
     .sec-three-box a{
      text-decoration: none;
      color: #ffffff;
      background-color: #4d4d4d;
      padding: 10px;
      border-radius: 5px;
      transition: all .5s ease-in-out;
     }
     .sec-three-box a:hover{
      color: #000000;
      cursor: pointer;
      background-color: #ffffff;
     }
     /* ------------------------------------------------sec-four-box ------- */
.sec-four-box{
  font-size: larger;
  padding: 60px 40px 60px 40px;
  text-align: center;
    }
    .sec-four-box-child{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 0px;
    }
   .sec-four-box a{
    text-decoration: none;
    color: #ffffff;
    background-color: #4267b2;
    padding: 10px;
    border-radius: 5px;
    transition: all .5s ease-in-out;
   }
   .sec-four-box a:hover{
    cursor: pointer;
    background-color: #4d4d4d;
   }
   
   .on-contact-page{
       font-size: 1.5vw;
       color: #4267b2;
       font-weight: bold;
   }
    /* ------------------------------------------------------- screen 550px -- */
    @media screen and (max-width: 550px){
      .sec-one-box h1{
        font-size: 10vw;
    }
    /* ------------------------------------------------ sec-two-box ------ */
.sec-two-box{
  padding-left: 10px;
  padding-right: 10px;
    }
    .sec-two-box-child-one{
      flex: 100%;
    }
    .sec-two-box-child-two{
      flex: 100%;
    }
    .sec-two-box-child-three{
      flex: 100%;
    }
     /* ------------------------------------------------sec-three-box ------- */
.sec-three-box{
    padding-left: 10px;
    padding-right: 10px;
      }
     /* ------------------------------------------------sec-four-box ------- */
.sec-four-box{
    padding-left: 10px;
    padding-right: 10px;
    }
    
.on-contact-page{
       font-size: 3vw;
   }
    }