.ourservices {
    width: 100%;
    height: fit-content;
    background-color: white;
  }
  
 .container1 {
    width: 100%;
    height: fit-content;
  }
  .container1 h5{
    margin:0%;
    text-align: center;
    font-size: 22px;
    color:rgb(160, 42, 12);
    padding:30px;
    font-weight:500;
    position:relative;
  }
  
  /*.container1 h1 {
    text-align: center;
    font-weight: 600;
    position: relative;
    padding: 3%;
    margin-bottom: 0%;
    margin-top: 0%;
  }*/
  
  .container1 h1::after {
    content: '';
    background: #58082ed4;
    width: 100px;
    height: 5px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
  } 
  .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    grid-gap: 40px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 0%;
    margin-bottom: 0%;
  }
  
  .icon {
    width: 60px;
    height: 60px;
  }
  
  .Service {
    text-align: center;
    padding: 25px 10px;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    background: transparent;
    transition: transform 0.5s, background 0.5s;
  }
  
  .service .icon {
    font-size: 40px;
    margin-bottom: 8px;
    color: #303ef7;
  }
  
  .Service h2 {
    font-size: 25px;
    color: rgb(60, 8, 90);
  }
  
  .Service:hover {
    background: #a3aac9;
    color: darkcyan;
    transform: scale(1.05);
  }
  
  .Service .font {
    color: black;
    font-weight:400px;
    font-weight: 500;
    font-size: 16px;
  }
  
  /*  
  .ourservices {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
  }
   
  .ourservices.reveal {
    opacity: 1;
    transform: translateY(0);
  }*/
  @media (min-width: 320px) and (max-width: 480px) {

    .ourservices {
      width: 100%;
      height: fit-content;
      background-color: white;
    }
    
   .container1 {
      width: 100%;
      height: fit-content;
    }
    .container1 h5{
      margin:0%;
      text-align: center;
      font-size: 22px;
      color:rgb(160, 42, 12);
      padding:30px;
      font-weight:500;
      position:relative;
    }
    
    /*.container1 h1 {
      text-align: center;
      font-weight: 600;
      position: relative;
      padding: 3%;
      margin-bottom: 0%;
      margin-top: 0%;
    }*/
    
    .container1 h1::after {
      content: '';
      background: #58082ed4;
      width: 100px;
      height: 5px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translate(-50%);
    } 
    .row {
      display: grid;
      grid-template-columns: repeat(1, minmax(230px, 1fr));
      grid-gap: 40px;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 0%;
      margin-bottom: 0%;
    }
    
    .icon {
      width: 60px;
      height: 60px;
    }
    
    .Service {
      text-align: center;
      padding: 25px 10px;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      background: transparent;
      transition: transform 0.5s, background 0.5s;
    }
    
    .service .icon {
      font-size: 40px;
      margin-bottom: 8px;
      color: #303ef7;
    }
    
    .Service h2 {
      font-size: 20px;
      color: rgb(60, 8, 90);
    }
    
    .Service:hover {
      background: #a3aac9;
      color: darkcyan;
      transform: scale(1.05);
    }
    
    .Service .font {
      font-size: 15px;
      color: black;
      font-weight:400px;
    }
  }
  @media (min-width: 481px) and (max-width: 768px) {

    .ourservices {
      width: 100%;
      height: fit-content;
      background-color: white;
    }
    
   .container1 {
      width: 100%;
      height: fit-content;
    }
    .container1 h5{
      margin:0%;
      text-align: center;
      font-size: 22px;
      color:rgb(160, 42, 12);
      padding:30px;
      font-weight:500;
      position:relative;
    }
    
    /*.container1 h1 {
      text-align: center;
      font-weight: 600;
      position: relative;
      padding: 3%;
      margin-bottom: 0%;
      margin-top: 0%;
    }*/
    
    .container1 h1::after {
      content: '';
      background: #58082ed4;
      width: 100px;
      height: 5px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translate(-50%);
    } 
    .row {
      display: grid;
      grid-template-columns: repeat(1, minmax(230px, 1fr));
      grid-gap: 40px;
      margin-left: 50px;
    margin-right: 50px;
    margin-top: 0%;
    margin-bottom: 0%;
    }
    
    .icon {
      width: 60px;
      height: 60px;
    }
    
    .Service {
      text-align: center;
      padding: 25px 10px;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      background: transparent;
      transition: transform 0.5s, background 0.5s;
    }
    
    .service .icon {
      font-size: 40px;
      margin-bottom: 8px;
      color: #303ef7;
    }
    
    .Service h2 {
      font-size: 25px;
      color: rgb(60, 8, 90);
    }
    
    .Service:hover {
      background: #a3aac9;
      color: darkcyan;
      transform: scale(1.05);
    }
    
    .Service .font {
      font-size: 15px;
      color: black;
      font-weight:400px;
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {

    .ourservices {
      width: 100%;
      height: fit-content;
      background-color: white;
    }
    
   .container1 {
      width: 100%;
      height: fit-content;
    }
    .container1 h5{
      margin:0%;
      text-align: center;
      font-size: 22px;
      color:rgb(160, 42, 12);
      padding:30px;
      font-weight:500;
      position:relative;
    }
    
    /*.container1 h1 {
      text-align: center;
      font-weight: 600;
      position: relative;
      padding: 3%;
      margin-bottom: 0%;
      margin-top: 0%;
    }*/
    
    .container1 h1::after {
      content: '';
      background: #58082ed4;
      width: 100px;
      height: 5px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translate(-50%);
    } 
    .row {
      display: grid;
      grid-template-columns: repeat(3, minmax(223px, 1fr));
      margin-left: 10px;
    margin-right: 10px;
    margin-top: 0%;
    margin-bottom: 0%;
    }
    
    .icon {
      width: 60px;
      height: 60px;
    }
    
    .Service {
      text-align: center;
      padding: 25px 10px;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      background: transparent;
      transition: transform 0.5s, background 0.5s;
    }
    
    .service .icon {
      font-size: 40px;
      margin-bottom: 8px;
      color: #303ef7;
    }
    
    .Service h2 {
      font-size: 25px;
      color: rgb(60, 8, 90);
    }
    
    .Service:hover {
      background: #a3aac9;
      color: darkcyan;
      transform: scale(1.05);
    }
    
    .Service .font {
      font-size: 15px;
      color: black;
      font-weight:400px;
    }
  }
  @media (min-width: 1024px) and (max-width: 1200px) {

    .ourservices {
      width: 100%;
      height: fit-content;
      background-color: white;
    }
    
   .container1 {
      width: 100%;
      height: fit-content;
    }
    .container1 h5{
      margin:0%;
      text-align: center;
      font-size: 22px;
      color:rgb(160, 42, 12);
      padding:30px;
      font-weight:500;
      position:relative;
    }
    
    /*.container1 h1 {
      text-align: center;
      font-weight: 600;
      position: relative;
      padding: 3%;
      margin-bottom: 0%;
      margin-top: 0%;
    }*/
    
    .container1 h1::after {
      content: '';
      background: #58082ed4;
      width: 100px;
      height: 5px;
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translate(-50%);
    } 
    .row {
      display: grid;
      grid-template-columns: repeat(3, minmax(223px, 1fr));
      margin-left: 10px;
    margin-right: 10px;
    margin-top: 0%;
    margin-bottom: 0%;
    }
    
    .icon {
      width: 60px;
      height: 60px;
    }
    
    .Service {
      text-align: center;
      padding: 25px 10px;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      background: transparent;
      transition: transform 0.5s, background 0.5s;
    }
    
    .service .icon {
      font-size: 40px;
      margin-bottom: 8px;
      color: #303ef7;
    }
    
    .Service h2 {
      font-size: 25px;
      color: rgb(60, 8, 90);
    }
    
    .Service:hover {
      background: #a3aac9;
      color: darkcyan;
      transform: scale(1.05);
    }
    
    .Service .font {
      font-size: 15px;
      color: black;
      font-weight:400px;
    }
  }