/*
Theme name: Tragofone
Author name: Ecosmob
Author: Ecosmob Technologies Pvt. Ltd.
Author URL: https://ecosmob.com/
Version: 1.1.25
Text Domain: tragofone
*/

 @font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600; /* Semi Bold */
  font-style: normal;
  font-display: swap;
} 

@font-face {
  font-family: 'Manrope';
  src: url('fonts-new/manrope-v20-latin-500.woff2') format('woff2');
  font-weight: 200; /* Extra Light */
  font-style: normal;
  font-display: swap;
}

 @font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Light.ttf') format('truetype');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
} 

/* font end */

body {
  font-family: "Manrope", sans-serif;
  font-weight: 500 !important; 
}
.h1,
.bold{
font-weight:700 !important;
}
/* @import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css"); */


input:-internal-autofill-selected {
  background-color: #fff !important;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 0.2em 1em;
  border: 2px solid #ffb900;
  position: absolute;
  bottom: 16px;
  font-size: 12px;
}

.wpcf7-not-valid-tip {
  color: #ff2525;
  font-size: 1em;
  font-weight: normal;
  display: block;
  position: absolute;
  bottom: -26px;
  left: 2px;
  font-size: 13px;
}

span.video-modal-close_2 {
  position: absolute;
  right: 8px;
  color: #fff;
  z-index: 9;
  font-size: 34px;
  top: -8px;
}

.trial-row .wpcf7-spinner {
  position: absolute;
  bottom: 50px;
}
.blog_author_page .blog_author{
	position:relative !important;
}

@media (max-width: 991px) {
  .header .menu>ul>li .submenu-wrapper>.list-item>ul>li>a {
    font-size: 14px;
  }
	.blog_author_page .hero-content{
		max-width:90%;
	}

  .wpcf7 form .wpcf7-response-output {
    bottom: -16px;
    left: 0;
    background: #fff;
  }

  .trial-section .trial-container .trial-card .trial-form .trial-row .wpcf7-form-control-wrap {
    width: 100%;
  }
	.page-template-softphone-internet-telephony-service-providers-itsp .hero_section{
	height:460px;
	}
}

.trial-card .wpcf7 form .wpcf7-response-output {
  left: 50%;
  transform: translate(-50%);
  bottom: 96px;
}

.contact-container .wpcf7 form .wpcf7-response-output {
  bottom: 110px;
}

.siq_bR {
  bottom: 90px;
  right: 70px;
}

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}
.voip-feature {
  background: url(./image/choosesus.png);
}
.contact-section::after {
  background: url(./image/round.png);
}
.contact-section::before {
  background: url(./image/dots.png);
  background-repeat: no-repeat;
}
.page-template-brochure-download .brochur-bg {
  background: url(./image/frame-1000003165.png);
   background-repeat: no-repeat;
	background-size:cover;
}
/*04-08-2025  */

.softphone-article-main ul li {
    margin-left: 40px;
}

/* .header #resources .sub-menu.mega-menu {
    max-width: -webkit-fill-available;
} */
.header #resources .card-img-container {
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.m-2{ margin:0px !important}
#brouchur-pro{
padding-top:35px;
}
#eventteams .new_feature .new_feature_heading .h2{
margin-bottom:80px
}
#eventteams .team-details,
#eventteams .team_box{
margin:0 auto;	
}
	.blog_author_page .hero-content{
	max-width:unset !important;
	}
@media (max-width: 1499px) and (min-width: 1199px) {
  .africa-b {
    margin-top: 40px;
  }
}

@media (max-width: 1299px) {
    .pro-sec #brochur-p .content {
        padding: 0px 0 0 20px;
    }
}
.cta-box{
	flex-wrap:nowrap !important;
}
#fourzero{
margin-bottom:40px
}

#fourzero .hero_section .hero-content p{
	max-width:100%;
}
.release-notes-main .release-notes-wrapper .release-content .new-features .accordion-content.expanded {
      overflow: overlay;
}
.communication .communication-box .content {
    max-width: 80%;
}
.page-template-blog .communication .communication-box .content {
    max-width: 40%;
}
.page-template-sip-voip-softphone .call_flow .establish_main .establish_call .call_left h3{
	font-size:1.8rem
}
@media (max-width:768px) {
	.blog_author_page .hero-content{
		max-width:90% !important;
	}
  .siq_bR {
    bottom: 160px;
    right: 16px;
  }
.communication .communication-box .content {
    max-width: 100%;
}
  .trial-card .wpcf7 form .wpcf7-response-output {
    left: unset;
    transform: translate(0px);
    bottom: -55px;
    right: 0;
  }

  .contact-container .wpcf7 form .wpcf7-response-output {
    bottom: -20px;
  }
	.page-template-brochure-download .trusted-section-brochure {
	margin: 20px;
}
.page-template-business-cloud-phone-system .softphone_wt .soft_wt_right .sip-feature-list li {
    display: block;
    align-items: center;
    margin-bottom: 30px;
}
.call_flow .establish_main .establish_call .call_right img {
        max-width: 80%;
    }
	.page-template-blog .communication .communication-box .content {
    max-width: inherit;
}
	 .page-template-blog .communication {
        padding: 20px 15px;
        margin: 0 0px 30px 0px !important;
    }
	.page-template-softphone-internet-telephony-service-providers-itsp .hero_section{
	height:100%;
	padding:20px 0;
	}
}
@media (max-width: 399px) {
  .page-template-blog .communication .communication-box {
        margin: 0;
        padding: 0;
    }
     .new-widh {
    width: 100%;
}
}
#event-page-africa{
	background:url(https://tragofone.com/wp-content/uploads/2025/10/africa-event.png);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
#event-page-africa .wpcf7-not-valid-tip {
    color: #ff2525;
    font-size: 1em;
    font-weight: 400;
    display: block;
    position: absolute;
    bottom: -16px;
    left: 2px;
    font-size: 12px;
}
#event-page-africa .wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 2px 10px;
    border: 1px solid #ffb900;
    position: absolute;
    bottom: 4px;
    font-size: 12px;
    right: 4px;
}
#event-page-africa .form-subtitle {
    font-size: 18px;
    margin: 0 0 10px 0;
    line-height: 1.5;
    font-weight: 400;
}
#event-page-africa .form-title {
    margin: 0 0 10px 0;
}
#max-w{
	max-width:52%;
}
.softphone-cards .softphone-card .card-img-container{
	width: 352px;
    height: 225px;
    overflow: hidden;
    border-radius: 10px;
}
.softphone-cards .softphone-card .card-img-container img{
	object-fit:fill;
}
.header .menu>ul>li {
    line-height: 70px;
    }

