@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
*{
    
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}
body{
  background-color: white;
  color: #000;
  z-index: 99;
}
[aos="fade"] {
    opacity: 0;
    transition-property: opacity;
   
  }
  
  [aos="fade"].aos-animate {
    opacity: 1;
    
  }
  

.header-cover{
  background: linear-gradient( 50deg, darkslateblue 50%, transparent 90px,  #DAA520 50%);
  height: 60px;
  z-index:99;
}
@media(min-width:320px) and (max-width:425px){
.header-cover{
  height:85px;
  
  }
}
@media(min-width:320px) and (max-width:727px){
  .bounce{
    white-space: nowrap;
    font-size:15px;
    }


.header-cover .bounce{
  position: relative;
  animation: bouncing-text 5s linear infinite alternate;
  overflow: hidden;
            
 }
}

@keyframes bouncing-text {
      from{left: -2px;}
      to {left: 10px;}
 
}
  .ukra{
    height:100%;
    background-color:white;
    padding :2% 5%;
    line-height:1.5rem;
    font-size:18px;
    text-align:center;
    width:calc(50% - 50%);
  }
  .img-borad{
    width: cal(50%, + 50px);
    height:100%;
    background-color: rgb(0, 0, 1);
    border-left: 100px solid white;
    border-bottom: 400px solid transparent;
  }
  
  #banner { 
    overflow: hidden;
      width: 100%; 
      height: auto; 
      background: url(../images/cir1.webp);
      animation: animatedBackground 40s linear infinite;
      background-position:center ;
       background-size:cover;
       
      
  }
  
  @keyframes animatedBackground {
      from { background-position:0px 0px; }
      to { background-position: 0px 300px; }
  }

#banner-3{
  width: 100%; 
  height: auto; 
  background:linear-gradient(50deg, transparent 30px, #DAA520 30%, #fff 40%);
  background-position:center ;
  background-size:cover;
 }

#banner-4{
  width: 100%; 
  height: auto; 
  background: url(../images/white.webp) repeat;
  animation: animatedwhite 40s linear infinite;
  background-position:center ;
 }
 
 @keyframes animatedwhite {
  from { background-position:0px 0px; }
  to { background-position: 300px -300px; }
}
#banner-5{
  width: 100%; 
  height: auto; 
  background: linear-gradient(50deg, transparent 30px, #fff 60%, #DAA520 50%);
  background-position:center ;
  background-size:cover;
 }
 
 .p-txt{
   color: #DAA520;
 }
 @media(min-width:320px) and (max-width:995px){
   .p-txt{
     color: #fff;
   }
 }
 @media(min-width:995px) and (max-width:1200px){
   .p-txt{
     color: #000;
   }
 }
/*LANDING PAGE*/

.navbar ul{
    font-display: 10px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    color: black;
}
.navbar a {
    text-decoration: none;
    color: black;
}
.navbar a:hover{
    color: blue;
}

.reg-btn{
    width: 200px;
    border: black;
    height: 50px;
    border-radius: 20px;
    background: linear-gradient(50deg, transparent 10px, darkslateblue 70px, #DAA520 30px);
    margin-left:10px;
}
 .reg-btn a{
    padding-left: 50px;
    padding-top: 10px;
    color: #fff;
}

.reg-btn a:hover{
    color: #fff;
}

.carousel-item{
    height:30rem;
   background: #ffff;
  }
  
     .overlay-image{
       position:absolute;
       left:0;
       right:0;
       bottom:0;
       top:0px;
       background-position:center ;
       background-size:cover;
       background-repeat: no-repeat;  
    }
  .container-img-1{
      position:absolute;
      left:20%;
      right:0;
      top:40%;
      padding-bottom:50px;
      }
      .container-img-2{
      position:absolute;
      left:10%;
      right:0;
      bottom:10%;
      padding-bottom:50px;
      }
      .container-img{
      position:absolute;
      left:10%;
      right:0;
      bottom:90px;
      padding-bottom:50px;
      }

 
.container-img-1{
    position:absolute;
    left:20%;
	right:0;
    top:40%;
    padding-bottom:50px;
    }
    .container-img-2{
    position:absolute;
    left:10%;
	right:0;
    bottom:10%;
    padding-bottom:50px;
    }
    .container-img{
    position:absolute;
    left:10%;
	right:0;
    bottom:0px;
    padding-bottom:50px;
    }
    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 20px;
        padding: 10px 16px;
      }
        
      .btn-lg {
        font-size: 18px;
        line-height: 1.33;
        border-radius: 20px;
      }
      
      .btn-primary {
        color: #000;
        background-color: #0000;
        border-color: #000;
      }
      
      .btn-primary:hover,
      .btn-primary:focus,
      .btn-primary:active,
      .btn-primary.active,
      .open .dropdown-toggle.btn-primary {
        color: #000;
        background-color: #3276b1;
        border-color: #285e8e;
      }
      
      .btn.outline {
        background: none;
        padding: 12px 22px;
      }
      .btn-primary.outline {
        border: 2px solid #000;
        color: #000;
      }
      .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
        color: #000;
        border-color: #DAA520;
      }
      .btn-primary.outline:active, .btn-primary.outline.active {
        border-color: #007299;
        color: #007299;
        box-shadow: none;
      }
      .i{
        font-size:3.0rem;
        font-family:  Arial, Helvetica, sans-serif;
      }
      .p-color{
        color:#DAA520;
      } 
      .b-color{
        color: #303030;
      }
      
      .btn {
        padding: 14px 24px;
        border: 0 none;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        
      }
      .btn:focus, .btn:active:focus, .btn.active:focus {
        outline: 0 none;
      }
    .col-how-txt-1{
        margin-left:3px;
    }
   
    .swiper {
        width: 100%;
        height: 105%;
      }
      
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper-container{
          background: #cced;
          height: 400px;
      }
      
      .card{
          position: relative;
          height: 400px;
          width:400px;
          align-items: center;
          justify-content: center;
      }
     
      .card img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid #fff; 
      }
      .card .name-profession{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        color: #333;
    }
    .card .name-profession .name{
        font-size: 20px;
        font-weight: 600;
    }

    .card .name-profession .name .profession{
        font-size: 15px;
        font-weight: 500;
    }
    @media(min-width:320px)and(max-width:800px){
        .pfrofession{
            display:none;
        }
    }
    .pad-semi{
      padding:10px;
    }
    @media(min-width:300px){
      .pad-semi{
          padding: 0px;
          padding-bottom: 10px;
          text-align: center;
      }
    }
    @media(max-width:768px){
      .pad-semi{
        padding: 30px;
          
      }
    }
    .media-icons{
      display: flex;
      justify-content: space-between;
      width: 20%;
    }
    @media(min-width:325px){
      .media-icons{
        display: flex;
      justify-content: space-between;
      width: 100%;
      }
    }
    .media-icons i{
      color: rgb(34, 8, 209);
      font-size: 35px;
    }

    .port-class{
      position: relative;
      white-space: nowrap;
    }
    @media(max-width:443px){
      .port-class{
        font-size: 12px;
      }
    }
    .port-class i{
      display: flex;
      flex-direction: column;
    }