:root {
    --brand-500: #027DF1;
    --btn-hover-color: #0769C2;
    --btn-hover-color-2: #000;
}

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

.poppins-14-common-content{
    font-family: 'Inter Tight';font-size: 14px;line-height: 18px;letter-spacing: -1%;
}

.poppins-15-common-content{
    font-family: 'Inter Tight';font-size: 15px;line-height: 26px;letter-spacing: -1%;
}

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

.poppins-18-common-content{
    font-family: 'Inter Tight';font-size: 18px;line-height: 26px;letter-spacing: -1%;
}

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

.poppins-24-common-content{
    font-family: 'Inter Tight';font-size: 24px;line-height: 34px;letter-spacing: -2%;
}

.poppins-28-common-content{
    font-family: 'Inter Tight';font-size: 28px;line-height: 36px;letter-spacing: -2%;
}

.poppins-32-common-content{
    font-family: 'Inter Tight';font-size: 32px;line-height: 36px;letter-spacing: -2%;
}

.poppins-40-common-content{  
    font-family: 'Inter Tight';font-size: 40px;line-height: 48px;letter-spacing: -2%;
}

.poppins-48-common-content{
    font-family: 'Inter Tight';font-size: 48px;line-height: 60px;letter-spacing: -2%;
}

.poppins-56-common-content{  
    font-family: 'Inter Tight';font-size: 56px;line-height: 62px;letter-spacing: -2%;
}

.poppins-72-common-content{
    font-family: 'Inter Tight';font-size: 72px;line-height: 80px;letter-spacing: -2%;
}

/* olds  */
.font-weight-400{
    font-weight: 400;
}

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

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

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

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

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

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

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

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

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

