/* First, declare the font files */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Then apply the font to your site */
body {
  font-family: 'Poppins', sans-serif;
}

.poppins-16-common-content{
    font-family: 'Poppins';font-size: 16px;line-height: 150%;letter-spacing: 0%;
}

.poppins-14-common-content{
    font-family: 'Poppins';font-size: 14px;line-height: 150%;letter-spacing: 0%;
}

.poppins-36-common-content{  
    font-family: 'Poppins';font-size: 36px;line-height: 150%;letter-spacing: 0%;
}

.poppins-20-common-content{  
    font-family: 'Poppins';font-size: 20px;line-height: 150%;letter-spacing: 0%;
}

.poppins-54-common-content{  
    font-family: 'Poppins';font-size: 54px;line-height: 150%;letter-spacing: 0%;
}

.poppins-48-common-content{
    font-family: 'Poppins';font-size: 48px;line-height: 141%;letter-spacing: 0%;
}

.poppins-18-common-content{
    font-family: 'Poppins';font-size: 18px;line-height: 141%;letter-spacing: 0%;
}

.poppins-24-common-content{
    font-family: 'Poppins';font-size: 24px;line-height: 141%;letter-spacing: 0%;
}

.font-size-28{
    font-size: 28px;
}

.font-weight-400{
    font-weight: 400;
}

.font-weight-500{
    font-weight: 500;
}

.font-weight-600{
    font-weight: 600;
}

.font-weight-700{
    font-weight: 700;
}

.py-dot-7{
    padding-top: .7rem !important;padding-bottom: .7rem !important;
}

.border-radius-8{
    border-radius: 8px;
}

.border-radius-10{
    border-radius: 10px;
}

.border-radius-13{
    border-radius: 13px;
}

.border-radius-16{
    border-radius: 16px !important;
}

.border-radius-20{
    border-radius: 20px;
}

.border-radius-24{
    border-radius: 24px;
}

.border-radius-28{
    border-radius: 28px;
}

.border-radius-40{
    border-radius: 40px;
}

.border-radius-112{
    border-radius: 112px;
}

.gray-500{
    color: rgba(102, 112, 133, 1);
}

.gray-700{
    color:rgba(72, 80, 94, 1);
}

.gray-800{
    color: #383E49;
}

.gray-900{
    color: rgba(43, 47, 56, 1);
}

.bg-primary-500{
    background: rgba(9, 189, 124, 1);
}

.bg-primary-100{
    background:  rgba(179, 235, 214, 1);
}

.grayish-blue{
    color: #667085;
}

.primary-50{
    background: rgba(230, 248, 242, 1);
}

.text-primary-500 {
  color: rgba(9, 189, 124, 1);
}

.primary-100{
    color:rgba(179, 235, 214, 1);
}

.primary-700{
    color: rgba(6, 134, 88, 1);
}

.border-1px-primary-500{
    border: 1px solid rgba(9, 189, 124, 1);
}

.border-1px-primary-50{
    border: 1px solid #E6F8F2 !important;
}

.border-1px-primary-100{
    border: 1px solid #B3EBD6 !important;
}

.border-1px-gray-50{
    border: 1px solid rgba(240, 241, 243, 1);
}

.border-1px-black{
    border: 1px solid rgba(0, 0, 0, 1);
}

.border-1px-white{
    border: 1px solid #fff;
}

.bg-off-light{
    background: #F4F4F4;
}

.line-height-170{
    line-height: 170% !important;
}

.opacity-dot-4{
    opacity: 0.4 !important;
}

.footer-bg{
    background:  rgba(15, 44, 36, 1);
}

.custom-navbar{
    border-bottom: 1px solid rgb(179, 235, 214); background: rgb(230, 248, 242) !important;
}

.contact-us-btn:hover{
    background: rgba(75, 75, 75, 1);
}

.custom-dropdown-menu{
    top: 65px !important;background: #044F34CC !important;border-radius: 0 0 8px 8px !important;
}

.custom-dropdown-menu li a{
    transition: .3s;
}

.custom-dropdown-menu li a:hover{
    letter-spacing: 0.1px !important;
}

.footer-list ul li a{
    transition: .3s;
}

.footer-list ul li a:hover{
    letter-spacing: 1px !important;
}

.custom-nexted-dropdown-menu{
    background: #044F34CC !important;border-radius: 8px !important; left: 115% !important;
}

/* Hide Bootstrap's default dropdown arrow */
.custom-dropdown-toggle::after {
    display: none !important;
}

.dropdown-item{
    background: #E6F8F2;
}

.dropdown-item:active {
    background-color: #fff !important;
    color: #0B276B !important;
}

.navbar-toggler.d-lg-none{
    border: none !important;
    box-shadow: none !important;
}

#offcanvasNavbar{
    background: rgb(230, 248, 242) !important;
}