.black_color .h3{
	color:#000 !important;
}
.black_color p{
	color:#000 !important;
}
.voip-feature-data h4 {
    color: #000 !important;
}
.voip-feature-data p {
    color: #000 !important;
}
a.page-numbers {
    padding: 0px 15px 0px 15px;
}

}


 /* Announcement Bar */
  .announcement-bar {
    position: relative;
    min-height: 40px;
    padding: 8px 40px 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
   	background: linear-gradient(0deg, #100B1B, #100B1B),
	linear-gradient(90deg, rgba(32, 152, 240, 0.06) 0%, #100B1B 50.48%, rgba(101, 51, 226, 0.06) 100%);
    text-align: center;
	font-size: 12px;
	max-width:98%;
	margin: 0 auto;
	border-radius:10px;
}

div#announcementBar .demo-btn a,
div#announcementBar .demo-btn a:hover{
	all:unset;
    background: white;
    padding: 5px 10px;
    border-radius: 7px;
    font-weight: 700;
    margin-left: 20px;
	cursor:pointer;
	transition:none;
	color:#6533E2;
}

div#announcementBar.demo-btn a span:hover,
.demo-btn:hover span{
    background: linear-gradient(270deg, #6533E2 0.26%, #7349DE 30.28%, #1F97EF 97.16%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
}


  .announcement-text {
    line-height: 1.4;
	font-size: 12px;
    text-align: center;
	color: #ffffff;
  }

  /* Close button */
  .close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
  }

  .close-btn:hover {
    opacity: 1;
  }

  /* Responsive */
  @media (max-width: 600px) {
    .announcement-text {
      font-size: 12px;
    }

    .announcement-text span {
      display: none;
    }

    .announcement-bar {
    flex-direction: column;
    line-height: 31px;
	}
    
  }
body.page-template-itexpo-2026 .hide-for-samepage {
    display: none !important;
}
.blog_content p {
    font-size: 1rem;
}
.single-post .softphone-article-section .softphone-article-container .softphone-article-main .blog_content ul{
	font-size:15px !important;
}
h4#timing-class {
    display: flex;
    flex-direction: row;
    align-items: center;
}
span.event-date {
    display: flex;
    flex-direction: row;
    align-items: center;
}
span.event-location {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ===============================
   Booth UI Scoped Styles
   =============================== */

.booth-ui .booth-wrapper {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
  gap: 10px;

  width: 527px;
  height: 124px;

  background: linear-gradient(
    360deg,
    rgba(255, 255, 255, 0) 0%,
    #F8F5FF 100%
  );

  border-radius: 16px;
}

/* Gradient Border */
.booth-ui .booth-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;

  background: linear-gradient(
    180.01deg,
    #1F97EF -14.91%,
    rgba(255, 255, 255, 0) 93.53%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

/* Inner Card */
.booth-ui .booth-card {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 32px;
  gap: 10px;

  width: 479px;
  height: 76px;

  background: #ffffff;
  box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.booth-ui{
	display:flex;
	justify-content:center;
	margin:50px 0;
}
.booth-ui .booth-title{
	font-size:2.2rem !important;
	margin-bottom:0 !important
}
.mwc-boothsection{
	background: linear-gradient(118.83deg, #EFF5FC 0%, #FDFDFF 87.75%) !important;
	padding:30px 0 !important;
}



@media (max-width: 480px) {
 h4#timing-class {
    display: block;
    align-items: center;
}
span.event-date
 {
    padding-bottom: 15px;
}
}
.single-post .softphone-article-section .softphone-article-container .softphone-article-main .blog_content ul li strong {
    display: contents !important;
}
/* 02 */
  
   .region-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 12px;
    margin: 20px auto;
}

.region-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #DBE8F7;
    border-radius: 10px;
    background-color: transparent;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    min-width: 155px;
    margin: 8px 4px;
}

/* Canada region pills: content-width + constrained row width (matches design) */
.canada-sip-info .new_feature {
    max-width: min(920px, 100% - 48px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.canada-sip-info .region-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    width: 100%;
    margin: 0px auto 0;
    padding: 0 0 60px 0;
    gap: 20px;
    box-sizing: border-box;
}

.canada-sip-info .region-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.canada-sip-info .region-btn {
    min-width: 170px;
    width: auto;
    flex: 0 1 auto;
    margin: 0;
    background-color: #ffffff;
    border-width: 1px;
    border-color: #e5e5e5;
    font-size: clamp(12px, 2.2vw + 0.35rem, 15px);
    line-height: 2.35;
}

/* Canada region block: responsive (desktop → mobile) */
@media (max-width: 991px) {
    .canada-sip-info.sip-info .new_feature {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
    }

    .canada-sip-info .new_feature_heading {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
    }

    .canada-sip-info .region-container {
        padding-left: 0;
        padding-right: 0;
        gap: 16px;
    }

    .canada-sip-info .region-row {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .canada-sip-info .new_feature_heading .h2 {
        font-size: clamp(1.35rem, 4.2vw, 1.75rem);
        line-height: 1.3;
    }

    .canada-sip-info .new_feature_heading p {
        font-size: clamp(14px, 3.5vw, 16px);
        line-height: 1.5;
        padding: 0 4px;
    }

    .canada-sip-info .region-container {
        gap: 14px;
    }

    .canada-sip-info .region-row {
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .canada-sip-info .new_feature {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .canada-sip-info .region-container {
        gap: 12px;
        padding-bottom: 16px;
    }

    .canada-sip-info .region-row {
        gap: 8px 10px;
    }

    .canada-sip-info .region-btn {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .canada-sip-info .new_feature_heading {
        margin-bottom: 16px;
    }

    .canada-sip-info .region-container {
        gap: 10px;
    }

    .canada-sip-info .region-row {
        gap: 8px;
        justify-content: center;
    }

    .canada-sip-info .region-btn {
        flex: 1 1 calc(50% - 4px);
        max-width: calc(50% - 4px);
        min-width: 0;
        box-sizing: border-box;
        justify-content: center;
        padding: 8px 10px;
        white-space: normal;
        text-align: center;
    }

    .canada-sip-info .region-btn span {
        line-height: 1.25;
    }
}

@media (max-width: 360px) {
    .canada-sip-info .region-btn {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.region-btn span{
    font-weight: 700;
}

.partners_section{
    background: url(./image/choosesus.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    background-color: rgba(0, 0, 0, 0.75);
    background-blend-mode: multiply;
}

/* Partner & features section (Canada page) */
.canada-partner-section {
    position: relative;
    padding: 80px 0 40px;
    color: #ffffff;
    overflow: hidden;
}
/* 
.canada-partner-section .bg-us {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.canada-partner-section .bg-us img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.2);
} */

.canada-partner-section .content-us {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    transform: none;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 0;
}

.canada-partner-section .h3 {
    text-align: center;
    margin-bottom: 32px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.partner-card {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 15px;
    background: linear-gradient(246.06deg, rgba(255, 255, 255, 0) 0%, rgba(234, 243, 250, 0.13) 100%);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.partner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(131.32deg, #1F97EF 0%, rgba(31, 151, 239, 0.4) 100%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}


.partner-card-title {
    font-weight: 600;
    font-size: 16px;
}

.partner-card-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.features-wrapper {
    max-width: min(1456px, 100% - 64px);
    margin: 80px auto 0;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 72px);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 40px 120px -40px rgba(101, 51, 226, 0.25);
    text-align: center;
}

.features-wrapper h3 {
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.4;
    margin-bottom: 8px;
    color: #000000;
}

.features-wrapper p {
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 40px;
}

.features-pill-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    max-width: 1172px;
    margin: 0 auto 40px;
}

.feature-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.feature-pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 16px 16px;
    gap: 12px;
    flex: 1 1 calc(33.333% - 16px);
    min-width: 260px;
    height: 64px;
    border-radius: 300px;
    border: 1px solid #C4DEF1;
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: #000000;
}

.feature-pill span {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-pill span svg {
    width: 23px;
    height: 24px;
}

.features-wrapper .btn.btn-1 {
    width: 356px;
    max-width: 100%;
    display: inline-flex;
    justify-content: center;
}

/* Europe / EU compliance callout — Frame 1000003386 (Figma) */
.eu-compliance-inner {
    max-width: min(908px, 100% - 32px);
    margin: 0 auto;
}

.eu-compliance-banner {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 48px;
    gap: 10px;
    isolation: isolate;
    min-height: 88px;
    background: #ffffff;
    border: 1px solid #ECE8F6;
    border-radius: 12px;
    text-align: center;
}

.eu-compliance-banner__icon {
    position: absolute;
    left: 16.93px;
    top: -8.12px;
    width: 25.2px;
    height: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.eu-compliance-banner__icon svg {
    width: 25.2px;
    height: 24px;
    display: block;
}

.eu-compliance-banner__text {
    position: relative;
    z-index: 0;
    flex: none;
    order: 0;
    margin: 0;
    max-width: 812px;
    width: 100%;
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #000000;
}
.top-mrg{
	margin-top:185px;
}
.set-hight {
    height: 520px;
}
.partner-grid a {
    color: #fff;
}
.set-3{
	display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
	
}
.btn-center {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 35px;
}
a.btn.btn-1.hover-filled-slide-down.make-center {
    width: 365px;
    max-width: 100%;
    display: inline-flex;
    justify-content: center;
}
section.why-us.canada-partner-section .new-bg-us {
    height: 750px !important;
}
section.why-us.canada-partner-section .new-bg-us-3 {
    height: 850px !important;
}
.new-widh {
    width: 46%;
}
@media (max-width: 640px) {
    .eu-compliance-banner {
        padding: 20px 24px;
        min-height: 0;
    }

    .eu-compliance-banner__icon {
        left: 12px;
        top: -6px;
    }

    .eu-compliance-banner__text {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.5;
    }
}

/* Small mobile */
@media (max-width: 480px) {
  .region-btn {
    font-size: 13px;
    padding: 6px 10px;
  }
}

@media (max-width: 992px) {
    .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .canada-partner-section {
        padding-top: 60px;
    }
}

@media (max-width: 992px) {
    .features-wrapper {
        max-width: min(100%, 100% - 32px);
        margin: 48px auto 0;
        padding: 28px 20px;
        border-radius: 20px;
        box-shadow: 0px 30px 80px -40px rgba(101, 51, 226, 0.22);
    }

    .feature-pill {
        flex: 1 1 100%;
    }
}

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

    .features-wrapper {
        max-width: min(100%, 100% - 24px);
        margin: 32px auto 0;
        padding: 20px 14px 18px;
        border-radius: 18px;
        box-shadow: 0px 20px 60px -40px rgba(101, 51, 226, 0.18);
    }

    .features-wrapper p {
        margin-bottom: 20px;
    }

    .feature-pill-row {
        gap: 16px;
    }

    .feature-pill {
        padding: 10px 16px;
        font-size: 12px;
        line-height: 1.3;
        height: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.become-a-channel-sec{
	height:600px !important;	
}
section.why-us.canada-partner-section .bg-us { height: 600px; /* Desktop */ } /* Large tablets */ @media (max-width: 992px) { section.why-us.canada-partner-section .bg-us { height: 700px; } } /* Tablets */ @media (max-width: 768px) { section.why-us.canada-partner-section .bg-us { height: 850px; } } /* Mobile */ @media (max-width: 600px) { section.why-us.canada-partner-section .bg-us { height: 1385px; } section.why-us.canada-partner-section .new-bg-us-3 {
    height: 2100px !important;
}}

.tragofone-compare-section {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
	padding:40px 0;
}

.tragofone-compare-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: min(1100px, 100%);
    margin: 0 auto;
}

.tragofone-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3.5vw, 48px);
    align-items: stretch;
}

.tragofone-compare-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tragofone-compare-col-title {
    margin: 0 0 clamp(16px, 3vw, 28px);
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 2vw + 0.55rem, 1.375rem);
    line-height: 1.3;
    text-align: left;
    color: #1F97EF;
    text-wrap: balance;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .tragofone-compare-col-title {
        background: linear-gradient(270deg, #6533E2 0.26%, #7349DE 30.28%, #1F97EF 97.16%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.tragofone-compare-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(13px, 1.35vw + 0.35rem, 16px);
    line-height: 1.55;
    color: #475569;
}

.tragofone-compare-list li {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 2vw, 12px);
    margin-bottom: clamp(12px, 2vw, 18px);
}

.tragofone-compare-list li:last-child {
    margin-bottom: 0;
}

.tragofone-compare-list li span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tragofone-compare-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

.tragofone-compare-panel {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: clamp(12px, 2vw, 16px);
    padding: clamp(20px, 3.5vw, 40px) clamp(16px, 2.8vw, 36px);
    box-shadow: 0 12px 40px -18px rgba(101, 51, 226, 0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tragofone-compare-panel .tragofone-compare-col-title {
    margin-bottom: clamp(16px, 3vw, 28px);
}

.tragofone-compare-panel .tragofone-compare-list {
    color: #475569;
}

/* Hover lift only on devices with real hover (avoids sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
    .tragofone-compare-panel:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 56px -20px rgba(101, 51, 226, 0.22), 0 12px 32px -16px rgba(31, 151, 239, 0.12);
        border-color: #8BB8E8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tragofone-compare-panel {
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    .tragofone-compare-panel:hover {
        transform: none;
    }
}

/* Tablet / small laptop: single column before columns get too narrow */
@media (max-width: 900px) {
    .tragofone-compare-grid {
        grid-template-columns: 1fr;
    }

    .tragofone-compare-col--with {
        order: 2;
    }

    .tragofone-compare-col--without {
        order: 1;
    }
}

/* Large phones */
@media (max-width: 480px) {
 
    .tragofone-compare-grid {
        gap: clamp(14px, 4vw, 20px);
    }

    .tragofone-compare-panel {
        padding: clamp(16px, 4vw, 22px) clamp(12px, 3.5vw, 18px);
    }

    .tragofone-compare-col-title {
        line-height: 1.35;
    }

    .tragofone-compare-icon {
        width: 20px;
        height: 20px;
        margin-top: 3px;
    }
}

/* Very narrow (e.g. 320px) */
@media (max-width: 360px) {
    .tragofone-compare-section {
        padding-inline: 10px;
    }

    .tragofone-compare-list {
        font-size: 13px;
        line-height: 1.5;
    }
}

.set-hight-net {
    height: 585px !important;
}
.set-long{
max-width: 90% !important;	
}
  span.color-txt {
    background: linear-gradient(270deg, #6533E2 0.26%, #7349DE 30.28%, #1F97EF 97.16%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}  
/* webrtc new */

   .platform-section {
        max-width: 80%;
        margin: auto;
    }

    .platform-card {
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 20px;
        padding: 24px;
        display: flex;
        justify-content: space-between;
        gap: 40px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
		margin:50px 0 70px;
    }

    .platform-group {
        flex: auto;
    }

    .platform-group h3 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 18px;
    }

    .platform-list {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .platform-item {
        text-align: center;
        min-width: 85px;
		background:#F6F6F8;
		border-radius:10px;
		border: 1px solid #F1F1F1;
    }
	.browsers .platform-item {
	background:#fff;
	}
    .icon-box {
        width: 78px;
        height: 78px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
		margin:0 auto;
    }


    .platform-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #5834D3;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

	.platform-icon svg{
		max-height:27px
	}
	.platform-icon .icon-box svg{
		max-width:55px
	}

    .platform-item span {
        display: block;
        font-size: 14px;
        color: #474747;
		margin-bottom:8px;
    }

    /* Tablet */
    @media (max-width: 991px) {
        .platform-card {
            flex-direction: column;
            gap: 30px;
			margin:20px 0;
        }
    }

    /* Mobile */
    @media (max-width: 576px) {
		.platform-section{
			max-width:90%;
		}
      

        .platform-card {
            padding: 20px;
        }

        .platform-group h3 {
            text-align: center;
        }

        .platform-list {
            justify-content: center;
        }

        .icon-box {
            width: 70px;
            height: 70px;
        }

        .platform-icon {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .browser-icon {
            font-size: 34px;
        }

        .platform-item {
            min-width: 70px;
        }
    }


section.why-us.canada-partner-section .new-bg-us-4
 {
    height: 1350px !important;
}
/* ===== RESOURCES MEGA MENU ===== */
.resources-mega-menu {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 24px;
    max-width: 904px;
}

.resources-mega-menu .submenu-wrapper {
    display: grid;
    grid-template-columns: 1fr 2.2fr;   /* RESOURCES | COMPARE */
    gap: 20px;
    align-items: start;
}

/* Section headings */
.resources-mega-menu .title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a93a6;
    margin: 0 0 12px 4px;
}

/* List basics */
.resources-mega-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resources-mega-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2533;
    text-decoration: none;
    transition: background 0.15s ease;
}

.resources-mega-menu li a:hover {
    background: #eef1f8;
}

.resources-mega-menu li a img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Highlighted / active item (e.g. Blog) */
.resources-mega-menu .resources-list li:first-child a {
    background: #eef1f8;
}

/* ===== COMPARE SECTION ===== */
.compare-section {
    background: #f6f8fc;
    border-radius: 12px;
    padding: 16px;
}

.compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}

@media (max-width: 1024px) {
  .header .menu > ul > li .resources-mega-menu,
  .header .menu > ul > li .sub-menu .resources-mega-menu {
    max-width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }

  .header .menu > ul > li .resources-mega-menu .submenu-wrapper {
    display: block !important;
    grid-template-columns: none !important;
  }

  .header .menu > ul > li .resources-mega-menu .compare-columns {
    display: block !important;
    grid-template-columns: none !important;
  }

  .header .menu > ul > li .resources-mega-menu .compare-columns > a,
  .header .menu > ul > li .resources-mega-menu .compare-columns > li {
    width: 100% !important;
  }
	.header #resources .sub-menu.mega-menu {
    background: #fff !important;
    max-height: 100% !important;
}
}

/* ==========================================================================
   START: AI Call Intelligence page — ai-call-intelligence.html
   Sticky cards + page-only sections. Managed from scss/scss/style.scss.
   ========================================================================== */
/* ==========================================================================
   Tragofone's AI Call Intelligence — sticky cards on scroll
   --------------------------------------------------------------------------
   Stacking mechanic:
   All .aci-card elements are direct children of one flow container and are
   `position: sticky` with a staggered `top`. Because they share a containing
   block, each card pins under the previous one and the next card slides over
   it — a card deck. Sticky keeps this on the compositor: no scroll listeners,
   no layout reads, so it stays smooth on long pages.

   Depth (the slight scale/lift of covered cards) is driven by a `--depth`
   custom property set by the companion JS via IntersectionObserver, so there
   is still zero per-frame JS work.

   To drop this section into a page with the fixed site header, override the
   sticky offset on the section: `.aci { --aci-sticky-top: 120px; }`
   ========================================================================== */
/* palette vars live in SCSS source; global resets omitted for shared style.css */

/* The sprite only carries <symbol> defs — keep it out of the layout. */
.aci-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
a.btn-3 {
    width: 275px !important;
}
/* .aci-page {
  padding: clamp(48px, 6vw, 110px) 0 clamp(60px, 8vw, 140px);
} */

/* ==========================================================================
   Section shell
   ========================================================================== */
.aci {
  /* distance from the viewport top at which the first card pins */
  --aci-sticky-top: clamp(20px, 4vh, 44px);
  /* each following card pins this much lower, exposing the deck edges */
  --aci-stagger: 14px;
  width: 100%;
}

.aci__container {
  width: min(1300px, 100% - clamp(24px, 5vw, 80px));
  margin-inline: auto;
}

.aci__head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 64px);
}

.aci__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.aci__title-accent {
  display: block;
  margin-top: 0.18em;
  background: linear-gradient(90deg, #1f97ef 0%, #5834d3 60%, #6533e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keeps the gradient text legible if background-clip is unsupported */
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   The stack
   ========================================================================== */
/* A plain block container on purpose: the companion JS injects zero-impact
   sentinel elements between the cards, and flex `gap` would add a gap around
   each one. Spacing therefore lives on the cards themselves. */
.aci__stack {
  display: block;
  /* sticky children break if any ancestor clips overflow */
  overflow: visible;
}

/* 1px tall, pulled back by -1px: no layout impact, but a real box for
   IntersectionObserver to watch. Marks each card's natural top. */
.aci-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.aci-card {
  position: sticky;
  top: calc(var(--aci-sticky-top) + var(--i, 0) * var(--aci-stagger));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(20px, 2.5vw, 44px);
  padding: clamp(24px, 2.6vw, 46px);
  background: #ffffff;
  border: 1px solid #e9edf5;
  border-radius: clamp(18px, 1.6vw, 28px);
  box-shadow: 0 18px 48px rgba(16, 24, 64, 0.06);
  /* covered cards recede — one cheap composited transform per card */
  transform: translateY(calc(var(--depth, 0) * -6px)) scale(calc(1 - var(--depth, 0) * 0.022));
  transform-origin: 50% 0;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aci-card:not(:last-child) {
  margin-bottom: clamp(24px, 3vw, 44px);
}

/* the topmost visible card of the deck gets a slightly richer shadow */
.aci-card[data-depth="0"] {
  box-shadow: 0 26px 70px rgba(16, 24, 64, 0.1);
}

.aci-card--compact {
  align-items: center;
}

/* ---- card text column ---- */
.aci-card__body {
  min-width: 0;
}

.aci-card__title {
  margin: 0;
  font-size: clamp(21px, 1.9vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #0b0b12;
}

.aci-card__quote {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.4;
  font-weight: 600;
  color: #5834d3;
}

.aci-card__lede {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.6;
  color: #45464f;
}

.aci-card__list {
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 0.8vw, 13px);
}

.aci-card__list li {
  position: relative;
  padding-left: 1.15em;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.5;
  color: #45464f;
}

.aci-card__list li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6f7280;
}

/* ==========================================================================
   Card visual — the product mock
   ========================================================================== */
.aci-card__visual {
  min-width: 0;
}

.aci-mock {
  position: relative;
  /* the mock scales as one unit: everything inside sizes in em */
  font-size: clamp(10px, 0.74vw, 13.5px);
  aspect-ratio: 4/3;
  border-radius: clamp(14px, 1.2vw, 22px);
  background: #fafcff;
  background-image: linear-gradient(to right, rgba(31, 151, 239, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 151, 239, 0.06) 1px, transparent 1px);
  background-size: 2.9em 2.9em;
  display: grid;
  place-items: center;
}

.aci-mock__panel {
  width: min(21em, 78%);
  padding: 1.1em 1.15em;
  background: #ffffff;
  border: 1px solid #eef1f7;
  border-radius: 1.15em;
  box-shadow: 0 12px 30px rgba(16, 24, 64, 0.08);
  position: relative;
  z-index: 2;
}

.aci-mock__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6em;
  margin-bottom: 0.85em;
}

.aci-mock__panel-title {
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.25;
  color: #0b0b12;
}

.aci-mock__panel-title--grad {
  background: linear-gradient(90deg, #1f97ef 0%, #5834d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.aci-mock__panel-stack {
  display: grid;
  gap: 0.25em;
}
.aci-mock__panel-stack small {
  font-size: 0.82em;
  line-height: 1.35;
  color: #6f7280;
  font-weight: 500;
}

.aci-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.28em 0.55em;
  border-radius: 0.5em;
  background: #e8f3fe;
  color: #1f97ef;
  font-size: 0.78em;
  font-weight: 700;
}
.aci-badge svg {
  width: 1em;
  height: 1em;
}

.aci-badge--violet {
  background: #ece7fd;
  color: #5834d3;
}

/* ---- chat rows ---- */
.aci-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.aci-avatar {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, #c9d6e8, #9fb4cf);
  color: rgba(255, 255, 255, 0.92);
}
.aci-avatar svg {
  width: 1.35em;
  height: 1.35em;
}

.aci-avatar--initial {
  font-size: 0.85em;
  font-weight: 700;
  color: #ffffff;
}

.aci-avatar--gray {
  background: #b9c1cc;
}

.aci-avatar--violet {
  background: linear-gradient(150deg, #7c4ee4, #5834d3);
}

.aci-bubble {
  background: #f4f5f8;
  border-radius: 0.65em;
  padding: 0.55em 0.7em;
  min-width: 0;
}
.aci-bubble p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: #2b2c33;
}
.aci-bubble time {
  display: block;
  margin-top: 0.3em;
  font-size: 0.72em;
  color: #9aa0aa;
}

.aci-bubble--translated {
  background: #eaf4fe;
  margin: 0 0 0.5em 2.4em;
}

.aci-bubble__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-bottom: 0.28em;
  font-size: 0.72em;
  font-weight: 700;
  color: #1f97ef;
}
.aci-bubble__tag svg {
  width: 0.95em;
  height: 0.95em;
}

.aci-bubble--flat {
  display: block;
  margin: 0 0 0.7em;
}

/* ---- named speaker rows (transcription) ---- */
.aci-speaker {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.4em;
}

.aci-speaker__name {
  font-size: 0.88em;
  font-weight: 700;
  color: #0b0b12;
}

.aci-speaker__time {
  margin-left: auto;
  font-size: 0.74em;
  color: #9aa0aa;
}

/* ---- composer ---- */
.aci-input {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.85em;
  padding: 0.55em 0.7em;
  border: 1px solid #eef1f7;
  border-radius: 0.8em;
}
.aci-input__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  color: #9aa0aa;
}
.aci-input__placeholder {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85em;
  color: #a6abb5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aci-input__send {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: #1f97ef;
}

/* ---- summary blocks ---- */
.aci-mock__eyebrow {
  margin: 0;
  font-size: 0.76em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b8fa8;
}

.aci-mock__subject {
  margin: 0.2em 0 0.7em;
  font-size: 1em;
  font-weight: 700;
  color: #0b0b12;
}

.aci-note {
  margin: 0;
  padding: 0.7em 0.75em;
  border-radius: 0.6em;
  background: #f4f5f8;
  font-size: 0.85em;
  line-height: 1.45;
  color: #4b4d57;
}

.aci-mock__label {
  margin: 0.9em 0 0.5em;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b8fa8;
}

.aci-tasks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45em;
}
.aci-tasks li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85em;
  line-height: 1.35;
  color: #2b2c33;
}
.aci-tasks__box {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.28em;
  background: #eceff4;
  display: grid;
  place-items: center;
  color: transparent;
}
.aci-tasks__box svg {
  width: 0.8em;
  height: 0.8em;
}
li.is-done .aci-tasks__box {
  background: #19b26b;
  color: #ffffff;
}

/* ---- audio player ---- */
.aci-player {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.9em;
  padding: 0.5em 0.65em;
  border: 1px solid #eef1f7;
  border-radius: 0.7em;
}
.aci-player__play {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  color: #1f97ef;
}
.aci-player__time {
  flex: none;
  margin-left: auto;
  font-size: 0.76em;
  font-weight: 600;
  color: #6f7280;
}

/* Bars are pure CSS: no canvas, no images. The nth-child ramp keeps the
   silhouette organic while staying a single repaint-free element. */
.aci-wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.16em;
  height: 1.1em;
  min-width: 0;
  overflow: hidden;
  /* trailing bars read as "not yet played" */
}
.aci-wave i {
  flex: 1 1 auto;
  min-width: 1px;
  max-width: 0.16em;
  border-radius: 1px;
  background: #1f97ef;
  height: 40%;
}
.aci-wave i:nth-child(3n) {
  height: 82%;
  background: #5834d3;
}
.aci-wave i:nth-child(4n) {
  height: 60%;
}
.aci-wave i:nth-child(5n) {
  height: 96%;
}
.aci-wave i:nth-child(7n) {
  height: 28%;
  background: #c8d3e2;
}
.aci-wave i:nth-last-child(-n+6) {
  background: #d3dbe6;
}

.aci-wave--short i:nth-last-child(-n+4) {
  background: #d3dbe6;
}

.aci-wave--tall {
  height: 1.9em;
  gap: 0.22em;
}
.aci-wave--tall i {
  max-width: 0.14em;
  background: #1f97ef;
}
.aci-wave--tall i:nth-child(3n) {
  background: #1f97ef;
}
.aci-wave--tall i:nth-child(7n) {
  background: #9ecdf3;
}
.aci-wave--tall i:nth-last-child(-n+6) {
  background: #1f97ef;
}

/* ---- signal panel (card 4) ---- */
.aci-signal {
  margin-top: 0.3em;
  padding: 0.7em 0.75em;
  border: 1px solid #eef1f7;
  border-radius: 0.7em;
}
.aci-signal__head, .aci-signal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.85em;
}
.aci-signal__head {
  margin-bottom: 0.55em;
  font-weight: 700;
  color: #0b0b12;
}
.aci-signal__head em {
  font-style: normal;
  font-weight: 700;
  color: #1f97ef;
}
.aci-signal__foot {
  margin-top: 0.55em;
  padding-top: 0.5em;
  border-top: 1px solid #eef1f7;
  color: #a6abb5;
}
.aci-signal__foot em {
  font-style: normal;
  font-weight: 700;
  color: #1f97ef;
}

.aci-mock__foot {
  margin: 0.75em 0 0;
  font-size: 0.82em;
  line-height: 1.4;
  color: #6f7280;
}

/* ==========================================================================
   Floating decoration — pills, tiles, stat card
   Positioned with --x / --y (percentages of the mock) and an optional --r
   tilt, so each instance stays a one-line change in the markup.
   ========================================================================== */
.aci-pill,
.aci-tile,
.aci-stat {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  transform: rotate(var(--r, 0deg));
  z-index: 3;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 24, 64, 0.09);
}

.aci-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 600;
  color: #22232b;
  white-space: nowrap;
}
.aci-pill__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}
.aci-pill__icon--blue {
  color: #1f97ef;
}
.aci-pill__icon--green {
  color: #16a34a;
}
.aci-pill__icon--amber {
  color: #f0a02a;
}
.aci-pill__icon--orange {
  color: #f2743a;
}
.aci-pill__icon--indigo {
  color: #4f46e5;
}
.aci-pill__icon--slate {
  color: #64748b;
}