.border-radius-18{
    border-radius: 18px !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-80 {
    border-radius: 80px;
}

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

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

.gradient-border {
  position: relative;
  border-radius: 18px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(180deg, #008CFF 0%, #00A6A6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* new color from new design  */
.bg-brand-50{
    background-color: #F0F8FF;
}

.bg-error-50 {
    background-color: #FEECEB !important;
}

.bg-brand-500{
    background-color: #027DF1;
}

.bg-black{
    background-color: #141414;
}

.bg-alice-blue{
    background-color: #F1F9FF;
}

.text-base-black{
    color: #0C0C0C;
}

.text-gray-500{
    color: #667085 !important;
}

.text-gray-700{
    color: #344054 !important;
}

.text-blue-sparkle{
    color: #007AFF;
}

.text-warning-500 {
    color: #F79009;
}

.bg-chinese-black {
    background-color: #101010;
}

.bg-black-haze{
    background-color: #F7F7F8 !important;
}

.bg-dark-charcoal{
    background-color: #303030 !important;
}

.bg-pale-blue{
    background-color: #E9EFF5 !important;
}

.bg-base-black{
    background-color: #0C0C0C;
}

.bg-gray-light {
    background-color: #CDD2DA !important;
}

.bg-success-50 {
    background-color: #ECFDF3 !important;
}

.text-success-600{
    color: #099718;
}

.text-success-800{
    color: #054D0C;
}

.text-gray-300{
    color: rgba(208, 213, 221, 1);
}

.text-gray-400{
    color: #98A2B3;
}

.text-gray-600 {
    color: #475467;
}

.bg-success-100{
    background-color: #CEEAD1;
}

.bg-ghost-white{
    background-color:#F7F7F8 !important;
}

.bg-rockman-blue{
    background-color:#2C95F8 !important;
}

.text-brand-500 {
    color: #027DF1 !important;
}

.bg-brand-blue {
    background-color:#027DF1 !important;
}

.bg-gray-100{
    background-color: #F2F4F7 !important;
}

.bg-black-pearl {
    background-image: url("../img/contact-us/contact-us-overlay-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-gray-300{
    background-color: #D0D5DD !important;
}

.play-btn-bg{
    background-color: #0000004D;
    transition: all .3s ease;
}

.play-btn-bg:hover{
    background: #ff0000;
    transform: scale(1.1);
}

.video-review-card .play-icon{
    transition: transform .3s ease;
}

.video-review-card:hover .play-icon{
    transform: translate(-50%, -50%) scale(1.15) !important;
}

.text-brand-color-charocal{
    color: #1E1E1E;
}

.border-gray-300-1px{
    border: 1px solid #D0D5DD !important;
}

.border-dark-gray-1px {
    border: 1px solid #0C0C0C1A !important;
}

.border-gray-100-1px{
    border: 1px solid #F2F4F7 !important;
}

.border-gray-200-1px{
    border: 1px solid #EAECF0 !important;
}

.border-gray-400-1px{
    border: 1px solid #98A2B3 !important;
}

.border-10-percent-white {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.border-success-200-1px {
    border: 1px solid #B5E0BA;
}

.border-blue-1px {
    border: 1px solid #007AFF;
}

.border-brand-500-1px{
    border: 1px solid #027DF1 !important;
}

.border-base-brand-primary{
    border: 1px solid #1D9EDA !important;
}

.border-color-black-haze{
    border-color: #F7F7F8 !important;
}

.common-cta-btn{
    padding-top: 10px; padding-bottom: 10px; padding-left: 28px; padding-right: 28px;
}

.text-green {
    color: #28a745;
}

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

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

.pl-80{
    padding-left: 80px !important;
}

.form-range::-moz-range-thumb {
    background-color: #17B26A !important;
}

.outline-none{
    outline: none !important;
}

.red-circle{
    background-color:#D80027;width:14px;height:14px;border-radius:50%;display:inline-block;
}

/* navbar setting  */
.navbar-brand img {
    /* width: 140px; */
    width: auto;
    
    transition: height 0.3s ease;
    height: 56px;
}

.navbar.scrolled {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar-toggler {
    padding: 0; border: none; outline: none;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    box-shadow: none;
}

/* common parts  */
.common-hero-section{
  position: relative;overflow: hidden;
}
.common-hero-container{
  position: relative;z-index: 2;
}
.common-hero-section .img-fluid{
  position: relative;z-index: 3;
}

/* home page hero section  */
.home-hero-section{
  position: relative;overflow: hidden;--c: 100%;
}
/* content above background */
.home-hero-container{
  position: relative;z-index: 2;
}
/* hero image above map */
.home-hero-section .img-fluid{
  position: relative;z-index: 3;
}
.home-hero-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("../img/home-page/map.webp");
  background-repeat: no-repeat;
  background-size: clamp(700px, 60vw, 1169px);
  background-position: calc((100% - var(--c))/2 + (var(--c) * 0.80)) 40%;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

@keyframes tagSwing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-15deg); }
    40%  { transform: rotate(10deg); }
    60%  { transform: rotate(-8deg); }
    80%  { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,0.25); }
    50%       { box-shadow: 0 0 0 8px rgba(13,110,253,0); }
}
.price-tag-icon { animation: tagSwing 2s ease-in-out infinite; transform-origin: top left; }
.price-tag-icon-wrap { animation: pulse 2s ease-in-out infinite; }

/* symlexvpn features  */
.symlexvpn-features-bg {
  position: relative;overflow: hidden;
}
.symlexvpn-features-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-page/feature-items/symlexvpn-features-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* z-index: -1; */
}

.common-overlay-bg {
    position: relative;overflow: hidden;
}

.common-overlay-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/common-overlay-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

.symlexvpn-feature-item-col{
    flex: 0 0 320px !important;
}

.symlexvpn-feature-item-card{
    background: 
        linear-gradient(#141414, #141414) padding-box,
        linear-gradient(
            143.2deg,
            rgba(255, 255, 255, 0.3) -18.58%,
            rgba(255, 255, 255, 0) 76.31%
        ) border-box;
    border: 1px solid transparent;
    border-radius: 24px;
}

.country-wise-vpn-locations-tab-menu{
    width: 160px;
    height: 105px;
}

.country-wise-vpn-locations-common-bg{
    position: relative;overflow: hidden;min-height: 500px;
}

.country-wise-vpn-locations-common-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-page/vpn-locations/country-wise-vpn-locations-bg.webp");
  background-size: cover;
  /* background-position: center; */
  background-position: calc(100% - 20%);
  background-repeat: no-repeat;
  z-index: 1;
  border-radius: 24px;
}

.country-wise-vpn-locations-row{
    min-height: 520px;
}

.money-back-guarantee-div{
    position: relative;overflow: hidden;
}

.money-back-guarantee-div::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-page/money-back-guarantee-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
}

a.bg-brand-500:hover,
a.bg-brand-500:focus,
a.bg-brand-500:active {
    background-color: var(--btn-hover-color) !important;
    border-color: var(--btn-hover-color) !important;
    /* opacity: 0.5; */
}

.secure-vpn-access-bg {
  min-height: auto;
  background-color: #0C0C0C;
}

