@charset "utf-8";
/* CSS Document */

body{
	color:#909090;
	font-family: "Manrope", serif;
	font-size: 18px;
}


.nav-link{
	color:#333333;
	font-size: 16px;
	font-weight: 600;
}

.nav-link:hover{
	color: #1a87ed;
}

.page-wrap>.container{
	width:100%!important;
	max-width: 100%!important;
}

.page-banner{
	display: none;
}

.btn1, .btn-primary{
	background: #1a87ed;
	border-color: #1a87ed;
	color: #ffffff;
	font-weight: 500;
	transition: .3s ease;
}

.btn1:hover,
.btn1:focus{
	background: #11589b;
	transition: .3s ease;
}

.pricing .fa-thin{
	color: #1a87ed;
	font-size: 40px;
	 display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background-color: #eef3f7;
    border-radius: 50%;
}

.hero-text{
	color: #000000;
	font-size:46px;
	font-weight: 600;
	line-height: 1.1em;
}

.anim{
	animation: shrink 1.5s ease 0s 1 normal none;
}

@keyframes shrink {
			
		0% {
			transform:translateY(-70px);
			filter:blur(20px);
			opacity:0;
		}
		100% {
			transform:translateY(0);
			filter:blur(0);
			opacity:1;
		}
	}

.sub-text{
	animation: shrink2 1.5s ease 1s 1 normal forwards;
	opacity:0;
}

@keyframes shrink2 {
			
		0% {
			letter-spacing:0.1em;
			filter:blur(20px);
			opacity:0;
		}
		100% {
			filter:blur(0);
			opacity:1;
		}
	}

.sub-text-b{
	color:#1a87ed;
	font-size:30px;
	font-weight: 500;
}

.sub-text-g{
	color:#888888;
	font-size:14px;
}

.features{
	font-size: 16px;
}

.features .sub-text-b{
	font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
	line-height: 1.2em;
}

.features img{
	max-width: 140px;
}

.border-grad{
  position: relative;
-webkit-box-shadow:0px 0px 36px 0px #a3cff8 ;
-moz-box-shadow:0px 0px 36px 0px #a3cff8 ;
box-shadow:0px 0px 36px 0px #a3cff8 ;
}

    :root {
      --gradient: conic-gradient(
        from 90deg at 50% 50%,
        rgba(26, 135, 237, 1),
        rgba(26, 135, 237, 1),
        rgba(26, 135, 237, 1),
       rgba(26, 135, 237, 1),
        rgba(26, 135, 237, 1),
        rgba(26, 135, 237, 1),
        rgba(26, 135, 237, 1)
      );
    }
    

    
    .cardx {
      --start: 0;
      position: relative;

      background-color: #ffffff;
      border-radius: 2rem;
      transition: border-color 0.3s ease-in-out;
    }
    
    .cardx::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 2rem;
      border: 2px solid transparent;
      background: var(--gradient);
      background-attachment: fixed;
      mask: linear-gradient(#0000, #0000),
        conic-gradient(
          from calc((var(--start) - (20 * 1.1)) * 1deg),
          #ffffff1f 0deg,
          white,
          #ffffff00 100deg
        );
      mask-composite: intersect;
      mask-clip: padding-box, border-box;
      opacity: 0;
      transition: 0.5s ease;
    }

.modules .cardx::before {
	border-radius: 1em;
	border-width:4px;
}

    
    .glow {
      pointer-events: none;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      filter: blur(14px);
    }
    
    .glow::before {
      position: absolute;
      content: "";
      width: 98%;
      height: 98%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 14px;
      border: 5px solid transparent;
      background: var(--gradient);
      background-attachment: fixed;
      /* mask: linear-gradient(#0000, #0000), 
      conic-gradient(
        from calc(var(--start)  * 1deg), 
        #000 0deg, 
        #ffffff, 
        rgba(0, 0, 0, 0) 60deg
        ); */
      mask: linear-gradient(#0000, #0000),
        conic-gradient(
          from calc((var(--start) - (20 * 1.1)) * 1deg),
          #ffffff1f 0deg,
          white,
          #ffffff00 100deg
        );
      mask-composite: intersect;
      mask-clip: padding-box, border-box;
      opacity: 0;
      transition: 1s ease;
    }
    
    .cardx:hover > .glow::before {
      opacity: 1;
    }
    .cardx:hover::before {
      opacity: 0.6;
    }

.card,
.form-control{
	background: #faf9f8;
	border: 1px solid #e8e3dc;
}

.cardb{
	border: 1px solid #e8e3dc;
	color: #1a87ed;
	text-align: center!important;
	font-weight: 500;
	justify-content: center!important;
}

.zoom-box {
  transition: transform 0.5s ease-in-out;
}

.zoom-box:hover {
  transform: scale(1.1)!important; /* Slight zoom-in on hover */
}

.platform{
	font-size:16px;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .5em; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 13px;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #1a87ed; /* the main color  */
}

.home .btn{
	float:right!important;
}

.home .card-header,
.home hr{
	display: none!important;
}

.home .card-body,
.home .card{
	background: none!important;
	font-size: 16px!important;
	border: 0px solid #ffffff!important;
}

.logos img{
	max-width:160px;
}

.logos .card{
	background: #ffffff;
	box-shadow: 0 2px 17px #00000014;
	border-radius:2em;
	font-size:16px;
}

        /* INTEGRATIONS */
        .filter-sidebar {
            width:100%;
        }

        
        input[type="radio"] {
            display: none;
        }

        /* Category links styling */
        .category-item {
            display: block;
            padding: 12px;
            margin: 8px 0;
            cursor: pointer;
            color: #2c3e50;
            border-radius: 6px;
            transition: all 0.2s ease;
            background: #ffffff;
            border: 1px solid #e0e0e0;
        }

        .category-item:hover {
            background: #e9f2ff;
            border-color: #1a87ed;
        }

        .category-item.active {
            background: #1a87ed;
            color: white;
            border-color: #007bff;
        }

        /* Image gallery grid */
        .gallery-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }
        
        .gallery-grid strong{
            color: #000000;
            font-size: 20px;
        }

        /* Gallery item styling */
        .integration-card {
            padding: 20px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s ease;
        }

        .integration-card:hover {
            transform: translateY(-5px);
        }

        .integration-card img {
            width: 100%;
            max-width: 180px;
            height: auto;
            margin: 0 auto 15px;
            display: block;
        }

        /* Clear filters link */
        .clear-filters {
            display: block;
            padding: 12px;
            color: #1a87ed;
            text-decoration: none;
            font-weight: 500;
        }

        /* Responsive design */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .filter-sidebar {
                width: 100%;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .gallery-grid {
                grid-template-columns: 1fr;
            }
        }