.aci-pill--toggle {
  gap: 0.5em;
}

.aci-switch {
  flex: none;
  width: 1.9em;
  height: 1.05em;
  border-radius: 999px;
  background: #1f97ef;
  position: relative;
}
.aci-switch::after {
  content: "";
  position: absolute;
  top: 0.13em;
  right: 0.13em;
  width: 0.79em;
  height: 0.79em;
  border-radius: 50%;
  background: #ffffff;
}

.aci-tile {
  width: 2.9em;
  height: 2.9em;
  border-radius: 0.85em;
  display: grid;
  place-items: center;
}
.aci-tile svg {
  width: 1.4em;
  height: 1.4em;
}
.aci-tile--blue svg {
  color: #1f97ef;
}
.aci-tile--violet svg {
  color: #5834d3;
}

.aci-stat {
  padding: 0.6em 0.8em;
  border-radius: 0.8em;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.15em 0.5em;
}
.aci-stat__icon {
  grid-row: 1;
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  color: #1f97ef;
}
.aci-stat__icon svg {
  width: 1.35em;
  height: 1.35em;
}
.aci-stat__text {
  display: grid;
  line-height: 1.15;
}
.aci-stat__text b {
  font-size: 1.15em;
  font-weight: 800;
  color: #0b0b12;
}
.aci-stat__text small {
  font-size: 0.78em;
  color: #6f7280;
  white-space: nowrap;
}
.aci-stat__flags {
  grid-column: 1/-1;
  margin-top: 0.35em;
  display: flex;
  align-items: center;
  gap: 0.12em;
  font-size: 0.85em;
  line-height: 1;
}
.aci-stat__flags em {
  margin-left: 0.25em;
  font-style: normal;
  font-size: 0.95em;
  font-weight: 700;
  color: #6f7280;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .aci-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Below this width the deck is dropped: stacking cards on a short viewport
   hides content behind content. Cards simply flow instead. */
@media (max-width: 960px) {
  .aci-card {
    position: static;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    transform: none;
    box-shadow: 0 18px 48px rgba(16, 24, 64, 0.06);
  }
  .aci-card__visual {
    order: 2;
  }
  .aci-mock {
    font-size: clamp(10px, 1.9vw, 14px);
    aspect-ratio: 16/12;
  }
  .new-widh {
    width: 100%;
}
}
@media (max-width: 640px) {
  .aci__container {
    width: min(100% - 28px, 100%);
  }
  .aci-mock {
    aspect-ratio: 1/1;
    font-size: clamp(8.5px, 2.5vw, 12px);
  }
  .aci-mock__panel {
    width: min(22em, 86%);
  }
}
/* ==========================================================================
   Motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .aci-card {
    transform: none;
    transition: none;
  }
}
@media print {
  .aci-card {
    position: static;
    transform: none;
    box-shadow: none;
    break-inside: avoid;
  }
}

.aci-full-page .aci {
  --aci-sticky-top: clamp(88px, 11vh, 120px);
}

.aci-full-page .aci-page {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* Every Softphone Vendor Claims to Have AI — 3-card reality-check block */
.aci-reality {
  background: #f7fafd;
  padding: clamp(48px, 8vw, 100px) clamp(20px, 6vw, 312px);
}

.aci-reality__container {
  max-width: 1296px;
  margin: 0 auto;
}

.aci-reality__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.aci-reality__card {
  box-sizing: border-box;
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 36px;
  background: #fff;
  border-radius: 20px;
}

.aci-reality__icon {
  box-sizing: border-box;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fcff;
  border-radius: 16px;
}

.aci-reality__icon svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 12px;
  background: #1f97ef;
  border-radius: 14px;
}