/* hero section */
.hero-title{
    color: rgba(0, 1, 6, 1);
}

.hero-section {
  position: relative;
  overflow: hidden;
}

/* Background image via pseudo-element */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-hero-img.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/*.hero-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}*/

.hero-section-content {
  position: relative;
  z-index: 1;
}

.hero-badge-inner-bg{
    background: linear-gradient(203.43deg, rgba(74.84814453125, 74.84814453125, 74.84814453125, 1),rgba(9, 189, 124, 1) 100%);
}

/* portfolio section */
.portfolio-bg {
    background-image: image-set(
        url('../img/portfolio-bg.webp') type('image/webp'),
        url('../img/portfolio-bg.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.icon-show-on-hover{
    opacity: 0;
}

.innovative-box{
    border: 1px solid rgba(179, 235, 214, 1);transition: background-color 0.3s ease;
}

.innovative-box:hover{
    background-color: #B3EBD6 !important;
}

.innovative-box:hover .primary-700{
    color: #000;
}

.innovative-box:hover .icon-show-on-hover{
    opacity: 1;
}

.innovative-box .hover-img {
  display: none;
}

.innovative-box:hover .default-img {
  display: none;
}

.innovative-box:hover .hover-img {
  display: inline;
}

/* cybersecurity section */
.cybersecurity-bg{
    background-image: image-set(
        url('../img/cybersecurity-bg.webp') type('image/webp'),
        url('../img/cybersecurity-bg.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: center center;border-radius: 25px;
}

.learn-more-btn:hover{
    color: rgba(9, 189, 124, 1) !important;
}

.hover-text-white:hover {
  color: #fff !important;
}

.custom-py-4-dot-5{
    padding-top: 2rem !important;padding-bottom: 2rem !important;
}

/* device section */
.device-section-bg{
    background-image: image-set(
        url('../img/device-section-bg.webp') type('image/webp'),
        url('../img/device-section-bg.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: center center;border-radius: 25px;border: 1px solid rgba(223, 223, 223, 1);min-height: 75vh;
}

/* nav pillis */
.nav-pills .nav-link.active{
    color: #fff !important;font-size: 18px;font-weight: 500;background-color: rgba(9, 189, 124, 1) !important;border-radius: 10px;padding: 5px 25px;
}

.core-feature-item{
    border: 1px solid rgba(179, 235, 214, 1);
}

/* Working process Timeline */
.working-process-bg{
    background-image: image-set(
        url('../img/working-process-bg.webp') type('image/webp'),
        url('../img/working-process-bg.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: center center;
}

.working-process-timeline::before {
    content: '';position: absolute;top: 0;bottom: 0;left: 30px;width: 1px;background-color: #D0D3D9;
}

.working-process-timeline-item {
    position: relative;padding-left: 70px;
}

.working-process-timeline-item::before {
    content: '';position: absolute;left: 0;width: 60px;height: 60px;background-color: #fff;border-radius: 50%;top: 0;border: 0.83px solid rgba(208, 211, 217, 1);
}

.working-process-timeline-item .working-process-timeline-number {
    position: absolute;left: 0;top: 0;width: 60px;height: 60px;background-color: #fff;border: 1px solid #D0D3D9;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 1.2rem;color: #0F2C24;font-family: 'Poppins';
}

.working-process-timeline-item:hover .working-process-timeline-number {
    background-color: #09BD7C;border: 1px solid  #09BD7C;transition: 0.3s;
}

/* FAQ accordion items */
.accordion-item {
  border-radius: 16px !important;border: 1px solid #dee2e6 !important;overflow: hidden;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 16px;border-top-right-radius: 16px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;
}

.accordion-button {
  background-color:  rgba(255, 255, 255, 1);color: #000;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(255, 255, 255, 1);box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: none;border-color: rgba(208, 211, 217, 1);
}

.accordion-button::after {
  background-image: url('../img/plus-icon.svg');transform: rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('../img/minus-icon.svg');transform: rotate(180deg);
}
/* ./ FAQ accordion items */

.home-page-custom-card{
    border-radius: 15px;
}

.home-page-custom-card img {
  border-top-left-radius: 15px;border-top-right-radius: 15px;
}

.footer-hr{
    border-top: 1px solid rgb(9, 189, 124);
}

.custom-carousel-indicators [data-bs-target] {
    width: 12px !important;height: 12px !important;border-radius: 50% !important;background-color: rgba(185, 189, 199, 1);
}

.custom-carousel-indicators .active {
    background-color: rgba(9, 189, 124, 1) !important;
}

/* admin panel page */
.common-hero-bg{
    background-image: image-set(
        url('../img/common-hero-bg.webp') type('image/webp'),
        url('../img/common-hero-bg.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: bottom;
}

.common-hero-bg-2{
    background-image: image-set(
        url('../img/common-hero-bg-2.webp') type('image/webp'),
        url('../img/common-hero-bg-2.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: center center;
}

.main-feature-blog {
    background-image: image-set(
        url('../img/main-feature-blog.webp') type('image/webp'),
        url('../img/main-feature-blog.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.common-bg-1{
    background-image: image-set(
        url('../img/common-bg-1.webp') type('image/webp'),
        url('../img/common-bg-1.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;
}

.common-bg-2{
    background-image: image-set(
        url('../img/common-bg-2.webp') type('image/webp'),
        url('../img/common-bg-2.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;
}

.custom-card-bg{
    background: radial-gradient( circle at 70% 30%, rgba(63, 195, 92, 0.6) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 1) 100% );
}

.custom-card-bg-2{
    background: radial-gradient( circle at 40% 10%, rgba(152, 180, 240, 0.6) 0%, rgba(238, 238, 238, 0.5) 45%, rgb(230, 248, 242) 100% );
}

.form-floating > textarea.form-control {
  height: auto;
  min-height: calc(7rem + 2px);
}

.form-floating > input.form-control {
  height: calc(3.5rem + 2px); /* fixed height */
}

.vpn-demo-section-bg{
    background-image: image-set(
        url('../img/vpn-demo-section-bg.webp') type('image/webp'),
        url('../img/vpn-demo-section-bg.png') type('image/png')
    );
    background-repeat: no-repeat;background-size: cover;background-position: center center;border-radius: 25px;border: 1px solid rgba(223, 223, 223, 1);
}

.wh-30{
    height: 30px; width: 30px;
}

.form-floating > label{
    padding: 1rem 1.75rem !important;
}

.form-floating > .form-control, .form-floating > .form-select{
    padding-left: 26px !important;
}

.section-overlap {
    transform: translateY(-150px); /* adjust for perfect overlap */
    position: relative;
    z-index: 10;
}

/* blog page */
.blog-section{
    transform: translateY(-120px);
}

.blog-category-tabs {
    display: flex; gap: 15px;flex-wrap: wrap;justify-content: center;
}

.blog-category-btn {
    padding: 10px 25px;border-radius: 40px;border: none;background-color: #E6F8F2; color: #000;cursor: pointer;transition: all 0.3s ease;
}

.blog-category-btn:hover {
    background-color: #d0ebe3;
}

.blog-category-btn.active {
    background-color: #09BD7C;color: white;
}

.blog-content-item {
    display: none;
}

.blog-content-item.active {
    display: block;
}

.responsive-author-img{
    height: 45px !important;
}

#topBtn{
  position:fixed;bottom:20px;right:20px;padding:10px 15px;background:rgba(9, 189, 124, 1) !important;color:#fff;border-radius:50px;display:none;cursor:pointer;
}

/* Extra small / Mobile (<576px) */
@media (max-width: 575.98px) {
    .poppins-14-common-content { font-size: 12px; }
    .poppins-16-common-content { font-size: 14px; }
    .poppins-18-common-content { font-size: 16px; }
    .poppins-20-common-content { font-size: 16px; }
    .poppins-36-common-content { font-size: 20px; }    
    .poppins-54-common-content { font-size: 25px; }
    .poppins-48-common-content { font-size: 30px; }
    .device-section-bg { min-height: auto; }

    .py-dot-7 {
        padding-top: 0.5rem !important;
        padding-bottom: .5rem !important;
    }

    .responsive-author-img{
        height: 40px !important;
    }
}

/* Small devices (sm: 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .poppins-14-common-content { font-size: 12px; }
    .poppins-16-common-content { font-size: 14px; }
    .poppins-18-common-content { font-size: 16px; }
    .poppins-20-common-content { font-size: 18px; }
    .poppins-36-common-content { font-size: 24px; }
    .poppins-54-common-content { font-size: 28px; }
    .poppins-48-common-content { font-size: 38px; }
    .device-section-bg { min-height: auto; }

    .responsive-author-img{
        height: 40px !important;
    }
}

/* Medium devices (md: 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .poppins-14-common-content { font-size: 12px; }
    .poppins-16-common-content { font-size: 14px; }
    .poppins-18-common-content { font-size: 15px; }
    .poppins-20-common-content { font-size: 18px; }
    .poppins-36-common-content { font-size: 22px; }
    .poppins-54-common-content { font-size: 35px; }
    .poppins-48-common-content { font-size: 40px; }
    .device-section-bg { min-height: auto; }

    .protocol-security-setting-img{
        width: 80% !important;
    }
}

/* Large devices (lg: 992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .protocol-security-setting-img{
        width: 85% !important;
    }
}

/* Extra large devices (xl: 1200px - 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .protocol-security-setting-img{
        width: 75% !important;
    }
}

/* Extra extra large devices (xxl: ≥1400px) */
@media (min-width: 1400px) {
    .protocol-security-setting-img{
        width: 70% !important;
    }
}