.gradient-card-border {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #008CFF, #00A6A6)border-box;
  border: 1px solid transparent !important;
}

.gradient-table-border{
  padding: 1px; /* gradient thickness */
  border-radius: 16px;
  background: linear-gradient(180deg, #027DF1 0%, #B7DCFF 100%);
}

.gradient-table-border table{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border-collapse: separate; /* REQUIRED for radius */
  border-spacing: 0;
}

.inner-price-card{
    position: relative;overflow: hidden;
}

.inner-price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-page/price-card-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  border-radius: 24px;
}

.pricing-card{
  overflow: visible;
}

.pricing-ribbon{
  position: absolute;left: 50%;top: 0;transform: translate(-50%, -100%);z-index: 10;pointer-events: none;
}

.pricing-ribbon__label{
  background: #018CFF;
  color: #fff;
  text-align: center;
  font-weight: 500;
  /* responsive sizing */
  font-size: clamp(12px, 1.2vw, 14px);
  padding: clamp(6px, 0.9vw, 5px) clamp(14px, 2.2vw, 30px);
  border-radius: 12px 12px 0 0;
  clip-path: url(#trapezoid-rounded);
  white-space: nowrap;
}

.special-deals{
    position: relative;overflow: hidden;
}

.special-deals::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/home-page/special-deals-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  border-radius: 24px;
}

.platform-icon-link { padding: 12px; }

.platform-icon-link:hover {
    border: 1px solid #007AFF !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.review-filter-tab.active {
    background-color: #212529 !important;
    color: #fff !important;
}
.review-filter-tab:not(.active) {
    background-color: #fff !important;
    color: #212529 !important;
}

.section-overlay-gradient-with-white-bg, .section-overlay-gradient-with-blue-bg {
    position: relative;
    overflow: hidden;
}

.section-overlay-gradient-with-white-bg::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    /* width:520px; */
    /* height:520px; */
    width: clamp(300px, 40vw, 900px);
    height: clamp(300px, 40vw, 900px);
    background: url("../img/colo-bg-white.webp") no-repeat top left;
    background-size: contain;
    /* background-size: cover; */
    /* transform: translate(-25%, -25%); */
    pointer-events:none;
    z-index:0;
}

.section-overlay-gradient-with-blue-bg::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    /* width: clamp(500px, 40vw, 900px);
    height: clamp(500px, 40vw, 900px); */
    width: clamp(300px, 40vw, 900px);
    height: clamp(300px, 40vw, 900px);
    background: url("../img/colo-bg-light-blue.webp") no-repeat top left;
    /* background-size: contain; */
    background-size: cover;
    pointer-events:none;
    z-index:0;
}

/* Only when needed */
.section-overlay-gradient-bg-shifted::before {
    transform: translate(0%, -25%);
}

.is-center::before{
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/*price page*/
.feature-comparism-table-outer-border{
    border: 4px solid #EEEEF0;
}

.feature-comparism-table-symlex-th-div{
    background-color:#027DF1; border-style:solid; border-color:#043563; border-width:1px 4px 0 1px; border-top-left-radius:16px; border-top-right-radius:16px;
}
.feature-comparism-table-symlex-mid-td-div{
    border-style:solid; border-color:#043563; border-width:0 4px 0 1px;
}
.feature-comparism-table-symlex-last-td-div{
    border-style:solid; border-color:#043563; border-width:0 4px 4px 1px; border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}

.custom-responsive-table{
    min-width: 100%;
}

/*what is a vpn page*/
.vpn-work-process-nav-pills .nav-link.active {
    background-color: #FFFFFF !important;
    border: 1px solid #F7F7F8 !important;
    box-shadow: 0px 4px 16px 0px #00000012;
}
.vpn-work-process-nav-pills .nav-link.active span {
    font-weight: 500 !important;
    color: #0C0C0C !important;
}
.vpn-work-process-nav-pills .nav-link {
    background-color: transparent;
    border: 1px solid transparent !important;
}

#vpnTypesAccordion .accordion-button.collapsed::after {
  width: 1.75rem;
  height: 1.75rem;
  background-size: 1.75rem;
  background-image: url("../img/accordion-plus-icon.svg");
}

#vpnTypesAccordion .accordion-button::after {
  width: 1.75rem;
  height: 1.75rem;
  background-size: 1.75rem;
  background-image: url("../img/accordion-minus-icon.svg");
}