.aci-reality__card .h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.aci-reality__card .outcome {
  margin: 0;
  font-size: 17px;
  line-height: 1.71;
  color: #474747;
}
p.outcome {
    text-align: left;
}
img.aci-mock__image {
    width: 85%;
    height: auto;
}
.team-container {
  display: flex;
  flex-wrap: nowrap;          /* keep the single line */
  justify-content: center;
  gap: clamp(16px, 2.5vw, 32px);
}

.team-container .team-details {
  flex: 1 1 0;                /* was 0 1 auto + width:276px */
  min-width: 0;               /* critical: lets flex items shrink below content size */
  max-width: 276px;           /* don't stretch past the original design on wide screens */
}

/* the images are 300px wide inside a 276px box — that alone overflows */
.team-container .team-details img,
.team-container .team_box img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .team-container {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .team-container .team-details {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }
}


button.btn.btn-2.hover-slide-down span
 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: inherit;
    gap: inherit;
    padding: 0px 20px;
}
.close-btn {
    position: absolute;
    right: 20px !important;
    top: 10% !important;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #000 !important;
    cursor: pointer;
    opacity: 0.7;
    font-size: 40px !important;
}
.event-background{
	background: url(https://tragofone.com/wp-content/uploads/2026/09/hero-sections.webp) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
#event-page-africa .main-heading  {
    max-width: 90% !important;
}
#event-page-africa .bold {
    font-weight: 700 !important;
    animation: gradientMove 4s ease-in-out infinite !important;
    background-size: 200% 200% !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(270deg, rgb(101, 51, 226) 0.26%, rgb(115, 73, 222) 30.28%, rgb(31, 151, 239) 97.16%) text;
    padding: 0px !important;
}

div#event-page-africa h2 {
    padding-top: 11px;
}

.event-background .meet-us {
    background: rgba(240, 247, 255, 1);
    font-weight: 700;
    font-style: Bold;
    font-size: 17px;
    letter-spacing: 5px !important;
    padding: 9px;
    width: 63%;
    border-radius: 10px;
    margin-bottom: 10px;
}
div#booth-two {
    gap: 35px;
}
div#booth-cards-three.booth-cards {
    gap: 2rem 2rem !important;
}
#booth-two.booth-ui .booth-wrapper{
    width: 355px;
}
#booth-two.booth-ui .booth-title{
	font-size:26px !important;
}

.booth-section .booth-container .booth-cards .booth-card {  
	max-width: 340px !important;
}
div#evnt-cta .content {
    width: 65%;
}
@media (max-width: 991px) {
	.event-background .meet-us {
    width: 95%;
}
#max-w {
    max-width: 85%;
}

.booth-ui .booth-wrapper {
    width: 351px;
	}
.booth-ui {
    flex-direction: column;
    align-items: center;
}
.booth-ui .booth-title {
    font-size: 28px !important;
   
}
}