@import url(https://fonts.googleapis.com/css?family=Cairo);


*,
*:before,
*:after {
    box-sizing:(border-box);
}

html, body {
  background: #ffffff;
  font-family: 'Cairo'; font-size: 15px;

}

h1 {
   text-align: center;
   color: #a8a8a8;
   text-shadow:(1px 1px 0 rgba(white, 1));
   font-family: 'Cairo';
}
h2{
  font-size: 20px;
}
.main-form{
  background: #318997;
  padding: 30px 30px;
}

form {
   text-align: center;
   margin: 20px auto;
   direction: rtl;
   width: 60%;}

  input, textarea,select {
     border:0; outline:0;
     padding: 1em;
     border-radius:8px;
     display: block;
     width: 100%;
     margin-top: 1em;
     box-shadow:( 1px 1px rgba(black, 0.1));
     resize: none;
     background-color: #fff;
    border: 1px solid #ececec;
    font-family: 'Cairo';



    &:focus {

       box-shadow:(0 0px 2px rgba(#e74c3c, 1));
    }


  button{
     color: white;
     background: #e74c3c;
     cursor: pointer;


  }

  textarea {
      height: 126px;
  }
}


.half {

  width: 48%;
  margin-bottom: 1em;
}

.right { width: 50%; }

.left {
     margin-right: 2%;
}


@media (max-width: 480px) {
  .half {
     width: 100%;
     float: none;
     margin-bottom: 0;
  }
}
.bord{
   /*background: #008A97 2% 2% padding-box;*/
   /* border-radius: 9px;*/
   /* opacity: 1;*/
   /* width: 100%;*/
   /* height: 16px;*/
}

/* Clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
.card {
    text-align:center;
      height:270px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;

      border: 1px #E2E2E2 solid;
      border-radius: 1rem;
      margin: 10px 10px;
      background-color:#F6F6F6;
      border-bottom: none;
    }
    h2{color:#008A97}

   /* .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      background-color:#3BA5B0;

      color:#fff;
    }*/

    .container {
      padding: 15px 16px;
    }
    .settings {
        display:flex;
        gap: 20px;

    }

    select option:hover {
      box-shadow: 0 0 10px 100px green inset;
      color:white;
    }
    label {
        display: block;
        text-align: right;
        margin: auto;
        width: 235px;
        color:white;
      }
      .logo{
        width:10%
      }
      a{
        text-decoration: none;
        color: black;
      }
     .input-submit {
        width: 50%;
        padding: 5px 20px;
         }
         .footerContent{
          width: 28%;
          text-align: right;
          color: #fff;
          padding: 30px;
         }
         .contact , button{
        padding: 4px 55px;
        border-radius: 8px;
        color: #fff;
         line-height: 32px;
         background-color: #008a97;
         border: 1px #E2E2E2 solid;
        margin-top: 20px;
        font-size: 18px;
         font-weight: 600;
         font-family: 'Cairo';
         }
         .contact-card{    display: flex;
          justify-content: center;
          background-color: #008897;}
            .main-box{
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                width: 85%;
                direction: rtl;
                margin:0px auto;
              justify-content: space-around;

            }
            .txt{    width: 15%;
              text-align: right;
              color: #fff;
              border-right: 1px solid #fff;
              padding: 30px;}
            .main-flex{
             background: #318997;
             padding: 60px 30px;
            }
            @media only screen and (max-width: 600px) {
                .main-box {
                    grid-template-columns: auto;
                    width: 100%;
                }
                .logo{width: 30%;}
                .input-submit {
                    width: 100%;}
                .main-flex{
                    display: grid;
                }
                .contact-card{
                    width: 100%;
                }
                form {
                    max-width: 100%;

                    margin: auto;}
              }
              @media only screen
              and (min-device-width : 768px)
              and (max-device-width : 1024px) {
                .logo{width: 30%;}
                                .main-box {
                    grid-template-columns: auto;
                    width: 100%;
                }
                .main-flex{
                    display: grid;
                }
                form {
                    max-width: 100%;

                    margin: auto;}
                .contact-card{
                    width: 50%;
                }
                .input-submit {
                    width: 100%;}


              }

              .card-container {
        background: #318997;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px;
    }

    .cardnew {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 100%; /* Full width on mobile */
        text-align: center;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 10px 10px; /* Adjust margin for spacing */
    }

    .cardnew img {
        height: 50px;
    }

    .cardnew h3, .cardnew p {
        margin: 10px 0;
        color: #34a7ac;
    }

    .cardnew p {
        color: #6c757d;
    }

    .cardnew .button {
        display: inline-block;
        background: #34a7ac;
        color: #fff;
        padding: 8px 16px;
        border-radius: 30px;
        text-decoration: none;
        margin: 15px 0 0;
        font-size: 18px;
    }

    .cardnew .button img {
        height: 24px;
        vertical-align: middle;
    }

    @media only screen and (min-width: 600px) {
        .cardnew {
            width: calc(33.33% - 61px); /* Adjust card width for medium screens */
            margin: 10px; /* Adjust margin for spacing between cards */
        }
    }

       .error
{
color: red;
size: 80%
}
.hidden
{
display:none
}