/* download page  */
.download-items{
    border: 1px solid #EAECF0;
    height: 80px;
}

.connecting-world{
    border: 1px solid #EAECF0;
    width: 120px;
    min-width: 120px;
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
}

.download-items:hover, .footer-download-items:hover, .connecting-world:hover {
    border: 1px solid #007AFF;
}

/* white label vpn  */
.contact-form{
    padding: 30px;
}

.timeline-line-segment {
    position: absolute; left: 11px; width: 2px; background: #393B3E; z-index: 0;
}

.custom-timeline-item:not(:last-child) .timeline-line-segment {
    top: 33px; height: calc(100% + 2rem - 33px);
}

.custom-timeline-item .inner-circle {
    width: 8px;height: 8px;background-color: #027DF1;transition: all 0.3s ease;
}

.custom-timeline-item .timeline-header {
    color: #98A2B3 !important;transition: color 0.3s ease;
}

.custom-button-color {
    width: 24px; height: 24px; position: relative; z-index: 1;top: 7px;
}

.timeline-item:has(.collapse.show) .custom-button-color {
    background: linear-gradient(135deg, #3D3D3D 0%, #1A1A1A 100%);
    border-radius: 245.283px !important;
    box-shadow: 0 1.717px 2.453px 0 rgba(255, 255, 255, 0.25) inset;
}

.custom-timeline-item:has(.collapse.show) .inner-circle {
    width: 10px; height: 10px; background-color: #027DF1;
}

.custom-timeline-item:has(.collapse.show) .timeline-header {
    color: #ffffff !important;
}

.custom-timeline-item:has(.collapse.show) .collapse {
    transition: all 0.3s ease;
}

.common-nav-pills .nav-link.active {
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 2px 2px 6px 0 rgba(255, 255, 255, 0.25) inset;
}
.common-nav-pills .nav-link.active span {
    font-weight: 500 !important;
    color: #fff !important;
}
.common-nav-pills .nav-link {
    background-color: transparent;
    border: 1px solid transparent !important;
}
.common-nav-pills .nav-link span {
    color: #D0D5DD;
}

/* Timeline Scrollable cards */
.timeline-scrollable-cards {
    max-height: 575px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    background: none;
    box-shadow: none;
}
.timeline-scrollable-cards::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.timeline-scrollable-cards::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.timeline-scrollable-cards::-webkit-scrollbar-thumb {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, #3f3939 100%);
    border-radius: 10px;
}
.timeline-card-item .bg-white {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, #3f3939 100%);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.timeline-card-item.active {
    opacity: 1;
}
.timeline-card-item.active .bg-white {
    background: #ffffff;
}

/* client testimonial part  */
.new-testimonial-card {
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #EAECF0;
  height: 100%;
}
.owl-carousel .owl-stage {
  display: flex;
  align-items: stretch;
}
.owl-carousel .owl-item {
  display: flex;
  height: auto;
  transform: scale(0.93);
  /* transform: scale(0.95); */
}

.item {
  width: 100%;
}

.carousel-1 .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.carousel-1 .owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #d1d5db;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-1 .owl-dot.active {
    background: #3b82f6;
    width: 14px;
    height: 14px;
}

.carousel-1 .owl-dot:hover {
    background: #9ca3af;
}

.client-testimonial-overlay-bg {
    position: relative;
    overflow: hidden;
}
.client-testimonial-overlay-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../img/white-label-vpn-page/client-testimonial-overlay-bg.webp") no-repeat bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: .7;
}
.client-testimonial-overlay-bg .row {
    position: relative;
    z-index: 1;
}
/* client testimonial part  */

/* country list page */
.common-color-overlay-bg {
    position: relative;overflow: hidden;
}

.common-color-overlay-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/country-list-page/overlay-color-bg.webp");
  background-position: bottom;
  background-repeat: no-repeat;
}

.table-th-overlay-bg {
    position: relative;overflow: hidden;
}

.table-th-overlay-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/price-page/table-th-overlay-bg.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.protocol-table-td.bg-black-haze {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.protocol-table-td.bg-black-haze::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: #003580 !important;
    z-index: 2;
}

.protocol-table-td.bg-black-haze::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: #003580;
    z-index: 2;
}

/* faq */
#new-faq .accordion {
  background-color: transparent !important;
  cursor: pointer;
  width: 100%;
  border: #444;
  border-width: 2px;
  text-align: left;
  outline: none;
  color: #59595c;
  font-family: "Poppins";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
