body {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}

.f-logo{
    height: 50px;
}


/* Ripple Out */
@-webkit-keyframes btn-primary {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes btn-primary {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.btn-primary {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 35px;
  background: #2766EB !important;
  border-color: #2766EB !important;
  padding: 12px 24px;
}
.btn-primary:hover:before {
  content: '';
  border-radius: 35px;
  position: absolute;
  border: #2766EB solid 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.btn-primary:hover:before, .btn-primary:focus:before, .btn-primary:active:before {
  -webkit-animation-name: btn-primary;
  animation-name: btn-primary;
}

.btn-outline-primary{
    border-radius: 35px;
    border: 1px solid #2766EB;
    background: #F1F6FF;
    padding: 12px 45px;
}

/* Ripple Out */
@-webkit-keyframes btn-primary {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes btn-outline-primary {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.btn-outline-primary {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 35px;
  border: 1px solid #2766EB;
  background: #F1F6FF;
  padding: 12px 45px;
}
.btn-outline-primary:hover:before {
  content: '';
  border-radius: 35px;
  position: absolute;
  border: #3161cb solid 5px;
  background: #3161cb !important;
  color: #fff !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.btn-outline-primary:hover:before, .btn-outline-primary:focus:before, .btn-outline-primary:active:before {
  -webkit-animation-name: btn-outline-primary;
  animation-name: btn-outline-primary;
}




.text-dark{color: #181818 !important;}

.banner-wrapper{
    background-image: url(../images/banner-background.png);
    background-repeat: no-repeat;
    height: 625px;
}
.head-content h1,.head-content h2{
    font-size: 70px;
    font-weight: 700;
}
.head-content p{
    font-size: 24px;
    font-weight: 500;
    color: #767676;

}
/* .banner-wrapper h1{max-width: 515px;} */
.banner-wrapper li{
    list-style: none;
    display: inline-flex;
    align-items: center;
    color: #2766EB;
}
.image-container{
    position: relative;
}
.image-container .brand-cstm{
    position: absolute;
    left: 0;
    top: 0;
}
.image-container .upload-share{
    position: absolute;
    bottom: 0;
}
.image-container .upload-file{
    position: absolute;
    bottom: 0;
}
.image-container .collobrate-team{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(10%, -50%);
}
.features-wrapper .card{
    background: #F1F6FF;
    padding: 40px;
    border: none;
    border-radius: 35px;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.features-wrapper .row{
    --bs-gutter-y: 1.5rem;
}
.head-content h6{
    font-size: 20px;
    font-weight: 500;
    color: #0D6DFD;
}
.head-content h4{
    font-size: 30px;
    font-weight: 500;
}
.card .wlcom-dashboard{
    position: absolute;
    bottom: 0;
    right: 0;
}
.card .url-custom{
    position: absolute;
    right: 0;
}
.card .l-brand{
    position: absolute;
    left: 60px;
    bottom: 0;
}
.card .clbrat-dashboard{
    position: absolute;
    bottom: 0;
}
.card .create-share{
    position: absolute;
    top: 0;
    right: 0;
}
.card .ui-interface{
    position: absolute;
    bottom: 0;
    right: 0;
}
.card .user-notification{
    position: absolute;
    bottom: 0;
}
.card .files-upload{
    position: absolute;
    bottom: 0;
    right: 0;
}
.card .within-group{
    position: absolute;
    right: 0;
}
.card .upload-organize{
    position: absolute;
    right: 0;
}
.capabilities-warpper{
    background: #F5F5F5;
    margin: 80px 0px;
    padding: 50px;
}
.capabilities-warpper .head-content p{
    max-width: 835px;
    margin: auto;
}
.head-row h5{
    font-size: 30px;
    font-weight: 700;
}
.head-row p{
    font-size: 19px;
    font-weight: 400;
    color: #69748F;
    max-width: 350px;
}
.capabilities-warpper .row{
    --bs-gutter-y: 1.5rem;
}
/* .capabilities-warpper h2{line-height: 1;} */
.capabilities-warpper .hands{
    background-image: url(../images/hands.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;

}
.capabilities-warpper .user-group{
    background-image: url(../images/usergroup.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;

}
.capabilities-warpper .lock{
    background-image: url(../images/lock.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;

}
.capabilities-warpper .access-key{
    background-image: url(../images/pass-lock.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;

}
.capabilities-warpper .comments{
    background-image: url(../images/message.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
}
.capabilities-warpper .customer-support{
    background-image: url(../images/cs-support.png);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
}
.inner-block{
    display: inline-flex;
    gap: 15px;
}
/* 
.banner-wrapper .container-fluid {
    max-width: 1420px !important;
  } */
  .highlight{
    color: #2766EB;
  }

.collab-wrapper .card{
    border: none;
    border-radius: 44px;
    background: #FFF;
    box-shadow: 0px 0px 32px 0px rgba(80, 80, 80, 0.14);
    padding: 60px;
}
.collab-wrapper h2{
    max-width: 560px;
}
.collab-wrapper .card p{
    max-width: 500px;
}
.support-wrapper{
    margin: 80px 0px;
}
.support-wrapper .head-content {
    max-width: 620px;
}
.support-blocker{
    display: flex;
    gap: 30px;
}
.support-wrapper .material-symbols-outlined {
    color: #2766EB;
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  
}
.joinus-wrapper{
    background-image: url(../images/join-us-bg.png);
    background-color: #f1f6ff;
}
small{
    font-size: 18px;
    font-weight: 400;
    color: #181818;
    display: inline-flex;
    align-items: center;
}
.joinus-wrapper h2{
    max-width: 600px;
}
.joinus-inner{
    max-width: 495px;
    margin: auto;
}
.footer-body{
    background: #181818;
    padding: 30px;
}
footer .social-media li{
  transition: all 0.2s ease-in-out;
}
footer .social-media li:hover{
  transform: scale(1.15);
}
footer .our-policy ul{
    display: flex;
    gap:36px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}
footer .social-media ul{
    display: flex;
    gap:15px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: end;
}
footer a{
    text-decoration: none !important;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}
footer a:hover{
    color: #cfd4db !important;
}


.features-wrapper .wlcome-dashboard{
    background-image: url(../images/wlcome-dashboard.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.features-wrapper .seamless-collab{
    background-image: url(../images/seamless-collab.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.features-wrapper .shareup-files{
    background-image: url(../images/share-up.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.features-wrapper .ui-interface{
    background-image: url(../images/ui.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

  /* animation */
  /* .main,.list_1,.list_2,.list3{
    opacity: 0;
  }
  .main.animate__bounceInUp{
    opacity: 1;
  } */

  /*--- responsive ----*/



  @media (max-width: 1399.98px) { 

    .banner-wrapper .container-fluid, .collab-wrapper .container-fluid, .support-wrapper .container-fluid, .joinus-wrapper .container-fluid {
        max-width: 1290px;
      }
      .head-content h4 {
        font-size: 28px;
      }
      .head-row h5 {
        font-size: 22px;
      }
      .head-row p {
        font-size: 17px;
        max-width: 315px;
      }
      .head-content h1, .head-content h2 {
        font-size: 60px;
      }
      .head-content p {
        font-size: 22px;
      }
      .features-wrapper .card {
        min-height: 450px;
      }
      .collab-wrapper .card {
        padding: 35px;
      }
      .banner-wrapper {
        height: 580px;
      }
   }

   @media (max-width: 1199.98px) { 

    .banner-wrapper {
      height: 515px;
    }
    .head-content h1, .head-content h2 {
        font-size: 50px;
      }
      .head-content p {
        font-size: 18px;
      }
      .inner-block span{
        width: 50px !important;
      }
      .head-row h5 {
        font-size: 20px;
      }
      .head-content h4 {
        font-size: 25px;
      }
      .features-wrapper .card {
        min-height: 400px;
      }
    }

    @media (max-width: 991.98px) { 

        .banner-wrapper{padding-top: 50px;}
        .head-content h1, .head-content h2 {
            font-size: 45px;
          }
        .banner-wrapper .head-content .banner-paragraph{max-width: 500px;}
        .banner-wrapper .head-content h1,.banner-paragraph {
            margin: auto;
            padding: 10px 0px;
        }
        .banner-wrapper .head-content{text-align: center;}
        .banner-wrapper li{
            display: flex;
        }
        .banner-wrapper ul{
            max-width: 400px;
            margin: auto;
            margin-bottom: 20px;
        }
        .banner-wrapper{height: 100% !important;}
        .features-wrapper {margin-top: 60px;}
        .features-wrapper .shareup-files {
            background-position: right;
          }
          .head-row h5 {
            font-size: 20px;
            margin-bottom: 0;
          }
          .collab-wrapper .head-content,.support-wrapper .head-content {
            text-align: center;
          }
          .collab-wrapper .card p,.collab-wrapper h2,.support-wrapper .head-content {
            margin: auto;
          }
          .collab-wrapper .image-container,.support-wrapper .image-container{text-align: center;}
          .support-blocker{justify-content: center;}
          .joinus-inner{text-align: center;}
          .f-logo {
            height: 35px;
          }
          .footer-body{
            text-align: center;
          }
          .our-policy{margin: 30px 0px;}
          footer .social-media ul{
            justify-content: center;
            
          }

     }
     @media (max-width: 767.98px) { 

        .inner-block{
            align-items: center;
        }
        .capabilities-warpper .head-row{
        max-width: 330px; 
        margin: auto;
        }
        .head-content h1, .head-content h2 {
          font-size: 35px;
        }
        .head-content h4 {
          font-size: 25px;
        }
      }

      @media (max-width: 575.98px) { 

        .head-content h1, .head-content h2 {
            font-size: 30px;
          }
          .head-content p {
            font-size: 14px;
          }
         .btn-primary{
            padding: 10px 24px;
            font-size: 14px;
          }
          .btn-outline-primary{
            padding: 10px 45px;
            font-size: 14px;
          }
          .f-logo {
            height: 30px;
          }
          .banner-wrapper {
            padding-top: 25px;
          }
          .features-wrapper .card{
                padding: 20px;
          }
          .head-content h4 {
            font-size: 19px;
          }
          .head-content h6 {
            font-size: 16px;
          }
          .features-wrapper .card {
            min-height: 300px;
          }
          .capabilities-warpper{
            padding: 20px;
          }
          .head-row h5 {
            font-size: 18px;
            font-weight: 600;
          }
          .head-content .row:nth-child(1){
            display: flex;
            justify-content: center;
          }
          .collab-wrapper .card{
            padding: 25px 10px;
          }
          small{font-size: 14px;}
          footer a{font-size: 12px;}
          footer .our-policy ul {
            gap: 13px;
          }
          .capabilities-warpper {
            margin: 45px 0px;
          }
          .support-wrapper {
            margin: 45px 0px;
          }
          .banner-wrapper ul {
            max-width: 290px;
          }
          .capabilities-warpper .row {
            --bs-gutter-y: 0px;
          }
          .btn-primary {
            padding: 10px 8px;
            font-size: 13px;
          }
          .btn-outline-primary {
            padding: 10px 30px;
            font-size: 13px;
          }
       }