body {
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

.head__custom-nav .navbar-brand img {
  width: 0px;
  height: 0px; 
}
.head__custom-nav .navbar-brand span {
  font-weight: 700;
  font-size: 25px;
  margin-left: 10px; 
}
.head__custom-nav button {
  padding: 0;
}
  .head__custom-nav button span img {
    width: 45px;
  }
.head__custom-nav #navbarNav .navbar-nav .nav-item .nav-link {
  color: #000;
  font-weight: 400;
  padding: 8px 15px;
  white-space: nowrap;
  transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
}
  .head__custom-nav #navbarNav .navbar-nav .nav-item .nav-link:hover {
    color: #417564; 
  }
  .sec-1{
    width: inherit;
  padding: 40px 0;
        width:100%;
  padding:100px 40px;
  background:#f2fcf9;
  }
  .col-12 h2 {
      font-size:45px;
      font-weight:500;
      color:#000;
  }
  .col-12 h2 span{
      font-size:60px;
      font-weight:500;
      color:#417564;
  }
  .sec-1 p {
      font-size:14px;
  }
  .col-12 .button {
      display: inline-block;
      padding: 10px 25px;
      color: #fff;
      background-color: #417564;
      border: 1px solid transparent;
      border-radius:25px;
      margin-top: 10px;
      text-decoration: none;
      z-index:1;
      transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
  }
      .col-12 .button:hover {
        color: #417564;
        background-color: transparent;
        border: 1px solid #417564; 
      }
      .sec-1 .image{
          background-color:#417564;
          border-radius:28% 88% 0% 35% / 50% 70% 35% 66% ;
          max-width: 430px;
          max-height: 480px;
      }
      .icon {
      background-color:#ceede3;
      padding: 2px 10px 4px;
      border-radius:50px;
      transition:1s;
      }
      .icon:hover{
          transform:scale(1.1);
      }
      .box div {
          position:absolute;
          width:60px;
          height:60px;
          background-color:transparent;
          border:6px solid #417564;
          z-index:0;
      }
      .box div:nth-child(1){
          top:40%;
          left:42%;
          animation:animate 10s linear infinite;
      }
       .box div:nth-child(2){
          top:45%;
          left:50;
          animation:animate 7s linear infinite;
      }
        .box div:nth-child(3){
          top:65%;
          left:6%;
          animation:animate 9s linear infinite;
      }
         .box div:nth-child(4){
          top:70%;
          left:60%;
          animation:animate 10s linear infinite;
      }
          .box div:nth-child(5){
          top:100%;
          left:20%;
          animation:animate 7s linear infinite;
      }
         @keyframes animate{
             0%{
                 transform:scale(0) translateY(0) rotate(0);
                 opacity:1;
             }
             100%{
                 transform:scale(1.3) translateY(-90px) rotate(360deg);
                 opacity:0;
             }
         }

         .sec-2 {
    width: inherit;
    width:100%;
    padding:100px 40px;
  }
         .about{
             font-size:40px;
             font-weight:300;
         }
         
         .skill{
             width:160px;
             height:160px;
             position:relative;

         }
         .outer{
            width:160px;
            height:160px;
            border-radius:50%;
            padding:20px;
            box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.2),
                       -6px -6px 10px -1px rgba(255,255,255,0.7);
         }
         .inner{
             width:120px;
             height:120px;
             border-radius:50%;
             display:flex;
             align-items:center;
             justify-content:center;
             box-shadow:inset 4px 4px 6px -1px rgba(0,0,0,0.2),
                        inset -4px -4px 6px -1px rgba(255,255,255,0.7),
                              -0.5px -0.5px 0px rgba(255,255,255,1),
                              0.5px 0.5px 0px rgba(0,0,0,0.15),
                              0px 12px 10px -10px rgba(0,0,0,0.05);  
         }
         #number{
             font-weight:500;
             color:#000;
         }
         
         circle{
             fill:none;
             stroke:#417564;
             stroke-width:10px;
             stroke-dasharray:472;
             stroke-dashoffset:472;
             animation:anim 2s linear forwards; 
         }
         svg{
             position:absolute;
             top:0;
             left:0;
         }
         @keyframes anim{
             100%{
                 stroke-dashoffset:165;
             }
         }
          .circle2{
             fill:none;
             stroke:#417564;
             stroke-width:10px;
             stroke-dasharray:472;
             stroke-dashoffset:472;
             animation:anim2 2s linear forwards; 
         }
         svg{
             position:absolute;
             top:0;
             left:0;
         }
         @keyframes anim2{
             100%{
                 stroke-dashoffset:94.4;
             }
         }
         .circle3{
             fill:none;
             stroke:#417564;
             stroke-width:10px;
             stroke-dasharray:472;
             stroke-dashoffset:472;
             animation:anim3 2s linear forwards; 
         }
         svg{
             position:absolute;
             top:0;
             left:0;
         }
         @keyframes anim3{
             100%{
                 stroke-dashoffset:141.6;
             }
         }
         .circle4{
             fill:none;
             stroke:#417564;
             stroke-width:10px;
             stroke-dasharray:472;
             stroke-dashoffset:472;
             animation:anim4 2s linear forwards; 
         }
         svg{
             position:absolute;
             top:0;
             left:0;
         }
         @keyframes anim4{
             100%{
                 stroke-dashoffset:236;
             }
         }
            .sec-3 {
    width: inherit;
    width:100%;
    padding:100px 40px;
    background:#f2fcf9;
  }
            .card-back{
                background-color:#fff;
                padding:40px;
                border-radius:0px 25px 0px 25px;
                margin:20px;
                box-shadow: 6px 6px 4px #888888;
                transition:1s;
            }
            .card-back:hover{
                transform:scale(1.1);
            }
            .card-txt{
                font-size:13px;
                position:center;
                color:#979797;
            }
            .sec-4{
                background-color:#417564;
                padding:2.5rem 0;
            }
            .sec-4 h2{
                color:#202020;
            }
            .sec-4 p{
                color:#fff;
                text-transform:uppercase;
                margin-bottom:0;
            }
            .sec-5{
                 width: inherit;
                 width:100%;
                 padding:100px 40px;
            }
              .campus{
            width:80%;
            margin:auto;
            text-align:center;
            padding-top;50px;
        }
        
        .campus-col{
            flex-basis:30%;
            border-radius:10px;
            margin-bottom:30px;
            position:relative;
            overflow:hidden;
        }

        .campus-col img{
            width:100%;
        }

        .layer{
            background:transparent;
            height:100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            transition:1s;
        }

        .layer:hover{
            background:rgba(0,0,0,0.7);
        }

        .layer .trans{
            width:100%;
            font-weight:500;
            color:#fff;
            font-size:26px;
            bottom:0;
            left:50%;
            transform:translateX(-50%);
            position:absolute;
            opacity:0;
            transition:1s;
        }

        .layer:hover .trans{
            bottom:60%;
            opacity:1;
        }
        h4{
            color:#f8f9fa        
        }
        .sec-5{
             width: inherit;
             width:100%;
             padding:100px 40px;  
        }
        .sec-5 .button{
            display: inline-block;
      padding: 10px 25px;
      color: #fff;
      background-color: #417564;
      border: 1px solid transparent;
      border-radius:25px;
      text-decoration: none;
      z-index:1;
      transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
  }
      .sec-5 .button:hover {
        color: #417564;
        background-color: #fff;
        border: 1px solid #417564; 
      }
         .btn-outline-primary {
            color: #417564;
            background-color: transparent;
            background-image: none;
            border-color: #417564;
            transition:0.5s;
        }
          .btn-outline-primary:hover{
              color:#fff;
              background-color:#417564;
              border-color:#417564
          }
          .sec-6{
                 width: inherit;
                 width:100%;
                 padding:100px 40px;
                 background:#f2fcf9;
          }
         .sec-6 .card2{
                border-radius:0px 25px 0px 25px;
                padding-bottom:20px;
            }
           .sec-7{
                width: inherit;
                width:100%;
                padding:100px 40px;
           }
            .sec-7 .button {
                display: inline-block;
                padding: 10px 25px;
                color: #fff;
                background-color: #417564;
                border: 1px solid transparent;
                border-radius: 25px;
                margin-top: 10px;
                text-decoration: none;
                z-index: 1;
                transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            }
                .sec-7 .button:hover {
                    color: #417564;
                    background-color: #fff;
                    border: 1px solid #417564;
                }
                /*.sec-7 form{
                    background-color:#417564;
                    padding:40px;
                    border-radius:30px;
                    border-left:#979797 solid 20px;
                   
                }*/
                .icon-txt{
                    margin-bottom:80px;
                }
                .icon-txt h6{
                    font-weight:500;
                }
                .icon-txt span{
                    font-size:13px;
                    padding-right:10px;
                    color:#5c5c5c
                }
                .icon-txt p img{
                    filter:invert(56%) sepia(31%) saturate(520%) hue-rotate(183deg) brightness(87%) contrast(90%);
                }

                footer{
                    background-color:#417564;
                    padding:2px;
                }
                footer span{
                    color:#fff;
                }
                footer a{
                    text-decoration:none;
                    color:#000;
                    transition:1s;
                    
                }
                footer a:hover{
                    color:#fff;
                    text-decoration:none;
                }