#new-faq .accordion-item {
  border-bottom: none !important;
}
#new-faq .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 36px 0px;
  text-align: left;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    border-radius 0.15s ease;
  color: #181818;
  font-style: normal;
}
#new-faq .accordion-button:focus {
  box-shadow: none;
}

#new-faq .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

#new-faq .accordion-button.collapsed::after {
  width: 1.75rem;
  height: 1.75rem;
  background-size: 1.75rem;
  background-image: url("../img/down-arrow.svg");
}

#new-faq .accordion-button::after {
  width: 1.75rem;
  height: 1.75rem;
  background-size: 1.75rem;
  background-image: url("../img/up-arrow.png");
}

.footer-map-overlay-div{
    min-height: 46vh;
    aspect-ratio: 1000 / 500;
}

.footer-map-overlay-text-translate-middle{
    transform: translate(-50%,-15%) !important;
}

.footer-social-links-bg{
    background-color: rgba(255, 255, 255, 0.05);
    height: 40px;
    width: 40px;
}

.footer-social-links-bg:hover{
    background-color: rgba(2, 125, 241, 1);
}

.newsletter {
    background: rgba(255, 255, 255, 0.07);
}

.newsletter input{
    background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.16); height:52px;
}

.newsletter-form-control::placeholder {
    color: rgba(255,255,255,0.7);
    font-family: 'Inter Tight';
    font-size: 16px;
    font-weight: 400;
}

.newsletter a{
    width:38px;height:38px;background:rgba(2, 125, 241, 1);
}

.footer-download-items {
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-overlay-shadow{
    position: relative;overflow: hidden;
}

.footer-overlay-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/footer/footer-overlay-shadow.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

footer [data-bs-toggle="collapse"] svg { transition: transform 0.3s ease; }
footer [data-bs-toggle="collapse"][aria-expanded="true"] svg { transform: rotate(180deg) !important; }

#myml-switcher-container {
    display: none;
}

.top-bar {
    background-color: #000;
}
.btn-get-started {
    border-radius: 25px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* offer card design  */
.offer-card-wrap {
    position: relative; display: flex; flex-direction: column; height: 100%;
}
.offer-card-ticket-divider {
    flex-shrink: 0;
}
.offer-card-top { padding: 30px 25px 20px; flex-grow: 1; }
.offer-card-bottom { padding: 30px 25px 25px; }
 
.offer-card-ticket-divider {
    position: relative; height: 20px; display: flex; align-items: center;
}
.offer-card-top::before {
    content: ''; position: absolute; left: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; top: -10px;
}
.offer-card-top::after {
    content: ''; position: absolute; right: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; top: -10px;
}
.offer-card-bottom::before {
    content: ''; position: absolute; left: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; bottom: -10px;
}
.offer-card-bottom::after {
    content: ''; position: absolute; right: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; bottom: -10px;
}
.offer-card-ticket-divider::before {
    content: ''; position: absolute; left: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; top: 50%;
    transform: translateY(-50%);
}
.offer-card-ticket-divider::after {
    content: ''; position: absolute; right: -12px; width: 30px; height: 30px; background: #fff; border-radius: 50%; top: 50%; transform: translateY(-50%);
}
.offer-card-ticket-divider .dash {
    width: 100%; border-top: 2px dashed #98A2B3; margin: 0 18px;
}

/* fifa world cup  */
@keyframes footballspin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bg-brand-50 .card,
.bg-white .card {
  padding: 0;
  border: 0;
  margin: 0;
}

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

.hero-section-overlay-gradient-bg::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: url("../img/hero-section-overlay-gradient-bg.png") no-repeat top center;
    background-size: cover;
    pointer-events:none;
    z-index:0;
}

.common-section-overlay-gradient-bg {
    position: relative;
    overflow: hidden;
}

.common-section-overlay-gradient-bg::before {
    content:"";
    position:absolute;
    width: 100%;
    height: 100%;
    background: url("../img/colo-bg-white.webp") no-repeat center center;
    background-size: contain;
    pointer-events:none;
    z-index:0;
    opacity: .5;
}

.megamenu-item a:hover {
    background: #fff !important;
}

.megamenu-item.megamenu-service-item a.active {
    background: #fff !important;
}

.megamenu-item-2 a:hover {
    background: #F7F7F8 !important
}

.z-999 {
    z-index: 999 !important;
}

.list-group-item.active {
    background-color: #F7F7F8 !important;
}

#topBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: rgb(13, 110, 253) !important;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    font-size: 25px;
}

#topBtn:hover {
    animation: bounceUp 0.5s ease infinite;
}
@keyframes bounceUp {
    50% { transform: translateY(-6px); }
}

/* Extra small / Mobile (<576px) */
@media (max-width: 575.98px) {
    .poppins-14-common-content { font-size: 12px; line-height: 100%; }
    .poppins-15-common-content { font-size: 12px; }
    .poppins-16-common-content { font-size: 14px; line-height: 20px; }    
    .poppins-18-common-content { font-size: 16px; line-height: 24px; }
    .poppins-20-common-content { font-size: 16px; line-height: 24px; }
    .poppins-24-common-content { font-size: 18px; line-height: 24px; }
    .poppins-28-common-content { font-size: 20px; line-height: 28px; }
    .poppins-32-common-content { font-size: 20px; line-height: 28px; }  
    .poppins-40-common-content { font-size: 20px; line-height: 28px; }
    .poppins-48-common-content { font-size: 32px; line-height: 40px; }
    .poppins-56-common-content { font-size: 32px; line-height: 40px; }
    .poppins-72-common-content { font-size: 40px; line-height: 48px; }
    
    .home-hero-section{ --c: 100%; }
    .home-hero-section::before{
        background-position: 50% 92%;
        background-size: 190vw;
    }

    .country-wise-vpn-locations-tab-menu {
        height: auto;
    }

    .common-cta-btn{
        padding-top: 8px; padding-bottom: 8px; padding-left: 20px; padding-right: 20px;
    }

    .symlexvpn-feature-item-col{
        flex: 0 0 250px !important
    }

    .custom-responsive-table{
        min-width: 650px;
    }

    .new-testimonial-card {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .new-testimonial-card .img-fluid {
        height: 200px; object-fit: cover; object-position: top;padding-left: 40px;padding-right: 40px;
    }

    .pl-80 {
        padding-left: 30px !important;
    }

    /* Horizontal timeline segment */
    .timelineAccordion {
        display: flex;overflow-x: auto;gap: 2rem;scroll-behavior: smooth; margin-bottom: 1rem !important; scrollbar-width: none; -ms-overflow-style: none;
    }
    .timelineAccordion::-webkit-scrollbar {
        height: 4px;
    }
    .timelineAccordion .timeline-line-segment {
        position: absolute;left: 0 !important;top: 18px !important;height: calc(100% - 4rem) !important;transform: rotate(90deg);transform-origin: left top;
    }
    .timelineAccordion .d-flex {
        flex-direction: column;align-items: center;text-align: center;gap: 20px;white-space: nowrap; margin-bottom: 0 !important;
    }

    .timeline-scrollable-cards-2 {
        display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;max-height: none;scrollbar-width: none;-ms-overflow-style: none;
    }
    .timeline-scrollable-cards-2 .col-12 {
        width: 85% !important;
        flex: 0 0 92% !important;
    }
    .timelineAccordion h4{
        text-align: center !important;
    }

    .timelineAccordion p{
        text-align: center !important;
    }

    .download-items{
        height: auto !important;
    }

    .mobile-scroll {
        overflow-x: auto;
    }

    .section-overlay-gradient-bg-shifted::before {
        transform: none !important;
    }

    .footer-map-overlay-text-translate-middle{
        transform: translate(-50%,-20%) !important;
        /* min-height: 50vh; */
    }

    .navbar-brand img {
        width: 85px;
        height: 35px;
    }
    #myml-switcher-container {
        display: block;
    }

    .only-mobile-font-24 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .only-mobile-font-30 {
        font-size: 27px !important;
        line-height: 40px !important;
    }

    .only-mobile-border-radius-10 {
        border-radius: 10px !important;
    }

    .common-overlay-bg::before {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .pe-custom{
        padding-right: 0 !important;
    }

    .contact-form{
        padding: 20px;
    }

    .connecting-world { width: 105px; min-width: 105px; height: 105px; }

    .section-overlay-gradient-with-blue-bg::before {
        background: url("../img/colo-bg-light-blue-mobile.png") no-repeat !important;
        width: 100%;
        height: 100%;
        opacity: .8;
    }

    .common-section-overlay-gradient-bg::before {
        background-size: cover;
        opacity: .2;
    }

    .bg-black-pearl {
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .server-map-scale {
        transform: scale(1.5);
    }

    .footer-map-picture img {
        transform: scale(1.6);
        transform-origin: top center;
    }
}

/* Small devices (sm: 576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .poppins-14-common-content { font-size: 12px; line-height: 100%; }
    .poppins-15-common-content { font-size: 13px; }
    .poppins-16-common-content { font-size: 14px; line-height: 20px; }    
    .poppins-18-common-content { font-size: 16px; line-height: 24px; }
    .poppins-20-common-content { font-size: 18px; line-height: 24px; }
    .poppins-24-common-content { font-size: 22px; line-height: 24px; }
    .poppins-28-common-content { font-size: 20px; line-height: 28px; }
    .poppins-32-common-content { font-size: 24px; line-height: 33px; }  
    .poppins-40-common-content { font-size: 24px; line-height: 28px; }
    .poppins-48-common-content { font-size: 32px; line-height: 40px; }
    .poppins-56-common-content { font-size: 28px; line-height: 35px; }
    .poppins-72-common-content { font-size: 50px; line-height: 55px; }
    
    /* container width variable */
    .home-hero-section{ --c: 540px; }
    .home-hero-section::before{
        background-position: 50% 82%;
        background-size: 160vw;
    }

    .country-wise-vpn-locations-tab-menu {
        height: auto;
    }

    .symlexvpn-feature-item-col{
        flex: 0 0 280px !important;
    }

    .premium-vpn-feature-table{
        min-width: 620px;
    }

    .new-testimonial-card {
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .pl-80 {
        padding-left: 30px !important;
    }

    /* Horizontal timeline segment */
    .timelineAccordion {
        display: flex;overflow-x: auto;gap: 2rem;scroll-behavior: smooth;  margin-bottom: 1rem !important; scrollbar-width: none; -ms-overflow-style: none;
    }
    .timelineAccordion::-webkit-scrollbar {
        height: 4px;
    }
    .timelineAccordion .timeline-line-segment {
        position: absolute;left: 0 !important;top: 18px !important;height: calc(100% - 4rem) !important;transform: rotate(90deg);transform-origin: left top;
    }
    .timelineAccordion .d-flex {
        flex-direction: column;align-items: center;text-align: center;gap: 20px;white-space: nowrap; margin-bottom: 0 !important;
    }
    .timeline-scrollable-cards-2 {
        display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;max-height: none;scrollbar-width: none;-ms-overflow-style: none;
    }
    .timeline-scrollable-cards-2 .col-12 {
        width: 85% !important;
        flex: 0 0 92% !important;
    }
    .timelineAccordion h4{
        text-align: center !important;
    }
    .download-items{
        height: auto !important;
    }
    .mobile-scroll {
        overflow-x: auto;
    }
    .navbar-brand img {
        width: 85px;
        height: 35px;
    }
    #myml-switcher-container {
        display: block;
    }

    .pe-custom{
        padding-right: 0 !important;
    }

    .only-mobile-font-30 {
        font-size: 30px !important;
        line-height: 40px !important;
    }

    .only-mobile-border-radius-10 {
        border-radius: 10px !important;
    }

    .contact-form{
        padding: 25px;
    }

    .connecting-world { width: 105px; min-width: 105px; height: 105px; }

    .section-overlay-gradient-with-blue-bg::before {
        background: url("../img/colo-bg-light-blue-mobile.webp") no-repeat !important;
        width: 100%;
        height: 100%;
        opacity: .8;
    }

    .bg-black-pearl {
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .server-map-scale {
        transform: scale(1.5);
    }

    .footer-map-picture img {
        transform: scale(1.5);
        transform-origin: top center;
    }
}

/* Medium devices (md: 768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .poppins-14-common-content { font-size: 12px; line-height: 100%; }
    .poppins-15-common-content { font-size: 13px; }
    .poppins-16-common-content { font-size: 14px; line-height: 20px; }    
    .poppins-18-common-content { font-size: 16px; line-height: 24px; }
    .poppins-20-common-content { font-size: 18px; line-height: 24px; }
    .poppins-24-common-content { font-size: 22px; line-height: 24px; }
    .poppins-28-common-content { font-size: 20px; line-height: 28px; }
    .poppins-32-common-content { font-size: 25px; line-height: 35px; }  
    .poppins-40-common-content { font-size: 24px; line-height: 30px; }
    .poppins-48-common-content { font-size: 32px; line-height: 40px; }
    .poppins-56-common-content { font-size: 34px; line-height: 42px;}
    .poppins-72-common-content { font-size: 50px; line-height: 60px; }
    
    /* container width variable */
    .home-hero-section{ --c: 720px; }
    .home-hero-section::before{
        background-position: 50% 65%;
        background-size: 130vw;
    }

    .country-wise-vpn-locations-tab-menu {
        height: auto;
    }

    .country-wise-vpn-locations-row {
        min-height: 400px;
    }

    .symlexvpn-feature-item-col{
        flex: 0 0 280px !important;
    }

    .new-testimonial-card {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    #myml-switcher-container {
        display: block;
    }

    .pe-custom{
        padding-right: .75rem !important;
    }

    .server-map-scale {
        transform: scale(1.3);
    }

    .server-map-scale-2 img {
        transform: scale(1.3);
    }

    .footer-map-picture img {
        transform: scale(1.3);
        transform-origin: top center;
    }
}

/* Large devices (lg: 992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .poppins-32-common-content { font-size: 28px; line-height: 35px; } 
    .poppins-48-common-content { font-size: 32px; line-height: 40px; }
    .poppins-56-common-content { font-size: 42px; line-height: 48px;}
    .poppins-72-common-content { font-size: 52px; line-height: 60px; }

    /* container width variable */
    .home-hero-section{ --c: 960px; }

    .symlexvpn-features-bg {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    .w-lg-auto {
        width: auto !important;
    }

    .country-wise-vpn-locations-row {
        min-height: 450px;
    }

    .symlexvpn-feature-item-col{
        flex: 0 0 300px !important;
    }

    .new-testimonial-card {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .carousel-1 .owl-item.active {
        opacity: 1;
        transform: scale(1);
        z-index: 10;
    }

    .pe-custom{
        padding-right: .75rem !important;
    }
}

/* Extra large devices (xl: 1200px - 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .poppins-48-common-content { font-size: 38px; line-height: 40px; }
    .poppins-56-common-content { font-size: 45px; line-height: 50px;}
    .poppins-72-common-content { font-size: 58px; line-height: 75px; }

    .home-hero-section{ --c: 1140px; }

    .symlexvpn-features-bg {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    .w-lg-auto {
        width: auto !important;
    }

    .new-testimonial-card {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .carousel-1 .owl-item.active {
        opacity: 1;
        transform: scale(1);
        z-index: 10;
    }

    .pe-custom{
        padding-right: .75rem !important;
    }

    /* === MacBook 13" (1280×712) — hero fit === */
    /* 1. Hero image: height-er sobcheye boro khadok */
    .home-hero-section img.img-fluid, .common-hero-section img.img-fluid { max-height: 58vh; width: auto; }
    /* 2. Section-er upor-nicher padding kamaও */
    .home-hero-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* 3. Elements-er majher vertical gaps tight koro */
    .home-hero-section .mb-4, .common-hero-section .mb-4 { margin-bottom: 1.4rem !important; }
    .home-hero-section .mb-lg-5, .common-hero-section .mb-lg-5 { margin-bottom: 1.25rem !important; }
    .home-hero-section h1, .common-hero-section h1 { margin-bottom: 0rem !important; }
    .home-hero-section p, .common-hero-section p { margin-bottom: .75rem; }
}

/* Extra extra large devices (xxl: ≥1400px) */
@media (min-width: 1400px) {
    /* container width variable */
    .home-hero-section{ --c: 1320px; }

    .symlexvpn-features-bg {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    .w-lg-auto {
        width: auto !important;
    }

    .carousel-1 .owl-item.active {
        opacity: 1;
        transform: scale(1);
        z-index: 10;
    }

    .text-lg-nowrap {
        white-space: nowrap !important;
    }

    .pe-custom{
        padding-right: .75rem !important;
    }
}

/* Short-height boro laptops (MacBook 14" 1512×749 type) */
@media (min-width: 1400px) and (max-height: 800px) {
    .home-hero-section img.img-fluid,
    .common-hero-section img.img-fluid { max-height: 58vh; width: auto; }
    .home-hero-section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .home-hero-section .mb-4,
    .common-hero-section .mb-4 { margin-bottom: 1.4rem !important; }
    .home-hero-section .mb-lg-5,
    .common-hero-section .mb-lg-5 { margin-bottom: 1.25rem !important; }
    .home-hero-section h1,
    .common-hero-section h1 { margin-bottom: 0 !important; }
    .home-hero-section p,
    .common-hero-section p { margin-bottom: .75rem; }
}