/*
Theme Name: My Theme
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: My custom theme
Version: 1.0
License: GPL v2 or later
Text Domain: mytheme
*/

/* 
Theme Name: My Theme
Version: 1.0
*/


*{padding: 0; margin: 0; }

body{ padding-top: 80px;  font-family: Plus Jakarta Sans; font-size: 18px; color: #1e1e1e;; box-sizing: border-box; }

a{text-decoration: none;}

.reset{list-style: none;}

img{width: 100%; box-sizing: border-box; height: auto; object-fit: cover;}

.container {width: 1290px;margin: 0 auto;}

:root {
    --bg-color: #FFF6EC; 
    --text-dark: #121212;
    --text-muted: #666666;
    --btn-blue: #0A1154; 
    --accent-red: #FF3B30; 
}

@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  src: url('./assets/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2'); 
}




/* ============================================
   FLOATING WHATSAPP ICON ONLY
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: #25d366;
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 34px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    color: #ffffff;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}



.navbar-header .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: transparent;  border: none;  cursor: pointer;  z-index: 100;}
.navbar-header .menu-toggle .bar {height: 3px; width: 100%; background-color: #333; border-radius: 10px; transition: all 0.3s ease;}
.navbar-header .container{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 20px 0; }
.navbar-header .nav-menu ul {display: flex; justify-content: space-between; gap: 14px; }
.navbar-header .nav-menu ul li a.nav-item{font-size: 16px; line-height: 26px; padding: 15px 15px; box-sizing: border-box; display: block;  color: #000000; font-weight: 600;}
.navbar-header .nav-cta a.btn-signup{padding: 15px 35px; background:RGB(14, 21, 82); box-sizing: border-box; border-radius: 50px; font-size: 16px; font-weight: 500; line-height: 26px; color: rgb(255, 255, 255);}
.navbar-header { position: fixed;  top: 0; left: 0;  right: 0; z-index: 9999;  background: white; transition: all 0.3s ease; }
.navbar-header.is-sticky {box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);  padding: 10px 0;}

.banner_section{margin-top: 100px;}
.banner_wrap{display: flex; justify-content: space-between; flex-wrap:wrap; gap: 4%;}
.banner_wrap .content_section{width: 48%; display: grid; place-content: center;}
.banner_wrap .image_section{width: 48%;}
.banner_wrap .title_content_wrap span.bo_yo_bus{font-size: 16px; color: rgb(255, 63, 51); line-height: 26px; text-transform: capitalize;font-weight: 500;}
.banner_wrap .title_content_wrap h1{ font-weight: 700; text-transform: capitalize; font-size: 60px;  line-height: 70px; margin-top: 15px;color: #191d27;}
.banner_wrap .title_content_wrap p{font-size: 16px; line-height: 26px; font-weight: 500; color: #6b6b6b; margin-top: 18px;}
.banner_wrap .btn_wrap{margin-top: 32px; display: flex; align-items: center; gap: 30px;}
.banner_wrap .btn_wrap .learn_more_btn a{ display: block; color: #ffffff; font-size: 17px; line-height: 27px; font-weight: 600; border-radius: 50px; background-color: #0E1552; padding: 15px 45px 15px 45px; box-sizing: border-box;}
.banner_wrap .btn_wrap .contact_btn a{ display: flex; align-items: center; gap: 15px; position: relative;  color: #191D27; font-size:18px; line-height: 28px; font-weight:600 ;}
.banner_wrap .btn_wrap .contact_btn i.fa-phone{color: white; font-size: 17px; border-radius: 50px; background: RGB(255, 213, 63); width: 49px; height: 49px; display: grid; place-content: center;}
.banner_wrap .image_section{position: relative;}
.banner_wrap .image_section::after{content: ""; position: absolute; background: url(./assets/image/targetd_images.png); width: 320px; height: 97px; top: 50%; left: 0; transform: translate(-22%, -183%); box-sizing: border-box;}
.banner_wrap .image_section::before{content: ""; position: absolute; background: url(./assets/image/active_User_icon.png); width: 140px; height:164px; bottom: 0; left: 0; transform: translate(-7%, -46%); box-sizing: border-box;}

.digital_experience_section{padding: 100px 0 0;}
.digital_experience_section .digital_content_wrap h2{ font-weight: 600;  text-transform: capitalize;  font-size: 40px;  line-height:50px; color: #191d27;}
.digital_experience_section .digital_content_wrap p{font-size: 16px; line-height: 26px; color: #6b6b6b; font-weight: 400; margin-top:22px;}
.digital_experience_section .digital_wrap{display: flex; justify-content: space-between; gap:3%; align-items: center; flex-wrap: nowrap;}
.digital_experience_section .digital_card{border-radius: 50px; background: #ffffff;   box-shadow: 0 4px 20px 0 rgba(245, 215, 110, 0.3); padding: 60px 40px 50px 40px; box-sizing: border-box;}
.digital_experience_section .digital_card.card-up{margin-bottom: 50px; }
.digital_experience_section .digital_card p{font-size:16px; line-height: 26px; color: #6b6b6b; font-weight: 400; margin:25px 0 20px 0;}
.digital_experience_section .digital_card .card_title{display: flex; justify-content: space-around; align-items: center; gap: 10%;  }
.digital_experience_section .digital_card .card_title h3{text-transform: capitalize; font-size: 18px;  line-height: 28px; font-weight: 600;}
.digital_experience_section .digital_card .card_title .imag_box{ background: RGB(255, 249, 232); width: 100px; height: 100px; display: grid; place-content: center; border-radius: 50%;  flex-shrink: 0;}
.digital_experience_section .digital_card .learn_more_link a{color: #9F0000; font-size: 18px; line-height: 28px; font-weight: 700; display: flex; gap: 3%; }
.digital_experience_section .digital_card .learn_more_link a span{display: flex; align-items: center;}
.digital_experience_section .digital_card .card_title .imag_box.bg-blue{background:RGB(238, 249, 255);}

.growing_companies_section{padding:110px 0 0;}
.growing_companies_section h2{text-align: center; font-size: 18px; line-height: 28px; color: #7d7d7d; font-weight: 500;}
.growing_companies_section h2 span{color: #000000;}
.growing_companies_section .logo-slider {width: 100%; height: 100px; overflow: hidden; position: relative; background: #ffffff; display: flex; align-items: center;
  margin-top: 20px;}
.growing_companies_section .logo-track { display: flex; width: calc(250px * 10); animation: scroll 25s linear infinite;}
.growing_companies_section .slide { width: 250px; display: flex; justify-content: center; align-items: center;}
.growing_companies_section .logo-item { display: flex; align-items: center; gap: 12px;}
.growing_companies_section .icon { font-size: 28px; line-height: 1;}
.growing_companies_section .blue-icon { color: #3498db; }
.growing_companies_section .green-icon { color: #2ecc71; }
.growing_companies_section .ribbon-icon { color: #5dade2; font-weight: bold; }
.growing_companies_section .orange-dots { color: #f39c12; font-size: 32px; }
.growing_companies_section .text-group { display: flex; flex-direction: column;}
.growing_companies_section .title { font-size: 16px; font-weight: 700; color: #2c3e50; letter-spacing: 0.5px;}
.growing_companies_section .serif-font { font-family: Georgia, serif; font-weight: 500;}
.growing_companies_section .red-text {color: #e74c3c;}
.growing_companies_section .subtitle { font-size: 9px; color: #95a5a6; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;}
@keyframes scroll { 0% {  transform: translateX(0); } 100% { transform: translateX(calc(-250px * 5));}}
.growing_companies_section .logo-slider:hover .growing_companies_section .logo-track {animation-play-state: paused;}

.feature_section{padding: 100px  0;}
.feature_section .feature_wrap{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5%;}
.feature_section .content_section {width: 45%; display: grid; place-content: center;}
.feature_section .content_section h2{font-size: 40px; color: #191D27; line-height: 50px; font-weight: 600; text-transform: capitalize;}
.feature_section .content_section p{font-size: 16px; margin-top: 30px; line-height: 26px; font-weight: 500; color: #6b6b6b; }
.feature_section .content_section ul h3{font-size: 20px; line-height: 30px; font-weight: 600; text-transform: capitalize; padding-left: 45px;  }
.feature_section .content_section ul .feature_title{display: flex; align-items: center; gap: 2%;}
.feature_section .content_section ul h3 span{ border-bottom: 3px solid RGB(255, 78, 67); }
.feature_section .content_section ul p{ font-size: 15px; line-height: 25px; color: #6b6b6b; padding-left: 45px; margin-top: 20px;}
.feature_section .content_section ul li{position: relative; padding-left: 20px; margin-top: 30px;}
.feature_section .content_section ul li::before{content: "";  background: url(./assets/image/yes_icon.svg); width: 30px; height: 30px; position: absolute; left: 0; top: 0; transform: translate(0px , 0px); }
.feature_section .content_section ul span a.newfeature_btn{padding:2px 10px; font-size: 16px; line-height: 26px; font-weight: 400; background: RGB(159, 0, 0); color: #ffffff; border-radius: 6px; display: block;}
.feature_section .image_section {width: 50%; position: relative;}
.feature_section .image_section::before{content: ""; position: absolute; background: url(./assets/image/dashboard.png); width: 323px; height: 216px; bottom: 0; right: 0; transform: translate(-29px, -52px);}

.awesome_features_section{background:RGB(255, 251, 244); padding: 112px 0 120px ;}
.awesome_features_section span.sub_title{text-align: center;  color: #FF3F33;  font-size:18px; display: block; font-weight: 500; line-height: 28px; text-transform: capitalize;}
.awesome_features_section h2{text-align: center; font-size: 40px; line-height: 50px; font-weight: 600; text-transform: capitalize; color: #191d27; margin-top: 22px; }
.awesome_features_wrap{margin-top: 50px; display: flex; justify-content: space-between; gap: 5%; flex-wrap: wrap;}
.awesome_features_wrap .faq_section .item h3{font-size:24px; line-height: 34px; font-weight: 600;}
.awesome_features_wrap .faq_section .item p{font-size:16px; line-height: 26px; font-weight: 500; color: #6b6b6b; margin-bottom: 20px;} 
.awesome_features_wrap .faq_section { width: 42.6%;}
.awesome_features_wrap .faq_section .item { border-bottom: 1px solid #D1D1D6; background-color: transparent; border-radius: 0px; margin-bottom: 0px; transition: all 0.3s ease-in-out;}
.awesome_features_wrap .faq_section .item.active { background-color: RGB(255, 242, 223); border-radius: 24px; border-bottom: 1px solid transparent; padding-bottom: 20px; margin: 50px 0 15px;}
.awesome_features_section .faq_section .item_header { display: flex; justify-content: space-between; align-items: center;padding: 40px 40px 35px; cursor: pointer;}
.awesome_features_section .faq_section .arrow { width: 24px; height: 24px;  background-color: #FFFFFF;  border-radius: 50%; display: flex; align-items: center; justify-content: center;  position: relative; box-shadow: 0px 2px 5px rgba(0,0,0,0.05);  transition: transform 0.3s ease;}
.awesome_features_section .faq_section .arrow::before {content: ''; width: 8px; height: 8px; border-right: 2px solid var(--accent-red); border-bottom: 2px solid var(--accent-red); transform: rotate(45deg);  margin-top: -3px;transition: transform 0.3s ease, margin-top 0.3s ease;}
.awesome_features_section .faq_section .item.active .arrow::before {transform: rotate(-135deg); margin-top: 3px;}
.awesome_features_section .faq_section .itemcontent { max-height: 0;  overflow: hidden; padding: 0 150px 0 40px; transition: max-height 0.3s ease-out, padding 0.3s ease-out;}
.awesome_features_section .faq_section .item.active .itemcontent {max-height: 200px;}
.awesome_features_section .faq_section .learn_more_btn { margin-bottom: 15px;}
.awesome_features_section .faq_section .learn_more_btn a { display: inline-block;  background-color: var(--btn-blue); color: #FFFFFF; text-decoration: none; font-size: 16px; line-height: 26px; font-weight: 500; border-radius: 50px; transition: opacity 0.2s; padding: 12px 35px 12px 35px;}
.awesome_features_section .faq_section .learn_more_btn a:hover { opacity: 0.9;}
.awesome_features_section .awesome_features_wrap .image_section{width: 52%;}

.why_us_section{padding: 120px 0 250px}
.why_us_section .container{display: flex; justify-content: space-between; column-gap: 30px; flex-wrap: wrap;}
.why_us_section .item .image_box{ width: 60px;  height: 60px; display: grid; place-content: center; border-radius: 50%; }
.why_us_section .item h4{font-size: 20px; font-weight: 600; text-transform: capitalize; line-height: 30px; margin-top: 10px;}

.why_us_section .item .image_box img{max-width: 30px; height: auto;}
.why_us_section .item .image_box.color_1{background-color: RGB(255, 237, 232);}
.why_us_section .item .image_box.color_2{background-color: RGB(237, 255, 223);}
.why_us_section .item .image_box.color_3{ background-color:RGB(255, 246, 233) ;}
.why_us_section .item .image_box.color_4{background-color: RGB(235, 248, 255);}
.why_us_section h2{ margin-top: 22px; font-weight: 600;  text-transform: capitalize;  font-size: 40px;  line-height:50px; color: #191d27;}
span.sub_title{ color:RGB(159, 0, 0); font-size: 18px; display: block; font-weight: 500; line-height: 28px; text-transform: capitalize;}
.why_us_section .item p{ font-size: 16px; line-height: 26px; font-weight: 500; color: #6b6b6b; padding: 10px 0 52px 0;}
.why_us_section .item:last-child p {padding-bottom: 0 !important; margin-bottom: 0 !important;}
.why_us_section p.title_con{margin-top: 22px; font-size: 16px; line-height: 26px; font-weight: 500; color: #6b6b6b;}
.why_us_section .why_us_wrap.box-1{width:38.2%; display: grid; place-content: center;}
.why_us_section .why_us_wrap.box-2 , .why_us_wrap.box-3{width:27%;}

.apptek_section{background-color: #0E1552;  padding: 120px 0 103px 0; position: relative; }
.apptek_section::before{content: ""; top: 0;     transform: translate(0px, 51px);     background-position: center;  position: absolute; z-index: 0; background-image: url('./assets/image/apptek_text.webp');  background-repeat: no-repeat; background-size: 90% auto; width: 100%; height:100%; background-position: center; }
/* .apptek_sectio .container{position: relative; z-index: 5;} */
.apptek_section .container{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;   z-index: unset;}
.apptek_section .container .image_section{position: relative;}
.apptek_section .container .image_section::before{content: ""; position: absolute; background: url(./assets/image/smart-app-banner-image3.webp); background-size: 100% auto; background-repeat: no-repeat; width: 520px; height: 618px; top: 0; left: 0; transform: translate(0px, -297px);}
.apptek_section .content_section{width: 50%;}
.apptek_section .content_section h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; text-transform: capitalize; font-size: 2.5em; line-height: 1.4em; color: #FFF;}
.apptek_section .content_section p{font-size: 16px; line-height: 26px; color: #FFF; margin-top: 22px;}
.apptek_section .content_section .apptek_btn_wrap{margin-top: 33px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center;}
.apptek_section .h_w_btn {display: flex; align-items: center; gap: 15px;}
.apptek_section .h_w_btn .icon_box{background-color: #FF4E43; width: 49px; height: 49px; color: #FFF; display: grid; place-content: center; border-radius: 50px;}
.apptek_section .h_w_btn .icon_box img{width: 24px; height: auto; object-fit: cover;}
.apptek_section .h_w_btn span{ color: #ffffff; font-weight: 600; font-size: 18px; line-height: 28px;}
.apptek_btn_wrap .code_btn a{padding: 14px 44px; border: 1px solid #ffffff;  border-radius: 50px; box-sizing: border-box; color: #ffffff; font-weight: 600; font-size: 18px; line-height: 28px; display: block;}

/* .create_life_section{padding: 120px 0;}
.create_life_section .create_life_wrap{display: flex; justify-content: center; flex-wrap: wrap;}
.create_life_section .content_section{width: 51%;}
.create_life_section .content_section h2{font-size: 40px; line-height: 50px; font-weight: 600; text-transform: capitalize; color: #191d27;}
.create_life_section .content_section p{font-size: 16px; line-height: 26px;  font-weight: 500; color: #6b6b6b; margin-top: 33px;}
.create_life_section .content_section ul {margin-top: 63px;}
.create_life_section .content_section ul li{padding: 30px 60px; position: relative; }
.create_life_section .content_section ul li h3{ line-height: 31px; font-weight: 600;    text-transform: capitalize;}
.create_life_section .content_section ul li p{margin-top: 15px;}
.create_life_section .image_section{width: 69%;}
.create_life_section .content_section ul li.step-2{background: RGB(235, 248, 255);}


.create_life_section .content_section ul li.step-1::before,.create_life_section .content_section ul li.step-2::before,.create_life_section .content_section ul li.step-3::before{content: ""; position: absolute; width:30px; height:30px; top: 0; left: 0; transform: translate(0px, 30px);}
.create_life_section .content_section ul li.step-1::before {background: url('./assets/image/number1_icon.svg');}
.create_life_section .content_section ul li.step-2::before{background: url('./assets/image/number2_icon.svg'); }
.create_life_section .content_section ul li.step-3::before{background: url('./assets/image/number3_icon.svg');}

 */


.create_life_section { padding: 120px 0 280px; overflow: hidden;}
.create_life_section .create_life_wrap {display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap; gap: 6%;}
.create_life_section .content_section { width: 45%;}
.create_life_section .content_section h2 { font-size: 40px; line-height: 50px; font-weight: 700; text-transform: capitalize; color: #191d27; margin: 0;}
.create_life_section .content_section p { font-size: 16px; line-height: 26px;  font-weight: 500; color: #7d828f; margin-top: 20px;}
.create_life_section .content_section ul {margin-top: 40px; padding: 0; list-style: none;}
.create_life_section .content_section ul li {padding: 30px 30px 30px 70px; position: relative; border-radius: 8px; margin-bottom: 10px;}
.create_life_section .content_section ul li h3 { font-size: 20px;line-height: 30px; font-weight: 600; text-transform: capitalize; color: #191d27; margin: 0;}
.create_life_section .content_section ul li p { margin-top: 10px; font-size: 16px; line-height: 26px; font-weight: 500;}
.create_life_section .content_section ul li.step-2 { background: #ebf8ff;}
.create_life_section .image_section { width: 48.8%; display: flex; justify-content: flex-end;position: relative;}
.create_life_section .image_section::before{content: "";   background: url(./assets/image/image-1-1-py0yfsgwork6a4m9t4g6x6evxyg0uwfbjuy9askfek.webp); background-repeat: no-repeat; width: 350px; height: 294px; position: absolute; bottom: 0; left: 0; transform: translate(15px, 68px); background-size: 100% auto;}
.create_life_section .image_section img { max-width: 100%; height: auto; display: block;}
.create_life_section .content_section ul li::before { content: ""; position: absolute; width: 28px; height: 28px; top: 30px; left: 25px; background-size: contain;background-repeat: no-repeat;}
.create_life_section .content_section ul li.step-1::before { background-image: url('./assets/image/number1_icon.svg'); }
.create_life_section .content_section ul li.step-2::before { background-image: url('./assets/image/number2_icon.svg'); }
.create_life_section .content_section ul li.step-3::before { background-image: url('./assets/image/number3_icon.svg'); }

.footer_section { border-bottom: 1px solid #6b98cb33; position: relative; padding: 60px 0 80px 0; background: url(./assets/image/footer-bg2.webp) ,no-repeat; background-position: center;}

.cta_download_box {  background-color: #d32f2f;  border-radius: 20px;  padding: 50px 60px; display: flex; justify-content: space-between; align-items: center; transform: translateY(-230px); margin-bottom: 30px; margin-bottom: -60px; box-shadow: 0 10px 30px rgba(211, 47, 47, 0.2);}

.cta_content h2 {
    color: #ffffff;
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    margin: 0 0 22px 0;
}

.cta_content p { color: rgba(255, 255, 255, 0.8);  font-size: 16px;  line-height: 26px;  font-weight: 500;  margin: 0;}

.cta_buttons { display: flex; gap: 15px;}

.store_btn img { display: block; transition: transform 0.2s;}

.store_btn img:hover {
    transform: scale(1.05); 
}


.footer_links_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer_col {
    flex: 1;
    min-width: 180px;
}

.footer_col.brand_col {
    flex: 1.5; 
}

.footer_logo img{
  max-width:126px;
}

.footer_col.brand_col p {
   margin-top: 10px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: #7d828f;
}

.footer_col h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #191d27;
    margin: 0 0 25px 0;
}

.footer_col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_col ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.footer_col ul li a {
    text-decoration: none;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: #30353b;
}

.footer_col ul li a:hover {
    color: #d32f2f; 
}


.footer_col.contact_col .icon {
    margin-right: 10px;
    max-width: 20px;
    color: #d32f2f;
}








/* contact page css */

.contact_page_section {
    padding: 200px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact_page_section .container {
    display: flex;
    justify-content: space-between;
 flex-wrap: nowrap;
    gap: 8%;
}

.contact_page_section .contact_card_form {
    background-color: #ffffff;
    padding: 45px 60px 52px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    width: 37.6%;
}

.contact_page_section .form_main_title {
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.contact_page_section .form_sub_text {
    font-size: 16px;
    line-height: 26px;
    color: #718096;
    margin-bottom: 30px;
}

.contact_page_section .ui_contact_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact_page_section .form_row_group {
    display: flex;
    gap: 20px;
}

.contact_page_section .input_field_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact_page_section .input_field_box label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.contact_page_section .input_field_box input,
.contact_page_section .input_field_box textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    outline: none;
    color: #1a202c;
    background-color: #ffffff;
    box-sizing: border-box;
}

.contact_page_section .input_field_box input::placeholder,
.contact_page_section .input_field_box textarea::placeholder {
    color: #cbd5e0;
}

.contact_page_section .input_field_box textarea {
    height: 120px;
    resize: none;
}


.contact_page_section .ui_submit_btn {
    background-color: #0b1354; 
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px;
    border: none;
    border-radius: 30px; 
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}

.contact_page_section .ui_submit_btn:hover {
    background-color: #1a237e;
}

.contact_page_section .form_footer_terms {
    margin-top: 25px;
    font-size: 13px;
    color: #718096;
    text-align: center;
}

.contact_page_section .form_footer_terms a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
}


.contact_page_section .contact_info_details {
    width: 45%;
    padding-top: 10px;
    margin: auto 0;
}

.contact_page_section .orange_tagline {
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.contact_page_section .info_main_heading {
    font-size: 40px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 20px;
}

.contact_page_section .info_description {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: #718096;
    margin-bottom: 35px;
}


.contact_page_section .meta_info_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.contact_page_section .meta_info_item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
}

.contact_page_section .meta_info_item p {
    color: #4a5568;
}

.contact_page_section .meta_info_item a {
    color: #3182ce;
    text-decoration: none;
}

.contact_page_section .icon_wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.contact_page_section .email_bg { background-color: #ebf8ff; color: #3182ce; }
.contact_page_section .phone_bg { background-color: #f0fff4; color: #38a169; }
.contact_page_section .address_bg { background-color: #f7fafc; color: #4a5568; border: 1px solid #e2e8f0; }


.contact_page_section .user_review_block {
    display: flex;
    gap: 5%;
    align-items: flex-start;
    border-top: 1px solid #e2e8f0;
    padding-top: 30px;
}


.contact_page_section .user_avatar img {
    border-radius: 6px;
    object-fit: cover;
}

.star_rating {
    color: #ecc94b; 
    font-size: 18px;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.testimonial_text {
    font-size: 14px;
    line-height: 22px;
    color: #718096;
    font-style: italic;
    margin-bottom: 8px;
}

.rating_score {
    font-size: 13px;
    color: #4a5568;
}


/* ************price section start */


.pricing_page{background:#ECF8FE; padding: 200px 0;  position: relative;}

.pricing_page::before {
 content: '';
    position: absolute;
    background: url(./assets/image/Vector-668.png);
    top: 0;
    left: 0%;
    width: 122px;
    height: 176px;
    transform: translate(123%,133%);
}

.pricing_container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 25px;
}

.pricing_header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px auto;
}

.pricing_header .sub_title {
    color: #ff4d4d; 
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: 13px;
}

.pricing_header .main_title {
    font-size: 60px;
    font-weight: 700;
    line-height: 70px;
    color: #191d27;
    margin-bottom: 16px;
}

.pricing_header .desc_text {
    font-size: 16px;
    line-height: 26px;
    color: #6b7280;
    font-weight: 500;
}

/* ⭐ FLEX GRID - Responsive Pricing Cards */
.pricing_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.pricing_card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 63px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
    flex: 0 0 calc(24.33% - 30px);
    max-width: calc(33.33% - 30px);
}

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

.card_header .plan_name {
    font-size: 18px;
    font-weight: 600;
    color: #191d27;
    display: block;
    margin-bottom: 15px;
}

.card_header .plan_price {
    font-size: 30px;
    font-weight: 600;
    color: #191d27;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.card_header .plan_price span {
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    color: #9ca3af;
}

.card_header .trial_text {
      font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    color: #9ca3af;
    display: block;
    margin-top: 10px;
}

.divider {
    border: none;
    border-top: 1px solid #ccd2d8;
    margin: 30px 0;
}

.features_list {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

.features_list li {
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-left: 28px;
    position: relative;
}

.features_list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color:#EE6D77;
    color:#ffe6e6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
}

.features_list li.disabled {
    color: #D8D8D8;
}

.features_list li.disabled::before {
    background-color: #f1f5f9;
    color: #cbd5e1;
}

.btn_get_started {
      display: block;
    text-align: center;
    background-color: #1a56db;
    color: #ffffff;
    font-size: 17px;
    line-height: 28px;
    font-weight: 600;
    padding: 12px 45px;
    max-width: 187px;
    border-radius: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn_get_started:hover {
    background-color: #1145bc;
}

.pricing_card.popular_card {
    background-color: #1a56db; 
    color: #ffffff;
    z-index: 2;
}

.popular_card .card_header .plan_name {
    color: rgba(255, 255, 255, 0.8);
}

.popular_card .card_header .plan_price {
    color: #ffffff;
}

.popular_card .card_header .plan_price span,
.popular_card .card_header .trial_text {
    color: rgba(255, 255, 255, 0.6);
}

.popular_card .divider {
  border-top: 1px solid rgb(255 255 255 / 37%);
}

.popular_card .features_list li::before {
    background-color:#ffffff;
    color: #EE6D77; 
}

.popular_card .features_list li.disabled::before {background: #6C9EFF; color: #1962F2;}
.popular_card .features_list li.disabled{color:#6C9EFF;}
.btn_get_started.white_btn {
      background-color: #ffffff00;
    color: #ffffff;
    outline: 1px solid #ffffff;
    border-radius: 30px;
    padding: 12px 45px;
}

.btn_get_started.white_btn:hover {
  background-color: #1962F2;
}

.badge_popular {
     position: absolute;
    top: 60px;
    right: 0px;
    background-color: #FF5F55;
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 4px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}



.comparison_section {
    padding: 100px 0;
}

.comparison_container {
    max-width: px;
    margin: 0 auto;
    padding: 0 20px;
}


.comparison_header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.comparison_header .sub_title {
    color: #ff4d4d;
    font-size: 17px;
    line-height: 28px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 15px;
}

.comparison_header .main_title {
      font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: #191d27;
    margin-bottom: 18px;
}

.comparison_header .desc_text {
          font-size: 16px;
    line-height: 26px;
    color: #7d828f;
    font-weight: 600;
    max-width: 466px;
    margin: 0 auto;
}


/* .comparison_table {
    display: flex;
    flex-direction: column;
    gap:0;
}


.table_row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr; 
    background-color: #ffffff;
    border-radius: 8px; 
    align-items: center;
    padding: 35px 50px 35px 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}


.table_row.even_row {
   background-color: #fafbfc00;
       padding: 35px 50px 35px 50px;
}


.table_row.table_header_row {
    background-color: #FFFFFF;
    padding: 35px 50px;
}


.table_cell {
    font-size: 14px;
    font-weight: 500;
    color: #7d828f;
    text-align: center;
}


.table_cell.feature_title {
    text-align: left;
    color: #5a616c;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

.table_cell.feature_title span{color: #000000;}

.table_header_row .table_cell.feature_title, .table_header_row .table_cell {
  font-size: 24px;
    color: #191d27;
    line-height: 34px;
    font-weight: 700;
}



.table_cell.check_mark {
    color: #ff4d4d;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
}


.table_cell.text_status {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #9ca3af;
}


.table_cell.dash_status {
     color: #000000;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
}

.table_cell.storage_status {
    color: #9ca3af;
    font-size: 14px;
} */



/* ===== COMPARISON TABLE - TABLE VERSION WITH SCROLL ===== */

.comparison_table_wrap {
    width: 100%;
    overflow: hidden;
}

.comparison_table_scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Scrollbar Styling */
.comparison_table_scroll::-webkit-scrollbar {
    height: 6px;
}

.comparison_table_scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.comparison_table_scroll::-webkit-scrollbar-thumb {
    background: #1a56db;
    border-radius: 10px;
}

.comparison_table {
    width: 100%;
    min-width: 768px;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.comparison_table .table_row {
    display: table-row;
}

.comparison_table .table_row.even_row {
    background-color: #fafbfc;
}

.comparison_table .table_row.table_header_row {
    background-color: #FFFFFF;
}

.comparison_table .table_cell {
    padding: 35px 30px;
    font-size: 14px;
    font-weight: 500;
    color: #7d828f;
    text-align: center;
    border-bottom: 1px solid #eef0f2;
}

.comparison_table .table_cell.feature_title {
    text-align: left;
    color: #5a616c;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    min-width: 200px;
}

.comparison_table .table_cell.feature_title span {
    color: #000000;
}

.comparison_table .table_header_row .table_cell {
    font-size: 24px;
    color: #191d27;
    line-height: 34px;
    font-weight: 700;
    border-bottom: 2px solid #eef0f2;
}

.comparison_table .table_cell.check_mark {
    color: #ff4d4d;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
}

.comparison_table .table_cell.text_status {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #9ca3af;
}

.comparison_table .table_cell.dash_status {
    color: #000000;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
}

.comparison_table .table_cell.storage_status {
    color: #9ca3af;
    font-size: 14px;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 991px) {
    .comparison_table {
        min-width: 700px;
    }
    
    .comparison_table .table_cell {
        padding: 20px 15px;
        font-size: 13px;
    }
    
    .comparison_table .table_cell.feature_title {
        font-size: 14px;
        min-width: 160px;
    }
    
    .comparison_table .table_header_row .table_cell {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .comparison_table {
        min-width: 550px;
    }
    
    .comparison_table .table_cell {
        padding: 15px 12px;
        font-size: 12px;
    }
    
    .comparison_table .table_cell.feature_title {
        font-size: 13px;
        min-width: 140px;
    }
    
    .comparison_table .table_cell.feature_title span {
        display: block;
        font-size: 11px;
        color: #6b7280;
    }
    
    .comparison_table .table_header_row .table_cell {
        font-size: 16px;
        line-height: 24px;
    }
    
    .comparison_table .table_cell.check_mark,
    .comparison_table .table_cell.dash_status {
        font-size: 16px;
    }
    
    .comparison_table .table_cell.text_status {
        font-size: 14px;
    }
    
    .comparison_table .table_cell.storage_status {
        font-size: 12px;
    }
}







/* ********* */


.hero_cta_section {
    background-color: #060A33;
   padding: 107px 15px 112px 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.hero_cta_section .container {
    text-align: center;

}


.hero_main_heading {
  color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}


.hero_sub_text {
    color: #7d7d7d;
    font-size: 16px;
    line-height: 26px;
    max-width: 600px;
    margin: 0 auto 45px auto;
}


.hero_btn_group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
}


.hero_btn_group a {
    display: inline-block;
    padding: 15px 45px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn_apk_download {
    background-color: #1a62ff;
    color: #ffffff;
}

.btn_apk_download:hover {
    background-color: #0c4edb;
}


.btn_get_started_wrapper {
    position: relative;
    display: inline-block;
}


.btn_get_started {
    background: #ff5f55;
    color: #ffffff;
}

.btn_get_started:hover {
         background: #ff6055b3;
}





.hero_badge_list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 35px;
}

.badge_item {
    color: #6a719d; 
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap:10px;
}


.badge_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid #4a517d;
    border-radius: 50%;
    font-size: 10px;
    color: #6a719d;
}




.hero_cta_section::before {
      content: '';
    left: 19%;
    top: 31%;
    background-image: url(./assets/image/Vector-35.png);
    width: 125px;
    height: 107px;
    position: absolute;
}

.hero_cta_section::after {
      content: '';
    right: 25%;
    top: 35%;
    background-image: url(./assets/image/dot_icon.svg);
    background-repeat: no-repeat;
    width: 125px;
    height: 107px;
    position: absolute;
}


.faq-section {
    position: relative;
    padding: 80px 0;
}


.bg-decoration::before {
     content: '';
    position: absolute;
    background: url(./assets/image/Vector-642-1.png);
    width: 190px;
    height: 169px;
    top: 0;
    right: 0;
    transform: translate(-161%, 44%);
}

/* Header Typography */
.faq-header {
    text-align: center;
    margin-bottom: 50px;
}

.faq-header .sub-title {
  color: #ff5252;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 15px;
}

.faq-header .main-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    color: #0e1b29;
    margin-bottom: 20px;
}

.faq-header .description {
    font-size: 16px;
    color: #74787c;
    line-height: 26px;
    font-weight: 600;
}


.accordion-wrapper {
   max-width: 882px;
    margin: 0 auto;
}

.accordion-item {
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Active State Accordion (Blue Style) */
.accordion-item.active {
    background: #1b63f2; 

    box-shadow: 0px 10px 25px rgba(27, 99, 242, 0.15);
}

/* Header Button */
.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 30px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #0e1b29;
    transition: color 0.3s ease;
}

.accordion-item.active .accordion-header {
    color: #ffffff;
}

/* Plus/Minus Icons using CSS pseudo-elements */
.accordion-header .icon {
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
}

/* Horizontal line */
.accordion-header .icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 2px;
    background-color: #000000;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}

/* Vertical line for Plus sign */
.accordion-header .icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 12px;
    background-color: #000000;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

/* Icon changes when active */
.accordion-item.active .accordion-header .icon::before {
    background-color: #ffffff;
}
.accordion-item.active .accordion-header .icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0; /* Vertical line disappears to become minus (-) */
}

/* Content Container Smooth transition */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #ffffff; /* Inside text area remains clean white */
}

.accordion-item.active .accordion-content {
    /* JavaScript dynamically calculates max-height, fallback here */
    max-height: 300px; 
}

.content-inner {
    padding: 25px 30px 30px 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: #6c7278;
    border-top: 1px solid #f3f4f6;
}






/* price section end */


/****discktop***/







/*  */

@media (max-width: 1291px) {
.container {
    width: 96%;}
}

@media (max-width: 1289px) {
.pricing_card {
    flex: 0 0 calc(33.33% - 30px);}

}

@media (max-width: 1201px) {
    .banner_wrap .image_section { width: 40%;}
    .banner_wrap .title_content_wrap h1 { font-size: 50px; line-height: 60px;}
.create_life_section .content_section ul li p {letter-spacing: -0.2px;}
.digital_experience_section .digital_content_wrap h2 { font-size: 36px; line-height: 46px;}
.digital_experience_section .digital_content_wrap p { letter-spacing: 0.7px;}
.feature_section .content_section h2 { font-size: 36px; line-height: 46px;}
.feature_section .image_section {width: 45%;}
.feature_section .content_section {width: 50%;}
.awesome_features_section h2 { font-size: 36px; line-height: 46px;}
.awesome_features_section .awesome_features_wrap .image_section { width: 45%;}
.awesome_features_wrap .faq_section { width: 50%;}
.why_us_section h2 {font-size: 36px; line-height: 46px;}
.apptek_section .content_section h2 {font-size: 36px; line-height: 46px;}
.apptek_btn_wrap .code_btn a { padding: 10px 39px; font-size: 16px; line-height: 26px;}
.create_life_section .content_section h2 { font-size: 36px; line-height: 46px;}
.create_life_section .content_section { width: 50%;}
.create_life_section .create_life_wrap {gap: 1%;}
.cta_content h2 { font-size: 30px; line-height: 40px;}
.apptek_section .container .image_section::before {background-size: 87% auto;}
.banner_wrap .image_section::after { top: 61%; transform: translate(-13%, -184%); background-size: 75% auto; background-repeat: no-repeat;}
.banner_wrap .image_section::before {transform: translate(14%, -12%); background-size: 71% auto; background-repeat: no-repeat;}

.feature_section .image_section::before { transform: translate(20px, -4px); background-repeat: no-repeat;}

/*  */


    

}


@media (max-width: 1101px) {
.navbar-header .nav-menu ul { gap: 0px;}
    .cta_content h2 {font-size: 26px; line-height: 36px;}
    .pricing_card {
    flex: 0 0 calc(33.33% - 30px);}

}

}
@media (max-width: 1024px) {
    .digital_experience_section .digital_content_wrap h2 {  font-size: 32px;   line-height: 42px;}
    .awesome_features_section h2 { font-size: 32px; line-height: 42px; }
    .why_us_section h2 {font-size: 32px;line-height: 42px;}
    .apptek_section .content_section h2 {font-size: 32px;line-height: 42px;}
    .create_life_section .content_section h2 { font-size: 32px; line-height: 42px;}
    .create_life_section .content_section p {letter-spacing: 0.3px;}
    .cta_content p { font-size: 14px; line-height: 24px;}
}

@media screen and (max-width: 980px) {

.contact_page_section .info_main_heading {
    font-size: 32px;
    line-height: 42px;
    
}

}


@media screen and (max-width: 800px) {
    .container { width: 94%;}
    
   .navbar-header .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative; 
        padding: 15px 0 15px 0;
    }
   .navbar-header .logo { order: 1; }
   .navbar-header .nav-cta { display: block;  order: 2;  margin-left: auto;  margin-right: 15px;}
   .navbar-header .menu-toggle { display: flex;   order: 3;}
   .navbar-header .nav-menu { position: absolute;   top: 100%;  left: 0;    width: 100%;
        background-color: #fff;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        z-index: 999; 
        
        display: none; 
    }

   .navbar-header .nav-menu.nav-active {
        display: block;
    }

   .navbar-header .reset {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }



    .banner_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4%;
    flex-direction: column-reverse;
}
.banner_wrap .image_section { width: 100%; text-align: center;}
.banner_wrap .content_section { width: 100%;}
.banner_wrap .image_section img {max-width:480px;text-align: center;}
.banner_wrap .image_section::after {    top: 61%;  transform: translate(5%, -180%);  background-size: 100% auto;}
.banner_wrap .image_section::before {transform: translate(84%, -11%); background-size: 100% auto;}
.banner_wrap .title_content_wrap h1 {font-size: 45px; line-height: 55px;}
.banner_wrap { row-gap:50px;}
.digital_experience_section {padding: 45px 0 0;}

.digital_experience_section .digital_wrap { flex-wrap: wrap;gap: 0%;}


.digital_experience_section .digital_card {
    width: 48%;
        margin-bottom: unset;
}

    .digital_experience_section .digital_content_wrap  {
        text-align: center;
    }
    .digital_experience_section .digital_content_wrap {margin-bottom: 45px;}

 .cta_buttons { gap: 15px; flex-wrap: wrap; width: 28%;}

    .feature_section .content_section h2, .create_life_section .content_section h2  {text-align: center;}

    .growing_companies_section {padding:45px 0 0;}
    .digital_experience_section .digital_card.card-up {margin-bottom: 0;}
    .digital_experience_section {padding: 80px 0 0;}
    .feature_section {padding: 50px 0;}
    .feature_section .image_section { width: 100%;}

    .feature_section .image_section::before {transform: translate(-105px, -112px);  background-size: 100% auto;}
    .feature_section .content_section { width: 100%;}
    .awesome_features_wrap .faq_section {width: 100%;}
        .awesome_features_section .awesome_features_wrap .image_section {width: 100%; max-width: 606px;  margin: 0 auto;}
        .awesome_features_wrap { gap: 45px;}
        .why_us_section .why_us_wrap.box-1 {width: 100%;  margin-bottom: 45px;}
    .why_us_section .why_us_wrap.box-2, .why_us_wrap.box-3 {width: 48%;}
    .apptek_section .content_section {width: 100%; text-align: center;}

    .apptek_section .container .image_section::before {background-size: 100% auto; left: 50%; transform: translate(100%, -311px); width: 242px;}
    .apptek_section .content_section .apptek_btn_wrap { justify-content: center;}
    .awesome_features_section { padding: 45px 0 45px;}
    .why_us_section { padding: 45px 0 233px;}
    .apptek_section::before {transform: translate(0px, 117px); background-size: 97% auto; width: 100%; height: 87%; background-position: center;}
    .create_life_section { padding: 45px 0 150px;}
    .create_life_section .content_section {width: 100%;}
    .create_life_section .image_section {width: 100%;}
    .create_life_section .image_section img {max-width: 100%; max-width: 630px;}

    .cta_download_box { padding: 28px 29px;}

    .cta_content{width: 100%;}

    .footer_links_wrap { gap: 6px;}

    .footer_col.brand_col { flex: unset; width: 100%;  border-bottom: 1px solid #3035475e; padding-bottom: 20px;  margin-bottom: 20px;}
    .footer_section { padding: 45px 0 45px 0px;}

    .cta_download_box { transform: translateY(-120px);}



    .awesome_features_section .faq_section .itemcontent {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px 0 30px;}



    /* ********contacrt********* */
    .contact_page_section .container {flex-wrap: wrap; gap: 8%;}
    .contact_page_section .contact_card_form {    width: 100%; padding: 45px;}
    .contact_page_section .contact_info_details { width: 100%;  margin-top: 45px;}


    .contact_page_section .user_review_block { gap: 5%;}
   .contact_page_section .user_review_block .user_avatar{width: 15%;}
   .contact_page_section .user_review_block .review_content{width: 80%;}
   .contact_page_section { padding: 100px 0;}


   /*  */




       .pricing_card {
        flex: 0 0 calc(100% - 0px);
        flex-wrap: wrap;
         max-width: calc(87% - 30px);
    }

 .pricing_header .main_title {
    font-size: 45px;
    line-height: 55px;}

   .hero_main_heading, .faq-header .main-title , .comparison_header .main_title {
    font-size: 36px;
    line-height: 50px;}

.btn_get_started {max-width: unset;}
}


@media screen and (max-width: 780px) {

    .digital_experience_section .digital_card {width: 100%;}
    .why_us_section .why_us_wrap.box-2, .why_us_wrap.box-3 {width: 45%;}
    .why_us_section .container { column-gap: 7px;}
 
    .digital_experience_section .digital_card .card_title {justify-content: unset; gap: 7%;}
        .digital_experience_section .digital_card.card-up {margin-bottom: 30px;}
            .cta_content h2 {font-size: 22px; line-height: 32px;}

                .banner_wrap .title_content_wrap h1 {
        font-size: 34px;
        line-height: 44px;
    }

}


@media screen and (max-width: 736px) {
    .apptek_section .container .image_section::before {transform: translate(86%, -311px); 
    }

}

@media only screen and ( max-width: 668px ) {
    
.feature_section .image_section::before {
        transform: translate(-25px, -60px);
      
    }

        .cta_download_box {
        transform: translateY(-120px);
        flex-flow: column;
    }


        .cta_content {
        width: 100%;
        text-align: center; margin-bottom: 30px;}
            .cta_buttons { width: 100%;  justify-content: center;}
}

@media only screen and ( max-width: 640px ) {

 

.footer_col {
    flex: 1;
    min-width: 40px;
}

    .why_us_section {
        padding: 45px 0 301px;
    }




        .pricing_card {
        flex: 0 0 calc(100% - 0px);
        flex-wrap: wrap;
        max-width: calc(88% - 39px);
            padding: 30px;
    }
}

@media only screen and ( max-width: 640px ) {

 .apptek_section .container .image_section::before {
        transform: translate(86%, -231px);
                width: 180px;
    }



}


   
@media only screen and ( max-width: 568px ) {
  
        .feature_section .image_section::before {
        transform: translate(20px, -24px);
      
    }
        .why_us_section {
        padding: 45px 0 123px;
    }
 
   
    .footer_col {
        width: 50%;
    }


}


@media only screen and ( max-width: 480px ) {

  .banner_wrap .image_section::after {  width: 199px;}
      .banner_wrap .image_section::before {
        transform: translate(16%, 10%);
width: 103px;}
    .why_us_section h2,       .create_life_section .content_section h2 ,.digital_experience_section .digital_content_wrap h2 ,    .apptek_section .content_section h2 ,.digital_experience_section .digital_content_wrap h2 , .awesome_features_section h2 , .feature_section .content_section h2 {
        font-size: 28px;
        line-height: 38px;
    }

    .feature_section .image_section::before {width: 187px;   transform: translate(-65px, 13px);}

    .banner_wrap .btn_wrap {
    flex-wrap: wrap;
    justify-content: center;
}

    .footer_links_wrap {
        display: inline-block;
    }
 .footer_col {
        width: 50%;
    }


    .awesome_features_wrap .faq_section .item h3 {
    font-size: 18px;
    line-height: 28px;}


  
   .contact_page_section .user_review_block { gap: 5%; padding-top: 10px;}
   .contact_page_section .user_review_block .user_avatar{width: 35%;}
   .contact_page_section .user_review_block .review_content{width: 70%;}
   .contact_page_section { padding: 100px 0;}
    .contact_page_section .contact_card_form {padding: 35px; }


.create_life_section .image_section::before {
    width: 249px;
                 transform: translate(0%, 145px);

}

.contact_page_section .form_row_group { flex-direction: column;}




    .hero_main_heading, .faq-header .main-title, .comparison_header .main_title {
        font-size: 22px;
        line-height: 32px;}

.pricing_page {
    padding: 130px 0;
  
}

        
.hero_btn_group {
    flex-wrap: wrap;}
        .btn_get_started_wrapper {
    width: 100%;}

.hero_btn_group a {
    width: 100%;
}
}
@media only screen and ( max-width: 415px ) {

    .navbar-header .nav-cta a.btn-signup { padding: 15px 22px; font-size: 12px; line-height: 24px;}

    .banner_wrap .image_section::after {
        top: 61%;
        transform: translate(5%, -118%);}

  .why_us_section h2, .create_life_section .content_section h2, .digital_experience_section .digital_content_wrap h2, .apptek_section .content_section h2, .digital_experience_section .digital_content_wrap h2, .awesome_features_section h2, .feature_section .content_section h2 {
        font-size: 22px;
        line-height: 32px;}

        
        .feature_section .content_section ul h3 {
    font-size: 16px;
    line-height: 26px;
        }

            .apptek_section .container .image_section::before {
        transform: translate(50%, -231px);
        width: 180px;
    }


    .navbar-header .nav-cta a.btn-signup {
    padding: 15px 22px;
    font-size: 12px;
    line-height: 22px;
    
}


.feature_section .content_section ul span a.newfeature_btn {
    padding: 2px 10px;
    font-size: 12px;
    line-height: 22px;
    }
    .feature_section .content_section ul h3 {  font-size: 13px;   line-height: 23px;}

   

    /* ***********/

        .contact_page_section .info_main_heading {   font-size: 24px;  line-height: 34px; }
}