* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body{margin: 0; font-family: "ROBOTO", sans-serif; background-color: #000000;}
/* -------------------------------------------------------sec-top-box ----- */
.sec-top-box{
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  background-image: url(images/tableOne.jpg);
  background-color: #00000075;
  background-blend-mode: overlay;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-attachment: fixed;  
  border-radius: 0px 0px 25px 25px;
}
.sec-top-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-one-box ----- */
.sec-one-box{
    padding: 60px 50px 60px 50px;
    font-size: larger;
  }
  .sec-one-box-paragraph{
  margin-right: 10px;
  color: #ffffff;
  }
  
  /* -------------------------------------------------------sec-two-box ----- */
  .sec-two-box{
    font-size: larger;
    padding: 0px 50px 60px 50px;
  }
  .sec-two-box-plan{
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    gap: 2%;
  }
  .sec-two-box-child-one{
    flex: 30%;
    background-image: url(images/bsTwoparttwo.jpg);
    background-size: cover;
    color: white;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 25px;
  }
  
  .sec-two-box-child-two{
    flex: 30%;
    background-image: url(images/bsTwopartthree.jpg);
    background-size: cover;
    color: white;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 25px;
  }
  .sec-two-box-color{
    background-color: #4267b2a8;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      border-radius: 25px 25px 400px 25px;
      padding: 1px;
      height: 100%;
      transition: .5s ease;
    }
    .sec-two-box-color:hover {
      height: 100%;
      border-radius: 25px;
      background-color:#4267b2; 
    }
     /* ------------------------------------------------sec-three-box ------- */
     .sec-three-box{
      font-size: larger;
      padding: 60px 40px 60px 40px;
      text-align: center;
        }
        .sec-three-box-child{
          display: grid;
          grid-template-columns: auto auto;
          gap: 20px;
          justify-content: center;
          padding-top: 50px;
        }
        .sec-three-box-child iframe{
          width: 40vw;
          height: 23vw;
        }
   /* ------------------------------------------------sec-four-box ------- */
   .sec-four-box{
    font-size: larger;
    padding: 40px;
    background-color: #4267b2;
    text-align: center;
  }
  .sec-four-box-child{
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
    justify-content: center;
  }
.sec-four-box-child img{
  width: 18vw;
}
   /* ------------------------------------------------------- screen 750px -- */
  @media screen and (max-width: 750px) {
    .sec-top-box{
      background-attachment: unset;
    }
    .sec-two-box{
      padding: 0px 50px 30px 50px;
    }
    .sec-two-box-child-one{
      flex: 100%;
      margin-bottom: 15px;
    }
    .sec-two-box-child-two{
      flex: 100%;
    }
    /* -----------------------------------------sec-three-box 750px---- */
  .sec-three-box{
    padding: 60px 20px 60px 20px;
      }
      .sec-three-box-child{
        grid-template-columns: auto;
        padding-top: 20px;
      }
      .sec-three-box-child iframe{
        width: 70vw;
        height: 38vw;
      }

    .sec-four-box-child img{
      width: 35vw;
    }
  }
  /* ------------------------------------------------------- screen 550px -- */
  @media screen and (max-width: 550px){
    .sec-top-box h1{
      font-size: 10vw;
    }
  .sec-one-box h1{
      font-size: 10vw;
  }
    .sec-one-box{
        padding-left: 10px;
        padding-right: 10px;
      }
      .sec-two-box{
          padding-left: 10px;
          padding-right: 10px;
      }
     /* -----------------------------------------sec-three-box 550px---- */
  .sec-three-box{
    padding: 40px 10px 64px 10px;
      }
      .sec-three-box-child iframe{
        width: 90vw;
        height: 48vw;
      }
      .sec-four-box{
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 10px;
        padding-right: 10px;
      }
      .sec-four-box{
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 10px;
        padding-right: 10px;
      }
      .sec-four-box-child img{
        width: 45vw;
      }
  }