.dropdown-content,

.mobile_menu,

.top_header {

    background-color: #fff;

}

.navbar a,

.testimonial_subtitle,

body {

    font-size: 16px;

}

.column a,

.navbar a {

    color: #000;

    text-decoration: none;

}

.column a,

.custom_software_d,

.haveproject h1,

.navbar a,

.website-page h1,

body {

    font-family: VarelaRound-Regular;

}

.star1,

.star10,

.star11,

.star12,

.star13,

.star14,

.star15,

.star16,

.star17,

.star2,

.star3,

.star4,

.star5,

.star6,

.star7,

.star8,

.star9 {

    fill: #120029;

}

.footer,

.testimonial {

    background-repeat: no-repeat;

    background-position: center;

}

.footer_link ul,

.navbar-nav,

.page-maping ul,

.website-details ul,

li.iphone_bullets,

ul.left-list,

ul.left-list-app {

    list-style-type: none;

}

#cookieNotice,

div,

textarea#message {

    box-sizing: border-box;

}

@font-face {

    font-family: VarelaRound-Regular;

    src: url("../fonts/varela/VarelaRound-Regular.ttf");

}

.testimonial .testi-dest h4,

body {

    margin: 0;

}

::-webkit-scrollbar {

    width: 1px;

    height: 1px;

}

::-webkit-scrollbar-button {

    width: 1px;

    height: 1px;

}

.default-panel,

ul {

    padding-left: 0;

}

.top_header {

    position: relative;

    z-index: 5000;

    height: 82px;

}

.modal-backdrop.fade.in,

.sticky {

    z-index: 999;

}

.sticky {

    position: fixed;

    top: 0;

    width: 100%;

    border-bottom: 1px solid #f1f1f1;

}

.mycontainer {

    width: 1240px;

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto;

    max-width: 100%;

}

.navbar-brand {

    padding: 0 !important;

    margin-top: 7px;

    z-index: 2;

    position: relative;

}

.navbar a {

    float: left;

    text-align: center;

    padding: 14px 17px;

    position: relative;

}

.column a::before,

.editor-content br,

.owl-dots,

.owl-nav,

.well .php_bg,

.work-mobile,

button.navbar-toggler,

div.advertising,

div.business,

div.development,

div.itservices,

div.marketing,

div.production,

span.ui-slider-handle.ui-state-default.ui-corner-all {

    display: none;

}

.navbar-nav {

    float: right;

}

.navbar-nav > li > a {

    padding-top: 30px;

    padding-bottom: 30px;

}

.cl-effect-13 li a {

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    transition: color 0.3s;

}

.btn_slider,

.contact_btn,

.fixed_btn {

    letter-spacing: 1px;

    transition: 0.5s;

    text-transform: uppercase;

}

.cl-effect-13 li a::before {

    position: absolute;

    top: 60%;

    left: 50%;

    color: transparent;

    content: "•";

    text-shadow: transparent 0 0;

    font-size: 1.2em;

    transform: translateX(-50%);

    pointer-events: none;

    transition: text-shadow 0.3s, color 0.3s;

}

.dropdown,

.dropup {

    position: inherit;

}

.dropdown .dropbtn {

    border: none;

    outline: 0;

    color: #000;

    padding: 29px 16px;

    background-color: inherit;

    font: inherit;

    margin: 0;

}

.dropdown-content {

    display: none;

    position: absolute;

    box-shadow: 0 15px 20px 0 rgb(0 0 0 / 20%);

    z-index: 500;

    top: 100%;

    width: 100%;

    left: 0;

    border-top: 1px solid #f1f1f1;

}

.branch-office .india_detail .singapore,

.branch-office .singapore_detail .singapore,

.column a,

.dropdown:hover .dropdown-content,

.phone_no,

.under,

hr {

    display: block;

}

.other_drpdwn .dropdown-content {

    width: 30%;

    left: auto;

    padding: 10px;

    height: 435px;

}

#rfqmodal .phone_no,

.contact100-form,

.features_shellby:hover::after,

.features_shellby:hover::before,

.input100:focus + .focus-input100::before,

.meanfourbox_hover:hover::after,

.meanfourbox_hover:hover::before,

.other_drpdwn .dropdown-content .column,

.slider-size img,

.web_image img,

img.clutch_logo,

img.cubic,

img.recent_post_image,

img.related_post,

img.we_think_side {

    width: 100%;

}

.dropdown_about .dropdown-content,

.dropdown_about .dropdown-content .column {

    height: auto !important;

}

.column {

    float: left;

    width: 25%;

    padding: 10px;

}

.column a {

    float: none;

    text-align: left;

    padding: 6px 10px;

    font-size: 14px;

}

#rfqmodal .modal-content,

.dropdown:hover .dropbtn,

.navbar a:hover {

    background-color: transparent;

}

.cl-effect-13 li a:focus::before,

.cl-effect-13 li a:hover::before {

    color: #333;

    text-shadow: 10px 0 #333, -10px 0 #333;

}

.cl-effect-13 li a:focus,

.cl-effect-13 li a:hover {

    color: #ee4d51;

    background-color: #ddd;

}

.mobile_menu {

    width: 100%;

    float: left;

    z-index: 99;

    height: 80px;

}

.contact_btn,

.fixed_btn {

    text-decoration: none !important;

    background-color: #000;

    font-family: VarelaRound-Regular !important;

    color: #fff !important;

    font-weight: 600;

    display: inline-block;

}

.menu_icon {

    width: 15px;

    margin-right: 5px;

}

.menu__link[data-submenu]::after {

    color: #656565 !important;

}

.contact_btn {

    position: relative;

    width: 149px;

    z-index: 2;

    height: 40px;

    border-radius: 43px;

    text-align: center !important;

    padding: 9px !important;

    font-size: 13px !important;

    border: 2px solid #000;

    margin-top: 20px;

}

.contact_btn:hover,

.subbox_btn:hover {

    border: 2px solid #ee4d51;

    background-color: #fff;

    color: #ee4d51 !important;

}

.drpdnw_btm {

    width: 100%;

    float: left;

    position: relative;

    bottom: 0;

    margin-top: 0;

    text-align: center;

    border-top: 1px solid #f1f1f1;

    padding: 10px 0;

}

.element {

    animation: 2s infinite pulse;

}

.fixed_btn {

    width: auto;

    height: 38px;

    border-radius: 43px 0 0 43px;

    text-align: center !important;

    padding: 9px 7px 9px 9px !important;

    font-size: 12px !important;

    border: 2px solid #000;

    margin-top: 20px;

    position: fixed;

    right: 0;

    top: 50%;

    line-height: 18px;

    z-index: 10;

}

.btn_slider,

.faq-area .panel-title > a,

.next-pre a,

.rfq_button,

a.btn-custom,

a:focus,

a:hover {

    text-decoration: none;

}

.adv_gg,

.all_rights,

.banner_para,

.btn_slider,

.contect_title,

.contry_detail,

.deep_title,

.ecard_ss .about_us_title,

.fea_heading,

.footer_ver_image,

.form_header h1,

.form_header p,

.good_firms,

.modal_btn,

.new_port_circadian,

.popup-icons,

.portfolioFilter,

.screenshot_slider .owl-nav,

.ser_1,

.ser_1_hed,

.ser_2,

.service_item,

.shellby_features_title,

.softwareworld_img,

.submit_button,

.tech,

.testimonial .testi-dest,

.vis_miss_image,

.well .jivraj_img,

.work_process_title,

hr.contry_detail {

    text-align: center;

}

.panel {

    margin-bottom: 0;

    background-color: #fff;

    border: none;

    border-radius: 4px;

    -webkit-box-shadow: none;

    box-shadow: none;

    padding: 5rem 0;

}

.banner_custom_software,

.project_title {

    margin-top: 4rem;

}

.custom_software_d {

    font-size: 24px;

    margin: 0;

    padding-top: 0;

    font-weight: 500;

    padding-right: 0;

    padding-bottom: 0;

}

#work .bg_no,

.bg_no,

.btn_slider,

.main_title,

.service_tag,

.slider_title,

.ss_title,

h2.form_title_lets {

    font-weight: 600;

    font-family: VarelaRound-Regular;

}

.home_slider_content,

.star_icon {

    padding-bottom: 30px;

}

.slider_title {

    font-size: 44px;

}

.slider_title a {

    color: #ee4d51;

    cursor: auto;

}

.typewrite > .wrap {

    border-right: 0.08em solid #fff;

}

.custom_software_d_content {

    font-size: 18px;

    font-family: VarelaRound-Regular;

}

p {

    margin: 0 0 10px;

    color: #696969;

}

.btn_slider {

    margin: 0;

    padding: 11px;

    position: relative;

    width: 175px;

    z-index: 2;

    height: 45px;

    background-color: #000;

    border-radius: 43px;

    display: inline-block;

    color: #fff;

    font-size: 15px;

    border: 2px solid #000;

}

.btn_slider:hover {

    background-color: transparent;

    border: 2px solid #ee4d51;

    color: #ee4d51;

}

.slider_logo {

    padding-top: 70px;

}

.rocket-section {

    position: absolute;

    left: 50%;

    top: 90%;

}

#bg-wrap {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    position: absolute;

    left: 0;

    width: 50%;

    bottom: 4%;

}

.rocket-section #bg1,

.rocket-section #bg2,

.rocket-section #bg3 {

    position: absolute;

    bottom: 0;

    width: 495px;

    left: 65px;

}

.rocket-section #bg1 {

    z-index: 2;

}

.rocket-section #bg2 {

    z-index: 3;

}

.rocket-section #bg3 {

    z-index: 4;

}

.mobile_img {

    position: absolute;

    bottom: -10px;

    left: 25%;

    z-index: 10;

    -webkit-animation: 0.9s linear infinite alternate big-fire-1;

    animation: 0.9s linear infinite alternate big-fire-1;

}

.testimonial {

    padding: 60px 0;

    background-size: contain;

    background-color: #f9f9f9;

}

#blog .bg_no,

#solutions .bg_no,

#solutions1 .bg_no,

#team .bg_no,

.contact_us_form .bg_no,

.testimonial .bg_no {

    font-family: VarelaRound-Regular;

    font-weight: 600;

    font-size: 70px;

    position: absolute;

    top: -20px;

    z-index: 0;

    color: rgba(0, 0, 0, 0.1);

    left: 0;

    right: 0;

}

#work .bg_no,

.bg_no {

    color: rgba(0, 0, 0, 0.05);

}

.good_firms {

    padding-top: 62px;

    padding-bottom: 30px;

}

.good_firms_border {

    border: 18px solid #196697;

    border-radius: 50%;

}

.clutch_border {

    border: 18px solid #e7e7e7;

    border-radius: 50%;

}

.tstmnal_items img {

    width: 100px !important;

}

.testimonial_para {

    margin: 0;

    font-size: 16px;

}

.fa.fa-star {

    color: #196697;

}

.owl-nav {

    position: relative;

    bottom: -68px;

    width: 100%;

    z-index: 2;

}

.testimonial_slider .owl-nav {

    bottom: 20px;

}

button.owl-prev {

    position: absolute;

    left: 0;

    bottom: 0;

}

.testimonial_slider .owl-nav button {

    background-color: #ee4d51;

    border: 0;

    color: #120029;

    border-radius: 50%;

    width: 35px;

    height: 35px;

    font-size: 24px;

    text-align: center;

    box-shadow: 0 0 20px #afafaf;

}

.testimonial_slider .owl-nav button.owl-prev {

    right: 50px;

    left: auto;

}

button.owl-next {

    position: absolute;

    right: 0;

    bottom: 0;

}

.logo_slider_img .owl-carousel .owl-item img {

    margin: 0 auto;

    height: auto;

    width: 100% !important;

}

.our_work_image_port,

.our_work_image_port_kpmg {

    filter: gray;

    -webkit-filter: grayscale(1);

    -webkit-transition: 0.4s ease-in-out;

    opacity: 0.7;

}

.our_work_image_port:hover,

.our_work_image_port_kpmg:hover {

    filter: none;

    -webkit-filter: grayscale(0);

    -webkit-transform: scale(1.01);

    opacity: 1;

}

div#technologies {

    background-image: url(../images/BG/cc-bg.png);

    background-size: cover;

    padding-top: 3rem;

    padding-bottom: 3rem;

    background-position: bottom;

}

@-webkit-keyframes big-fire-1 {

    from {

        -webkit-transform: translateY(-1px);

        transform: translateY(-1px);

    }

    to {

        -webkit-transform: translateY(15px);

        transform: translateY(15px);

    }

}

@keyframes big-fire-1 {

    from {

        -webkit-transform: translateY(-1px);

        transform: translateY(-1px);

    }

    to {

        -webkit-transform: translateY(15px);

        transform: translateY(15px);

    }

}

.rocket-section #stars {

    position: absolute;

    z-index: 5;

    width: 552px;

    left: 0;

    bottom: 60px;

}

@-webkit-keyframes blinker {

    50% {

        opacity: 0;

    }

}

@keyframes blinker {

    50% {

        opacity: 0;

    }

}

.star1 {

    -webkit-animation: 2.1s linear infinite blinker;

    animation: 2.1s linear infinite blinker;

}

.star2 {

    -webkit-animation: 2.2s linear infinite blinker;

    animation: 2.2s linear infinite blinker;

}

.star3 {

    -webkit-animation: 2.3s linear infinite blinker;

    animation: 2.3s linear infinite blinker;

}

.star4 {

    -webkit-animation: 2.4s linear infinite blinker;

    animation: 2.4s linear infinite blinker;

}

.star5 {

    -webkit-animation: 2.5s linear infinite blinker;

    animation: 2.5s linear infinite blinker;

}

.star6 {

    -webkit-animation: 2.6s linear infinite blinker;

    animation: 2.6s linear infinite blinker;

}

.star7 {

    -webkit-animation: 2.7s linear infinite blinker;

    animation: 2.7s linear infinite blinker;

}

.star8 {

    -webkit-animation: 2.8s linear infinite blinker;

    animation: 2.8s linear infinite blinker;

}

.star9 {

    -webkit-animation: 2.9s linear infinite blinker;

    animation: 2.9s linear infinite blinker;

}

.star10 {

    -webkit-animation: 3s linear infinite blinker;

    animation: 3s linear infinite blinker;

}

.star11 {

    -webkit-animation: 3.1s linear infinite blinker;

    animation: 3.1s linear infinite blinker;

}

.star12 {

    -webkit-animation: 3.2s linear infinite blinker;

    animation: 3.2s linear infinite blinker;

}

.star13 {

    -webkit-animation: 3.3s linear infinite blinker;

    animation: 3.3s linear infinite blinker;

}

.star14 {

    -webkit-animation: 3.4s linear infinite blinker;

    animation: 3.4s linear infinite blinker;

}

.star15 {

    -webkit-animation: 3.5s linear infinite blinker;

    animation: 3.5s linear infinite blinker;

}

.star16 {

    -webkit-animation: 3.6s linear infinite blinker;

    animation: 3.6s linear infinite blinker;

}

.star17 {

    -webkit-animation: 3.7s linear infinite blinker;

    animation: 3.7s linear infinite blinker;

}

.services_section {

    background-color: #fff8f9;

    padding: 5rem 0;

}

.ml-40 {

    margin-left: 40px;

}

.bg_no {

    font-size: 70px;

    position: absolute;

    top: -20px;

    z-index: 0;

}

.main_title {

    color: #120029;

    font-size: 32px;

    letter-spacing: 2px;

}

.title_dot {

    width: 8px;

    height: 8px;

    background-color: #000;

    display: inline-block;

    border-radius: 2px;

    margin-left: 5px;

    margin-bottom: -1px;

}

.banner_custom_software .slider_logo .row div.col-md-2 {
    padding: 0 4px;
}

.sb_title {

    font-size: 20px;

    letter-spacing: 0.5px;

}

.service_item {

    background-color: #fff;

    box-shadow: 0 0 30px rgb(0 0 0 / 8%);

    border-radius: 7px;

    padding: 20px;

    margin: 25px;

    height: 512px;

}

.service_tag {

    font-size: 18px;

}

.services_section .owl-nav {

    position: absolute;

    bottom: 14%;

    width: 100%;

    left: -4%;

    z-index: 2;

}

#technologies .bg_no,

#work .bg_no,

.vision .bg_no {

    font-size: 70px;

    position: absolute;

    top: -20px;

    z-index: 0;

    left: 0;

    right: 0;

}

.services_section button.owl-prev {

    position: absolute;

    left: -20px;

    bottom: 0;

}

#services_section button img {

    width: 20px;

}

.services_section button.owl-next {

    position: absolute;

    bottom: 0;

    left: 20px;

    right: 0;

}

#work {

    padding-top: 4em;

    padding-bottom: 0;

    background: #fff;

}

.mb-4 {

    margin-bottom: 4rem;

}

.mb-7,

.model-contact-info p {

    margin-bottom: 3rem;

}

.contect_title a,

.dedicated_developer .shellby_features_title h3,

.main_title.text-white.our_work_title,

.rumie_bg .prjct_dscrp,

.zegofit p,

.zegofit-screenshot p,

div#blog a:hover .blog span {

    color: #000;

}

.our_work_title_sub,

.project_content p.pro_con,

.web_development .pro_con,

.website_title_link a,

.website_title_link a:hover {

    color: #696969;

}

.port_readmore,

.prjct_ctgr,

.prjct_nm {

    color: #000;

    font-family: VarelaRound-Regular;

}

.portfolio_new {

    padding: 80px;

    background-color: #f8d5d5;

    border-radius: 30px;

    overflow: hidden;

    margin-bottom: 60px;

}

.new_port_circadian {

    width: 80%;

    max-width: 100%;

    position: absolute;

    top: -30px;

    left: 0;

    right: 0;

    margin: 0 auto;

}

.prjct_ctgr {

    padding-top: 0;

    display: block;

    font-weight: 400;

    font-size: 18px;

    margin-bottom: 4rem;

}

.port_box {

    padding: 20px 40px;

    background-color: rgba(255, 255, 255, 0.85);

    border-radius: 15px;

}

.blog,

.tech {

    box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);

    border-radius: 0;

}

.prjct_nm {

    font-weight: 600;

    font-size: 44px;

    margin-bottom: 3rem;

}

.prjct_dscrp {

    padding-right: 0;

    margin: 3rem 0;

    display: block;

}

.port_readmore {

    font-weight: 400;

    font-size: 14px;

    margin-bottom: 24px;

    display: block;

}

#technologies .bg_no,

.rfq_button,

.vision .bg_no {

    font-weight: 600;

    font-family: VarelaRound-Regular;

}

.rumie_bg {

    background-color: #a118ea;

    background-image: linear-gradient(to right, #6e11a0, #9e14e7);

}

.ecards_bg {

    background-color: #1c3d85;

}

.blog,

.form-control,

.tech {

    background-color: #fff;

}

.ecards_bg .port_box,

.rumie_bg .port_box {

    -backgroundcolor: rgba(255, 255, 255, 0.7);

}

.career_item button.rfq_button a,

.case-study-banner p,

.e-texi-app .about_us_title,

.e-texi-app .custom_software_d_content,

.e-texi-app .website_title,

.e-texi-app .website_title_link,

.e-texi-app .website_title_link a,

.e-texi-app .website_title_link a:hover,

.ecards_bg .prjct_ctgr,

.email,

.faq-area .panel-title a.collapsed,

.five-things-banner h1.about_us_title,

.footer_link ul li a:hover,

.mobileappdevelopment h1.about_us_title,

.outstanding-services-of-crest-coder h1.about_us_title,

.rfq-left .model-contact-info a,

.rfq-left .model-contact-info h3,

.rfq-left .model-contact-info p,

.rumie_bg .prjct_ctgr,

.shellby_features_title h3,

.white_text,

.zegofit .custom_software_d_content,

.zegofit .website_title_link,

.zegofit .website_title_link a,

a:focus,

a:hover {

    color: #fff;

}

#technologies .bg_no,

.vision .bg_no {

    color: rgba(0, 0, 0, 0.07);

}

.tech {

    padding: 20px;

    margin-bottom: 30px;

}

.mt-5,

.mt-7 {

    margin-top: 3rem;

}

.tech img {

    width: 60px;

}

.technology_name {

    margin-top: 30px;

    margin-bottom: 0;

}

.blog_img {

    display: block;

    max-width: 100%;

    height: 210px;

    margin: 0 auto;

}

.blog_details {

    padding: 4rem;

    position: relative;

}

.blog_title {

    font-family: VarelaRound-Regular;

    color: #696969;

    font-size: 23px;

    line-height: 1.4;

    margin-bottom: 2rem;

    margin-top: 0;

    min-height: 97px;

}

.blog_tag {

    padding: 0.25rem 0.4rem;

    border: 1px solid #ee4d51;

    border-radius: 4px;

    margin-bottom: 1rem;

    display: inline-block;

    color: #6b6b6b;

    font-size: 10px;

    position: absolute;

    top: 10px;

    left: 10px;

}

.contact_us_form,

.web_development {

    padding: 40px 0;

}

.contact_left_image_pad {

    padding-left: 0;

    padding-right: 56px;

}

.contact_form_img,

.ser_1,

.ser_2 {

    padding-top: 24px;

}

.form-control {

    height: 42px;

    border-radius: 2px;

    color: #000;

}

select {

    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)

        right 11px center/15px no-repeat;

    -moz-appearance: none;

    -webkit-appearance: none;

    appearance: none;

    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) !important;

}

img.loading_animation {

    display: none;

    width: 25px;

    margin-left: 0;

}

.footer {

    background-image: url(../images/footer.png);

    padding: 60px 0;

    background-size: cover;

}

.footer_ver_image {

    padding-top: 19px;

}

.contry_title {

    color: #fff;

    text-transform: uppercase;

}

hr {

    height: 1px;

    border: 0;

    border-top: 3px solid #ee4d51;

    padding: 0;

    width: 30px;

    margin-left: 0;

    margin-right: 0;

}

.etexi-booking .underline_casestudy,

.wherecase,

hr.contry_detail {

    margin-left: auto;

    margin-right: auto;

}

.phone_no {

    color: #fff;

    font-size: 14px;

    line-height: 35px;

}

#rfqmodal .phone_no,

.case-tech p,

.haveproject a,

.hr_line,

.hr_line_logo,

.modal_btn,

.note,

.popup-icons,

.read-more,

.rfq_button,

.twoToneButton,

img.singapore_logo,

p.red_more {

    display: inline-block;

}

.compass_features,

.fa_icons,

.well .jivraj_img {

    padding-top: 60px;

}

.fa_icons{

    padding-top: 0;

}

.hr_line {

    text-align: right;

    float: right;

    padding-top: 10px;

}

.fa_icons ul {

    list-style-type: none;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

}

.fa_icons ul li a {

    height: 40px !important;

    width: 40px !important;

    background: #fff;

    display: block;

    text-align: center;

    line-height: 40px;

    transition: all 0.6s;

}

.fa_icons ul li a:hover {

    background: #ffffff;

    transform: rotate(360deg);

    border-radius: 50%;

}

.fa_icons ul li a i {

    font-size: 20px;

    line-height: 40px;

    color: #000!important;

}

.footer_logo {

    padding-top: 39px;

}

.footer_button {

    padding-top: 48px;

    text-align: right;

}

.rfq_button {

    width: 160px;

    background: #fff;

    letter-spacing: 1px;

    margin: 0;

    position: relative;

    text-transform: uppercase;

    z-index: 2;

    height: 40px;

    border-radius: 43px;

    text-align: center;

    padding: 9px;

    color: #fff;

    font-size: 15px;

    border: 2px solid #fff;

    transition: 0.5s;

}

.rfq_button_text {

    color: #000 !important;

}

.rfq_button:hover {

    background-color: #ee4d51;

    border: 2px solid #ee4d51;

    color: #ee4d51;

}

.hr_line_logo {

    text-align: right;

    float: left;

    padding-top: 18px;

}

.contry {

    background-image: url(../images/contry.png);

    padding: 50px 0;

    height: auto;

}

.footer_link h6 a {

    color: #fff;

    font-size: 16px;

    text-transform: uppercase;

}

.container-contact100.contact-page,

.footer_link ul,

.website-details ul {

    padding: 0;

}

.footer_link ul li {

    padding: 5px 0;

}

.footer_link ul li a {

    color: #c3c3c3;

    font-size: 14px;

    transition: 0.3s;

}

.bottom_footer {

    background-image: url(../images/bottom_footer.png);

    padding: 40px 0;

}

.all_rights_reserved {

    color: #fff;

    font-size: 16px;

    margin: 0;

}

#applyjob,

#rfqmodal {

    -webkit-overflow-scrolling: touch;

    outline: 0;

    position: fixed;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    z-index: 999999999;

    min-height: 100vh;

    min-width: 100vw;

    pointer-events: auto;

}

#rfqmodal {

    overflow-y: auto;

    z-index: 9999999;

    top: 10%;

    bottom: 10%;

    right: 0;

    left: 0;

    min-height: auto;

    pointer-events: auto;

    min-width: auto !important;

    background: 0 0;

}

#applyjob .modal-dialog,

#rfqmodal .modal-dialog {

    width: 100%;

    margin: 0;

    height: 100%;

}

#rfqmodal .modal-dialog {

    width: 100%;

    height: auto;

}

#applyjob .modal-content,

#rfqmodal .modal-content {

    border-radius: 0;

    border: none;

    height: 100%;

}

#applyjob .modal-header,

#rfqmodal .modal-header {

    padding: 0 45px;

    border-bottom: none;

    display: block !important;

}

#applyjob .close,

#rfqmodal .close {

    float: right;

    font-size: 60px;

    font-weight: 700;

    line-height: 1;

    color: #ee4d51;

    text-shadow: 0 1px 0 #fff;

    opacity: 1;

}

#applyjob .modal-body,

#rfqmodal .modal-body {

    position: relative;

    padding: 0 15px;

    margin: 0 auto;

    width: 100%;

    float: left;

    top: 70px;

}

.model-contact-info h3 {

    font-size: 24px;

    color: #333;

    font-weight: 600;

}

.model-contact-info a {

    color: #333;

}

.popup-icons {

    border: 1px solid #333;

    padding: 5px;

    border-radius: 50%;

    width: 35px;

    height: 35px;

    line-height: 25px;

    color: #333;

    font-size: 16px !important;

    margin-bottom: 20px;

}

.model-contact-info h5 {

    font-size: 22px;

}

#rfqmodal .tech {

    background-color: transparent;

    box-shadow: none;

    padding: 20px 0;

    text-align: left;

    margin-bottom: 0;

}

#rfqmodal .tech img {

    width: 45px;

    margin-right: 0.5rem;

}

.form-box {

    width: 100%;

    margin: 0 auto;

    float: left;

}

.form-box .form-group {

    margin-bottom: 30px;

    position: relative;

}

#rfqmodal .form-box .form-control {

    background-color: #fff;

    color: #000;

    border: 1px solid #b9b9b9;

    border-bottom: 1px solid #b9b9b9;

    box-shadow: none;

    border-radius: 0 !important;

    padding: 10px;

    font-size: 14px;

}

#rfqmodal .secondary_head {

    text-align: left;

    font-weight: 600;

    font-size: 22px;

    margin-bottom: 15px;

    margin-top: 0;

}

#rfqmodal .form-box textarea.form-control {

    height: 100px;

}

.note {

    color: #959595;

    font-size: 14px;

    margin-top: 20px;

}

.form-box input[type="file"] {

    opacity: 0;

    height: 60px;

    width: 100%;

    z-index: 1;

    position: relative;

}

.form-box #custom-button {

    padding: 10px;

    color: #000;

    border: 1px dashed #000;

    border-radius: 0;

    cursor: pointer;

    width: 100%;

    font-family: VarelaRound-Regular;

    position: absolute;

    top: 0;

    height: 60px;

    background-color: transparent;

}

#custom-text,

.form-box #custom-text {

    margin-left: 10px;

    color: #aaa;

    font-family: VarelaRound-Regular;

}

.modal_btn {

    outline: 0;

    padding: 12px 30px;

    line-height: 1.4;

    background: #ee4d51;

    border-radius: 8px;

    border: 2px solid #ee4d51;

    color: #fff;

    position: relative;

    font-weight: 400;

    font-family: VarelaRound-Regular;

    max-width: 200px;

    min-width: 200px;

    text-transform: uppercase;

    transition: 0.3s;

}

.mission_con_1,

.mission_con_2,

.vision_con {

    font-size: 16px;

    padding-right: 100px;

}

.modal_btn:hover {

    border: 2px solid #ee4d51;

    background-color: #fff;

    color: #ee4d51;

}

#rfqmodal .fa_icons {

    padding-top: 60px;

    position: absolute;

    bottom: 0;

}

#rfqmodal .fa_icons a {

    display: block;

    margin: 10px 0;

}

#rfqmodal .fa_icons a i {

    color: #333 !important;

    background-color: transparent !important;

    padding: 0 !important;

}

#rfqmodal .modal-content {

    height: auto;

    box-shadow: none;

}

.about_us_title {

    font-weight: 600;

}

img.vision_img {

    max-width: 90%;

    padding-top: 40px;

}

.eye_img,

.eye_img_mission {

    display: inline-block;

    float: left;

    width: 40px;

}

.mission_title,

.vision_title {

    margin: 0;

    padding-top: 7px;

    padding-left: 51px;

    font-family: VarelaRound-Regular;

}

.mission_con_1,

.vision_con {

    padding-top: 16px;

}

.eye_mission {

    padding-top: 33px;

}

.ser_1 img {

    width: 65px;

}

.join_team_item,

.solution_item {

    padding: 1rem 0;

    margin-bottom: 2rem;

    margin-top: 24px;

}

.ser_1_heading {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 20px;

    color: #696969;

}

.solution_item:hover {

    background-color: rgba(0, 0, 81, 0.2);

    background-color: rgb(238 77 81 / 1%);

    box-shadow: 0 0 20px rgb(0 0 0 / 15%);

    border-radius: 10px;

    transition: 0.3s;

    transform: scale(1.02);

}

.blog_featured.blog-details .category_detail a,

.blog_featured.blog-details .col-md-4 .bg_color_right a:hover,

.clutch_link_top:hover,

.service_item a,

.solution_item:hover .ser_1_heading,

.thanks-banner h1.about_us_title b {

    color: #ee4d51;

}

.services {

    margin-top: 25px;

}

.banner,

.india_detail,

.our_team,

.php_banner,

.php_banners,

.slider,

.well.hire .banner_image_top {

    margin-top: 0;

}

.our_team {

    padding-bottom: 7rem;

}

.con {

    position: relative;

    width: 100%;

}

.image {

    display: block;

    width: 100%;

    height: auto;

}

.deep_name_title {

    font-size: 20px;

    color: #120029;

    font-weight: 600;

}

.content_website h1.number,

.php_bg,

h1.php_bg.bg_no {

    font-size: 70px;

    z-index: 0;

    position: absolute;

    font-family: VarelaRound-Regular;

    font-weight: 600;

    right: 0;

}

.banner {

    background-image: url(../images/about_us_page/bg.png);

    background-size: 850px;

    background-repeat: no-repeat;

    background-position: right -30px top;

}

.pl-footer-1 {

    padding-left: 10%;

}

.ser_2 img {

    width: 100px;

}

.join-team {

    background-color: #f8f8f8;

    padding: 10px 0;

}

.current-opening .career_item {

    padding: 20px 15px;

    box-shadow: 2px 4px 10px rgb(0 0 0 / 20%);

    margin: 15px 0;

    border-radius: 6px;

    display: block;

    background-size: 14%;

    background-repeat: no-repeat;

    background-position: 96% 6%;

    transition: 0.3s;

}

.mobile_img:after,

.php_banners {

    background-size: contain;

    background-repeat: no-repeat;

}

.career_item h3 {

    margin: 0;

    color: #120029;

    font-size: 20px;

}

.career_item span {

    font-size: 14px;

    color: #a6a6a6;

}

.job-type span {

    margin-bottom: 20px;

    display: block;

}

.job-post span {

    width: 100%;

    display: inline-block;

    float: left;

    margin-bottom: 16px;

}

.current-opening .career_item:hover {

    transform: scale(1.1);

}

.career_item button.rfq_button {
    border-radius: 0 !important;
    background: #0c0c0c;
    padding: 0 !important;
    text-align: center;
    line-height: 40px;
    width: 160px;
    border: 0 !important;
}
.career_item button.rfq_button a {
    text-align: center;
    line-height: 40px;
    width: 160px;
    display: block;
}

.form_header h1 {

    color: #000;

    font-weight: 600;

    font-size: 32px;

}

#applyjob .form_header p {

    padding: 10px 0;

    display: block;

    margin-top: 50px;

}

.form_header p {

    padding: 10px 100px;

    font-size: 16px;

}

p.content_web_p,

p.content_web_paragraph {

    font-size: 16px;

    padding-top: 30px;

}

.form-box .form-control {

    width: 100%;

    background-color: #fff;

    color: #000;

    border: none;

    border-bottom: 1px solid #ee4d51;

    box-shadow: none;

    border-radius: 0 !important;

    padding: 6px 0;

    font-size: 16px;

    font-family: VarelaRound-Regular;

}

.slider-size {

    padding: 0;

    width: 100%;

    border-radius: 40px;

    overflow: hidden;

}

.mobile_img {

    width: 270px;

    height: 580px;

    padding: 8px 2px 8px 6px;

}

.mobile_img:after {

    content: "";

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    position: absolute;

    background-image: url(../images/mobile_blank.png);

    z-index: 9999;

}

.carousel {

    border-radius: 30px;

    overflow: hidden;

}

.php_banners {

    background-image: url(../images/Services/bg.png);

    background-position: top right;

}

.php_bg {

    top: -17px;

    color: rgba(0, 0, 0, 0.07);

    left: 0;

}

.akry_all_ss,

.box_str,

.case-box,

.clients-video,

.content_website,

.do_grocer_project_result,

.faq-area .panel-title > a,

.project_result,

.request-loade,

.subbox_btn,

.twoToneButton,

.validate-input,

.video-link,

.whatson_img,

.wrap-input100,

img.Visuals,

img.laptop_mac,

li.iphone_bullets {

    position: relative;

}

.content_website h1.number {

    top: 66px;

    color: rgb(255 255 255 / 7%);

    left: 25%;

    transform: translateX(-10%);

}

p.content_web_paragraph {

    padding-right: 0;

    margin-bottom: 2rem;

}

img.jivraj {

    width: 90%;

    float: right;

    margin-right: 56px;

}

.jivraj_img {

    padding-top: 158px;

    padding-bottom: 100px;

}

.content_website {

    padding-top: 86px;

    padding-bottom: 95px;

}

.main_title_white {

    color: #fff;

    font-family: VarelaRound-Regular;

    font-weight: 600;

    font-size: 32px;

    letter-spacing: 2px;

    margin-bottom: 30px;

}

p.website_design_content {

    font-size: 16px;

    color: #fff;

    padding-top: 30px;

    margin-bottom: 2rem;

}

.pro_con {

    display: flex;

    font-size: 16px;

    line-height: 25px;

    color: #fff;

}

.bullet_dot_span {

    width: 8px;

    height: 8px;

    margin-right: 10px;

    margin-top: 7px;

    background-color: #ee4d51;

    border-radius: 50%;

}

img.photos,

img.photoshop {

    padding-right: 20px;

}

.logos_ps_ai {

    padding-top: 30px;

}

.whatson_img {

    padding-top: 0;

    padding-bottom: 80px;

}

img.whatson {

    max-width: 100%;

    margin-top: 50px;

}

.website_design {

    background-color: #000;

}

h1.php_bg.bg_no {

    top: -20px;

    color: rgba(0, 0, 0, 0.1);

    left: 0;

    transform: unset;

}

hr.client_rec {

    margin: 0 auto;

    padding-bottom: 35px;

}

.features_shellby,

.meanfourbox_hover {

    padding: 0;

    display: block;

    position: relative;

    background: #fff6f6;

    border: none;

    color: #120029;

    font-size: 18px;

    cursor: pointer;

    margin: 0;

    text-align: center;

}

.features_shellby h3::before,

.features_shellby::before,

.meanfourbox_hover h3::before,

.meanfourbox_hover::before {

    left: 0;

    top: 0;

}

.features_shellby::after,

.features_shellby::before,

.meanfourbox_hover::after,

.meanfourbox_hover::before {

    content: "";

    width: 0;

    height: 2px;

    position: absolute;

    transition: 0.2s linear;

    background: #000;

}

.features_shellby h3,

.meanfourbox_hover h3 {

    display: block;

    padding: 25px 20px;

    font-size: 20px;

}

.meanfourbox_hover h3 {

    font-size: 18px !important;

    margin-bottom: 30px !important;

}

.features_shellby h3::after,

.features_shellby h3::before,

.meanfourbox_hover h3::after,

.meanfourbox_hover h3::before {

    content: "";

    width: 2px;

    height: 0;

    position: absolute;

    transition: 0.2s linear;

    background: #000;

}

.features_shellby h3::after,

.features_shellby::after,

.meanfourbox_hover h3::after,

.meanfourbox_hover::after {

    right: 0;

    bottom: 0;

    transition-duration: 0.4s;

}

.features_shellby:hover h3::after,

.features_shellby:hover h3::before,

.meanfourbox_hover:hover h3::after,

.meanfourbox_hover:hover h3::before {

    height: 100%;

}

.dedicated_developer {

    padding: 80px 0;

}

.port_slider {

    background-repeat: no-repeat;

    background-position: top center;

    background-size: auto 100%;

    padding-top: 0;

    padding-bottom: 80px;

}

.iphone_development,

.software_design {

    background-position: center;

    background-repeat: no-repeat;

}

.well {

    min-height: 20px;

    padding: 0;

    margin-bottom: 0;

    background-color: #fff;

    width: 100%;

    border: none;

    box-shadow: none;

}

.well .panel {

    padding: 0 !important;

}

.well .about_us_title {

    font-size: 52px;

    padding-top: 204px;

}

.banner_image_top,

.where-img {

    margin-top: 80px;

}

.banner_para {

    padding: 35px 0;

    background-color: #fff3f3;

    margin-top: 45px;

}

.banner_para .custom_software_d_content {

    font-size: 22px;

    font-weight: 700;

    color: #000;

}

img.jivraj.wow {

    max-width: 100%;

    width: 100%;

    margin-right: 0;

}

.well .web_development {

    width: 100%;

    float: left;

    padding: 60px 0;

}

.box_str:after,

.box_str:before {

    transition: 0.3s;

    width: 0;

    background-color: rgba(238, 77, 81, 0.1);

    height: 100%;

    position: absolute;

    top: 0;

    content: "";

}

.well p.content_web_p {

    font-size: 16px;

    padding-top: 15px;

}

.well .title_web_client {

    padding-top: 0;

    padding-bottom: 0;

    margin-top: 40px;

}

.meanfourbox h3 {

    display: block;

    font-size: 20px;

    padding: 25px 20px;

    margin: 0;

}

h3.content_subtitle,

p.content_p {

    padding-bottom: 22px;

    margin: 0;

}

.strength img {

    max-width: 60px;

}

.box_str .main_title h3 {

    font-size: 18px;

    font-weight: 600;

    font-family: VarelaRound-Regular;

    letter-spacing: initial;

}

.box_str {

    background-color: #fff;

    padding: 30px 20px;

    height: 160px;

    border-radius: 12px;

    margin: 25px 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    transition: 0.3s;

}

.box_str:after {

    left: 0;

}

.box_str:before {

    right: 0;

}

.box_str:hover:after,

.box_str:hover:before {

    width: 100%;

    transition: width 1.3s;

}

.ecards_banner img.c_logo,

.img_box img,

.process img,

.testimonial video,

img {

    max-width: 100%;

}

.contact_form {

    padding: 20px 0 82px;

    height: auto;

    background-color: #f7f7f7;

}

.hire_formbox {

    padding: 30px;

    border-radius: 10px;

    margin-top: 2rem;

    background-color: #fff;

    box-shadow: 0 0 30px rgb(0 0 0 / 9%);

}

#custom-button:hover,

.subbox_btn {

    background-color: #ee4d51;

}

.contect_title {

    color: #000;

    margin-bottom: 5rem;

}

.budget,

.email,

.name,

.skype {

    padding-bottom: 25px;

}



form#contact_us_form .form-control {

    border: 1px solid #000;

}

.subbox_btn {

    letter-spacing: 1px;

    text-decoration: none !important;

    text-transform: uppercase;

    width: 149px;

    height: 40px;

    border-radius: 43px;

    text-align: center !important;

    padding: 9px !important;

    display: inline-block;

    font-family: VarelaRound-Regular !important;

    color: #fff !important;

    font-size: 13px !important;

    font-weight: 600;

    border: 2px solid #ee4d51;

    transition: 0.5s;

    margin-top: 20px;

}

#custom-button,

#subForm input#ebcaptchainput,

.about_us_title,

.contact100-form .blog_btn,

.faq .faq-title,

.feature-title,

.popupBox form#contact_us_form .form-control,

.twoToneButton,

.website-page p,

a.email_id,

b.why_choose_cc,

form#contact_us_form .form-control,

h1.blog_detail,

p.address_detail,

p.red_more {

    font-family: VarelaRound-Regular;

}

.case-box,

.case-details,

.fa_icons i.fa {

    transition: 0.3s;

}

.soc_icon {

    padding-top: 41px;

    padding-bottom: 135px;

    text-align: center;

}

img.social_msg_icon {

    max-width: 100px;

}

.social_cnnctbox {

    padding: 30px;

    border-radius: 10px;

    margin-top: 2rem;

}

.navbar a i:hover {

    background: 0 0 !important;

}

.well .jivraj_img img.jivraj.wow {

    width: auto;

    float: unset;

}

.well .jivraj_img {

    padding-bottom: 0;

}

b.why_choose_cc {

    border-bottom: 0 solid;

    color: #120029;

    font-weight: 600;

    font-size: 32px;

    letter-spacing: 2px;

}

.iphone_hire {

    color: #000;

    font-weight: 600;

}

.clutch_link_top {

    color: #ee4d51;

    font-weight: 600;

}

.iphone_development {

    background-image: url(../images/iphone_dev_bg.png);

    margin-top: 6%;

    background-size: cover;

    padding-bottom: 6rem;

}

img.iphone_app {

    margin-top: 86px;

}

.category_detail p.category_det,

form#rfq_request_form .note,

img.native_img {

    margin-top: 10px;

}

h3.content_subtitle {

    font-size: 28px;

    color: #fff;

}

li.list_left,

p.content_p,

p.react_native_content {

    font-size: 16px;

    color: #fff;

}

.android_app_width_50,

.iphone_width_50,

.top-dev li {

    width: 50%;

    float: left;

}

ul.left-list {

    padding-left: 16px;

}

.android_app {

    width: 100%;

    float: left;

    padding-top: 5rem;

}

h3.content_app_subtitle {

    margin: 0;

    font-weight: 600;

    padding-top: 40px;

    font-size: 28px;

}

p.content_app_p {

    padding-top: 20px;

    font-size: 16px;

}

ul.left-list-app {

    padding: 0 0 0 18px;

}

.react_native {

    background-image: url(../images/native_bg.png);

    background-size: cover;

    padding-bottom: 100px;

    padding-top: 40px;

}

.we_think {

    padding: 60px 0 0;

}

.bullet_point {

    width: 14px;

    margin-right: 5px;

    vertical-align: unset;

}

.software_design {

    background-image: url(../images/soft_design_bg.png);

    background-size: cover;

}

.bg_color {

    background-color: rgb(0, 0, 0, 0.6);

    padding: 70px;

    margin-top: 80px;

    margin-bottom: 80px;

}

#subForm,

.case-box,

.contact-page .form-group,

.haveproject h1,

.popupBox h2.form_title_lets,

.portfolioContainer .col-md-4.col-sm-6,

.process-box,

.reviewer img,

.team-box,

.testimonial .testi-dest p {

    margin-bottom: 30px;

}

p.software_design_content {

    color: #fff;

    font-size: 16px;

    margin: 0;

    padding-bottom: 20px;

}

.award-winning,

.etexibooking,

.software_dev,

.zegofit-screenshot {

    padding: 60px 0;

}

p.software_dev_content {

    margin: 0;

    padding-top: 30px;

    padding-bottom: 30px;

    font-size: 16px;

}

.bullet_dot,

img.tech_logos {

    margin-right: 10px;

}

.akry_discription .requirement,

.request-loade {

    margin-top: 50px;

}

.request-loade:after {

    position: absolute;

    background: #fff;

    height: 390px;

    width: 390px;

    content: "";

    left: 50%;

    z-index: 1;

    border-radius: 50%;

    top: 40%;

    transform: translate(-50%, -50%);

    box-shadow: 0 0 20px 0 rgb(0 94 155 / 40%);

}

img.laptop_mac {

    z-index: 9999;

}

.bullet_dot {

    width: 8px;

    height: 8px;

    margin-top: 7px;

}

li.iphone_bullets {

    font-size: 16px;

    display: flex;

    color: #696969;

    padding: 5px 0;

}

.website_title {

    font-weight: 600;

    font-size: 25px;

}

.website_title_link {

    color: #696969;

    font-size: 19px;

}

div#features h1.about_us_title.features_com {

    color: #fff;

    padding-top: 0;

    padding-bottom: 30px;

}

.text-white {

    color: #686868;

}

.rs-icon-info {

    padding-bottom: 65px;

}

.features_comm {

    background-color: #0a1724;

    padding: 60px 0;

}

.second .project_title h1.about_us_title {

    padding-top: 4rem;

}

.project_result {

    background-image: url(../images/projects/circadian-resultbanner.png);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100%;

    padding-bottom: 43%;

}

.rumie_ss_title {

    padding-top: 30px;

    text-align: center;

}

.do_grocer_project_result .ss_title,

.project_result .ss_title,

.rumie-screenshot .ss_title {

    padding-top: 2%;

    text-align: center;

    color: #fff;

}

.core_features_akry .fea_title,

.core_features_ecards .fea_title {

    color: #333;

    font-weight: 600;

    line-height: 1.2;

    font-family: VarelaRound-Regular;

    text-align: center;

}

.case-box {

    border-radius: 10px;

    margin-top: 30px;

}

.case-box:hover {

    transform: scale(0.96);

}

.case-study-banner h1.about_us_title {
    padding-top: 0;
    text-align: center;
    color: #000;
}
.case-study-banner p.sub_title{
    color: #000;
}

.case-stude-heading {

    background-color: #333;

    padding: 20px 0;

    color: #fff;

    margin-bottom: 50px;

}

.portfolioFilter a {

    background: #fff;

    color: #000;

    padding: 6px 12px;

    border-radius: 15px;

    border: 2px solid #000;

    margin: 0 4px;

}

.portfolioFilter a.current {

    background: #1e1e1e;

    color: #fff;

}

.case-box img {

    border-radius: 10px;

    width: 100%;

}

.case-details {

    background: rgba(0, 0, 0, 0.8);

    padding: 24px;

    width: 100%;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100px;

    text-align: center;

    overflow: hidden;

    border-radius: 15px 15px 0 0;

}

.case-box:hover .case-details {

    height: 0;

    padding: 0;

}

.case-details h3 {

    margin-top: 0;

    text-align: center;

    font-weight: 600;

    font-size: 20px;

    letter-spacing: 1px;

    vertical-align: bottom;

    color: #fff;

}

.case-tech p {

    color: #fff;

    text-align: center;

    vertical-align: top;

    margin: 7px 0 0 2px;

    font-size: 14px;

    padding: 3px 8px;

}

.well.hire img.jivraj {

    max-width: 66%;

}

.well.hire p.content_web_p {

    font-size: 18px;

    padding-top: 10px;

}

.well.hire li.iphone_bullets {

    font-size: 18px;

    list-style-type: none;

    position: relative;

    display: flex;

    color: #696969;

    padding: 5px 0;

}

.well.hire .bullet_dot {

    width: 10px;

    height: 10px;

    margin-right: 10px;

    margin-top: 7px;

}

.well.hire .features_shellby {

    background: #fff;

    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);

    box-shadow: 0 0 30px rgb(0 0 0 / 10%);

    border-radius: 6px;

    -webkit-transition: 0.3s ease-in-out;

    -o-transition: 0.3s ease-in-out;

    transition: 0.3s ease-in-out;

    margin-bottom: 30px;

    border: 1px solid #ffe2e3;

    height: 100%;

}

.well.hire img.hire_ded_dev {

    max-width: 78%;

}

.well.hire .bg_image_res_hire {

    background-color: #f5f5f5;

}

.hire_boxes_bg {

    margin-top: 40px;

    margin-bottom: 40px;

}

.well.hire img.hire_ded_dev_bg {

    max-width: 78%;

    margin-top: 58px;

}

.well.hire h3.main_title.hire_modal.mt-3.mb-3 {

    margin-bottom: 60px;

    margin-top: 3rem !important;

}

.client_recomend {

    padding: 60px 0 30px;

}

.well.hire .shellby_features_title {

    padding: 12px;

}

h3.hire_modal {

    margin-top: 0;

    margin-bottom: 60px;

}

.ecards_banner {

    padding: 60px 0 80px;

}

.ecards_banner .banner_heading {

    padding-top: 7rem;

}

.app-details .about_us_title,

.ecards_banner.zegofit .banner_heading,

.page-maping,

.panal.project-bg .more_project,

.sitemeap .about_us_title,

.solution_content {

    padding-top: 0;

}

.project_links {

    margin-top: 2rem;

}

.akry_ss,

.banner_do img.c_logo {

    margin-top: 120px;

}

.core_features_akry .fea_title {

    font-size: 40px;

    margin: 2rem 0 5rem;

}

.faq-title {

    margin-bottom: 42px;

    padding-right: 60px;
}

.img_box {

    width: 55px;

    padding: 15px;

    border: 1px solid #eabf3c;

    border-radius: 0.45rem;

    margin-bottom: 2rem;

}

.feature-title {

    font-size: 18px;

    font-weight: 600;

    color: #001138;

    margin-bottom: 0;

}

.para_text {

    font-size: 16px;

    line-height: 1.2;

    padding: 1rem 0;

    font-weight: 400;

}

.akry_discription .faq-img img {

    max-width: 85%;

}

.akry_discription .para_text {

    padding: 2rem 0;

}

.akry_ss {

    padding: 0;

    background-image: url(../images/projects/akry/ss-bg.png);

    background-position: top;

    background-size: cover;

    background-repeat: no-repeat;

}

.finskol_features,

.project_content {

    padding-top: 20px;

}

.akry_all_ss {

    max-width: 70%;

    left: -50px;

    float: left;

    bottom: 0;

    margin-top: -120px;

}

.requirement {

    margin-top: 20px;

}

.akry_ss .about_us_title,

.compass_features2 {

    padding-top: 150px;

}

.app-details .about_us_title {

    font-size: 36px;

    margin-bottom: 20px;

}

.circadian .about_us_title {

    padding-top: 24%;

}

.more_project_title_main {

    text-align: center;

    padding-top: 20px;

    padding-bottom: 40px;

}

.case_study_banner_img {

    padding-top: 3rem;

}

.core_features_ecards,

.core_features_ecards.rumie {

    background-position: bottom;

    background-size: cover;

    background-repeat: no-repeat;

    margin-top: -100px;

    padding-top: 150px;

    padding-bottom: 80px;

}

.core_features_ecards {

    background-image: url(../images/projects/ecards/bg-ecards.png);

}

.core_features_ecards.rumie {

    background-image: url(../images/projects/rumieapp/feature-bg.png);

}

.core_features_ecards .fea_title {

    font-size: 36px;

    margin: 2rem 0 5rem;

}

.core_features_ecards .faq-title {

    margin-bottom: 0;

    padding-right: 20px;

    padding-left: 30px;

}

.fr_banner {

    width: 650px;

    margin-top: 00px;

    max-width: 100%;

    border-radius: 10px;

}

.banner_do .banner_heading,

.panal.fr_banner_section.app-details .banner_heading {

    padding-top: 8rem;

    padding-bottom: 10px;

}

.logo_slider {

    padding-top: 25px;

}

.core_features_ecards.zegofit .owl-carousel,

.snapshot_title {

    padding-top: 90px;

}

.problem_ss .fr_prblm_img {

    margin-top: 60px;

}

.fr_fea_bg {

    background-color: #000;

    padding: 40px 0 80px;

}

.fr_fea_bg .about_us_title {

    color: #fff;

    font-weight: 400;

    text-align: center;

}

.widgets_wrapper,

hr.fea_heading {

    margin: 0 auto;

}

.top_fea {

    margin-top: 50px;

    margin-bottom: 50px;

}

.fr_features {

    text-align: center;

    padding-bottom: 20px;

    padding-top: 0;

}

img.fea_icon {

    max-width: 70px;

}

.fr_features h3 {

    color: #fff;

    font-size: 18px;

}

.more_project {

    padding: 100px 0 120px;

}

.faq {

    background-color: #0a1724;

    padding-bottom: 60px;

}

.faq .faq-title {

    text-align: center;

    color: #fff;

    margin-top: 40px;

    margin-bottom: 42px;

}

.faq-img {

    padding-top: 0;

    text-align: right;

    border-radius: 8px;

    overflow: hidden;

}

.project_ss_1 {

    width: 80%;

    float: none;

    margin: 0 auto;

}

.faq-area .panel-group {

    margin: 0;

    padding-right: 100px;

}

.panel-group .panel {

    margin-bottom: 0;

    border-radius: 4px;

}

.panel-default {

    background: rgba(0, 0, 0, 0);

    border: 0;

    box-shadow: none;

    padding: 0;

}

.panel-group .panel + .panel {

    margin-top: 14px;

}

.panel-default > .panel-heading {

    background: inherit;

    border-color: inherit;

    margin: 0;

    padding: 0;

}

.faq-area .panel h4 {

    font-family: Poppins, sans-serif;

    font-size: 14px;

}

a.features_faq {

    color: #fff;

    font-size: 20px !important;

    font-weight: 500 !important;

}

.faq-area .panel-title > a {

    background: inherit;

    border-bottom: 0;

    display: block;

    padding: 8px 0 8px 40px;

    transition: 0.5s;

    width: 100%;

}

.faq-area .panel-title a span::before {

    border: 1px solid #6b9dd5;

    border-radius: 50%;

    color: #606060;

    content: "";

    cursor: pointer;

    font-size: 16px;

    font-weight: 500;

    height: 23px;

    left: 0;

    line-height: 23px;

    margin: auto;

    position: absolute;

    text-align: center;

    top: 6px;

    transition: 0.3s;

    width: 23px;

    z-index: 2;

}

.faq-area .panel-title a span:before {

    background: #6b9dd5;

    content: "-";

    color: #fff;

}

.faq-area .panel-title a.collapsed span:before {

    background: 0 0;

    content: "+";

    color: #606060;

    border-color: #acacac;

}

.panel-default > .panel-heading + .panel-collapse > .panel-body {

    border: 0;

}

.panel-body > p {

    color: #d0d0d0;

    margin: 0;

}

.do_grocer_project_result {

    background-image: url(../images/projects/do_grocer/screens.png);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100%;

    padding-bottom: 45%;

    background-position: bottom center;

}

.ss_title {

    font-size: 36px;

    padding-top: 50%;

    text-align: left;

    color: #fff;

}

.compass_admin {

    max-width: 100%;

    margin-top: 40px;

}

.contact100-form .blog_btn,

.twoToneButton {

    font-weight: 400;

    max-width: 200px;

    min-width: 200px;

    outline: 0;

}

.fea {

    border: 1px solid #bde6fe;

    padding: 20px;

    margin: 12px;

    border-radius: 9px;

}

.compass_icon {

    width: 40px;

}

.shellby_features {

    background-color: #000;

    padding: 50px 0 80px;

    margin-top: -255px;

}

img.Visuals {

    max-width: 100%;

    text-align: center;

    margin: 0 auto;

    z-index: -1;

}

.shellby_features_main_title {

    margin-bottom: 50px;

}

.shellby_features .fea_heading {

    color: #fff;

    text-align: center;

    font-weight: 400;

}

.shellby_features_icon img {

    max-width: 50px;

}

.shellby_features_icon {

    text-align: center;

    padding: 39px 0 0;

}

.form_title,

p.red_more {

    padding-top: 0;

    padding-bottom: 0;

}

.features_shellby {

    margin-bottom: 30px;

    background: 0 0;

    cursor: auto;

}

hr.underline_shellby_features {

    width: 50%;

    border: 1px solid #80808030;

    height: 0;

    margin-left: auto;

    margin-right: auto;

}

h2.form_title_lets {

    font-size: 28px;

}

hr.lets_talk {

    margin: 23px auto 0;

}

.container-contact100 {

    margin-bottom: 70px;

}

.container-contact100 .wrap-contact100 {

    width: 710px;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    padding: 42px 75px 45px 25px;

    box-shadow: 0 0 25px rgb(0 0 0 / 10%);

    border: 1px solid #ee4d51;

}

.blog-box {

    background-color: #fff;

    margin-bottom: 30px;

    padding: 20px;

    box-shadow: 0 0 20px rgb(0 0 0 / 10%);

}

.india_detail,

.singapore_detail {

    margin-left: 0;

    margin-bottom: 10px;

}

h1.blog_detail {

    font-size: 26px;

    font-weight: 500;

    color: #333;

}

form#contact_us_form .form-control,

p.red_more {

    font-size: 16px;

}

p.red_more {

    padding-right: 0;

}

p.blog_author {

    color: #c3c3c3;

}

p.blog_detail_text {

    margin-bottom: 20px;

    margin-top: 20px;

}

.read-more hr.under_line {

    margin-top: -10px;

    width: 20px;

    transition: 0.3s;

    cursor: pointer;

}

.read-more:hover hr.under_line {

    width: 80px;

}

form#contact_us_form .form-control {

    width: 100%;

    background-color: #fff;

    color: #000;

    border: none;

    border-bottom: 1px solid #ee4d51;

    box-shadow: none;

    border-radius: 0 !important;

    padding: 6px 0;

    -webkit-appearance: none;

}

.contact-validate-form input[type="file"] {

    opacity: 0;

    visibility: hidden;

}

#custom-button {

    padding: 10px;

    color: #000;

    border-radius: 9px;

    cursor: pointer;

    width: 100%;

    background-color: rgba(238, 77, 81, 0.45);

    border: 1px dashed #000;

}

.twoToneButton {

    padding: 12px 30px;

    line-height: 1.4;

    background: #ee4d51;

    border-radius: 8px;

    border: 1px solid #ee4d51;

    color: #fff;

    text-transform: uppercase;

    transition: 0.3s;

}

.twoToneButton:hover {

    color: #120029;

    opacity: 0.95;

    background-color: transparent;

    border: 1px solid #ee4d51;

}

.global {

    padding-bottom: 0;

    padding-top: 15px;

    padding-left: 14px;

}

h1.presence {

    text-align: left;

    font-size: 30px;

    font-weight: 600;

}

img.singapore_logo {

    float: left;

    margin-right: 19px;

}

h2.singapore_title {

    font-size: 22px;

    font-weight: 600;

}

a.email_id,

p.address_detail {

    font-size: 16px;

    color: #000;

}

.review-name > p,

p.address_detail {

    margin-bottom: 0;

}

.add_detail {

    padding-top: 10px;

}

.center-align,

.featute-img-box,

.india_detail .singapore,

.logo-app,

.singapore_detail .singapore,

.team-box .row,

.zegofit-screenshot .row {

    display: flex;

    align-items: center;

}

a.tel_india {

    color: #000;

    display: block;

}

.slider {

    background-image: url(../images/blog_detail_banner.png);

    background-repeat: no-repeat;

    background-size: cover;

    height: 550px;

    background-position-y: -30px;

}

.slider .about_us_title {

    font-size: 46px;

    width: 80%;

    line-height: 70px;

    margin: 20px auto;

}

.mobileappdevelopment {

    background-image: url(../images/Blog/mobile-app-development.jpg);

}

.clutch-celebrates-crest-coder {

    background-image: url(../images/Blog/clutch-celebrates-crest-coder.jpg);

}

.clutch-celebrates {

    background-image: url(../images/Blog/clutch-celebrates.jpg);

}

.top-mbile-app-developers {

    background-image: url(../images/Blog/top-mbile-app-developers.jpg);

}

.five-things-banner {

    background-image: url(../images/Blog/five-things-banner.jpg);

}

.app-developers-johannesburg {

    background-image: url(../images/Blog/app-developers-johannesburg.jpg);

}

.react-native-mobile-app {

    background-image: url(../images/Blog/react-native-mobile-app.jpg);

}

.outstanding-services-of-crest-coder {

    background-image: url(../images/Blog/outstanding-services-of-crest-coder.jpg);

}

.about_us_title {

    font-size: 56px;

    padding-top: 137px;

    text-align: center;

}

.blog-details {

    background-color: #f4f4f4;

}

.blog-details .bg_color {

    background-color: rgb(255 255 255 / 100%);

    margin-top: 50px;

}

p.blog_content {

    padding-left: 0;

    font-size: 18px;

}

img.blog_1_det {

    max-width: 93%;

}

hr.blog_cnt {

    width: 97%;

    border: 1px solid #0072bc !important;

    height: 0;

}

p.share_with {

    font-size: 19px;

    padding-right: 26px;

    display: inline-block;

}

.category_detail i.fa {

    margin: 10px;

}

h2.blog_name,

h3.blog_name {

    font-size: 24px;

    background-color: #fff;

    padding-bottom: 18px;

    padding-top: 18px;

    padding-left: 15px;

}

h4.related_post_title {

    padding: 20px;

    background-color: #f1f1f1;

    color: #000;

    margin-top: 0;

}

.bg_color_right,

.bg_color_right_form {

    margin-left: 29px;

    padding: 20px;

    background-color: #fff;

    margin-top: 47px;

    width: 100%;

    float: left;

    margin-bottom: 48px;

}

h3.categories_list {

    padding-bottom: 27px;

}

span.cat_count {

    position: absolute;

    right: 15px;

}

hr.blog_category_line {

    width: 100%;

    border-top: 1px solid #000 !important;

}

.width_28 {

    width: 28%;

    float: left;

}

.width_72 {

    width: 72%;

    float: left;

}

h5.recent_post_title {

    font-size: 16px;

    padding-top: 0;

    padding-left: 12px;

    margin-top: 0;

}

p.read_more_rec_post {

    padding-top: 0;

    padding-left: 13px;

    font-size: 17px;

    padding-bottom: 0;

}

h2.form_title_lets {

    text-align: center;

    padding-top: 00px;

}

.container-contact100 {

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    padding: 15px;

    margin-top: 2rem;

}

.bg_color_right_form .wrap-contact100 {

    width: 100%;

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #243762;

    padding: 20px;

    box-shadow: none;

}

.wrap-input100 {

    width: 100%;

    border-bottom: 2px solid #d9d9d9;

    padding-bottom: 13px;

    margin-bottom: 27px;

}

.contact100-form select#budget {

    width: 100%;

    height: 35px;

    border: 0;

    background-color: transparent;

    font-size: 14px;

    color: #adadad;

}

.contact100-form .input100:focus {

    outline: 0;

    border: none;

}

.contact100-form input.input100:focus,

.contact100-form textarea.input100:focus {

    border-color: transparent !important;

    border-bottom: none !important;

    box-shadow: none !important;

}

input.input100 {

    height: 40px;

}

.contact100-form .input100 {

    display: block;

    width: 100%;

    background: 0 0;

    font-size: 14px !important;

    color: #333;

    line-height: 1.2;

    padding: 0 5px;

    border: none !important;

}

.focus-input100 {

    position: absolute;

    display: block;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

}

.focus-input100::before {

    content: "";

    display: block;

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    -webkit-transition: 0.4s;

    -o-transition: 0.4s;

    -moz-transition: 0.4s;

    transition: 0.4s;

    background: #7f7f7f;

}

.contact100-form .blog_btn {

    display: inline-block;

    padding: 9px 30px;

    line-height: 1.4;

    background: #ee4d51;

    border-radius: 8px;

    border: 1px solid #ee4d51;

    color: #fff;

    position: relative;

    text-transform: initial;

    font-size: 14px;

    transition: 0.3s;

    margin-bottom: 2rem;

}

@media screen and (min-width: 1440px) {

    .case-study-banner .container {

        width: 1300px;

    }

}

@media screen and (max-width: 1400px) and (min-width: 1025px) {

    .services_section .owl-nav {

        bottom: -30px;

        width: 100%;

        left: 0;

    }

}

@media only screen and (min-width: 991px) {

    .d-none-ipad,

    .mobile_menu {

        display: none;

    }

    .d-none-mobile {

        display: block;

    }

    .request-loade:after {

        height: 300px;

        width: 300px;

    }

}

@media (max-width: 992px) {

    .review-name {

        text-align: center;

        margin-bottom: 10px;

    }

    .banner_para .custom_software_d_content {

        font-size: 18px;

    }

    h1 {

        font-size: 26px;

    }

    .request-loade:after {

        display: none;

    }

    .navbar-nav {

        list-style-type: none;

        float: left;

        display: block;

    }

    .php_banners {

        background-image: none;

    }

    .well .about_us_title {

        font-size: 34px;

        padding-top: 100px;

    }

    img.iphone_app {

        margin-top: 50px;

        max-width: 93%;

        margin-bottom: 30px;

    }

}

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

    .contact_form,

    .custom_software_d_content,

    .drpdnw_btm a,

    .footer_link,

    .rfqmobile,

    .ser_2,

    .title_web,

    .tstmnal_items {

        text-align: center;

    }

    .content_website {

        padding-top: 10px;

        padding-bottom: 50px;

        position: relative;

    }

    img.whatson {

        width: 100%;

        position: unset;

    }

    .jivraj_img {

        padding-top: 10px;

        padding-bottom: 10px;

    }

    img.jivraj {

        width: 100%;

        float: right;

        margin-right: 0;

    }

    .whatson_img {

        padding-bottom: 0;

    }

    .bg_no,

    .php_bg {

        font-size: 50px !important;

        top: -30px !important;

    }

    .blog_title,

    .drpdnw_btm a {

        font-size: 16px;

        font-family: VarelaRound-Regular;

    }

    .join_team_item {

        padding: 1rem 0;

        margin-bottom: 0;

        margin-top: 0;

    }

    .ser_2 {

        padding-top: 4px;

    }

    #solutions .bg_no,

    #solutions1 .bg_no,

    .vision .bg_no {

        font-family: VarelaRound-Regular;

        font-weight: 600;

        font-size: 50px;

        position: absolute;

        top: -30px;

        z-index: 0;

        color: rgba(0, 0, 0, 0.07);

        left: 20px;

        right: 0;

    }

    .service_item {

        margin: 0 !important;

        width: 100%;

        padding: 20px;

        box-shadow: 0 0 15px rgb(0 0 0 / 8%);

        height: auto;

    }

    .services_section {

        padding: 2rem 0;

    }

    .mb-4 {

        margin-bottom: 2rem;

    }

    img.vision_img {

        max-width: 90%;

        padding-top: 40px;

        padding-bottom: 40px;

    }

    .footer_link ul li a {

        font-size: 13px;

    }

    .contry {

        height: 100%;

        padding: 30px 0 0;

    }

    .footer_link {

        margin-bottom: 3rem;

    }

    .footer_link h6 a {

        color: #ee4d51;

        font-size: 14px;

    }

    .contact_us_form {

        padding: 0;

    }

    .fa_icons i {

        border-radius: 6px;

    }

    .contact_form {

        padding-top: 30px;

        padding-bottom: 30px;

    }

    .mb-7 {

        margin-bottom: 4rem;

    }

    .blog_details {

        padding: 3rem 24px;

    }

    .blog_title {

        color: #696969;

        line-height: 1.4;

        margin-bottom: 1rem;

    }

    .owl-carousel.owl-drag .owl-item,

    .port_box {

        padding: 15px;

    }

    .tstmnal_items {

        padding: 0 !important;

    }

    .tstmnal_items img {

        width: 70px !important;

        margin: 0 auto;

    }

    .d-none-mobile,

    .menu__breadcrumbs .menu_icon,

    .rocket-section,

    .testimonial_slider .owl-nav,

    .top_header {

        display: none;

    }

    .testimonial {

        padding: 40px 0;

    }

    .logo_slider {

        padding-top: 5px;

    }

    .ml-40 {

        margin-left: 0;

    }

    div#solutions .services .col-xs-6.col-md-3.col-sm-3:nth-of-type(10),

    div#solutions .services .col-xs-6.col-md-3.col-sm-3:nth-of-type(6),

    div#solutions1 .services .col-xs-6.col-md-3.col-sm-3:nth-of-type(10),

    div#solutions1 .services .col-xs-6.col-md-3.col-sm-3:nth-of-type(6) {

        clear: both;

    }

    #work {

        padding-top: 24px;

        padding-bottom: 2em;

    }

    .blog {

        margin-bottom: 30px;

    }

    .prjct_nm {

        color: #000;

        font-family: VarelaRound-Regular;

        font-weight: 600;

        font-size: 26px;

        margin-bottom: 0;

    }

    .portfolio_new {

        padding: 20px;

        border-radius: 14px;

        margin-bottom: 30px;

    }

    .prjct_ctgr {

        font-size: 14px;

        margin-bottom: 1rem;

    }

    .navbar-nav {

        list-style-type: none;

        float: left;

        display: block;

    }

    .navbar-brand > img {

        display: block;

        width: 150px;

        margin-top: 1px;

    }

    .mainhome_icon {

        width: 14px;

        margin-right: 5px;

        margin-top: -2px;

        vertical-align: baseline;

    }

    .rfqmobile {

        position: absolute;

        bottom: 12rem;

        width: 100%;

    }

    .contact_btn {

        width: 250px;

    }

    .drpdnw_btm {

        position: absolute;

        border-top: none;

        bottom: 2rem;

    }

    .drpdnw_btm a {

        float: none;

        display: inline-block;

        color: #afafaf;

        padding: 14px 17px;

        text-decoration: none;

        position: relative;

    }

    .menu__breadcrumbs a:not(:last-child)::after {

        color: #656565 !important;

    }

    .fixed_btn {

        letter-spacing: 0;

        text-decoration: none !important;

        text-transform: uppercase;

        width: 80px;

        z-index: 2;

        height: auto;

        background-color: #000;

        border-radius: 100px 0 0 100px;

        text-align: center !important;

        padding: 5px 0 5px 8px !important;

        display: inline-block;

        font-family: VarelaRound-Regular !important;

        color: #fff !important;

        font-size: 10px !important;

        font-weight: 600;

        border: 2px solid #000;

        transition: 0.5s;

        margin-top: 0;

        position: fixed;

        right: 0;

        top: 50%;

        line-height: 1.2;

    }

    .panel {

        padding: 2.5rem 0;

    }

    .banner_custom_software {

        padding-left: 20px;

        text-align: center;

    }

    .bg_no {

        font-size: 55px;

    }

    .main_title {

        font-size: 34px;

    }

    .sb_title {

        font-size: 16px;

        letter-spacing: 0.5px;

    }

    .new_port_circadian {

        width: 70%;

        max-width: 100%;

        position: relative;

        top: auto;

        left: 0;

        right: 0;

        text-align: center;

        margin: 0 auto;

        bottom: -30px;

    }

}

.logo-video,

.requirement h1.about_us_title {

    text-align: left;

}

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

    .about_us_title,

    .case_study_banner_img,

    .clutch_slider,

    .fa_icons,

    .footer_button,

    .hire_ded_dev_bg_cl,

    .project_ss,

    .requirement h1.about_us_title,

    .title,

    .well.hire h3.main_title.hire_modal.mt-3.mb-3 {

        text-align: center;

    }

    .branch-office .india_detail p,

    .branch-office .singapore_detail p {

        min-height: 0 !important;

    }

    .branch-office .india_detail,

    .branch-office .singapore_detail {

        min-height: auto !important;

    }

    .five-things-banner h1.about_us_title,

    .mobileappdevelopment h1.about_us_title,

    .outstanding-services-of-crest-coder h1.about_us_title {

        color: #333;

    }

    .category_detail .row,

    .category_detail h3.blog_name,

    .footer .hr_line,

    .hr_line_logo,

    .portfolioFilter,

    .project_result,

    .snapshot_title h1.about_us_title,

    .snapshot_title hr {

        display: none;

    }

    #rfqmodal .modal-header,

    .case-study-list {

        display: block !important;

    }

    #rfqmodal .modal-header {

        padding: 0 5px;

        border-bottom: none;

    }

    .model-contact-info a {

        width: 100%;

        display: block;

    }

    #rfqmodal .fa_icons {

        position: relative;

        padding-top: 10px;

        padding-bottom: 10px;

    }

    #rfqmodal .fa_icons a {

        display: inline-block;

        margin: 10px;

    }

    #rfqmodal .fa_icons a i {

        color: #333 !important;

        background-color: transparent !important;

        padding: 0 !important;

    }

    .shellby_features_title h3 {

        margin-top: 0;

        padding-top: 0;

        padding-bottom: 0;

    }

    .clutch,

    .faq-area .panel-group {

        padding-right: 0;

    }

    .solution_title h1.about_us_title {

        margin-top: 0;

        margin-bottom: 0;

    }

    .solution_title hr.underline_casestudy {

        margin: revert revert 30px;

    }

    .akry_discription .faq-img img,

    .fr_banner,

    .img_box {

        margin: 0 auto;

    }

    .fr_banner {

        max-width: 100%;

    }

    .akry_ss .about_us_title {

        padding-top: 40px;

    }

    .circadian .about_us_title {

        padding-top: 30px;

    }

    .rs-icon-info {

        padding-bottom: 30px;

    }

    .akry_all_ss {

        left: 50%;

        transform: translateX(-50%);

    }

    .rumie-screenshot {

        height: 30vh;

    }

    .faq-title {

        padding: 20px 30px;

    }

    .hire_ded_dev_bg_cl {

        margin-bottom: 30px;

    }

    .case-stude-heading {

        padding-top: 100px;

    }

    .pl-footer-1 {

        padding-left: 0;

    }

    h1.more_project_title {

        text-align: center;

        font-size: 32px;

    }

    .banner_do img.c_logo {

        margin-top: 0;

        margin-bottom: 50px;

    }

    .requirement hr {

        display: block;

        height: 1px;

        border: 0;

        border-top: 3px solid #ee4d51;

        padding: 0;

        width: 30px;

        margin: 0 auto 30px;

    }

    .second .project_ss_1 {

        float: none;

    }

    .project_ss_1 {

        width: 70%;

        float: none;

        margin: 0 auto;

    }

    .requirement .about_us_title {

        margin-bottom: 2rem;

    }

    .features_comm .text-right {

        text-align: left;

        padding-bottom: 25px;

    }

    .clutch_slider {

        padding-bottom: 20px;

    }

    .team_photo {

        padding-top: 60px;

    }

    .our_team {

        margin-top: 10px;

    }

    .mission_con_1,

    .mission_con_2,

    .vision_con {

        padding-right: 20px;

        padding-left: 20px;

    }

    .eye {

        padding-top: 38px;

    }

    .banner {

        background-image: none !important;

    }

    .about_us_title {

        font-size: 26px !important;

        margin-bottom: 2rem !important;

        width: 100% !important;

        line-height: 40px !important;

        padding-top: 50%;

    }
    .introduction:before{
        display: none;
    }

    .slider {

        margin-top: 0;

        height: 420px;

        background-image: none;

    }

    .all_rights_reserved {

        font-size: 12px;

    }

    .bottom_footer {

        padding: 20px 0;

    }

    .footer {

        height: auto;

        padding: 40px 0;

    }

    .footer_button {

        padding-top: 27px;

    }

    .bg_color_right,

    .bg_color_right_form {

        margin-left: 0;

    }

    .bg_color {

        padding: 70px 30px;

    }

    .fa_icons {

        padding-top: 17px;

    }

    .mobile_margin {

        margin-top: 0 !important;

    }

    .tech {

        height: 140px;

    }

    .item {

        height: auto;

    }

    .panel {

        height: auto !important;

        padding: 2.5rem 0;

    }

    .clutch,

    .good_firms {

        padding-top: 10px;

        padding-bottom: 0;

        text-align: center;

    }

    #work {

        padding-bottom: 0 !important;

    }

    .good_firms {

        padding-left: 0;

        width: 50%;

        float: left;

    }

    .clutch_border,

    .good_firms_border {

        border: 10px solid #e7e7e7;

        border-radius: 50%;

        height: 100px;

        width: 100px;

    }

    .mycontainer {

        width: 100%;

        padding-left: 15px;

        padding-right: 15px;

    }

    .banner_custom_software,

    span.whats_your {

        padding-left: 0;

        padding-right: 0;

    }

    .banner_custom_software {

        margin-top: 7rem;

    }

    .custom_software_d {

        padding-top: 20px;

        text-align: center;

        font-size: 18px;

    }

    .slider_title {

        text-align: center;

        font-size: 28px;

        height: 70px;

    }

    .custom_software_d_content {

        text-align: center;

        font-size: 16px;

    }

    .main_title {

        font-size: 24px;
        margin-top: 0;

    }

}

.next-pre a:focus,

.next-pre a:hover {

    color: #a6a6a6;

    background: 0 0;

}

@media only screen and (min-width: 992px) {

    .mobile-only {

        display: none;

    }

}

@media screen and (max-width: 1024px) and (min-width: 992px) {

    .good_firms {

        padding-top: 0;

    }

    .portfolio_new {

        padding: 40px;

    }

    .mobile_img {

        position: absolute;

        bottom: -190px;

        left: 36%;

        z-index: 10;

        width: 37%;

    }

    .navbar a {

        font-size: 14px !important;

    }

    .rocket-section #bg1,

    .rocket-section #bg2,

    .rocket-section #bg3 {

        width: 435px;

    }

    .rocket-section {

        position: absolute;

        left: 50%;

        top: 65%;

    }

    .rocket-section #stars {

        position: absolute;

        z-index: 5;

        width: 480px;

        left: 0;

        bottom: 60px;

    }

    .ml-40 {

        margin-left: 0;

    }

    .banner_custom_software {

        padding-left: 20px;

        text-align: left;

    }

    .panel {

        padding: 0;

    }

    .service_item {

        margin: 10px;

    }

    .services_section .owl-nav {

        display: none;

    }

    .new_port_circadian {

        top: 0;

    }

}

@media only screen and (min-device-width: 1025px) and (max-device-width: 1600px) {

    .testimonial {

        padding: 40px 0;

    }

    .bottom_footer {

        padding: 30px 0;

    }

    .services {

        padding-top: 1rem;

        padding-bottom: 8rem;

    }

    div#solutions .services,

    div#solutions1 .services {

        padding-top: 1rem;

        padding-bottom: 2rem;

    }

}

@media screen and (max-width: 991px) and (min-width: 768px) {

    .panel {

        padding: 3rem 0;

    }

}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .rumie-screenshot {

        height: 40vh;

    }

    .about_us_title {

        font-size: 26px;

    }

    .bg_color_right,

    .bg_color_right_form {

        margin-left: 0;

    }

    h3.content_app_subtitle {

        padding-top: 0;

    }

    .content_website {

        padding-top: 50px;

        padding-bottom: 0;

    }

    .well .about_us_title {

        font-size: 36px;

        padding-top: 150px;

    }

    .php_bg {

        font-size: 50px !important;

        top: -5px !important;

    }

    .web_image img {

        margin-top: 100px;

    }

    img.whatson {

        width: 410px;

        position: absolute;

        right: -30px;

        max-width: inherit;

        top: 0;

    }

    div#solutions .services,

    div#solutions1 .services {

        margin-bottom: 20px;

    }

    .our_team {

        margin-top: 0;

        padding-bottom: 3rem;

    }

    .mission_con_1,

    .mission_con_2,

    .vision_con {

        padding-right: 0;

    }

    .vision {

        padding-top: 10%;

    }

    .mycontainer {

        width: 100%;

        padding-right: 15px;

        padding-left: 15px;

        margin-right: auto;

        margin-left: auto;

    }

    .dropdown .dropbtn {

        padding: 29px 7px !important;

    }

    .navbar a {

        padding: 29px 10px !important;

    }

    a.main_menu {

        padding: 10px !important;

    }

    a.main_menu .h4,

    h4 {

        font-size: 16px;

    }

    a.navbar-brand {

        padding-top: 0 !important;

    }

}

@media screen and (max-width: 1024px) and (min-width: 991px) {

    .mission_con_1,

    .mission_con_2,

    .vision_con {

        font-size: 20px;

    }

    .ser_1 {

        padding-top: 18px;

    }

    .services .row .col-xs-6.col-md-3.col-sm-3:nth-of-type(10),

    .services .row .col-xs-6.col-md-3.col-sm-3:nth-of-type(6) {

        clear: both;

    }

    .our_team {

        margin-top: 0;

        padding-top: 93px;

    }

}

@media screen and (max-width: 1450px) and (min-width: 895px) {

    #work {

        padding-top: 3rem;

        padding-bottom: 0;

    }

}

#cookieNotice {

    position: fixed;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 6px 6px rgb(0 0 0 / 25%);

    font-family: inherit;

    z-index: 999997;

    right: 30px;

    bottom: 30px;

    max-width: 395px;

    background-color: #fff;

}

#cookieNotice .btn-wrap button {

    flex-grow: 1;

    padding: 0 7px;

    margin: 0 5px 10px;

    border-radius: 20px;

    cursor: pointer;

    white-space: nowrap;

    min-width: 130px;

    line-height: 36px;

    border: 1px solid #ee4d51;

    font-family: inherit;

    font-size: 16px;

    transition: box-shadow 0.3s;

    color: #fff;

    background: #ee4d51;

    width: 100%;

}

#cookieNotice .btn-wrap button:hover {

    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 30%);

    transform: translate3d(0, -1px, 0);

}

#slider-mela {

    background: #2e5090;

}

div#slider-mela img.our_work_image {

    width: 80% !important;

}

.Digital-Solution {

    background: #f6f6f6;

    padding: 60px 0;

}

.melamenu {

    background-image: url(../images/projects/mela-menus/banner-mela-menu.png);

    background-size: 45%;

    background-position: right center;

    background-repeat: no-repeat;

}

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

    .melamenu {

        background-image: none;

    }
    .sos-alert img {
        max-width: 60%!important;
        padding: 0 30px;
        margin: 0 auto;
    }
    .sos-alert{
        text-align: center;
    }
    .case-stude-heading.sos:before{
        display: none;
    }
    .whysos .row {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .safety-app-img img {
        padding: 0px 10px;
        max-width: 100%;
    }
    .feature-card {
        width: 100%!important;
    }
    .tech-box {
        margin: 10px 10px!important;
        padding: 10px 10px!important;
    }
    .alert-safety-app {
        flex-direction: column;
    }
    .whydesc, .whyimg {
        width: 100%!important;
    }

}

@media screen and (min-width: 992px) {

    .banner_image.meal {

        display: none;

    }

}

div#solutions .services .col-xs-6.col-md-3.col-sm-3:nth-of-type(6) {

    clear: both;

}

.item-heading {

    -ms-flex-align: center !important;

    align-items: center !important;

    display: flex !important;

}

.item-heading span {

    font-size: 80px;

    font-weight: 500;

    color: #c2cad8;

    line-height: 1.3;

    margin-right: 10px;

}

.item-heading h3 {

    font-size: 30px;

    font-weight: 500;

    color: #333;

    line-height: 1.3;

    text-transform: capitalize;

}

.case-stude-page .case-stude-heading {
    background-color: #fff;
    padding: 160px 0;
    color: #fff;
    margin-bottom: 0;
}

.case-study-list {

    margin: 60px 0;

    display: flex;

    align-items: center;

}

.case-desc .case-quote {

    font-weight: 600;

    letter-spacing: 1px;

}

.get-quote-section {

    padding-bottom: 60px;

}

.popupBox,

.popupBox-form {

    margin: 0 auto;

    padding: 30px;

}

.popupBox {

    display: none;

    position: fixed;

    background: rgba(0, 0, 0, 0.5);

    left: 0;

    right: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    z-index: 99999999999999;

    top: 0;

    overflow: auto;

}

.popupBox-form {

    box-shadow: 0 0 10px rgb(0 0 0 / 30%);

    background: #fff;

    min-height: 90%;

    width: 90%;

    position: relative;

}

.popupBox .btn {

    display: inline-block;

    position: absolute;

    width: 34px;

    height: 34px;

    text-align: center;

    border-radius: 100%;

    color: #fff;

    top: -15px;

    right: -15px;

    cursor: pointer;

    background: #040404;

}

textarea {

    resize: none;

}

.popupBox form#contact_us_form .form-control {

    width: 100%;

    background-color: #fff;

    color: #000;

    border: 1px solid #393939;

    box-shadow: none;

    border-radius: 14px !important;

    padding: 6px 10px;

    font-size: 16px;

    -webkit-appearance: none;

}

.btn-dark {

    color: #fff;

    background-color: #343a40;

    border-color: #343a40;

    padding: 14px 20px;

    border-radius: 0;

    margin-top: 10px;

}

.btn-dark:hover {

    color: #fff;

    background-color: #23272b;

    border-color: #1d2124;

}

.mela-banner {

    background-image: linear-gradient(90deg, #abc5f7 0, #dce8ff 100%) !important;

    padding: 60px 0;

    position: relative;

    overflow: hidden;

}

.mela-banner .mycontainer {

    position: relative;

    z-index: 99;

}

.mela-banner:after {

    position: absolute;

    content: "";

    height: 250px;

    width: 250px;

    z-index: 1;

    background: 0 0;

    border: 5px solid #f6f9ff;

    border-radius: 20%;

    top: 50%;

    right: 10px;

    transform: translateY(-50%) rotate(45deg);

}

.casestudy-section:nth-of-type(2n):after,

.casestudy-section:nth-of-type(odd):after {

    position: absolute;

    height: 630px;

    width: 590px;

    background-color: rgba(46, 80, 144, 0.2);

    top: -100px;

    z-index: -1;

    transform: rotate(45deg);

    content: "";

}

.casestudy-section {

    position: relative;

    overflow: hidden;

}

.casestudy-section:nth-of-type(odd):after {

    left: -100px;

}

.casestudy-section:nth-of-type(2n):after {

    right: -100px;

    border-radius: 50%;

}

.case-overview .row {

    padding: 100px 0 0;

}

.case-overview .container .row:last-of-type {

    padding-bottom: 100px;

}

.call-to-action .row {

    padding: 100px 0;

}

.case-overview li,

.case-overview p {

    font-weight: 500;

    color: #9b9b9b;

    letter-spacing: 0.5px;

    text-align: justify;

}

.case-overview h2 {

    color: #868686;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    position: relative;

}

.case-overview h2:after {

    content: " ";

    display: block;

    border-bottom: 1px solid #c50000;

    border-top: 1px solid #c50000;

    height: 5px;

    background-color: #f8f8f8;

    width: 110px;

    border-right: 1px solid #c50000;

    margin-top: 8px;

}

.call-to-action {

    background-color: transparent;

    padding: 60px 0;

    color: #fff;

    margin-bottom: 0;

    background-image: url(../images/case_study/case-studies.jpg);

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

}

.call-to-action h3 {

    font-size: 40px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 76px;

}

.call-to-action a {

    background: #ee4d51;

    padding: 10px 40px;

    color: #fff;

    font-weight: 600;

    letter-spacing: 1px;

}

.website-page {

    background: #fff;

    padding: 100px 0 60px;

}

.website-page p {

    font-size: 18px;

    margin-bottom: 60px;

}

@media only screen and (max-width: 600px) {
    .case-stude-page .case-stude-heading {
        background-color: transparent;
        padding: 100px 0 0px 0;
        color: #fff;
        margin-bottom: 0;
    }

    .website-page .owl-carousel .owl-stage-outer {

        overflow: unset;

    }

    .screenshot .screenshot_slider img {

        width: 50% !important;

    }

    .screenshot_slider {

        display: block;

    }

    .screenshot_slider img {

        margin-left: auto;

        margin-right: auto;

    }

    .problem-text {

        text-align: justify;

    }

    .where-img img {

        max-width: 300px !important;

    }

    .feature,

    .where-img {

        margin-top: 0 !important;

    }

    .pro-solu {

        padding-top: 0 !important;

    }

    .screenshot .owl-item .item {

        margin-top: 0 !important;

        margin-bottom: 0 !important;

    }

    .featute-img-box {

        margin-top: 30px;

        margin-bottom: 30px;

    }

}

.website-page p span {

    border: 2px solid #d5d5d5;

    margin: 5px;

    padding: 5px 10px;

    color: #000;

    display: inline-block;

    font-size: 15px;

    border-radius: 15px;

}

.bg-gray,

.post-details {

    background: #f2f2f2;

}

.bg-white,

.finskol-feature .fea {

    background: #fff;

}

.next-pre {

    display: flex;

    justify-content: space-between;

    margin: 20px 0;

}

.next-pre a {

    color: #333;

    background: 0 0;

    padding: 7px 10px;

    border-radius: 4px;

    font-size: 18px;

}

.contact-page #budget:focus,

.next-pre a:focus,

.ui-slider .ui-slider-handle:focus {

    outline: 0;

}

.website-details b {

    color: #000;

    font-weight: 700;

    margin-bottom: 20px;

    margin-top: 20px;

    display: inline-block;

}

.owl-carousel {

    max-width: 100%;

    overflow: hidden;

}

.website-details p {

    color: #8d97ad;

    line-height: 1.7em;

    font-size: 18px;

    margin-bottom: 1em;

}

.website-details ul li {

    color: #000;

    line-height: 1.7em;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0.5px;

}

a.btn-custom {

    background-color: #ee4d51;

    color: #fff;

    border: 2px solid #ee4d51;

    padding: 10px 20px;

    transition: 0.3s;

}

a.btn-custom:hover {

    color: #ee4d51;

    background-color: #fff;

    border: 2px solid #ee4d51;

}

.owl-controls .owl-buttons .owl-next,

.owl-controls .owl-buttons .owl-prev {

    top: -13%;

    border-radius: 50px;

    transition: background 0.5s;

    background: #fff;

    position: absolute;

}

.haveproject {

    background: #f5f7fa;

    padding: 70px 0;

}

.owl-controls .owl-buttons .owl-prev {

    left: 15px;

    padding: 0 18px 0 15px;

    box-shadow: 3px 14px 25px -10px #92b4d0;

}

.owl-controls .owl-buttons .owl-next {

    right: 15px;

    padding: 0 15px 0 18px;

    box-shadow: -3px 14px 25px -10px #92b4d0;

}

.owl-controls .owl-buttons .owl-next:after,

.owl-controls .owl-buttons .owl-prev:after {

    content: "\f104";

    font-family: FontAwesome;

    color: #333;

    font-size: 30px;

}

.owl-controls .owl-buttons .owl-next:after {

    content: "\f105";

}

.clutch-review {

    background-color: #f2f2f2;

    padding: 60px 0;

}

.clutch-review .rumie_ss_title {

    padding-top: 0;

    margin-top: 0;

    margin-bottom: 40px;

}

.reviewer img {

    width: 130px;

    border-radius: 50%;

    border: 3px solid #d3d3d3;

    padding: 3px;

    background: #fff;

}

.review-layout,

.reviews,

.service-cat {

    align-items: center;

    display: flex;

}

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

    .review-layout {

        display: flex;

        flex-flow: column;

    }

    .review-layout .col-md-4 {

        order: 1;

    }

    .review-layout .col-md-8 {

        order: 2;

    }

    .reviewer img {

        width: 100px;

        margin-bottom: 20px;

    }

    .reviewer p {

        font-size: 18px;

    }

    .reviewer b {

        font-size: 16px;

        margin-bottom: 30px;

        display: block;

    }

    .clutch-review .rumie_ss_title {

        font-size: 22px;

    }

    .faq-img img.img-responsive {

        padding: 0 50px;

    }

    .case-details h3 {

        font-size: 16px;

        letter-spacing: 0;

        margin-bottom: 0;

    }

}

.reviewer p {

    font-size: 22px;

    letter-spacing: 0.5px;

    margin-bottom: 10px;

}

.project-ttl p,

.reviewer b,

.top-dev li a {

    font-size: 18px;

}

.reviewer p i {

    color: #dedede;

    line-height: 20px;

    padding: 0 10px;

}

.project-ttl {

    text-align: center;

    border: 1px solid #d8d8d8;

    padding: 10px;

}

.project-ttl p {

    color: #333;

    margin-bottom: 0;

}

.project-ttl span {

    color: #333;

    font-size: 14px;

    letter-spacing: 0.5px;

}

.project-bg {

    background-color: #f2f2f2;

    display: inline-block;

    width: 100%;

}

.project-bg .main_title,

.project-bg .project-ttl p,

.project-bg .project-ttl span,

.project-bg h1.more_project_title {

    color: #fff !important;

}

.logo_slider .snapshot_title hr.underline_casestudy,

.solution_title hr.underline_casestudy {

    margin: 20px auto;

}

.project_title ol {

    padding-left: 20px;

}

.texi-owner {

    border-radius: 6px;

    overflow: hidden;

}

.etexibooking.bg-gray {

    background: #f6f6f6;

}

.zegofit {

    background-color: #1d1d1b;

}

.zegofit .website_title,

.zegofit h1.about_us_title {

    color: #f5c951;

}

.core_features_ecards.zegofit {

    background-image: url(../images/projects/zegofit/bg.png);

    background-position: bottom;

    background-size: cover;

    background-repeat: no-repeat;

    margin-top: -100px;

    padding-top: 150px;

    padding-bottom: 80px;

    background-color: #fff;

}

.page-maping ul {

    padding: 0;

    margin: 40px 0 0 30px;

}

.page-maping ul li {

    line-height: 75px;

    font-size: 18px;

    background-image: url(../images/list.png);

    background-repeat: no-repeat;

    background-position: 0 0;

    padding-left: 40px;

    padding-top: 0;

    background-size: 35px;

    margin-top: -32px;

}

.page-maping hr {

    background: #e2e2e2;

    height: 1px;

    width: 100%;

    margin: 10px 0 20px;

    border: none;

}

.process-box,

.right-box {

    border-radius: 8px;

    border-bottom: 4px solid #ee4d51;

    background: #fff;

}

.page-maping h4 a {

    color: #000;

    font-weight: 500;

    letter-spacing: 1px;

    font-size: 16px;

    text-transform: uppercase;

}

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

    .page-maping ul {

        padding: 0;

        margin: 0 0 0 30px;

        list-style-type: circle;

    }

    .page-maping ul li {

        line-height: 26px;

        font-size: 18px;

        background-image: none;

        background-repeat: no-repeat;

        background-position: 0 0;

        padding-left: 10px;

        padding-top: 0;

        background-size: 35px;

        margin-top: 0;

        margin-bottom: 14px;

    }

    .page-maping h4 a {

        margin: 20px 0 10px;

        display: inline-block;

    }

    .sitemeap .about_us_title {

        padding-top: 50px;

        margin-bottom: 20px;

    }

}

.post .about_us_title {

    font-size: 42px;

    padding-top: 0;

    margin: 0 0 20px;

}

.process-box {

    display: flex;

    align-items: flex-start;

    box-shadow: 0 0 25px rgb(0 0 0 / 9%);

    padding: 30px 15px;

}

.process-box i {

    padding: 0 10px;

    font-size: 40px;

}

.process-box h3 {

    margin-top: 0;

    font-size: 20px;

    margin-bottom: 10px;

}

.post-details ul {

    list-style-image: url(../images/post/check.png);

    padding-left: 20px;

    line-height: 26px;

}

.post-details h1.about_us_title {

    padding-top: 0;

    padding-bottom: 40px;

    font-size: 42px;

}

.post-details a,

.post-details b,

.post-details h3,

.post-details li,

.post-details p {

    letter-spacing: 0.5px;

    line-height: 30px;

}

.right-box {

    padding: 20px 20px 40px;

    box-shadow: 0 0 20px rgb(0 0 0 / 10%);

}

.right-box .form-control {

    margin-bottom: 20px;

    border: none;

    outline: 0;

    box-shadow: none;

    border-bottom: 2px solid #dadada;

}

.banner_custom_software .slider_logo .row .col-xs-3.col-md-3:nth-of-type(2n) {

    padding: 0 5px;

}

.zegofit {

    padding: 60px 15px 70px;

}

.zegofit_bg {

    background-color: #f3c446;

}

.dipdap .img_box {

    width: 55px;

    padding: 15px;

    border: 1px solid #46dc9d;

    border-radius: 0.45rem;

    margin-bottom: 2rem;

    text-align: center;

    font-size: 20px;

    color: #45d99f;

}

.e-texi-app {

    background: #c82536;

    background: linear-gradient(150deg, rgb(200 37 54) 0, rgb(12 86 162) 93%, rgb(40 104 169) 100%);

}

.etexi-booking .about_us_title {

    text-align: center !important;

}

.admin-view {

    border: 3px solid rgba(0, 0, 0, 0.1);

}

.team-box p {

    line-height: 24px;

    margin-bottom: 20px;

    color: #000;

}

.team-box b {

    display: block;

    margin-bottom: 20px;

}

.teams-member {

    padding: 30px 15px;

}

.team-box {

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    padding: 20px 30px;

}

.team-box strong {

    color: #acacac;

}

.team-box h2 {

    margin-bottom: 4px;

}

.logo-video img {

    padding-top: 00px;

    width: 90% !important;

}

.logo-video img.c-logo {
    width: 40% !important;

    margin: 0 auto;

}

div.videomodel {

    z-index: 9999999999;

    top: 50%;

    transform: translateY(-40%);

    height: 100%;

}

div.videomodel .modal-dialog {

    width: 80%;

    margin: 30px auto;

}

div.videomodel .modal-body {

    padding: 10px;

}

div.videomodel .modal-body iframe {

    width: 100%;

    height: 70vh;

}

.clients-video .play-icon {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 20% !important;

    transform: translate(-50%, -50%);

    filter: grayscale(1);

    transition: 0.3s;

}

.tstmnal_items:hover .play-icon {

    filter: grayscale(0);

}

div.videomodel button.close {

    position: fixed;

    top: -20px;

    right: -20px;

    z-index: 99999999;

    background: #000;

    opacity: 0.6;

    height: 30px;

    width: 30px;

    border-radius: 50%;

    color: #fff;

}

.finskol-feature {

    background-color: #f2f2f2;

    margin: 30px 0;

}

.dropdown-content .column span,

ul#submenu-3-1 span {

    font-size: 12px;

    color: #ee4d51;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.column {

    height: 500px;

}

.dropdown-content .column span {

    padding-left: 10px;

}

ul#submenu-3-1 span {

    padding-left: 16px;

    line-height: 12px;

}

.where-img img {

    max-width: 400px;

}

.about,

.pro-solu {

    padding: 5rem 0;

}

.pro-padding,

.screenshot {

    padding: 3rem 0;

}

.feature {

    background-image: url(../images/projects/wheres/feature-img-bg.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: top;

    padding-bottom: 60px;

    margin-top: 60px;

    padding-top: 50px;

}

.fea-title h4 {

    color: maroon;

}

.featute-img-box {

    justify-content: center;

}

.section-padding {

    margin: 0 auto;

    padding: 0 0 50px;

}

.owl-item .item {

    transform: translate3d(0, 0, 0);

}

.screenshot_slider .owl-item .item img {

    -webkit-transition: 0.3s;

    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);

    -o-transition: 0.3s;

    transition: 0.3s;

    -webkit-transform: scale(0.7);

    -ms-transform: scale(0.8);

    transform: scale(0.8);

}

.screenshot_slider .owl-item.center .item img {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

}

.screenshot_slider .owl-nav button {

    font-size: 24px !important;

    margin: 10px;

    color: maroon !important;

}

@media screen and (min-width: 1900px) {

    .home-heros {

        min-height: 80vh;

    }

    .rocket-section {

        top: 80%;

    }

}

.testimonial .testi-dest img {

    margin: 20px 0;

}

.award-winning h1.bg_no {

    left: 0;

    right: 0;

}

img.playvideo {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100px;

    transform: translate(-50%, -50%);

    transition: 0.3s;

}

.video-link:hover img.playvideo {

    opacity: 0.9;

    transform: translate(-50%, -50%) scale(1.1);

}

.logo-app {

    gap: 20px;

    justify-content: space-between;

}

.review-name p i {

    color: #ffdf00 !important;

    font-size: 24px;

}

.logo-app h3 {

    font-size: 32px;

    color: #ee4d51;

    font-weight: 600;

    margin-bottom: 20px;

}

.review-wrapper h1 {

    font-size: 26px;

    margin-top: 0;

}

.review-heading h4,

.review-wrapper .tab-pane h3 {

    font-size: 20px;

    display: inline-block;

    padding-bottom: 2px;

    font-weight: 600;

}

.review-name {

    margin-top: 30px;

}

.review-name img {

    margin-bottom: 20px;

    max-width: 150px;

}

.review-wrapper {

    margin: 10px 0;

    letter-spacing: 1px;

}

.review-heading h4 {

    color: #484848;

    margin-bottom: 20px;

    line-height: 30px;

    border-bottom: 2px solid #484848;

}

.review-desc p {

    color: #000;

    font-size: 18px;

    line-height: 26px;

}

.review-wrapper .tab-pane h3 {

    color: #ee4d51;

    border-bottom: 3px solid #ee4d51;

}

.review-wrapper .tab-pane p {

    font-size: 18px;

    font-weight: 600;

    color: #000;

    position: relative;

    line-height: 26px;

}

.review-wrapper .tab-pane p,

.review-wrapper .tab-pane span,

.review-wrapper .tab-pane ul {

    padding-left: 30px;

}

.review-wrapper .tab-pane span {

    font-size: 18px;

    color: #000;

    display: block;

    margin-bottom: 10px;

}

.review-wrapper .nav-link {

    font-size: 16px;

    color: #000;

}

.review-wrapper .nav-tabs > li.active > a,

.review-wrapper .nav-tabs > li.active > a:focus,

.review-wrapper .nav-tabs > li.active > a:hover {

    color: #fff;

    cursor: default;

    background-color: #ee4d51;

    border: 1px solid #ddd;

    border-bottom-color: transparent;

}

.service-cat {

    gap: 20px;

    background: #f3f4ff;

    padding: 20px 15px;

    margin-bottom: 30px;

    border-radius: 4px;

    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);

    transition: 0.3s;

}

.service-cat:hover {

    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);

}

.service-cat img {

    height: 50px;

    width: auto;

}

.service-cat h1 {

    font-size: 24px;

    font-weight: 500;

    color: #b10004;

}

div.advertising h1,

div.business h1,

div.development h1,

div.itservices h1,

div.marketing h1,

div.production h1 {

    text-align: center;

    margin-bottom: 30px;

    font-size: 32px;

    font-weight: 700;

    letter-spacing: 2px;

    padding-bottom: 10px;

    display: block;

    padding-top: 10px;

    background: #ee4d51;

    color: #fff;

    border-radius: 54px;

}

.review-logos {

    margin-bottom: 30px;

    padding: 10px 20px;

}

div.videomodel.review-model {

    z-index: 9999999999;

    transform: none;

    height: auto;

    top: 0;

}

.review-lists .services:nth-of-type(2n) {

    background: #f4f4f4;

}

.review-lists div#myTabContent {

    border: 1px solid #e2e2e2;

    padding: 20px;

    box-shadow: 2px 2px 2px rgb(0 0 0 / 20%);

    border-radius: 0 0 20px 20px;

}

.over-review {

    padding: 20px 10px;

    display: flex;

}

.over-review h1 {

    color: #6c6c6c;

    font-size: 20px;

}

.over-review p {

    font-weight: 400 !important;

    margin: 0;

    font-size: 14px !important;

}

.reviews {

    text-align: center;

    border: 2px dashed #fff;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    float: left;

    justify-content: space-around;

    margin-right: 20px;

    min-width: 60px;

    background: #ee4d51;

}

.reviews p {

    margin: 0;

    color: #fff !important;

}

.nav-tabs > li > a {

    border: 1px solid #e5e5e5;

}

.review-wrapper .tab-pane p:before {

    position: absolute;

    height: 30px;

    width: 30px;

    content: "";

    background-image: url(../images/list-arrow.png);

    background-size: 20px;

    background-repeat: no-repeat;

    left: 0;

    top: 2px;

}

.text-left {

    text-align: left !important;

}

.thanks-banner {

    background-size: 24%;

    background-repeat: no-repeat;

    background-position: right 4vw bottom;

    margin-top: 0;

    background-color: #faedc1;

    background-image: url(../images/thanks.png) !important;

    padding: 15vh 0;

}

.thanks-banner .about_us_title {

    padding-top: 4vh;

}

.blog_featured.blog-details ul.listing {

    list-style-type: none;

    list-style-image: url("../images/Blog/list-icon.png");

}

.blog_featured.blog-details ul.listing li,

.editor-content ul li {

    margin: 0 0 20px;

    color: #696969;

    padding-left: 0;

    font-size: 18px;

}

.blog_featured.blog-details ul b {

    font-weight: 800;

}

div.current-opening {

    padding: 30px 0 60px;

}

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


    div.videomodel .modal-dialog {

        width: 90%;

    }

    div.videomodel .modal-body iframe {

        height: 50vh;

    }

    .center-align,

    .team-box .row,

    .zegofit-screenshot .row {

        display: block;

        align-items: unset;

    }

    .top-dev li {

        width: 100%;

        float: unset;

    }

    .post .about_us_title,

    .post-details h1.about_us_title {

        font-size: 18px;

    }

    .banner_custom_software .slider_logo .row .col-xs-3.col-md-3:nth-of-type(2n) {

        padding: 1px 10px;

    }

    .work-mobile {

        display: block;

    }

    .thanks-banner .about_us_title {

        text-align: center !important;

    }

}

.contact-page .wrap-contact100 {

    width: 100%;

    border: none;

}

.contact-page span.input-group-addon {

    background: 0 0;

    border: none;

    color: #ee4d51;

    font-size: 20px;

}

.branch-office .india_detail,

.branch-office .singapore_detail {

    background-color: #fff;

    padding: 30px 10px;

    border-radius: 10px;

    margin-bottom: 40px;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    text-align: center;

    z-index: 1;

    transition: 0.3s;

    border: 5px solid #fff;

}

.branch-office .india_detail p,

.branch-office .singapore_detail p {

    margin-bottom: 10px;

    font-size: 16px;

    letter-spacing: 0.4px;

    color: #000;

    min-height: 94px;

}

.branch-office .india_detail a,

.branch-office .singapore_detail a {

    color: #ee4d51;

    font-size: 18px;

    letter-spacing: 0.5px;

}

.branch-office .india_detail .singapore img,

.branch-office .singapore_detail .singapore img {

    width: 60px;

    display: block;

    margin: 0 auto;

    float: unset;

}

.branch-office .india_detail .singapore h2,

.branch-office .singapore_detail .singapore h2 {

    width: 100%;

    display: block;

    text-align: center;

}

.branch-office .india_detail:hover,

.branch-office .singapore_detail:hover {

    transform: scale(1.09);

    z-index: 999;

    border: 5px solid #afafaf;

}

.cube {

    position: relative;

    width: 100%;

    height: 13px;

    margin: 0 auto;

}

#light,

#light1,

#slider-range-min,

.a,

.a:before {

    position: absolute;

}

.a {

    width: 10%;

    height: 100%;

    left: 0;

    background-color: #ee4d51;

}

.a:before {

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 30px;

    background-color: rgba(0, 0, 0, 0);

}

#slider-range-min {

    width: 100%;

    left: 0;

    top: 0;

    margin: 0;

    z-index: 999;

}

.ui-slider {

    height: 13px;

    border: none;

    background: rgba(0, 0, 0, 0.1);

}

.ui-slider:after,

.ui-slider:before {

    content: "";

    position: absolute;

    left: 2px;

    width: 100%;

    font-family: "Source Sans Pro", sans-serif;

    font-size: 1.2rem;

    font-weight: 300;

    color: rgba(0, 0, 0, 0.3);

    letter-spacing: 41px;

    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);

}

.ui-slider:before {

    top: -1.4rem;

}

.ui-slider:after {

    bottom: -1.4rem;

}

.contact_us_form .contact_form,

.ui-slider-range {

    background: 0 0;

}

.ui-slider .ui-slider-handle {

    top: -8px;

    width: 26px;

    height: 20px;

    margin-left: -15px;

    padding-left: 4px;

    border: none;

    background: rgba(255, 255, 255, 0.7);

    border-radius: 2px;

    text-align: center;

    font-size: 1.2rem;

    line-height: 20px;

    color: rgba(0, 0, 0, 0.5);

    text-decoration: none;

    letter-spacing: 3px;

    cursor: pointer;

    text-shadow: 1px 1px 2px #fff;

    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

}

.contact-page #budget {

    position: relative;

    text-align: left;

    background: 0 0;

    border: none;

    margin-bottom: 8px;

    display: inline-block;

    width: 100%;

}

.textareamass {

    display: flex;

    gap: 20px;
}

.caperror {

    color: red;

    font-size: 14px;

    display: none;

    padding-left: 120px;

    margin-top: 10px;

}

#subForm input#ebcaptchainput {

    background-color: #fff;

    color: #000;

    border: none;

    border-bottom: 1px solid #ee4d51;

    border-radius: 0 !important;

    padding: 6px 0;

    font-size: 16px;

    -webkit-appearance: none;

    width: calc(100% - 120px);

    margin-left: 10px;

    outline: 0;

    box-shadow: none;

}

.rfq-left {

    background-image: url(../images/rfq-bg.jpg);

    background-size: cover;

    height: 100%;

    border-radius: 20px 0 0 20px;

    padding: 80px 40px;

}

.rfq-left .model-contact-info a {

    box-sizing: border-box;

    width: 100%;

    display: inline-block;

    padding-bottom: 0;

}

.rfq-left .popup-icons {

    border: 2px solid #fff;

    color: #fff;

    margin-right: 8px;

}

.icons-social-model a {

    color: #fff;

    margin: 20px 6px;

    height: 30px;

    width: 30px;

    border: 1px solid #ee4d51;

    display: inline-block;

    text-align: center;

    line-height: 30px;

    background: #ee4d51;

    border-radius: 4px;

}

#rfqmodal .modal-body .container > .row {

    background: #fff;

    display: flex;

    padding: 0;

    align-items: center;

    border-radius: 20px 0 20px 20px;

}

#rfqmodal .form-box .form-group {

    margin-bottom: 20px;

    position: relative;

}

form#rfq_request_form > .row .form-control {

    border: none;

    border-bottom: 2px solid #ee4d51;

}

.rfq-left .model-contact-info h3 {

    font-size: 28px;

    margin: 30px 0;

    letter-spacing: 1px;

    line-height: 38px;

}

.rfq-left .model-contact-info p {

    font-size: 18px;

    letter-spacing: 0.5px;

}

form#rfq_request_form {

    padding: 0 20px;

}

#rfqmodal .modal-body {

    top: 0;

}

#rfqmodal .close {

    background: #ee4d51;

    color: #fff;

    box-shadow: none;

    font-size: 30px;

    height: 40px;

    width: 40px;

    margin-right: -1.5%;

    border-radius: 10px 10px 0 0;

}

#applyjob .modal-body {

    background: #fff;

    padding-bottom: 30px;

}

#rfqmodal .phone_no,

#rfqmodal a.email {

    font-size: 16px !important;

}

#rfqmodal a.email span.popup-icons {

    padding-left: 7px;

}

#budget {

    font-weight: 700;

    font-size: 16px;

    margin-bottom: 8px;

}

input[type="range"] {

    -webkit-appearance: none;

    width: 100%;

    height: 8px;

    background: rgba(255, 255, 255, 0.6);

    border-radius: 5px;

    background-image: linear-gradient(#ee4d51, #ee4d51);

    background-repeat: no-repeat;

}

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    height: 20px;

    width: 20px;

    border-radius: 50%;

    background: #ee4d51;

    cursor: ew-resize;

    transition: background 0.3s ease-in-out;

}

.editor-content ul {

    list-style-type: none;

    list-style-image: url(../images/Blog/list-icon.png);

}

.editor-content h2 {

    font-size: 24px !important;

    background-color: #fff !important;

    padding-bottom: 18px !important;

    padding-top: 18px !important;

    padding-left: 15px !important;

}

.editor-content a {

    color: #ee4d51 !important;

    font-weight: 700;

}

input[type="range"]::-webkit-slider-runnable-track {

    -webkit-appearance: none;

    box-shadow: none;

    border: none;

    background: 0 0;

}

.iphone_we_use p,

.skills-list p {

    margin-bottom: 20px;

    margin-top: 10px;

}

.more-pro .clinet .proj-head {

    background-color: transparent;

    text-align: center;

    padding: 0;

}

.more-pro .clinet .proj-foot {

    background-color: transparent;

    text-align: left;

    padding: 20px 16px;

}

.more-pro .clinet .proj-foot p {

    font-size: 18px;

    color: #120029;

    margin-bottom: 0;

    font-weight: 500;

}

.more-pro .clinet .proj-foot h3 {

    margin: 6px 0;

    font-size: 28px;

    color: #120029;

}

.more-pro .clinet .proj-foot a {

    font-size: 18px;

    text-transform: none;

    font-weight: 600;

    color: #ee4d51;

    letter-spacing: 1px;

}

.more-pro .clinet .proj-head .project-logo img {

    width: 96% !important;

    border-radius: 20px;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

    margin: 5px;

}

.more-pro .clinet .proj-head .project-logo .logo {

    margin: 0 auto 18px;

    width: 60% !important;

    border-radius: 6px;

    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

}

.more-pro .clinet .proj-head .project-logo h4 {

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 0.5px;

    color: #333;

    margin-top: 0;

}

.more-pro .clinet .proj-head .project-logo p {

    font-size: 16px;

    text-transform: uppercase;

    color: #666;

    letter-spacing: 0.6px;

    font-weight: 600;

}

.more-pro .clinet {

    border-radius: 8px;

    overflow: hidden;

}

.more-pro .clinet .proj-head .project-logo img.web-view {

    width: 100% !important;

}

.project-bg .main_title,

.project-bg h1.more_project_title {

    color: #120029 !important;

}

.clutch_slider a:hover {

    color: #ee4d51 !important;

}

#fade,

#fade1 {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    z-index: 9998;

    -moz-opacity: 0.8;

    opacity: 0.8;

}

#light,

#light1 {

    display: none;

    top: 50%;

    left: 50%;

    max-width: 600px;

    max-height: 360px;

    margin-left: -550px;

    margin-top: -350px;

    z-index: 9999;

    overflow: visible;

}

@media (max-width: 600px) {

    .box_str {

        padding: 30px 6px;

        height: 180px;

    }

    .box_str .main_title h3 {

        font-size: 16px;

    }

    img.playvideo {

        width: 40px;

    }

    .blog_title {

        min-height: 60px;

    }

}

@media (max-width: 992px) {

    #rfqmodal a.email span.popup-icons {

        padding-left: 5px;

    }

    #rfqmodal .modal-body .container > .row {

        display: block;

        padding: 0 0 30px;

    }

    .rfq-left {

        border-radius: 20px 0 20px 20px;

        padding: 20px 30px;

        margin-bottom: 30px;

    }

    #rfqmodal {

        top: 10px;

        bottom: 10px;

    }

    .rfq-left .model-contact-info h3 {

        font-size: 18px;

        margin: 20px 0;

        letter-spacing: 0.5px;

        line-height: 28px;

    }

    .rfq-left .model-contact-info p {

        font-size: 16px;

    }

}

.fa_icons .twitter-icon img {

    width: 17px;

}
div#slider-dooctoor {
    background: rgb(254 197 124 / 40%);
    background: #fff9f1;
}
div#slider-dooctoor .snapshot_title hr.underline_casestudy {
    margin: 20px 0
}
.dooctoor .fea {
    border: 1px solid #ed801a;
}
.dooctoor hr {
    border-top: 3px solid #ed801a;
}
.dooctoor {
    padding: 60px 0;
}
/*.core_features_ecards.thiba {
    background-image: url(../images/projects/thibaingozi/bg.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 60px;
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: #fff;
}
#keysfeature{
    padding: 100px 0;
}
.keyfeature {
    margin-bottom: 40px;
}
.keyfeature h3 {
    font-weight: 600;
    margin-bottom: 30px;
}
.keyfeature li, .keyfeature p {
    color: #000000;
    font-size: 16px;
    line-height: 26px;
}
.banner_do .tibaind img.c_logo {
    margin-top: 110px;
    max-width: 100%;
}
.keyfeature li {
    margin-bottom: 14px;
}
div#slider-thibaingozi {
    background: #f1f6ff;
}
div#slider-thibaingozi .snapshot_title hr.underline_casestudy {
    margin: 20px 0
}*/
#casestudy{
    padding: 0px 0 100px 0;
}
.casestudey-box {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.04);
    display: block;
    background-color: #fff;
    transition: all 0.3s;
    margin-bottom: 30px;
}
.casestudey-box:hover {
    transform: scale(1.01);
}
.casetags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.study-caption{
    text-align: center;
    padding: 20px 10px;
}
.study-caption h3 {
    margin: 0;
    margin-bottom: 20px;
    color: #000000;
    font-weight: 600;
    font-size: 20px;
}
.casetags span {
    background: rgb(238 77 81 / 20%);
    padding: 4px 6px;
    border-radius: 4px;
    color: #ee4d51;
    font-weight: 500;
}
section#casestudy-page {
    padding: 100px 0 0 0;
}
.case-heading .cstags span {
    background-color: #ededed;
    color: #1b1b1b;
    text-transform: uppercase;
    margin: 0 10px;
    padding: 4px 8px;
    border-radius: 4px;
}
.cstags {
    margin-bottom: 20px;
}
.case-heading h1 {
    font-size: 34px;
    font-weight: 600;
    color: #1b1b1b;
}
.mb-5 {
    margin-bottom: 4rem;
}
.whysos {
    background-color: #317eea;
}
.safety-app-desc h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    position: relative;
}
.safety-app-desc h3:before {
    position: absolute;
    content: 'Game Changer App';
    -webkit-text-stroke: 0.1px #317eea;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    z-index: 0;
    top: -24px;
    font-size: 54px;
}
.safety-app-desc {
    background: #fff;
    padding: 100px 50px;
}
.safety-app-desc ul {
    list-style-type: none;
    margin-bottom: 0;
}
.safety-app-desc ul li {
    margin-bottom: 10px;
    list-style-type: disclosure-closed;
    color: #696969;
    font-size: 18px;
    line-height: 26px;
}
.safety-app-desc ul li:nth-last-of-type(1) {
    margin-bottom: 0;
}
@media (min-width: 1200px) {
    .whysos .container {
        width: 1170px;
    }
}
@media (min-width: 1500px) {
    .whysos .container {
        width: 1370px;
    }
}
@media (min-width: 1700px) {
    .whysos .container {
        width: 1570px;
    }
}
@media (min-width: 1900px) {
    .whysos .container {
        width: 1770px;
    }
}
.safety-app-img img {
    padding: 0px 100px;
    max-width: 100%;
}
.introduction p {
    font-size: 18px;
}
.feature-card {
    border-radius: 15px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .07);
    -webkit-box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 10px 15px 0 rgba(0,0,0,.07);
    border: 0;
    padding: 20px 30px;
    width: 48%;
    margin-bottom: 30px;
}
.keyfeatures {
    padding: 100px 0 100px 0;
    background: #fff;
}
.key-headings h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    position: relative;
}
.key-headings h3:before {
    position: absolute;
    content: 'Benefits';
    -webkit-text-stroke: 0.1px #317eea;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    z-index: 0;
    top: -24px;
    font-size: 54px;
    left: 50%;
    transform: translateX(-50%);
}
.feature-card h4 {
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    margin: 0 0 10px;
}
.feature-card p {
    font-size: 18px;
    margin-bottom: 4px;
}
.feature-card ul {
    padding-left: 20px;
    list-style-type: circle;
    margin-bottom: 0;
}
.feature-card ul li {
    font-size: 18px;
}
.case-stude-heading.sos {
    background-image: url(../images/case_study/project1/sos-solution.jpg);
    position: relative;
}
.case-stude-heading.sos:before {
    position: absolute;
    background: rgb(0 0 0 / 30%);
    height: 100%;
    width: 100%;
    content: '';
    top: 0;
}
.safety-app-desc p {
    font-size: 18px;
    margin-bottom: 30px;
}
.safety-app-desc p:nth-last-of-type(1) {
    margin-bottom: 0;
}
.whysos .row{
    display: flex;
    align-items: center;
}
.safety-app-desc b {
    font-size: 18px;
}
.sos-alert-det ul {
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
    list-style-type: circle;
    padding-left: 40px;
}
.sos-alert img {
    max-width: 100%;
    padding: 0 30px;
}
.sos-alert-det h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    position: relative;
}
.feature-boxs {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
}
.introduction {
    position: relative;
}
.introduction:before {
    position: absolute;
    background-image: url(../images/case_study/project1/sos.gif);
    background-size: cover;
    height: 100px;
    width: 100px;
    content: '';
    top: -100px;
    right: 20px;
}
.screens {
    background: #f5f5f5;
    padding: 30px 0;
}
.technology {
    background-image: url(../images/case_study/project1/tech-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 150px 0;
}
.sos-alert-det ul li {
    margin-bottom: 20px;
    font-size: 20px;
}
.tag span {
    font-size: 18px;
    margin: 0 10px;
    color: #222222;
}
.tech-title {
    margin-bottom: 30px;
}
.tech-title h3 {
    font-size: 40px;
}
.tech-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tech-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    margin: 20px 20px;
    padding: 10px 20px;
    border-radius: 38px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    gap: 10px;
}
.tech-box img {
    width: 30px;
}
.tech-box span {
    color: #000000;
    font-size: 18px;
}
.alert-safety-app {
    display: flex;
    align-items: center;
    gap: 4%;
}
.whyimg {
    width: 48%;
}
.whydesc {
    width: 48%;
}
.whydesc h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    position: relative;
}
.whydesc h3:before {
    position: absolute;
    content: 'Why Choose';
    -webkit-text-stroke: 0.1px #317eea;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    z-index: 0;
    top: -24px;
    font-size: 54px;
    left: 0%;
}
.whydesc.conclusion h3:before {
    content: 'Closure';
}
.whydesc b {
    font-size: 18px;
    margin-bottom: 0;
}
.whydesc p {
    font-size: 20px;
    margin-bottom: 20px;
}
.why-safety-app {
    padding: 60px 0;
}
.title p.sub_title {
    font-size: 20px;
}
section#casestudy-page {
    font-family: "Poppins", sans-serif!important;
}
.typography-det h3 {
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    position: relative;
}
.typography-det h4 {
    font-size: 90px;
    font-weight: 500;
}
.typography-det strong {
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
}
.letters span {
    font-size: 24px;
    margin: 0px 20px 10px 0px;
    letter-spacing: 1px;
    display: inline-block;
}
.typography-det {
    padding: 0 20px;
}
.colorname .colors{
    width: 75px;
    height: 200px;
    margin: 0 auto 15px;
    border-radius: 100px;
}
.colorname .colors1{
    background-color: #2F80ED;
}
.colorname .colors2{
    background-color: #B3B1B0;
}
.colorname .colors3{
    background-color: #000000;    
}
.colorpalet {
    display: flex;
    gap: 30px;
    justify-content: flex-start;
}
.sos-alert-det p {
    font-size: 18px;
    margin-bottom: 20px;
}
.sos-alert-det b {
    font-size: 18px;
}
.case-stude-page .case-stude-heading {
    background: #fff;
    padding: 50px 0 50px 0;
    color: #fff;
    margin-bottom: 0;
}
.port_box a.port_readmore:hover {
    color: #ee4d51;
}
.more_projects.project-bg {
    background: #fff;
}
.contact_form .hire_formbox form#contact_us_form textarea#message {
    margin-bottom: 25px;
}
div#blog .blog {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    transition: all 0.3s;
}
div#blog .blog_details {
    padding: 2rem 0rem;
}
div#blog .blog_img {
    max-width: 100%;
    height: 260px;
    min-width: 100%;
    object-fit: cover;
    border-radius: 12px;
}
div#blog .blog:hover {
    transform: translate(0px, -4px);
}
div#blog .blog:hover h5.blog_title {
    color: #ee4d51;
}
div#blog .blog_details span {
    font-size: 14px;
    color: #afafaf!important;
}
#home_contact {
    background: #fafbfe;
}
#home_contact .contact_form {
    background: #fff;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#home_contact form#contact_us_form .form-control {
    border-bottom: 2px solid #cfcfcf;
}
#home_contact form#contact_us_form .form-group {
    position: relative;
    transition: all 0.5s;
}
#home_contact form#contact_us_form .form-group:after {
    background: #ee4d51;
    position: absolute;
    height: 2px;
    width: 0px;
    bottom: 0;
    left: 0;
    z-index: 9999;
    content: '';
    transition: all 0.5s;
}
#home_contact form#contact_us_form .form-group:focus-within:after{
    transition: all 0.5s;
    width: 100%;
}
section#portfoliopage .container {
    width: 100%;
    max-width: 100%;
}
section#portfoliopage a {
    text-decoration: none;
}
.portfolio-img img {
    width: 100%;
}
.portfolio-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}
.portfolio-text .pdesc {
    width: 40%;
}
.portfolio-text .ptitle {
    width: 60%;
}
.portfolio-text .ptitle h3 {
    padding: 0;
    margin: 0;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    color: #fff;
}
.portfolio-text .ptitle h3 span {
    background: #ee4d51;
    font-size: 18px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px;
    transition: all 0.3s;
}
.portfolio-text .pdesc p {
    font-size: 18px;
    color: #fff;
    margin-bottom: 0;
    transition: all 0.3s;
}
section#portfolio-hero {
    padding: 60px 0;
    background: #000000;
}
section#portfolio-hero .container {
    width: 100%;
    max-width: 100%;
}

.p-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
}

.panimation {
    position: relative;
    width: 100%;
    height: 800px;
    margin-left: -30%;
}
.panimation img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
}
.panimation img.rotate-image.slow {
    width: 50%;
}
.panimation img.rotate-image-r.medium{
    width: 75%;
}
@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes spin-r {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
.rotate-image {
    animation: spin 60s linear infinite;
}
.rotate-image-r {
    animation: spin-r 80s linear infinite;
}
.slow { animation-duration: 70s; }
.medium { animation-duration: 50s; }
.fast { animation-duration: 30s; }
section#portfolio-hero .row {
    display: flex;
    align-items: center;
}
.phero-caption h1 {
    color: #fff;
    font-size: 52px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}
.phero-caption p {
    font-size: 20px;
    color: #fff;
    margin-bottom: 0px;
}
section#portfoliopage {
    padding: 60px 0;
}
section.portfoliolist {
    padding: 20px 0 60px 0!important;
    background-color: #000;
}
.portfolio-img {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    margin-bottom: 20px;
}
.portfolio-img img {
    transition: all 0.4s ease-in-out;
}
.portfolio-box:hover .portfolio-img img {
    transform: scale(1.1);
}
.portfolio-box {
    transition: all 0.3s ease;
    border-radius: 10px;
    padding-bottom: 20px;
    background: #000000;
}
.portfolio-box:hover {
    background: #333333;
}
.portfolio-box:hover .portfolio-text .ptitle h3,
.portfolio-box:hover .portfolio-text .pdesc p {
    color: #fff;
}
.portfolio-box:hover .portfolio-text .ptitle h3 span {
    background: #ee4d51;
}
.portfolio-box {
    cursor: none;
    margin-bottom: 30px;
}
.custom-cursor {
    position: fixed;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(120,120,120,0.85);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
}
.custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
}
.portfolio-box:hover ~ .custom-cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.custom-cursor {
    position: fixed;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle at top left,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.08) 40%,
        rgba(0,0,0,0.25)
    );

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 25px 45px rgba(0,0,0,0.35),
        inset 0 1px 1px rgba(255,255,255,0.4),
        inset 0 -6px 12px rgba(0,0,0,0.4);

    transform-style: preserve-3d;
    will-change: transform;
    transition: opacity 0.25s ease;
}
.custom-cursor span {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}
.custom-cursor::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255,255,255,0.35),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease;
}
#portfoliopage .reveal:nth-child(even) { transition-delay: 0.2s; }
#portfoliopage .reveal:nth-child(odd) { transition-delay: 0.8s; }

/* When visible */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}





/*newpage css*/
.new-hero .panimation {
    margin-right: -30%;
    margin-left: 0%;
}
.hero-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: #e8ff47;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fadeUp 0.8s 0.2s forwards;
}
.hero-label::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: #e8ff47;
}
.hero-title {
    font-size: clamp(90px, 13vw, 190px);
    line-height: 0.88;
    color: #f0ede8;
    opacity: 0;
    font-weight: 700;
    animation: fadeUp 0.9s 0.35s forwards;
    letter-spacing: -7px;
}
.hero-title .accent-word {
    color: #e8ff47;
}
.hero-title .outline {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 1);
    color: transparent;
    font-weight: 500;
}
@keyframes fadeUp{
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.portfoliolist .portfolio-img,
.portfoliolist .portfolio-box {
    border-radius: 0;
}
.portfoliolist .portfolio-img {
    padding-bottom: 0;
    margin-bottom: 0;
}
.portfoliolist .portfolio-box {
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
}
.portfoliolist .rows {
    gap: 3px;
    display: flex;
}
.portfoliolist .portfolio-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(0 0 0 / 80%);
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
}
.portfoliolist .portfolio-box:hover .portfolio-text {
    opacity: 1;
}
.portfoliolist .portfolio-text .ptitle h3 {
    padding: 0;
    margin: 0;
    font-size: 4rem;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s;
    color: #fff;
    flex-direction: column;
    margin-bottom: 20px;
}
.marquee-section {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0;
    background-color: #000;
    width: calc(100% - 6px);
    margin: 30px 0;
    margin-left: 3px;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}
.marquee-item {
    font-size: 80px;
    letter-spacing: 4px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.5);
    padding: 12px 40px;
    white-space: nowrap;
    transition: color .25s,
    -webkit-text-stroke .25s;
}
.marquee-item:hover {
    color: #e8ff47;
    -webkit-text-stroke: 0px;
}
.marquee-dot {
    color: #e8ff47;
    -webkit-text-stroke: 0px;
    font-size: 24px;
    align-self: center;
    padding: 0 10px;
}
.portfoliolist .portfolio-box:hover .portfolio-text .ptitle h3 span {
    background: #fff;
    color: #000;
}
.portfoliolist .portfolio-text .ptitle {
    width: 100%;
}
.portfoliolist .portfolio-text .pdesc {
    width: 50%;
}
@keyframes marquee {
    from {
        transform:translateX(0)
    }
    to {
        transform:translateX(-50%)
    }
}
@media (min-width: 992px) {
    section.portfoliolist .col-md-8 {
        width: 66.12%;
    }
}





/*AI Photo Management Platform*/
section#aihero {
    min-height: 100vh;
    padding-top: 0px;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    font-family: "Poppins", sans-serif
}
.hero-ticker {
    background: #1a1208;
    color: #faf7f2;
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
}
.ticker-track {
    display: inline-flex;
    gap: 0;
    animation: ticker 28s linear infinite;
}
@keyframes ticker{
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.ticker-item {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0 32px;
    opacity: 0.7;
}
.ticker-item span {
    color: #e8562a;
    opacity: 1;
}
.hero-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: calc(100vh - 130px);
}
.hero-left {
    padding: 80px 64px 80px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #e5ddd0;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #e8562a;
    margin-bottom: 28px;
}
.hero-tag-dot {
    width: 8px;
    height: 8px;
    background: #e8562a;
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.hero-title {
    /*font-family: 'Playfair Display', serif;*/
    font-size: clamp(46px, 5.5vw, 84px);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #1a1208;
    margin-bottom: 28px;
}
.hero-title .italic {
    font-style: italic;
    color: #e8562a;
}
.hero-title .outline {
    -webkit-text-stroke: 2px #1a1208;
    color: transparent;
}
.hero-desc {
    font-size: 17px;
    line-height: 1.75;
    color: #8a7e68;
    max-width: 460px;
    margin-bottom: 24px;
    font-weight: 400;
}
.hero-cta-row {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 56px;
}
.btn-coral {
    padding: 14px 32px;
    background: #e8562a;
    color: white;
    /*font-family: 'Outfit', sans-serif;*/
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-coral:hover {
    background: #c44820;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(232, 86, 42, 0.3);
}
.btn-outline {
    padding: 14px 32px;
    background: transparent;
    color: #1a1208;
    /*font-family: 'Outfit', sans-serif;*/
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    border: 1.5px solid #e5ddd0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s;
}
.btn-outline:hover {
    border-color: #1a1208;
    background: #faf7f2;
    color: #1a1208;
}
section.cta-section a.btn-outline {
    color: #fff;
}
section.cta-section a.btn-outline:hover {
    color: #171927;
}
.hero-stat-row {
    display: flex;
    gap: 0;
    border: 1.5px solid #e5ddd0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 420px;
}
.hero-stat {
    flex: 1;
    padding: 20px 24px;
    border-right: 1px solid #e5ddd0;
    transition: background 0.2s;
}
.hero-stat:last-child {
    border-right: none;
}
.hero-stat-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 32px;
    font-weight: 700;
    color: #e8562a;
    line-height: 1;
    margin-bottom: 4px;
}
.hero-stat-label {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a7e68;
}
.hero-right {
    position: relative;
    background: #faf7f2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-visual-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(232, 86, 42, 0.08) 0%, transparent 70%), radial-gradient(ellipse 60% 60% at 20% 80%, rgba(55, 48, 163, 0.06) 0%, transparent 70%);
}
.photo-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 40px;
    transform: rotate(3deg);
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
}
.mosaic-card {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    background: #ffffff;
    border: 1.5px solid #e5ddd0;
    box-shadow: 0 4px 20px rgba(26, 18, 8,0.8);
    position: relative;
    animation: floatMosaic 5s ease-in-out infinite;
    transition: transform 0.3s;
}
.mosaic-card:hover { transform: scale(1.05) rotate(-2deg); }
.mosaic-card:nth-child(2) { animation-delay: -1.2s; margin-top: 20px; }
.mosaic-card:nth-child(3) { animation-delay: -2.4s; }
.mosaic-card:nth-child(4) { animation-delay: -0.6s; margin-top: -15px; }
.mosaic-card:nth-child(5) { animation-delay: -1.8s; margin-top: 10px; }
.mosaic-card:nth-child(6) { animation-delay: -3s; margin-top: -10px; }
.mosaic-card:nth-child(7) { animation-delay: -0.3s; }
.mosaic-card:nth-child(8) { animation-delay: -2.1s; margin-top: 15px; }
.mosaic-card:nth-child(9) { animation-delay: -3.3s; margin-top: -5px; }
@keyframes floatMosaic {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.mosaic-img {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    overflow: hidden;
}
.mosaic-bar {
    padding: 8px 10px;
}
.mosaic-name {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 9px;
    font-weight: 600;
    color: #3d3520;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mosaic-tag.matched {
    background: #d1fae5;
    color: #059669;
}
.mosaic-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 7px;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 100px;
}
.scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scan-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #059669, transparent);
    animation: scanH 2.5s ease-in-out infinite;
    opacity: 0;
}
@keyframes scanH {
    0% { top: 0; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.mosaic-card.active-scan .scan-line-h { opacity: 1; }
.mosaic-tag.scanning {
    background: #fef3c7;
    color: #d97706;
}
.mosaic-tag.new {
    background: #fde8e0;
    color: #e8562a;
}
.face-rect {
    position: absolute;
    top: 15%; left: 20%; width: 60%; height: 55%;
    border: 1.5px solid #059669;
    border-radius: 6px;
    animation: faceRect 2s ease-in-out infinite;
}
@keyframes faceRect {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5,150,105,0.3); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(5,150,105,0); }
}
.hero-badge {
    position: absolute;
    bottom: 48px;
    right: 40px;
    background: #ffffff;
    border: 1.5px solid #e5ddd0;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(26, 18, 8, 0.8);
    z-index: 2;
    animation: badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.badge-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 28px;
    font-weight: 700;
    color: #059669;
    line-height: 1;
}
.badge-label {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a7e68;
    margin-top: 2px;
}
.hero-badge2 {
    position: absolute;
    top: 60px;
    left: 32px;
    background: #e8562a;
    color: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(232, 86, 42, 0.3);
    z-index: 2;
    animation: badgeFloat 4s ease-in-out infinite;
    animation-delay: -2s;
}
.badge2-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.badge2-label {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}
.band {
    background: #1a1208;
    padding: 28px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    font-family: "Poppins", sans-serif
}
.band-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.band-icon {
    font-size: 20px;
}
span.band-icon i {
    color: #fff;
}
.band-text {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 13px;
    font-weight: 500;
    color: rgba(250,247,242,0.7);
    white-space: nowrap;
}
.band-text span {
    color: #e8562a;
    font-weight: 700;
}
.band-sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.snapshot {
    padding: 100px 56px;
    background: #ffffff;
    border-bottom: 1px solid #e5ddd0;
    font-family: "Poppins", sans-serif
}
.snapshot-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
}
.snapshot-left {
    padding-top: 8px;
}
.snapshot-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #8a7e68;
    margin-top: 20px;
    margin-bottom: 32px;
}
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tags {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid #e5ddd0;
    color: #3d3520;
    background: #faf7f2;
    transition: all 0.2s;
    cursor: default;
}
.tags:hover {
    border-color: #e8562a;
    color: #e8562a;
    background: #fde8e0;
}

.snapshot-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.snap-card {
    background: #faf7f2;
    border: 1.5px solid #e5ddd0;
    border-radius: 16px;
    padding: 28px 24px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.snap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26,18,8,0.08);
    border-color: transparent;
}
.snap-card.coral {
    border-top: 3px solid #e8562a;
}
.snap-card.indigo {
    border-top: 3px solid #3730a3;
}
.snap-card.mint {
    border-top: 3px solid #059669;
}
.snap-card.gold {
    border-top: 3px solid #d97706;
}
.snap-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}
.snap-card.coral .snap-num {
    color: #e8562a;
}
.snap-card.indigo .snap-num {
    color: #3730a3;
}
.snap-card.mint .snap-num {
    color: #059669;
}
.snap-card.gold .snap-num {
    color: #d97706;
}
.snap-label {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 13px;
    color: #8a7e68;
    line-height: 1.5;
}
.reveals {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveals.in { opacity: 1; transform: translateY(0); }
.reveals.d1 { transition-delay: 0.1s; }
.reveals.d2 { transition-delay: 0.2s; }
.reveals.d3 { transition-delay: 0.3s; }
.reveals.d4 { transition-delay: 0.4s; }
.section-h2 {
    /*font-family: 'Playfair Display', serif;*/
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1a1208;
    margin-top: 0;
}
.section-h2 em {
    font-style: italic;
    color: #e8562a;
}
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e8562a;
    margin-bottom: 0px;
}
.section-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: #e8562a;
    border-radius: 1px;
}
.challenge {
    padding: 100px 56px;
    background: #faf7f2;
    font-family: "Poppins", sans-serif
}
.challenge-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.challenge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 56px;
}
.challenge-intro {
    font-size: 18px;
    line-height: 1.75;
    color: #3d3520;
    margin-bottom: 32px;
}
.challenge-intro strong {
    color: #1a1208;
    font-weight: 600;
}
.pain-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pain-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1.5px solid #e5ddd0;
    border-left: 3px solid #e8562a;
    border-radius: 0 10px 10px 0;
    transition: all 0.25s;
}
.pain-row:hover {
    border-left-color: #3730a3;
    box-shadow: 0 4px 16px rgba(26,18,8,0.08);
    transform: translateX(4px);
}
.pain-row-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.pain-row-text {
    font-size: 14px;
    line-height: 1.6;
    color: #3d3520;
}
.pain-row-text strong {
    color: #e8562a;
}
.challenge-quote {
    background: #1a1208;
    color: #faf7f2;
    border-radius: 20px;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
}
.challenge-quote::before {
    content: '"';
    position: absolute;
    top: -32px; left: 24px;
    /*font-family: 'Playfair Display', serif;*/
    font-size: 200px;
    color: rgba(255,255,255,0.04);
    line-height: 1;
    pointer-events: none;
}
.cq-text {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 24px;
    font-style: italic;
    line-height: 1.55;
    color: #faf7f2;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}
.cq-stat {
    display: flex;
    gap: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
}
.cq-stat-item {
    flex: 1;
}
.cq-stat-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 32px;
    font-weight: 700;
    color: #e8562a;
    line-height: 1;
}
.cq-stat-label {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(250,247,242,0.5);
    margin-top: 4px;
}
.pipeline {
    padding: 100px 56px;
    background: #ffffff;
    font-family: "Poppins", sans-serif
}
.pipeline-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.pipeline-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 60px;
    position: relative;
}
.pipeline-steps::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #e8562a, #3730a3);
    z-index: 0;
}
.pipe-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 12px;
}
.pipe-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid  #e5ddd0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(26,18,8,0.08);
}
.pipe-step:nth-child(1) .pipe-circle {
    border-color: #e8562a;
    color: #e8562a;
    background: #fde8e0;
}
.pipe-step:nth-child(2) .pipe-circle {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f5f3ff;
}
.pipe-step:nth-child(3) .pipe-circle {
    border-color: #3730a3;
    color: #3730a3;
    background: #eef2ff;
}
.pipe-step:nth-child(4) .pipe-circle {
    border-color: #d97706;
    color: #d97706;
    background: #fef3c7;
}
.pipe-step:nth-child(5) .pipe-circle {
    border-color: #059669;
    color: #059669;
    background: #d1fae5;
}
.pipe-step:hover .pipe-circle {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,18,8,0.08);
}
.pipe-step .pipe-circle {
    transform: translateY(0px);
}

.pipe-num {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1a1208;
    color: #faf7f2;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pipe-label {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 14px;
    font-weight: 600;
    color: #1a1208;
    margin-bottom: 4px;
}
.pipe-sub {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a7e68;
}

.how {
    padding: 100px 56px;
    background: #f3ede3;
    font-family: "Poppins", sans-serif
}
.how-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.how-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 56px;
}
.how-card {
    background: #ffffff;
    border: 1.5px solid #e5ddd0;
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.how-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e8562a, #3730a3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}
.how-card:hover {
    box-shadow: 0 20px 60px rgba(26,18,8,0.08);
    transform: translateY(-4px);
    border-color: transparent;
}
.how-card:hover::after {
    transform: scaleX(1);
}
.how-num {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: #faf7f2;
    border: 1.5px solid #e5ddd0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*font-family: 'Playfair Display', serif;*/
    font-size: 20px;
    font-weight: 700;
    color: #e8562a;
    flex-shrink: 0;
}
.how-content h4 {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 17px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 10px;
}
.how-content p {
    font-size: 14px;
    color: #8a7e68;
    line-height: 1.7;
}

.featuress {
    padding: 100px 56px;
    background: #ffffff;
    text-align: left;
    font-family: "Poppins", sans-serif
}
.features-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.features-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 56px;
}
.features-intro {
    font-size: 16px;
    line-height: 1.75;
    color: #8a7e68;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feat-card {
    background: #faf7f2;
    border: 1.5px solid #e5ddd0;
    border-radius: 18px;
    padding: 32px 28px;
    transition: all 0.3s;
    cursor: default;
}
.feat-card:hover {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(26,18,8,0.08);
    transform: translateY(-6px);
}
.feat-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.feat-card:nth-child(1) .feat-icon-wrap { background: #fde8e0; color:#e8562a }
.feat-card:nth-child(2) .feat-icon-wrap { background: #eef2ff; color:#3730a3}
.feat-card:nth-child(3) .feat-icon-wrap { background: #d1fae5; color:#059669}
.feat-card:nth-child(4) .feat-icon-wrap { background: #fef3c7; color:#d97706}
.feat-card:nth-child(5) .feat-icon-wrap { background: #fdf4ff; color:#7c3aed}
.feat-card:nth-child(6) .feat-icon-wrap { background: #fff1f0; color:#e8562a}
.feat-title {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 16px;
    font-weight: 700;
    color: #1a1208;
    margin-bottom: 10px;
}
.feat-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #8a7e68;
}
.feat-chip {
    display: inline-block;
    margin-top: 14px;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}
.feat-card:nth-child(1) .feat-chip { background: #fde8e0; color: #e8562a; }
.feat-card:nth-child(2) .feat-chip { background: #eef2ff; color: #3730a3; }
.feat-card:nth-child(3) .feat-chip { background: #d1fae5; color: #059669; }
.feat-card:nth-child(4) .feat-chip { background: #fef3c7; color: #d97706; }
.feat-card:nth-child(5) .feat-chip { background: #fdf4ff; color: #7c3aed; }
.feat-card:nth-child(6) .feat-chip { background: #fff1f0; color: #e8562a; }


.ba-section {
    padding: 100px 56px;
    background: #faf7f2;
    font-family: "Poppins", sans-serif
}
.ba-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.ba-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 56px;
}
.ba-panel {
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid #e5ddd0;
}
.ba-panel-head {
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ba-panel.before .ba-panel-head {
    background: #1a1208;
}
.ba-panel.after .ba-panel-head {
    background: #059669;
}
.ba-panel-title {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ba-panel.before .ba-panel-title {
    color: rgba(250,247,242,0.9);
}
.ba-panel.after .ba-panel-title {
    color: white;
}
.ba-panel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ba-panel.before .ba-panel-indicator {
    background: #e8562a;
}
.ba-panel.after .ba-panel-indicator {
    background: white;
}
.ba-panel-body {
    background: #ffffff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ba-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}
.ba-panel.before .ba-row {
    background: rgba(232,86,42,0.04);
    color: #3d3520;
    border-left: 2px solid rgba(232,86,42,0.2);
}
.ba-panel.after .ba-row {
    background: rgba(5,150,105,0.04);
    color: #3d3520;
    border-left: 2px solid rgba(5,150,105,0.3);
}
.ba-row-icon {
    flex-shrink: 0;
}

.tech-section {
    padding: 80px 56px;
    background: #1a1208;
    font-family: "Poppins", sans-serif
}
.tech-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.tech-inner .section-label {
    color: #e8562a;
}
.tech-inner .section-label::before {
    background: #e8562a;
}
.tech-inner .section-h2 {
    color: #faf7f2;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.tech-section .tech-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s;
}
.tech-section .tech-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(232,86,42,0.4);
    transform: translateY(-4px);
}
.tech-card-icon {
    font-size: 32px;
    margin-bottom: 14px;
    color: #fff;
}
.tech-card-name {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 15px;
    font-weight: 600;
    color: #faf7f2;
    margin-bottom: 6px;
}
.tech-card-desc {
    /*font-family: 'Space Mono', monospace;*/
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250,247,242,0.4);
    line-height: 1.5;
}

.results {
    padding: 100px 56px;
    background: #ffffff;
    font-family: "Poppins", sans-serif
}
.results-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.results-hero {
    background: linear-gradient(135deg, #e8562a 0%, #c44820 100%);
    border-radius: 24px;
    padding: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 56px;
    position: relative;
    overflow: hidden;
}
.results-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.1)'/%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.res-big {
    text-align: center;
    padding: 0 32px;
    border-right: 1px solid rgba(255,255,255,0.15);
    position: relative; z-index: 1;
}
.res-big:last-child {
    border-right: none;
}
.res-big-num {
    /*font-family: 'Playfair Display', serif;*/
    font-size: 68px;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 10px;
}
.res-big-label {
    /*font-family: 'Outfit', sans-serif;*/
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}
.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.res-card {
    background: #faf7f2;
    border: 1.5px solid #e5ddd0;
    border-radius: 16px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s;
}
.res-card:hover {
    border-color: #e8562a;
    box-shadow: 0 8px 24px rgba(26,18,8,0.08);
    transform: translateX(4px);
}
.res-card-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.res-card-text {
    font-size: 14px;
    color: #3d3520;
    line-height: 1.6;
}
.res-card-text strong {
    color: #1a1208;
}
.scope {
    padding: 80px 56px;
    background: #faf7f2;
    border-top: 1px solid #e5ddd0;
    font-family: "Poppins", sans-serif
}
.scope-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 48px;
    align-items: start;
}
.scope-text {
    font-size: 16px;
    line-height: 1.75;
    color: #3d3520;
}
.scope-text strong {
    color: #1a1208;
}
.phases {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid #e5ddd0;
    border-radius: 16px;
    overflow: hidden;
}
.phase-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5ddd0;
    background: #ffffff;
    transition: background 0.2s;
}
.phase-item:last-child {
    border-bottom: none;
}
.phase-item:hover {
    background: #fde8e0;
}
.phase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8562a;
    flex-shrink: 0;
}
.phase-text {
    font-size: 14px;
    font-weight: 500;
    color: #3d3520;
}
.cta-section {
    padding: 120px 56px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    font-family: "Poppins", sans-serif
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(232,86,42,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.cta-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(55,48,163,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.cta-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fde8e0;
    color: #e8562a;
    /*font-family: 'Space Mono', monospace;*/
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.cta-title {
    /*font-family: 'Playfair Display', serif;*/
    font-size: clamp(36px, 4vw, 60px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1a1208;
    margin-bottom: 20px;
}
.cta-title em {
    font-style: italic;
    color: #e8562a;
}
.cta-sub {
    font-size: 17px;
    line-height: 1.7;
    color: #8a7e68;
    margin-bottom: 44px;
}
.cta-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}


@media (max-width: 992px) {
    nav {
        padding: 14px 20px;
    }
    .hero-body {
        grid-template-columns: 1fr;
    }
    .hero-left {
        padding: 48px 24px;
        border-right: none;
    }
    .hero-right {
        height: 800px;
    }
    .band {
        padding: 20px 24px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .band-sep {
        display: none;
    }
    .snapshot, .challenge, .pipeline, .how, .features,
    .ba-section, .results, .scope, .cta-section {
        padding: 72px 24px;
    }
    .snapshot-inner, .challenge-grid, .how-grid, .ba-wrap,
    .scope-grid, .features-header {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .pipeline-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pipeline-steps::before {
        display: none;
    }
    .features-grid {
        grid-template-columns: 1fr!important;
    }
    .tech-grid {
        grid-template-columns: 1fr!important;
    }
    .results-hero {
        grid-template-columns: 1fr!important;
        gap: 32px;
        padding: 40px 32px;
    }
    .res-big {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding-bottom: 24px;
    }
    .res-big:last-child {
        border-bottom: none;
    }
    .results-grid {
        grid-template-columns: 1fr!important;
    }
    .snapshot-right {
        grid-template-columns: 1fr 1fr;
    }
    .cta-btns {
        flex-direction: column;
    }
}



/*-------SOS Safety css Start------*/
.hero-sos {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 8rem 5vw 5rem;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}
.hero-sos::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(135deg, #FEF0F1 0%, #fff5f5 60%, #F8F9FC 100%);
    z-index: 0;
}
.hero-sos-content {
    position: relative;
    z-index: 1;
}
.hero-tag-sos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FEF0F1;
    border: 1px solid #FCDDE0;
    color: #E63946;
    font-size: 12px;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    margin-bottom: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.pulse-dot {
    width: 7px;
    height: 7px;
    background: #E63946;
    border-radius: 50%;
    animation: pulses 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulses {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.5);
    }
}
.sos-page h1 {
    font-family: "Poppins", sans-serif;
    font-size: clamp(33.6px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #111827;
    margin-bottom: 18px;
}
.sos-page h1 em {
    color: #E63946;
    font-style: normal;
}
.hero-sub {
    font-size: 16px;
    color: #6B7280;
    max-width: 460px;
    margin-bottom: 32px;
    line-height: 1.7;
}
.hero-btns {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.sos-page .btn-primary {
    background: #E63946;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14.4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    transition: background 0.2s, transform 0.15s;
}
.sos-page .btn-primary:hover {
    background: #C0222F;
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: #111827;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1.5px solid #D1D5DB;
    font-weight: 500;
    font-size: 14.4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    transition: border-color 0.2s, transform 0.15s, color 0.2s;
    cursor: pointer;
}
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active {
    border-color: #E63946;
    color: #E63946;
    transform: translateY(-2px);
}
.sos-page, .natural {
    scroll-behavior: smooth;
}
.sos-page body {
    font-family: "Poppins", sans-serif;
    background: #F8F9FC;
    color: #374151;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.phone-wrap {
    animation: float 4s ease-in-out infinite;
    position: relative;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-14px); }
}
.phone {
    width: 225px;
    height: 450px;
    background: #fff;
    border-radius: 36px;
    border: 6px solid #1A1A2E;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
}
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 20px;
    background: #1A1A2E;
    border-radius: 0 0 14px 14px;
    z-index: 10;
}
.phone-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px 0 0;
    background: linear-gradient(175deg, #fff5f6 0%, #fff 55%);
}
.phone-header {
    padding: 10px 16px 6px;
    font-size: 9px;
    color: #9CA3AF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sos-btn-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.sos-ring-outer {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(230,57,70,0.07);
    border: 1.5px dashed rgba(230,57,70,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ring-pulse 2.2s ease-in-out infinite;
}
@keyframes ring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.2); }
    50% { box-shadow: 0 0 0 16px rgba(230,57,70,0); }
}
.sos-btn-inner {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #E63946;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: "Poppins", sans-serif;
    color: white;
    box-shadow: 0 8px 24px rgba(230,57,70,0.4);
}
.sos-btn-inner i {
    font-size: 1rem;
}
.sos-btn-inner b {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.sos-btn-inner span {
    font-size: 0.58rem;
    opacity: 0.8;
}
.phone-label {
    font-size: 9.5px;
    color: #9CA3AF;
    text-align: center;
}
.phone-status-row {
    padding: 10px 14px 14px;
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.status-chip {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 8px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 5px;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
}
.status-dot.amber {
    background: #F59E0B;
}
.ring-deco {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(230,57,70,0.1);
}
.ring-deco:nth-child(1) {
    width: 340px;
    height: 340px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.ring-deco:nth-child(2) {
    width: 430px;
    height: 430px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.5;
}
.snapshots {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}
.snap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.snap-item {
    padding: 24px 32px;
    border-right: 1px solid #E5E7EB;
}
.snap-item:last-child {
    border-right: none;
}
.snap-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin-bottom: 4px;
}
.snap-label i {
    color: #9CA3AF ! IMPORTANT;
}
.snap-value {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.snap-value.red {
    color: #E63946;
}

.sos-page section {
    padding: 80px 5vw;
}
.sos-page section.alt {
    background: #F2F4F8;
}
.sos-page section.white {
    background: #FFFFFF;
}
.sos-page .section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #E63946;
    background: #FEF0F1;
    padding: 4px 8px;
    border-radius: 100px;
    margin-bottom: 6px;
}

.sos-page h2 {
    font-family: "Poppins", sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111827;
    line-height: 1.12;
    margin-bottom: 12px;
}
.sos-page h3 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.sos-page .lead {
    font-size: 0.97rem;
    color: #6B7280;
    max-width: 580px;
    line-height: 1.8;
}

.challenge-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2.5rem;
}
.challenge-text p {
    color: #374151;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.pain-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.2rem;
}
.pain-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.pain-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.10);
}
.pain-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: #FEF0F1;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E63946;
    font-size: 18px;
}
.pain-text strong {
    display: block;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}
.pain-text span {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
}
.sos-page .main_title {
    color: #120029!important;
    font-size: 32px!important;
    letter-spacing: 2px!important;
}
.solution-box {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 40px;
    margin-top: 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}
.solution-text {
    color: #374151;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.solution-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 32px;
    border-top: 1px solid #E5E7EB;
    padding-top: 32px;
}
.stat-block {
    text-align: center;
}
.stat-num {
    font-family: "Poppins", sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #E63946;
    line-height: 1;
    margin-bottom: 8px;
}
.stat-label {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.45;
}
.white .features-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    gap: 2rem;
    flex-wrap: wrap;
}
.features-grids {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
.feature-cards {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.feature-cards:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.10);
    transform: translateY(-4px);
    border-color: #FCDDE0;
}
.features-icon {
    width: 46px;
    height: 46px;
    background: #FEF0F1;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E63946;
    font-size: 18px;
    margin-bottom: 16px;
}
.features-title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
.features-desc {
    font-size: 15px;
    color: #6B7280;
    line-height: 1.65;
}
.flow-wrap {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
}
.flow-inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: 620px;
}
.flow-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 0.4rem;
}
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 31px;
    right: -10px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #E63946, rgba(230,57,70,0.15));
    z-index: 1;
}
.flow-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E63946;
    font-size: 20px;
    margin: 0 auto 0.85rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.flow-step:hover .flow-circle {
    border-color: #E63946;
    box-shadow: 0 0 0 4px #FEF0F1;
}
.flow-step-num {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E63946;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}
.flow-sublabel {
    font-size: 14px;
    color: #9CA3AF;
}
.detail-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.tab-btn {
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    padding: 0.42rem 1rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Poppins", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.tab-btn.active, .tab-btn:hover {
    background: #E63946;
    border-color: #E63946;
    color: #fff;
}
.detail-block {
    display: none;
}
.detail-block.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.detail-content p {
    color: #374151;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.detail-visual {
    background: #F2F4F8;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
}
.detail-visual-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9CA3AF;
    margin-bottom: 16px;
}
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.6rem 0;
}
.metric-row:last-child {
    border-bottom: none;
}
.metric-label {
    font-size: 16px;
    color: #6B7280;
}
.metric-val {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.badge-green {
    font-size: 12px;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    background: #DCFCE7;
    color: #166534;
    font-weight: 600;
}
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
.tech-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px 30px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}
.tech-category {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E63946;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tech-pills {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.tech-pill {
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tech-pill::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E63946;
    flex-shrink: 0;
    opacity: 0.6;
}
.cs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}
.cs-row {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    align-items: center;
    gap: 1rem;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}
.cs-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 6px;
}
.badge-red {
    background: #FEE2E2;
    color: #991B1B;
}
.badge-green2 {
    background: #DCFCE7;
    color: #166534;
}
.cs-title {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    margin-bottom: 4px;
}
.cs-desc {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
}
.cs-arrow-col {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #FEF0F1;
    border-radius: 50%;
    color: #E63946;
    font-size: 14px;
    align-self: center;
}
.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
     gap: 1.1rem;
     margin-top: 2.5rem;
 }
.result-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-top: 3px solid #E63946;
    border-radius: 14px;
    padding: 30px 22px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}
.result-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.10);
    transform: translateY(-3px);
}
.result-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FEF0F1;
    color: #E63946;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 16px;
}
.result-num {
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #E63946;
    line-height: 1;
    margin-bottom: 8px;
}
.result-label {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.45;
}
.demo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
.demo-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}
.demo-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.10);
    transform: translateY(-3px);
}
.demo-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FEF0F1;
    color: #E63946;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
}
.demo-title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.demo-desc {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.55;
}
.cta-section {
    background: #111827;
    text-align: center;
    padding: 88px 96px;
}
.cta-section .section-tag {
    background: rgba(230,57,70,0.15);
    color: #FF8087;
}
.cta-section h2 {
    color: #fff;
    max-width: 560px;
    margin: 0 auto 16px;
}
.cta-section p {
    color: #9CA3AF;
    max-width: 450px;
    margin: 0 auto 36px;
}
#cta .cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-section .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.25);
    cursor: pointer;
}
.cta-section .btn-ghost:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255,255,255,0.08);
}
div#fc {
    padding: 60px 0 00px 0;
    background: #f7f7f7;
}
.hero-sos-content span {
    font-size: 16px;
    font-weight: 500;
}
.hero-sos-content span span {
    height: 24px;
    width: 24px;
    background: #d1ffdb;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
    color: #35d105;
    margin-right: 5px;
}
.discuss-sospro {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 9;
    animation: badgeFloat 4s ease-in-out infinite;
}
.discuss-sospro a.btn-sospro {
    background: #e63946;
    color: #fff;
    padding: 20px 30px;
    border-radius: 50px;
    font-size: 18px;
    letter-spacing: 1px;
    cursor: pointer;
}
@media (max-width: 1100px) {
    .alt .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .features-grids {
        grid-template-columns: repeat(2, 1fr);
    }
    .demo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .alt .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .hero-sos {
        grid-template-columns: 1fr;
        padding-top: 7rem;
        min-height: auto;
        padding-bottom: 4rem;
    }
    .hero-sos::before {
        display: none;
    }
    .hero-visual {
        margin-top: 2rem;
    }
    .challenge-layout {
        grid-template-columns: 1fr;
    }
    .solution-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .snap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .snap-item {
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
    }
    .snap-item:nth-child(odd) {
        border-right: 1px solid #E5E7EB;
    }
    .snap-item:last-child {
        border-bottom: none;
    }
    .detail-block.active {
        grid-template-columns: 1fr;
    }
    .cs-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .cs-arrow-col {
        display: none;
    }
    .white .features-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}

@media (max-width: 640px) {
    .sos-page section {
        padding: 3.5rem 4vw;
    }
    .sos-page h1 {
        font-size: 1.95rem;
    }
    .sos-page h2 {
        font-size: 1.55rem;
    }
    .features-grids {
        grid-template-columns: 1fr;
    }
    .alt .tech-grid {
        grid-template-columns: 1fr 1fr;
    }
    .demo-grid {
        grid-template-columns: 1fr;
    }
    .alt .results-grid {
        grid-template-columns: 1fr 1fr;
    }
    .solution-stats {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .hero-btns {
        flex-direction: column;
    }
    .sos-page .btn-primary, .sos-page .btn-ghost {
        justify-content: center;
        text-align: center;
    }
    .snap-grid {
        grid-template-columns: 1fr;
    }
    .snap-item {
        border-right: none !important;
        border-bottom: 1px solid #E5E7EB;
    }
    .snap-item:last-child {
        border-bottom: none;
    }
    #cta .cta-btns {
        flex-direction: column;
        align-items: center;
    }
    #cta .cta-btns .btn-primary, #cta .cta-btns .btn-ghost {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    .hero-tag-sos {
        font-size: 0.68rem;
    }
}

@media (max-width: 400px) {
    .alt .results-grid {
        grid-template-columns: 1fr;
    }
    .alt .tech-grid {
        grid-template-columns: 1fr;
    }
    .detail-tabs {
        gap: 0.35rem;
    }
    .tab-btn {
        font-size: 0.74rem;
        padding: 0.38rem 0.8rem;
    }
}


/*-------SOS Safety css End------*/


/*--------POBO Case Study css start-------*/
.pobo-page body {
    background: #FAF6F0;
    color: #1A0A12;
    overflow-x: hidden;
  }
.heropobo {
    min-height: 100vh;
    padding-top: 64px;
    background: linear-gradient(135deg, #5C1434 0%, #7B1C45 50%, #A8295E 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.heropobo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.heropobo-inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 80px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.heropobo-badgess {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #F5EFE6;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.heropobo-badgess::before {
    content: '●';
    color: #7FD99A;
    font-size: 0.6rem;
}
.heropobo h1 {
    font-size: clamp(2.2rem, 4vw, 54px);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.15;
    margin-bottom: 20px;
}
.heropobo h1 span {
    color: #C9943A;
}
.heropobo-sub {
    font-size: 18px;
    color: rgba(245,239,230,0.82);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 480px;
}
.heropobo-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.pobo-page .btn-primary {
    background: #F5EFE6;
    color: #7B1C45;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s;
    letter-spacing: 0.3px;
    border: 2px solid #F5EFE6;
    cursor: pointer;
}
.pobo-page .btn-primary:hover {
    background: #C9943A;
    order-color: #C9943A;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.pobo-page {
    scroll-behavior: smooth;
}
.pobo-page .btn-secondary {
    background: transparent;
    color: #F5EFE6;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s;
    letter-spacing: 0.3px;
    border: 2px solid rgba(255,255,255,0.4);
    cursor: pointer;
}
.pobo-page .btn-secondary:hover {
    border-color: #F5EFE6;
    background: rgba(255,255,255,0.08);
}
.heropobo-img-wrap {
    position: relative;
    margin-left: -120px;
    z-index: -1;
}
.heropobo-img-wrap img {
    width: 100%;
    /*border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);*/
}
.heropobo-img-wrap::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 16px;
    /*background: linear-gradient(135deg, rgba(201,148,58,0.3), transparent 60%);*/
    z-index: -1;
}
.snapshotpobo {
    background: #5C1434;
    padding: 48px 0;
}
.snapshotpobo-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #7B1C45 0%, #5C1434 100%);
    border: 1px solid rgba(255,255,255,0.1);
}
.snappobo-item {
    padding: 28px 24px;
    border-right: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}
.snappobo-item:last-child {
    border-right: none;
}
.snappobo-label {
    color: rgba(245,239,230,0.55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.snappobo-value {
    color: #F5EFE6;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}
.pobo-page .revealss {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.pobo-page .revealss.visible {
    opacity: 1;
    transform: none;
}
.pobo-page section {
    padding: 96px 0;
}
.pobo-page .container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 48px;
}
.pobo-page .section-tag {
    display: inline-block;
    background: rgba(123,28,69,0.1);
    color: #7B1C45;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(123,28,69,0.2);
}
.pobo-page h2 {
    font-size: clamp(1.8rem, 3vw, 42px);
    font-weight: 700;
    color: #5C1434;
    line-height: 1.25;
    margin-bottom: 20px;
}
.pobo-page .lead-text {
    font-size: 18px;
    color: #4A2535;
    line-height: 1.8;
    max-width: 640px;
}
.problemss {
    background: #FAF6F0;
}
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-top: 48px;
}
.problem-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.problem-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: white;
    padding: 12px 24px;
    border-radius: 10px;
    border-left: 4px solid #7B1C45;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.problem-point:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(123,28,69,0.12);
}
.problem-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #851651;
}
.problem-point h4 {
    font-weight: 700;
    color: #5C1434;
    margin-bottom: 4px;
    font-size: 16px;
}
.problem-point p {
    font-size: 16px;
    color: #8A6070;
    line-height: 1.6;
    margin-bottom: 0;
}
.problem-img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(123,28,69,0.2);
    border: 1px solid #EDE4D8;
}
.solutionsec {
    background: white;
}
.solutionsec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-top: 48px;
}
.solutionsec-img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(123,28,69,0.15);
    border: 1px solid #EDE4D8;
}
.solutionsec-text .lead-text {
    max-width: 100%;
    margin-bottom: 28px;
}
.highlight-box {
    background: linear-gradient(135deg, rgba(123,28,69,0.06), rgba(201,148,58,0.06));
    border: 1px solid rgba(123,28,69,0.15);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.highlight-box .icon {
    font-size: 24px;
    flex-shrink: 0;
    color: #ffb153;
}
.highlight-box p {
    font-size: 16px;
    color: #4A2535;
    line-height: 1.6;
    font-style: italic;
}
.highlight-box p strong {
    color: #7B1C45;
    font-style: normal;
}
.pobofeatures {
    background: #F5EFE6;
}
.pobofeatures-header {
    margin-bottom: 56px;
}
.pobofeatures-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pobofeature-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #EDE4D8;
}
.pobofeature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(123,28,69,0.15);
}
.pobofeature-card-img {
    height: 180px;
    overflow: hidden;
    background: #EDE4D8;
}
.pobofeature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.pobofeature-card-body {
    padding: 24px;
}
.pobofeature-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(123,28,69,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
    color: #851651;
}
.pobofeature-card h3 {
    font-weight: 700;
    font-size: 18px;
    color: #5C1434;
    margin-bottom: 8px;
}
.pobofeature-card p {
    font-size: 16px;
    color: #8A6070;
    line-height: 1.65;
}


.mid-cta {
    background: linear-gradient(135deg, #5C1434 0%, #A0234F 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.mid-cta::before {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(201,148,58,0.12);
    pointer-events: none;
}
.mid-cta-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.mid-cta h2 {
    color: white;
}
.mid-cta .lead-text {
    color: rgba(245,239,230,0.8);
    text-align: center;
    max-width: 100%;
    margin: 0 auto 36px;
}
.mid-cta .hero-btns {
    justify-content: center;
}

.how-it-works {
    background: white;
}
.poboflow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 56px;
    position: relative;
}
.poboflow-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: linear-gradient(90deg, #7B1C45, #C9943A);
    z-index: 0;
}
.poboflow-step {
    text-align: center;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.step-num {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #7B1C45, #9E2458);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(123,28,69,0.35);
    border: 4px solid white;
}
.poboflow-step h4 {
    font-weight: 700;
    font-size: 16px;
    color: #5C1434;
    margin-bottom: 8px;
}
.poboflow-step p {
    font-size: 15px;
    color: #8A6070;
    line-height: 1.6;
}
.detail-section {
    padding: 80px 0;
}
.detail-section:nth-child(odd) {
    background: white;
}
.detail-section:nth-child(even) {
    background: #FAF6F0;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-top: 40px;
}
.detail-grid.reverse {
    direction: rtl;
}
.detail-grid.reverse > * {
    direction: ltr;
}
.detail-text p {
    font-size: 16px;
    color: #4A2535;
    line-height: 1.8;
    margin-bottom: 16px;
}
.detail-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(123,28,69,0.15);
    border: 1px solid #EDE4D8;
}
.detail-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #4A2535;
    list-style: none;
}
.detail-list li::before {
    content: '✦';
    color: #7B1C45;
    font-size: 14px;
    flex-shrink: 0;
}

.pobotech {
    background: #5C1434;
    padding: 96px 0;
}
.pobotech h2 {
    color: white;
}
.pobotech .section-tag {
    background: rgba(245,239,230,0.12);
    color: #F5EFE6;
    border-color: rgba(245,239,230,0.2);
}
.pobotech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.pobotech-group {
    background: rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 32px;
    border: 1px solid rgba(255,255,255,0.1);
}
.pobotech-group h3 {
    color: #C9943A;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 14px;
}
.pobotech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pobotech-chip {
    background: rgba(255,255,255,0.1);
    color: #F5EFE6;
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.15);
}
.pobochallenges {
    background: #FAF6F0;
}
.pobochallenge-items {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 48px;
}
.pobochallenge-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #EDE4D8;
}
.pobochallenge-prob, .pobochallenge-sol {
    padding: 28px 32px;
}
.pobochallenge-prob {
    background: rgba(123,28,69,0.04);
    border-right: 1px solid #EDE4D8;
}
.pobochallenge-prob h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5C1434;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}
.pobochallenge-prob h4::before {
    content: "\f0e7";
    font: 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.pobochallenge-sol h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1A6B3A;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}
.pobochallenge-sol h4::before {
    content: "\f00c";
    font: 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.pobochallenge-prob p, .pobochallenge-sol p {
    font-size: 14px;
    color: #8A6070;
    line-height: 1.7;
}

.poboresults {
    background: white;
}
.poboresults-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.poboresult-card {
    background: linear-gradient(135deg, #F5EFE6, #EDE4D8);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #EDE4D8;
    transition: transform 0.3s, box-shadow 0.3s;
}
.poboresult-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(123,28,69,0.12);
}
.poboresult-icon {
    font-size: 22px;
    margin-bottom: 12px;
}
.poboresult-icon i {
    color: #7b206d;
    height: 50px;
    width: 50px;
    background: rgb(123 32 109 / 10%);
    text-align: center;
    border-radius: 4px;
    line-height: 50px;
}
.poboresult-card h3 {
    font-size: 22px;
    color: #7B1C45;
    font-weight: 700;
    margin-bottom: 8px;
}
.poboresult-card p {
    font-size: 14px;
    color: #4A2535;
    line-height: 1.6;
}

.final-cta {
    background: #F5EFE6;
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 300px;
    color: rgba(123,28,69,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.final-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 48px;
}
.final-cta h2 {
    color: #5C1434;
    margin-bottom: 16px;
}
.final-cta .lead-text {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 36px;
}
.final-cta .hero-btns {
    justify-content: center;
}
.nda-note {
    margin-top: 32px;
    font-size: 12px;
    color: #8A6070;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.nda-note::before {
    content: "\f023";
    font: 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 992px) {
    .heropobo-img-wrap {
        margin-left: 0px;
    }
    .heropobo-inner,
    .problem-grid,
    .solutionsec-grid,
    .detail-grid,
    .pobochallenge-item {
        grid-template-columns: 1fr;
    }
    .pobofeatures-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .poboresults-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .poboflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .poboflow-steps::before {
        display: none;
    }
    .snapshotpobo-inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .pobotech-grid {
        grid-template-columns: 1fr;
    }
    .heropobo-inner {
        max-width: 100%;
        padding: 0px 20px;
    }
}
@media (max-width: 600px) {
    .snapshotpobo-inner {
        grid-template-columns: repeat(1, 1fr);
    }
    .heropobo-img-wrap::before {
        inset: -6px;
    }
    .snappobo-item {
        padding: 20px 10px;
        border-right: 0px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .snapshotpobo-inner {
        margin: 0 20px;
        padding: 0 0px;
    }
    .pobo-page .container {
        padding: 0 20px;
    }
    .pobofeatures-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .mid-cta-inner {
        padding: 0 20px;
    }
    .poboflow-steps {
        grid-template-columns: repeat(1, 1fr);
    }
    .pobotech-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
    .pobotech-group {
        padding: 20px;
    }
    .pobochallenge-prob, .pobochallenge-sol {
        padding: 20px 20px;
    }
    .pobo-page .lead-text {
        font-size: 16px;
        line-height: 1.4;
    }
    .poboresults-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .final-cta-inner {
        padding: 0 20px;
    }
    .detail-text p {
        line-height: 1.4;
    }
    .detail-list {
        gap: 4px;
    }
    .pobofeature-card p {
        margin-bottom: 0;
    }
    .pobofeature-card-body {
        padding: 20px;
    }
    .highlight-box {
        padding: 20px 20px;
    }
    .problem-point {
        padding: 12px 20px;
    }
    .heropobo-badgess {
        gap: 6px;
        padding: 8px 16px 6px 16px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin-bottom: 20px;
    }
    .heropobo h1 {
        font-size: clamp(32px, 4vw, 54px);
        line-height: 1.3;
    }
    .pobo-page h2 {
        font-size: clamp(26px, 3vw, 42px);
    }
    .pobotech-group h3 {
        margin-top: 0;
    }
    .pobo-page section {
        padding: 60px 0;
    }
    .detail-grid {
        margin-top: 0px;
    }
}
a:focus{
    outline: none;
}

/*--------POBO Case Study css end-------*/


/*--------Aligning life Case Study css start-------*/
.natural body{
    font-family: "Poppins", sans-serif!important;
}
.naturalhero {
    min-height: 100vh;
    background: #0a1724;
    display: flex;
    align-items: center;
    padding: 7rem 5% 5rem;
    position: relative;
    overflow: hidden;
}
.naturalhero-dots {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: radial-gradient(circle, rgba(255,207,143,1) 1.5px, transparent 1.5px);
    background-size: 36px 36px;
}
.naturalhero-glow {
    position: absolute;
    right: -10%;
    top: -20%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,124,238,0.22) 0%, transparent 65%);
    pointer-events: none;
}
.naturalhero-glow2 {
    position: absolute;
    left: -5%;
    bottom: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,82,130,0.16) 0%, transparent 65%);
    pointer-events: none;
}
.naturalhero-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
.naturalhero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 207, 143, 0.14);
    border: 1px solid rgba(255, 207, 143, 0.28);
    color: #ffcf8f;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
    animation: fadeUp 0.6s ease both;
}
.naturalhero h1 {
    font-size: clamp(60px, 8vw, 90px);
    font-weight: 800;
    color: white;
    margin-bottom: 24px;
    animation: fadeUp 0.7s ease 0.1s both;
}
.naturalhero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ffcf8f, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.naturalhero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 520px;
    animation: fadeUp 0.7s ease 0.2s both;
}
.naturalhero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeUp 0.7s ease 0.3s both;
}
.btn-hp {
    background: #ffcf8f;
    color: #0a1724;
    padding: 14px 32px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s;
}
.btn-hp:hover {
    background: #ffb347;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,207,143,0.4);
}
.btn-ho {
    border: 1px solid rgba(255,255,255,0.24);
    color: white;
    padding: 14px 32px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
}
.btn-ho:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.5);
}

.naturalphone-wrap {
    animation: fadeUp 0.9s ease 0.4s both;
    display: flex;
    justify-content: center;
    animation: float 4s ease-in-out infinite;
}
.phone-frame {
    background: linear-gradient(150deg, #1e3550, #0d1f30);
    border: 1px solid rgba(255,207,143,0.18);
    border-radius: 36px;
    padding: 30px 24px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    width: 100%;
    max-width: 280px;
}
.ph-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}
.ph-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.7px;
}
.ph-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffcf8f;
}
.clock-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
    position: relative;
}
.csvg {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}
.c-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ct {
    font-size: 20px;
    font-weight: 700;
    color: white;
}
.cl {
    font-size: 12px;
    color: rgba(255,207,143,0.7);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.pills {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
}
.pdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pname {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    flex: 1;
}
.ptime {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    } to {
        opacity: 1;
        transform: translateY(0);
    }
}
.stats-row {
    background: #ffefd4;
    border-bottom: 1px solid #f0d9a8;
    padding: 40px 5%;
}
.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}
.stat {
    text-align: center;
    padding: 14px;
}
.snum {
    font-size: 34px;
    font-weight: 800;
    color: #0a1724;
    line-height: 1;
}
.slabel {
    font-size: 14px;
    color: #4a5568;
    margin-top: 0.3rem;
}
.naturalwrap {
    max-width: 1200px;
    margin: 0 auto;
}
.stag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #f49149;
    margin-bottom: 14px;
}
.stag::before {
    content: '— ';
}
h2.stit {
    font-size: clamp(32px, 5vw, 50px);
    font-weight: 800;
    color: #0a1724;
    margin-bottom: 20px;
}
h2.stit em {
    font-style: normal;
    color: #f49149;
}
.sdesc {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.75;
    max-width: 580px;
}
.naturalsnapshot {
    padding: 80px 5%;
    background: #f9f7f4;
    border-top: 1px solid #e8e4df;
}
.naturalsnap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
    gap: 16px;
    margin-top: 40px;
}
.naturalsnap-card {
    background: white;
    border: 1px solid #e8e4df;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.25s;
}
.naturalsnap-card:hover {
    border-color: #f49149;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(229,82,130,0.1);
}
.naturalsnap-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a96a3;
    margin-bottom: 4px;
}
.naturalsnap-value {
    font-size: 16px;
    font-weight: 700;
    color: #0a1724;
}
.naturalproblem {
    padding: 96px 5%;
    background: white;
}
.naturalproblem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 48px;
}
.ppoint {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #e8e4df;
    margin-bottom: 16px;
    background: #f9f7f4;
    transition: all 0.25s;
}
.ppoint:hover {
    border-color: #f49149;
    background: #fdeef3;
    transform: translateX(4px);
}
.pico {
    font-size: 18px;
    flex-shrink: 0;
    color: #e45385;
}
.ptxt {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.65;
}
.ptxt strong {
    color: #0a1724;
}
.prob-chart {
    background: #f9f7f4;
    border: 1px solid #e8e4df;
    border-radius: 20px;
    padding: 32px;
}
.pch-title {
    font-size: 14px;
    font-weight: 700;
    color: #0a1724;
    margin-bottom: 24px;
}
.pbar-row {
    margin-bottom: 16px;
}
.pbar-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4a5568;
    margin-bottom: 6px;
}
.pbar-pct {
    font-weight: 700;
    color: #f49149;
}
.pbar-bg {
    height: 8px;
    background: #eee;
    border-radius: 100px;
    overflow: hidden;
}
.pbar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #f49149, #c47cee);
}
.pch-note {
    font-size: 12px;
    color: #8a96a3;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e8e4df;
}

.approach {
    padding: 6rem 5%;
    background: #0a1724;
}
.approach .stag {
    color: #ffcf8f;
}
.approach h2.stit {
    color: white;
}
.approach h2.stit em {
    color: #ffcf8f;
}
.approach .sdesc {
    color: rgba(255,255,255,0.58);
}
.app-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 24px;
    margin-top: 48px;
}
.app-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.app-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bc, #ffcf8f);
}
.app-card:nth-child(1) {
    --bc: #ffcf8f;
}
.app-card:nth-child(2) {
    --bc: #f49149;
}
.app-card:nth-child(3) {
    --bc: #c47cee;
}
.app-card:nth-child(4) {
    --bc: #6eb5ff;
}
.app-card:hover {
    background: rgba(255,255,255,0.09);
    transform: translateY(-4px);
}
.app-num {
    font-size: 40px;
    font-weight: 800;
    color: rgba(255,255,255,0.07);
    line-height: 1;
    margin-bottom: 16px;
}
.app-head {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}
.app-body {
    font-size: 14px;
    color: rgba(255,255,255,0.52);
    line-height: 1.7;
}

.naturalfeatures {
    padding: 96px 5%;
    background: #f9f7f4;
    border-top: 1px solid #e8e4df;
}
.naturalfeat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
    gap: 24px;
    margin-top: 48px;
}
.naturalfeat-card {
    background: white;
    border: 1px solid #e8e4df;
    border-radius: 20px;
    padding: 28px;
    transition: all 0.3s;
}
.naturalfeat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    border-color: #ddd;
}
.naturalfeat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.ig {
    background: #ffefd4;
    color: #f1a92f;
}
.ip {
    background: #fdeef3;
    color: #e5528
}
.iu {
    background: #f5ecfd;
    color: #b057ff;
}
.ib {
    background: #eef5fc;
    color: #47a0f9;
}
.ie {
    background: #edfaf3;
    color: #08c55f;
}
.io {
    background: #fff3e8;
    color: #ffa654;
}
.naturalfeat-head {
    font-size: 16px;
    font-weight: 700;
    color: #0a1724;
    margin-bottom: 8px;
}
.naturalfeat-body {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.7;
}

.naturalflow {
    padding: 80px 5%;
    background: white;
    border-top: 1px solid #e8e4df;
}
.naturalflow-pipe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 48px;
}
.naturalflow-step {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    position: relative;
    padding: 0 8px;
}
.naturalflow-step:not(:last-child)::after {
    content: '›';
    position: absolute;
    right: -8px;
    top: 15px;
    font-size: 22px;
    color: #8a96a3;
}
.naturalflow-bub {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8eef5;
    border: 2px solid #e8e4df;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s;
}
.naturalflow-step:hover .naturalflow-bub {
    background: #fdeef3;
    border-color: #f49149;
    color: #f49149;
}
.naturalflow-lbl {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.35;
}

.naturaltech {
    padding: 96px 5%;
    background: #f9f7f4;
    border-top: 1px solid #e8e4df;
}
.naturaltech-cols {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 48px;
}
.naturaltech-col {
    background: white;
    border: 1px solid #e8e4df;
    border-radius: 20px;
    padding: 32px;
}
.naturaltech-head {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0a1724;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tc, #ffcf8f);
}
.naturaltech-col:nth-child(1) .naturaltech-head {
    --tc: #ffcf8f;
}
.naturaltech-col:nth-child(2) .naturaltech-head {
    --tc: #f49149;
}
.naturaltech-col:nth-child(3) .naturaltech-head {
    --tc: #c47cee;
}
.naturaltech-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.naturaltech-item {
    font-size: 14px;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
}
.naturaltech-item::before {
    content: '›';
    color: #f49149;
    font-weight: 700;
    flex-shrink: 0;
}

.naturalchallenges {
    padding: 96px 5%;
    background: #0a1724;
}
.naturalchallenges .stag {
    color: #ffcf8f;
}
.naturalchallenges h2.stit {
    color: white;
}
.naturalchallenges h2.stit em {
    color: #ffcf8f;
}
.ch-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}
.ch-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: border-color 0.25s;
}
.ch-card:hover {
    border-color: rgba(255,207,143,0.22);
}
.ch-half {
    padding: 32px;
}
.ch-half.lft {
    border-right: 1px solid rgba(255,255,255,0.07);
}
.ch-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.ch-lbl.c {
    color: #f49149;
}
.ch-lbl.s {
    color: #50d28c;
}
.ch-h {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}
.ch-b {
    font-size: 14px;
    color: rgba(255,255,255,0.52);
    line-height: 1.7;
}

.naturalresults {
    padding: 96px 5%;
    background: white;
    border-top: 1px solid #e8e4df;
}
.naturalres-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin-top: 48px;
}
.naturalres-card {
    background: #f9f7f4;
    border: 1px solid #e8e4df;
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
.naturalres-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rc, #ffcf8f);
}
.naturalres-card:nth-child(1) {
    --rc: #ffcf8f;
}
.naturalres-card:nth-child(2) {
    --rc: #f49149;
}
.naturalres-card:nth-child(3) {
    --rc: #c47cee;
}
.naturalres-card:nth-child(4) {
    --rc: #50d28c;
}
.naturalres-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.naturalres-num {
    font-size: 44px;
    font-weight: 800;
    color: #0a1724;
    line-height: 1;
    margin-bottom: 6px;
}
.naturalres-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a1724;
    margin-bottom: 8px;
}
.naturalres-body {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.65;
}

.naturalsg {
    padding: 96px 5%;
    background: #f9f7f4;
    border-top: 1px solid #e8e4df;
}
.naturalsg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 48px;
}
.naturalsg-col {
    border-radius: 20px;
    padding: 32px;
}
.naturalsg-col.st {
    background: #edfaf3;
    border: 1px solid #b7e8ce;
}
.naturalsg-col.gp {
    background: #fdeef3;
    border: 1px solid #f5b8cf;
}
.naturalsg-head {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}
.naturalsg-col.st .naturalsg-head {
    color: #1d7a4a;
}
.naturalsg-col.gp .naturalsg-head {
    color: #b8355f;
}
.naturalsg-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.naturalsg-item {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
}
.naturalsg-item::before {
    flex-shrink: 0;
    margin-top: 2px;
    font-weight: 700;
}
.st .naturalsg-item {
    color: #1d6f42;
}
.gp .naturalsg-item {
    color: #b8355f;
}
.st .naturalsg-item::before {
    content: '✓';
}
.gp .naturalsg-item::before {
    content: '○';
}


.naturalcta {
    padding: 128px 5%;
    background: #ffefd4;
    border-top: 3px solid #f5c878;
    text-align: center;
}
.naturalcta-inner {
    max-width: 680px;
    margin: 0 auto;
}
.naturalcta-eye {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b8355f;
    margin-bottom: 20px;
    font-weight: 700;
}
.naturalcta h2 {
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 800;
    color: #0a1724;
    margin-bottom: 16px;
}
.naturalcta h2 span {
    color: #f49149;
}
.naturalcta p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 40px;
}
.naturalcta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-cp {
    background: #0a1724;
    color: white;
    padding: 16px 36px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s;
}
.btn-cp:hover {
    background: #f49149;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(229,82,130,0.35);
}
.btn-cs {
    border: 2px solid #0a1724;
    color: #0a1724;
    padding: 16px 36px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s;
    background: transparent;
    cursor: pointer;
}
.btn-cs:hover {
    background: #0a1724;
    color: white;
    transform: translateY(-2px);
}
.rev {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.rev.in {
    opacity: 1;
    transform: translateY(0);
}
.naturalphone-wrap{
    width: 80%;
}

@media (max-width: 1024px) {
    .naturalhero-inner {
        grid-template-columns: 1fr;
    }
    .naturalproblem-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .naturaltech-cols {
        grid-template-columns: 1fr;
    }
    .ch-card {
        grid-template-columns: 1fr;
    }
    .ch-half.lft {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .naturalres-grid {
        grid-template-columns: 1fr;
    }
    .naturalsg-grid {
        grid-template-columns: 1fr;
    }
    .naturalphone-wrap {
        margin: 0 auto;
    }
    .naturalhero-sub {
        margin: 0 auto;
        margin-bottom: 40px;
        text-align: center;
    }
    .naturalhero h1 {
        text-align: center;
    }
    .naturalhero-actions {
        justify-content: center;
    }
    .naturalhero-inner>div {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .naturalhero {
        padding: 6rem 4% 4rem;
    }
    .stats-inner {
        grid-template-columns: repeat(2,1fr);
    }
    .naturalsnapshot,.naturalproblem,.approach,.naturalfeatures,
    .naturalflow,.naturaltech,.naturalchallenges,.naturalresults,.naturalsg,.naturalcta {
        padding: 4rem 4%;
    }
    .naturalfeat-grid {
        grid-template-columns: 1fr;
    }
    .naturalflow-pipe {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
    .naturalflow-step {
        flex-direction: row;
        text-align: left;
    }
    .naturalflow-step:not(:last-child)::after {
        display: none;
    }
    .naturalhero-actions, .naturalcta-btns {
        flex-direction: column;
        align-items: flex-start;
    }
    .naturalcta-btns {
        align-items: center;
    }
}

/*--------Aligning life Case Study css end-------*/

/*--------On Demand Home Services Marketplace Case Study css start-------*/
.ferdilhero {
    min-height: 100vh;
    background: linear-gradient(135deg, #1C2B4A 0%, #2C4A8A 55%, #3D5FA0 100%);
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
    position: relative;
}
.ferdilhero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ferdilhero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
}
.ferdilhero h1 {
    color: #FFFFFF;
    font-size: clamp(32px,5vw,58px);
    line-height: 1.15;
    margin-bottom: 24px;
}
.ferdilhero h1 span {
    color: #F5A623;
}
.ferdilhero-sub {
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    margin-bottom: 36px;
    max-width: 520px;
}
.hero-bullets {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
.hero-bullets li {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-bullets li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #F5A623;
    border-radius: 50%;
    color: #1C2B4A;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.btn-hero-primary {
    background: #F5A623;
    color: #1C2B4A;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-right: 12px;
    margin-bottom: 12px;
}
.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245,166,35,0.4);
    color: #1C2B4A;
}
.btn-hero-secondary {
    background: transparent;
    color: #FFFFFF;
    font-weight: 600;
    padding: 13px 32px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.4);
    font-size: 15px;
    display: inline-block;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 12px;
}
.btn-hero-secondary:hover {
    border-color: #FFFFFF;
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
}
.hero-metrics {
    display: flex;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.hero-metric {
    text-align: center;
}
.hero-metric .num {
    font-size: 28px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
}
.hero-metric .lbl {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 4px;
}
.hero-metric-divider {
    width: 1px;
    background: rgba(255,255,255,0.2);
    align-self: stretch;
}
.hero-img-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hero-img-main {
    border-radius: 20px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.4);
    max-height: 680px;
    object-fit: cover;
    object-position: top;
    width: 100%;
}
.hero-float-card {
    position: absolute;
    bottom: 40px;
    left: -20px;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    min-width: 170px;
}
.hero-float-card .hfc-label {
    font-size: 11px;
    color: #6B7A99;
    margin-bottom: 4px;
    font-weight: 500;
}
.hero-float-card .hfc-val {
    font-size: 22px;
    font-weight: 800;
    color: #1C2B4A;
}
.hero-float-card .hfc-trend {
    font-size: 12px;
    color: #27AE60;
    font-weight: 600;
}
.sec-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2C4A8A;
    margin-bottom: 12px;
}
.sec-title {
    font-size: clamp(26px,4vw,42px);
    line-height: 1.2;
    margin-bottom: 20px;
}
.sec-desc {
    font-size: 17px;
    color: #6B7A99;
    max-width: 600px;
    line-height: 1.8;
}
.sec-divider {
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, #2C4A8A, #C0392B);
    border-radius: 2px;
    margin: 16px 0 28px;
}
.ferdilproblem-sec {
    background: #F7F9FC;
    padding: 100px 0;
}
.ferdilproblem-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 36px 32px;
    height: 100%;
    border: 1px solid rgba(28,43,74,0.10);
    transition: box-shadow 0.3s, transform 0.3s;
}
.ferdilproblem-card:hover {
    box-shadow: 0 20px 48px rgba(28,43,74,0.10);
    transform: translateY(-4px);
}
.ferdilproblem-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}
.ferdilproblem-card h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #1C2B4A;
}

.approach-sec {
    padding: 100px 0;
}
.approach-point {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
    align-items: center;
}
.approach-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1C2B4A;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.approach-point p {
    margin: 0;
    font-size: 16px;
    color: #111827;
    font-weight: 500;
}
.frdfeatures-sec {
    background: #1C2B4A;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.frdfeatures-sec::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.frdfeatures-sec .sec-label {
    color: #F5A623;
}
.frdfeatures-sec .sec-title {
    color: #FFFFFF;
}
.frdfeatures-sec .sec-desc {
    color: rgba(255,255,255,0.65);
}
.frdfeatures-sec .sec-divider {
    background: linear-gradient(90deg, #F5A623, #C0392B);
}
.frdfeature-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 32px 28px;
    height: 100%;
    transition: background 0.3s, transform 0.3s;
    margin-bottom: 24px;
}
.frdfeature-card:hover {
    background: rgba(255,255,255,0.10);
    transform: translateY(-4px);
}
.frdfeature-icon {
    font-size: 28px;
    margin-bottom: 18px;
    color: #F5A623;
}
.frdfeature-card h4 {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
}
.frdfeature-card p {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    margin: 0;
}

.hiw-sec {
    padding: 100px 0;
    background: #F7F9FC;
}
.hiwstep-wrap {
    position: relative;
}
.hiwstep-line {
    position: absolute;
    top: 28px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    background: linear-gradient(90deg, #2C4A8A, transparent);
}
.hiwstep-item {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
}
.hiwstep-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1C2B4A;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 24px rgba(28,43,74,0.25);
}
.hiwstep-item h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1C2B4A;
    margin-bottom: 8px;
}
.hiwstep-item p {
    font-size: 13px;
    color: #6B7A99;
    margin: 0;
}
.screens-sec {
    padding: 100px 0;
}
.screen-tab-wrap {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.screen-tab {
    padding: 10px 22px;
    border-radius: 50px;
    border: 1.5px solid rgba(28,43,74,0.10);
    font-size: 14px;
    font-weight: 600;
    color: #6B7A99;
    cursor: pointer;
    transition: all 0.2s;
    background: #FFFFFF;
}
.screen-tab.active, .screen-tab:hover {
    background: #1C2B4A;
    color: #FFFFFF;
    border-color: #1C2B4A;
}
.screen-panel {
    display: none;
}
.screen-panel.active {
    display: block;
}
.screen-img {
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(28,43,74,0.15);
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    object-position: top;
}
.screen-info {
    padding: 20px 15px 0;
}
.screen-info h4 {
    font-size: 20px;
    color: #1C2B4A;
    font-weight: 700;
    margin-bottom: 10px;
}
.screen-info p {
    font-size: 15px;
    color: #6B7A99;
}
.frdresults-sec {
    background: linear-gradient(135deg, #1C2B4A 0%, #2C4A8A 100%);
    padding: 100px 0;
}
.frdresults-sec .sec-label {
    color: #F5A623;
}
.frdresults-sec .sec-title {
    color: #FFFFFF;
}
.frdresult-card {
    text-align: center;
    padding: 40px 24px;
}
.frdresult-card .r-num {
    font-size: 52px;
    font-weight: 600;
    color: #F5A623;
    line-height: 1;
}
.frdresult-card .r-label {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 8px;
}
.frdresult-card .r-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}
.frdresult-divider {
    width: 1px;
    background: rgba(255,255,255,0.12);
    align-self: stretch;
}
.tech-sec {
    padding: 100px 0;
    background: #F7F9FC;
}
.tech-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(28,43,74,0.10);
    border-radius: 12px;
    padding: 18px 24px;
    font-weight: 700;
    color: #1C2B4A;
    font-size: 16px;
    transition: box-shadow 0.3s, transform 0.3s;
    margin-bottom: 16px;
}
.tech-badge:hover {
    box-shadow: 0 8px 24px rgba(28,43,74,0.10);
    transform: translateY(-2px);
}
.tech-badge .t-icon {
    font-size: 28px;
}

.challenges-sec {
    padding: 100px 0;
}
.challenge-item {
    display: flex;
    gap: 24px;
    margin-bottom: 48px;
    align-items: flex-start;
}
.c-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #E8EDF8;
    color: #2C4A8A;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.challenge-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1C2B4A;
    margin-bottom: 8px;
}
.challenge-item p {
    margin: 0;
    font-size: 15px;
}

.testimonial-sec {
    background: #1C2B4A;
    padding: 100px 0;
    text-align: center;
}
.testimonial-sec blockquote {
    font-size: clamp(18px,3vw,24px);
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.5;
    max-width: 740px;
    margin: 0 auto 36px;
    position: relative;
}
.testimonial-sec blockquote::before {
    content: '"';
    font-size: 120px;
    color: #F5A623;
    opacity: 0.25;
    position: absolute;
    top: -30px; left: -20px;
    line-height: 1;
}
.testimonial-author {
    color: #F5A623;
    font-weight: 700;
    font-size: 16px;
}
.testimonial-role {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    margin-top: 4px;
}
.stars {
    color: #F5A623;
    font-size: 20px;
    margin-bottom: 32px;
}
.highlight-sec {
    padding: 100px 0;
}
.highlight-card {
    background: linear-gradient(135deg, #E8EDF8 0%, #EEF2FB 100%);
    border-radius: 24px;
    padding: 60px 50px;
    border: 1px solid rgba(44,74,138,0.12);
}
.highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.highlight-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: #1C2B4A;
    font-weight: 500;
    margin-bottom: 16px;
}
.highlight-list li::before {
    content: '→';
    color: #2C4A8A;
    font-weight: 800;
    font-size: 16px;
}

.outcome-sec {
    padding: 100px 0;
    background: #F7F9FC;
}
.outcome-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(28,43,74,0.10);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 16px;
}
.outcome-badge i {
    font-size: 22px;
    color: #2C4A8A;
}
.outcome-badge span {
    font-size: 16px;
    font-weight: 600;
    color: #1C2B4A;
}

.frdcta-sec {
    background: linear-gradient(135deg, #1C2B4A 0%, #2C4A8A 100%);
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.frdcta-sec::before {
    content: '';
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.frdcta-sec h2 {
    color: #FFFFFF;
    font-size: clamp(28px,4vw,48px);
    margin-bottom: 20px;
}
.frdcta-sec p {
    color: rgba(255,255,255,0.70);
    font-size: 18px;
    max-width: 520px;
    margin: 0 auto 40px;
}
.btn-cta {
    background: #F5A623;
    color: #1C2B4A;
    font-weight: 800;
    font-size: 17px;
    padding: 18px 48px;
    border-radius: 8px;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-cta:hover {
    color: #1C2B4A;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(245,166,35,0.40);
}

.pt-100 {
    padding-top: 100px;
}
.pb-100 {
    padding-bottom: 100px;
}
.mt-60  {
    margin-top: 60px;
}
.mb-60  {
    margin-bottom: 60px;
}

.reveal-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-animation.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 {
    transition-delay: 0.1s;
}
.reveal-delay-2 {
    transition-delay: 0.2s;
}
.reveal-delay-3 {
    transition-delay: 0.3s;
}
.reveal-delay-4 {
    transition-delay: 0.4s;
}

@media(max-width:992px) {
    .ferdilhero { padding: 100px 0 60px; min-height: auto; }
    .hero-img-wrap { margin-top: 40px; }
    .hero-float-card { display: none; }
    .highlight-card { padding: 40px 28px; }
    .step-line { display: none; }
    .ferdilproblem-card {
        margin-bottom: 20px;
    }
}
@media(max-width:768px) {
    .hero-metrics { gap: 20px; }
    .hero-metric-divider { display: none; }
    .frdresult-card { border-bottom: 1px solid rgba(255,255,255,0.10); padding: 32px 16px; }
}
/*--------On Demand Home Services Marketplace Case Study css end-------*/

/*--------Co Parenting Platform Case Study css Start-------*/

.co-parenting body {
    font-family: "Poppins", sans-serif !important;
}
.cohero {
    padding: 140px 0 80px;
    background: linear-gradient(145deg, #F8FAF7 0%, #EFF4EE 100%);
    position: relative;
    overflow: hidden;
}
.cohero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(143,166,138,0.18) 0%, transparent 70%);
    border-radius: 50%;
}
.cohero-tag {
    display: inline-block;
    background: #FDEEF0;
    color: #E05B6D;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
}
.cohero h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15;
    margin-bottom: 20px;
    color: #1E1E1E;
}
.cohero-sub {
    font-size: 17px;
    color: #4A4A4A;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 32px;
}
.cohero-bullets {
    list-style: none;
    padding: 0;
    margin-bottom: 36px;
}
.cohero-bullets li {
    font-size: 15px;
    color: #4A4A4A;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cohero-bullets li::before {
    content: '';
    width: 8px; height: 8px;
    background: #8FA68A;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-primary-custom {
    background: #6B8A65;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .25s, transform .2s;
}
.btn-primary-custom:hover {
    background: #8FA68A;
    color: #fff;
    transform: translateY(-2px);
}
.btn-outline-custom {
    background: transparent;
    color: #6B8A65;
    border: 2px solid #6B8A65;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-left: 12px;
    transition: all .25s;
}
.btn-outline-custom:hover {
    background: #6B8A65;
    color: #fff;
}
.cohero-phones {
    position: relative;
    text-align: center;
}
.cophone-wrap {
    display: inline-block;
    position: relative;
}
.cophone-img {
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.15);
    width: 200px;
    margin: 0 -20px;
    position: relative;
    transition: transform .3s;
}
.cophone-img:first-child {
    transform: rotate(-6deg) translateY(20px);
    z-index: 1;
}
.cophone-img:nth-child(2) {
    z-index: 3;
    transform: scale(1.05);
}
.cophone-img:last-child {
    transform: rotate(6deg) translateY(20px);
    z-index: 1;
}

.cosnapshot {
    padding: 70px 0;
    background: #1E1E1E;
}
.cosnapshot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.cosnap-item {
    flex: 1 1 180px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.cosnap-item:last-child {
    border-right: none;
}
.cosnap-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #B5C8B0;
    margin-bottom: 8px;
}
.cosnap-value {
    font-size: 18px;
    color: #fff;
    line-height: 1.3;
}

.co-parenting section {
    padding: 90px 0;
}
.co-parenting .section-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6B8A65;
    font-weight: 600;
    margin-bottom: 14px;
}
.co-parenting .section-title {
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.2;
    margin-bottom: 20px;
}
.co-parenting .section-desc {
    font-size: 16px;
    color: #4A4A4A;
    line-height: 1.75;
    max-width: 560px;
}

.coproblem {
    background: #F8FAF7;
}
.coproblem-card {
    background: #fff;
    border: 1px solid #E0E8DE;
    border-radius: 16px;
    padding: 32px 28px;
    height: 100%;
    transition: box-shadow .25s, transform .25s;
}
.coproblem-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
.coproblem-icon {
    width: 48px;
    height: 48px;
    background: #FDEEF0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #E05B6D;
}
.coproblem-card h4 {
    font-size: 17px;
    margin-bottom: 10px;
}
.coproblem-card p {
    font-size: 14px;
    color: #4A4A4A;
    line-height: 1.65;
    margin: 0;
}

.coapproach {
    background: #fff;
}
.coapproach-highlight {
    background: #EFF4EE;
    border-left: 4px solid #6B8A65;
    padding: 24px 28px;
    border-radius: 0 12px 12px 0;
    margin-top: 28px;
}
.coapproach-highlight p {
    font-size: 15px;
    color: #4A4A4A;
    margin: 0;
    line-height: 1.7;
}
.coapproach-pill {
    display: inline-block;
    background: #6B8A65;
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    margin: 6px 6px 6px 0;
}

.cofeatures {
    background: #F8FAF7;
}
.cofeature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 36px;
    align-items: flex-start;
}
.cofeature-icon {
    width: 52px;
    height: 52px;
    background: #EFF4EE;
    border: 2px solid #B5C8B0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    color: #6B8A65;
}
.cofeature-text h4 {
    font-size: 18px;
    margin-bottom: 6px;
}
.cofeature-text p {
    font-size: 14px;
    color: #4A4A4A;
    line-height: 1.65;
    margin: 0;
}
.cofeatures-screen {
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 0 auto;
}
.screen-label {
    text-align: center;
}

.comid-cta {
    background: linear-gradient(135deg, #1E1E1E 0%, #2D3A2B 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.comid-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(143,166,138,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.comid-cta::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(224,91,109,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.comid-cta h2 {
    color: #fff;
    font-size: clamp(24px, 4vw, 38px);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.comid-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto 32px;
    position: relative;
    z-index: 1;
}
.comid-cta .btn-primary-custom {
    background: #E05B6D;
    position: relative;
    z-index: 1;
}
.comid-cta .btn-primary-custom:hover {
    background: #c84a5b;
}
.comid-cta .btn-outline-custom {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    position: relative;
    z-index: 1;
}
.comid-cta .btn-outline-custom:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.cohow-it-works {
    background: #fff;
}
.coflow-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 50px;
}
.coflow-step {
    flex: 1 1 140px;
    text-align: center;
    position: relative;
}
.coflow-step-num {
    width: 54px;
    height: 54px;
    background: #6B8A65;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 14px;
    position: relative;
    z-index: 2;
}
.coflow-step-label {
    font-size: 13px;
    color: #4A4A4A;
    font-weight: 500;
    line-height: 1.4;
    max-width: 110px;
    margin: 0 auto;
}
.coflow-arrow {
    flex-shrink: 0;
    color: #B5C8B0;
    font-size: 22px;
    padding: 0 8px;
    margin-bottom: 14px;
}

.ux-approach {
    background: #F8FAF7;
}
.ux-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #E0E8DE;
    text-align: center;
    transition: transform .25s, box-shadow .25s;
}
.ux-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.ux-card-icon {
    width: 60px;
    height: 60px;
    background: #EFF4EE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: #6B8A65;
}
.ux-card h4 {
    font-size: 16px;
    margin-bottom: 10px;
}
.ux-card p {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.6;
}

.design-system {
    background: #fff;
}
.ds-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}
.ds-dot {
    width: 10px;
    height: 10px;
    background: #6B8A65;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.ds-text {
    font-size: 15px;
    color: #4A4A4A;
    line-height: 1.6;
}
.palette-row {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.palette-swatch {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    position: relative;
}
.palette-swatch span {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.cochallenges {
    background: #F8FAF7;
}
.cochallenge-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    align-items: flex-start;
}
.cochallenge-num {
    width: 40px;
    height: 40px;
    background: #1E1E1E;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cochallenge-text h4 {
    font-size: 17px;
    margin-bottom: 6px;
}
.cochallenge-text p {
    font-size: 14px;
    color: #4A4A4A;
    margin: 0;
    line-height: 1.65;
}

.coresults {
    background: #1E1E1E;
}
.coresults .section-title {
    color: #fff;
}
.coresults .section-desc {
    color: rgba(255,255,255,0.6);
}
.coresult-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: background .25s;
}
.coresult-card:hover {
    background: rgba(255,255,255,0.1);
}
.coresult-icon {
    font-size: 32px;
    color: #B5C8B0;
    margin-bottom: 14px;
}
.coresult-card h4 {
    font-size: 16px;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}

.demonstrates {
    background: #F8FAF7;
}
.codemo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.demo-pill {
    background: #fff;
    border: 1px solid #E0E8DE;
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    color: #4A4A4A;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}
.demo-pill:hover {
    border-color: #6B8A65;
    color: #6B8A65;
    background: #EFF4EE;
}
.demo-pill i {
    color: #6B8A65;
    font-size: 14px;
}

.screens-gallery {
    background: #fff;
    overflow: hidden;
}
.screens-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0 30px;
    scrollbar-width: none;
}
.screens-scroll::-webkit-scrollbar {
    display: none;
}
.screen-thumb {
    flex-shrink: 0;
    width: 190px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform .3s;
    max-width: 100%;
}
.screen-thumb:hover {
    transform: translateY(-8px) scale(1.02);
}
.screen-thumb img {
    width: 100%;
    display: block;
}
.screen-label {
    background: #F8FAF7;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
    text-align: center;
    border-top: 1px solid #E0E8DE;
}

.cofinal-cta {
    background: linear-gradient(145deg, #EFF4EE 0%, #fff 100%);
    padding: 100px 0;
    text-align: center;
}
.cofinal-cta h2 {
    font-size: clamp(28px, 5vw, 50px);
    margin-bottom: 18px;
}
.cofinal-cta p {
    font-size: 17px;
    color: #4A4A4A;
    max-width: 500px;
    margin: 0 auto 36px;
    line-height: 1.7;
}
.cofade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}
.cofade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .cohero {
        padding: 110px 0 60px;
    }
    .cohero-phones {
        margin-top: 50px;
    }
    .cophone-img {
        width: 160px;
    }
    .cosnap-item {
        flex: 1 1 50%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .coflow-arrow {
        display: none;
    }
    .coflow-step {
        flex: 1 1 30%;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .cohero {
        padding: 100px 0 50px;
    }
    .cophone-img {
        width: 130px;
    }
    .co-parenting section {
        padding: 60px 0;
    }
    .cosnap-item {
        flex: 1 1 100%;
        border-right: none;
    }
    .btn-outline-custom {
        margin-left: 0;
        margin-top: 12px;
        display: block;
        text-align: center;
    }
    .coflow-step {
        flex: 1 1 45%;
    }
    .palette-swatch {
        width: 50px;
        height: 50px;
    }
    .btn-primary-custom {
        display: block;
        text-align: center;
    }
    section#features .col-xs-6.col-sm-4:nth-last-of-type(1),
    section#features .col-xs-6.col-sm-4:nth-last-of-type(2),
    section.design-system .col-xs-6.col-sm-4:nth-last-of-type(1),
    section.design-system .col-xs-6.col-sm-4:nth-last-of-type(2) {
        display: none;
    }
}
/*--------Co Parenting Platform Case Study css end-------*/
/*--------the trust corp Case Study css start-------*/
.trustsavvy body {
    font-family: "Poppins", sans-serif;
}
.trsthero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0A0A0A;
}

.trsthero-bg-overlay {
    position: absolute;
    inset: 0;
    background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(212,160,23,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(212,160,23,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.trsthero-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
    linear-gradient(rgba(212,160,23,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.trsthero-content {
    position: relative;
    z-index: 2;
    padding: 120px 0 80px;
}

.trsthero-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #D4A017;
    border: 1px solid rgba(212,160,23,0.35);
    padding: 6px 18px;
    margin-bottom: 28px;
    position: relative;
}
.trsthero-label::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #D4A017;
}

.trsthero-title {
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px;
    color: #F5F0E8;
}

.trsthero-title span {
    color: #D4A017;
}

.trsthero-subtitle {
    font-size: 17px;
    color: #8A8070;
    max-width: 520px;
    line-height: 1.9;
    margin-bottom: 40px;
}
.btn-gold {
    display: inline-block;
    background: #D4A017;
    color: #000;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 34px;
    border: none;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
    cursor: pointer;
}
.btn-gold:hover {
    background: #F0C040;
    color: #000;
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-outline-gold {
    display: inline-block;
    background: transparent;
    color: #D4A017;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 13px 32px;
    border: 1px solid rgba(212,160,23,0.35);
    text-decoration: none;
    transition: all 0.25s;
    margin-left: 16px;
}
.btn-outline-gold:hover {
    background: rgba(212,160,23,0.15);
    color: #F0C040;
    text-decoration: none;
    border-color: #D4A017;
}

.trsthero-image-col {
    position: relative;
}
.trsthero-image-wrap {
    position: relative;
    border: 1px solid rgba(212,160,23,0.35);
    overflow: hidden;
}
.trsthero-image-wrap img {
    width: 100%;
    display: block;
    filter: brightness(0.9) saturate(0.8);
    transition: filter 0.4s;
}
.trsthero-image-wrap:hover img {
    filter: brightness(1) saturate(1);
}
.trsthero-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,160,23,0.12) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}
.trsthero-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 3;
}
.trsthero-corner.tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid #D4A017;
    border-left: 2px solid #D4A017;
}
.trsthero-corner.br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid #D4A017;
    border-right: 2px solid #D4A017;
}
.truststrip{
    background: #ffffff;
    border-bottom:3px solid #B8860B;
    box-shadow:0 2px 16px rgba(0,0,0,.07);
}
.truststrip-item{
    padding:34px 20px;
    border-right:1px solid #E6DFD3;
    text-align:center;
}
.truststrip-item:last-child{
    border-right:none;
}
.truststrip-icon{
    font-size:20px;
    color:#B8860B;
    margin-bottom:10px;
}
.truststrip-lbl{
    font-size:9px;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:#8C8070;
    margin-bottom:4px;
}
.truststrip-val{
    font-size:13px;
    font-weight:600;
    color:#1A1714;
    min-height: 38px;
}
.truststrip-icon i.fa.fa-star {
    color: #b8860b;
}

.section-pad {
    padding: 100px 0;
}
.section-pad-sm {
    padding: 70px 0;
}
.trustsection-label {
    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #B8860B;
    margin-bottom: 14px;
}
.trustsection-title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 700;
    color: #000000;
    margin: 0 0 20px;
    line-height: 1.2;
}
.trustsection-title span {
    color: #D4A017;
}
.trustsection-body {
    font-size: 15px;
    color: #8A8070;
    line-height: 1.9;
    max-width: 620px;
}
.gold-divider {
    width: 60px;
    height: 2px;
    background: #D4A017;
    margin: 24px 0 32px;
}

.s-label{
    display:inline-block;
    font-size:12px;
    font-weight:500;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:#B8860B;
    margin-bottom:14px;
}
.s-title{
    font-size:clamp(24px,4vw,42px);
    font-weight:700;
    line-height:1.15;
    margin:0 0 18px;
    color:#1A1714;
}
.s-title span{
    color:#B8860B;
}
.s-title.white{
    color:#F5F0E8;
}
.s-body{
    font-size:15px;
    color:#8C8070;
    line-height:1.9;
    max-width:580px;
}
.s-body.wide{
    max-width:100%;
}
.divider{
    width:52px;
    height:3px;
    background:#B8860B;
    margin:18px 0 28px;
}
.prob-card{
    background:#FFFFFF;
    border:1px solid #E6DFD3;
    border-left:3px solid #B8860B;
    padding:26px 24px;
    margin-bottom:16px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.prob-card h4{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#B8860B;
    margin:0 0 8px;
}
.prob-card p{
    font-size:14px;
    color:#8C8070;
    margin:0;
}
.quote-box{
    background:#FFFFFF;
    border:1px solid rgba(184,134,11,.28);
    border-left:4px solid #B8860B;
    padding:34px 38px;
    margin:32px 0;
    position:relative;
    box-shadow:0 4px 18px rgba(184,134,11,.08);
}
.quote-box::before{
    content:'\201C';
    font-size:70px;
    color:#B8860B;
    opacity:.18;
    position:absolute;
    top:8px;
    left:16px;
    line-height:1;
}
.quote-box p{
    font-size:17px;
    color:#1A1714;
    margin:0;
    position:relative;
    z-index:1;
    line-height:1.7;
}

.stats-sec{
    background:#222018;
}
.stat-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,160,23,.18);
    text-align:center;
    padding:44px 20px;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
    transition:background .3s,border-color .3s;
}
.stat-box:hover{
    background:rgba(212,160,23,.07);
    border-color:rgba(212,160,23,.40);
}
.stat-box::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:#D4A017;
    transform:scaleX(0);
    transition:transform .3s;
}
.stat-box:hover::after{
    transform:scaleX(1);
}
.stat-num{
    font-size:54px;
    font-weight:900;
    color:#D4A017;
    line-height:1;
    margin-bottom:8px;
}
.stat-lbl{
    font-size:10px;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:rgba(245,240,232,.50);
}



.innovations-section {
    background: #222018;
}
.innovations-section h2.trustsection-title {
    color: #fff;
}
.innovation-item {
    display: flex;
    gap: 24px;
    margin-bottom: 48px;
    align-items: flex-start;
}
.innovation-num {
    font-size: 42px;
    font-weight: 900;
    color: #ffffff;
    opacity: 0.25;
    line-height: 1;
    min-width: 60px;
}
.innovation-content h3 {
    font-size: 18px;
    color: #F5F0E8;
    margin: 0 0 10px;
}
.innovation-content p {
    font-size: 14px;
    color: #8A8070;
    margin: 0;
    line-height: 1.8;
}

.gallery-section {
    background: #FBF8F2;
    padding: 100px 0;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border: 0px solid #1E1E1E;
    margin-bottom: 24px;
    transition: border-color 0.3s;
    border-radius: 50px;
    overflow: hidden;
}
.gallery-item:hover {
    border-color: rgba(212,160,23,0.35);
}
.gallery-item img {
    width: 100%;
    display: block;
    filter: brightness(0.85) saturate(0.7);
    transition: filter 0.4s, transform 0.4s;
}
.gallery-item:hover img {
    filter: brightness(1) saturate(1);
    transform: scale(1.03);
}
.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 30px 20px 20px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #D4A017;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .caption {
    opacity: 1;
}

.trustflow-section {
    background: #ffffff;
    border-bottom: 2px solid #d4a017;
    border-top: 2px solid #d4a017;
}
.trustflow-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 50px;
}
.trustflow-step {
    flex: 1;
    min-width: 120px;
    text-align: center;
    position: relative;
}
.trustflow-step .icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: #FBF8F2;
    border: 1px solid #E6DFD3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #B8860B;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: background .25s, border-color .25s, transform .25s;
}
.trustflow-step .step-label {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8A8070;
}
.trustflow-arrow {
    font-size: 18px;
    color: #D4A017;
    opacity: 0.4;
    padding: 0 10px;
    flex-shrink: 0;
    margin-bottom: 40px;
}

.trustchallenges-section {
    background: #ffffff;
}
.trustchallenge-row {
    border-bottom: 1px solid #1E1E1E;
    padding: 40px 0;
}
.trustchallenge-row:last-child {
    border-bottom: none;
}
.trustchallenge-tag {
    display: inline-block;
    background: rgba(212,160,23,0.15);
    color: #D4A017;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid rgba(212,160,23,0.35);
    margin-bottom: 14px;
}
.trustchallenge-row h3 {
    font-size: 18px;
    color: #111111;
    margin: 0 0 12px;
}
.trustchallenge-side {
    padding: 20px 30px;
    background: #ffffff;
    border: 1px solid #E6DFD3;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.trustchallenge-side h5 {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.trustchallenge-side.trustproblem h5 {
    color: #c0392b;
}
.trustchallenge-side.trustsolution h5 {
    color: #27ae60;
}
.trustchallenge-side p {
    font-size: 14px;
    color: #8C8070;
    margin: 0;
}

.trusttech-badge {
    letter-spacing: 0.1em;
    display: inline-block;
    background: #FBF8F2;
    border: 1px solid #E6DFD3;
    padding: 7px 16px;
    font-size: 12px;
    color: #8C8070;
    margin: 4px 4px 4px 0;
    transition: border-color .2s, color .2s, background .2s;
}
.trusttech-badge:hover {
    border-color: rgba(212,160,23,0.35);
    color: #D4A017;
}
.results-section {
    background: #161616;
}
.result-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
}
.result-check {
    width: 28px;
    height: 28px;
    background: rgba(212,160,23,0.15);
    border: 1px solid rgba(212,160,23,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A017;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.result-text {
    font-size: 15px;
    color: #1A1714;
}

.sec-sm{
    padding: 64px 0;
}
.f-pill{
    display:inline-block;
    background:#FFFFFF;
    border:1px solid #E6DFD3;
    padding:9px 18px;
    font-size:13px;
    color:#4A4540;
    margin:5px 5px 5px 0;
    box-shadow:0 1px 5px rgba(0,0,0,.04);
    transition:all .2s;
}
.f-pill:hover{
    border-color:rgba(184,134,11,.28);
    color:#B8860B;
    background:rgba(184,134,11,.10);
}
.trustcta-sec{
    background:#1A1714;
    padding:110px 0;
    position:relative;
    overflow:hidden;
}
.trustcta-sec::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(212,160,23,.09) 0%,transparent 70%);
    pointer-events:none;
}
hr.gold-hr {
    border-color: #1E1E1E;
    margin: 60px 0;
}
@media (max-width: 767px) {
    .trustflow-steps {
        flex-direction: column;
        align-items: center;
    }
    .trustflow-step {
        width: 100%;
        max-width: 180px;
    }
    .trustflow-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
    }
    .trsthero-section {
        padding: 0 15px;
    }
    .btn-gold, .btn-outline-gold {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    section.trustchallenges-section.section-pad .row {
        margin-bottom: 0 !important;
    }
}
/*--------the trust corp Case Study css end-------*/

/*--------E-Texi Booking Platform Case Study css Start-------*/
html.etaxibooking {
    scroll-behavior: smooth;
}
.etaxibooking body{
    font-family: Poppins, sans-serif;
    color: #1C1C2E;
    background: #FFFFFF;
    overflow-x: hidden;
}
.etaxihero-section {
    background: linear-gradient(135deg, #1A2F4E 0%, #0D1B2E 60%, #8D0000 100%);
    color: white;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}
.etaxihero-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: rgba(198,40,40,0.12);
    pointer-events: none;
}
.etaxihero-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(249,168,37,0.08);
    pointer-events: none;
}
.etaxihero-eyebrow {
    display: inline-block;
    background: rgba(249,168,37,0.2);
    border: 1px solid rgba(249,168,37,0.5);
    color: #F9A825;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    animation: fadeSlideDown 0.7s ease both;
}
.etaxihero-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 22px;
    animation: fadeSlideDown 0.7s 0.1s ease both;
}
.etaxihero-title .accent {
    color: #F9A825;
}
.etaxihero-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 36px;
    animation: fadeSlideDown 0.7s 0.2s ease both;
}
.etaxihero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
    animation: fadeSlideDown 0.7s 0.3s ease both;
}
.etaxihero-tag {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
}
.etaxihero-img-wrap {
    position: relative;
    animation: fadeSlideUp 0.9s 0.2s ease both;
}
.etaxihero-img-wrap img {
    max-width: 100%;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.etaxihero-btns {
    animation: fadeSlideDown 0.7s 0.35s ease both;
}
.btn-primary-cs {
    background: #C62828;
    color: white;
    border: none;
    padding: 13px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s;
    margin-right: 10px;
    cursor: pointer;
}
.btn-primary-cs:hover {
    background: #8D0000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(198,40,40,0.4);
    color:white;
}
.btn-outline-cs {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.4);
    padding: 11px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s;
}
.btn-outline-cs:hover {
    border-color: white;
    color: white;
    background: rgba(255,255,255,0.1);
}

.taxisection-pad {
    padding: 80px 0;
}
.taxisection-pad-sm {
    padding: 60px 0;
}
.taxisection-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #C62828;
    margin-bottom: 10px;
}
.taxisection-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #1A2F4E;
    margin-bottom: 14px;
}
.taxisection-desc {
    font-size: 16px;
    color: #4A5568;
    line-height: 1.75;
    max-width: 640px;
}
.taxidivider {
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #C62828, #F9A825);
    margin: 14px 0 24px;
}

.taxisnapshot-section {
    background: #F7F8FA;
}
.taxisnap-card {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    height: 100%;
    border: 1px solid #E2E8F0;
    transition: all 0.3s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.taxisnap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.10);
    border-color: #C62828;
}
.taxisnap-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.taxisnap-icon.red {
    background: rgba(198,40,40,0.1);
    color: #C62828;
}
.taxisnap-icon.amber {
    background: rgba(249,168,37,0.12);
    color: #C8860A;
}
.taxisnap-icon.navy {
    background: rgba(26,47,78,0.1);
    color: #1A2F4E;
}
.taxisnap-icon.teal {
    background: rgba(0,137,123,0.1);
    color: #00897B;
}
.taxisnap-label {
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.taxisnap-value {
    font-size: 17px;
    font-weight: 700;
    color: #1A2F4E;
}

.taxiproblem-section {
    background: white;
}
.taxichallenge-item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #E2E8F0;
}
.taxichallenge-item:last-child {
    border-bottom: none;
}
.taxichallenge-dot {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(198,40,40,0.1);
    color: #C62828;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 2px;
}
.taxichallenge-text {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.65;
}
.taxiapproach-box {
    background: linear-gradient(135deg, #1A2F4E 0%, #0D1B2E 100%);
    border-radius: 16px;
    padding: 40px;
    color: white;
    height: 100%;
}
.taxiapproach-item {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}
.taxiapproach-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: #C62828;
    color: white;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.taxiapproach-txt {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

.taxifeatures-section {
    background: #F7F8FA;
}
.taxifeature-card {
    background: white;
    border-radius: 14px;
    padding: 26px 22px;
    border: 1px solid #E2E8F0;
    height: 100%;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.taxifeature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C62828, #F9A825);
    transform: scaleX(0);
    transition: transform 0.3s;
}
.taxifeature-card:hover::before {
    transform: scaleX(1);
}
.taxifeature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.09);
}
.taxifeature-icon {
    font-size: 26px;
    color: #C62828;
    margin-bottom: 14px;
}
.taxifeature-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1A2F4E;
    margin-bottom: 8px;
}
.taxifeature-card p {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}

.taxihiw-section {
    background: white;
}
.taxistep-wrap {
    position: relative;
    text-align: center;
    padding: 0 10px;
}
.taxistep-num {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C62828, #8D0000);
    color: white;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 20px rgba(198,40,40,0.35);
}
.taxistep-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A2F4E;
    margin-bottom: 6px;
}
.taxistep-desc {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.55;
}
.taxistep-arrow {
    position: absolute;
    top: 22px;
    right: -18px;
    color: #F9A825;
    font-size: 20px;
    z-index: 2;
}

.taximid-cta {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFFDE7 100%);
    border: 1px solid rgba(249,168,37,0.3);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin: 60px 0;
}
.taximid-cta h3 {
    color: #1A2F4E;
    font-size: 1.7rem;
    margin-bottom: 10px;
}
.taximid-cta p {
    color: #4A5568;
    font-size: 15px;
    margin-bottom: 24px;
}

.taxiscreens-section {
    background: #F7F8FA;
}
.taxiscreen-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.taxiscreen-tab {
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #4A5568;
    cursor: pointer;
    transition: all 0.2s;
}
.taxiscreen-tab.active, .taxiscreen-tab:hover {
    border-color: #C62828;
    color: #C62828;
    background: rgba(198,40,40,0.05);
}
.taxiscreen-panel {
    display: none;
}
.taxiscreen-panel.active {
    display: block;
}
.screenshot-img {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    width: 100%;
    transition: transform 0.3s;
}
.screenshot-img:hover {
    transform: scale(1.02);
}
.taxiphone-screen {
    max-width: 200px;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    transition: transform 0.3s;
}
.taxiphone-screen:hover {
    transform: scale(1.04) translateY(-4px);
}

.taxichallenge-section {
    background: white;
}
.taxics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media(max-width:767px) {
    .taxics-row {
        grid-template-columns: 1fr;
    }
}
.taxichallenge-card {
    background: #F7F8FA;
    border-radius: 14px;
    padding: 24px;
    border-left: 4px solid #C62828;
}
.taxichallenge-card h5 {
    font-weight: 700;
    color: #1A2F4E;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.taxichallenge-card .problem-text {
    color: #4A5568;
    font-size: 14px;
    margin-bottom: 10px;
}
.taxisolution-badge {
    background: rgba(0,137,123,0.1);
    color: #00897B;
    border: 1px solid rgba(0,137,123,0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 6px;
}
.taxisolution-text {
    font-size: 14px;
    color: #1C1C2E;
    font-weight: 500;
}

.taxiresults-section {
    background: linear-gradient(135deg, #1A2F4E 0%, #0D1B2E 100%);
    color: white;
}
.taxiresult-stat {
    text-align: center;
    padding: 30px 20px;
}
.taxiresult-stat .taxibig-num {
    font-size: 3rem;
    font-weight: 900;
    color: #F9A825;
    line-height: 1;
    margin-bottom: 8px;
}
.taxiresult-stat .taxistat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}
.taxiresult-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
    transition: all 0.25s;
}
.taxiresult-card:hover {
    background: rgba(255,255,255,0.1);
}
.taxiresult-icon {
    font-size: 22px;
    color: #F9A825;
    margin-top: 2px;
}
.taxiresult-text {
    font-size: 15px;
    color: rgba(255,255,255,0.88);
    line-height: 1.55;
}

.taxifuture-section {
    background: #F7F8FA;
}
.taxifuture-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #4A5568;
    margin: 6px;
    transition: all 0.2s;
}
span.taxifuture-tag .fa.fa-star {
    color: #C62828;
}
.taxifuture-tag:hover {
    border-color: #C62828;
    color: #C62828;
    box-shadow: 0 4px 16px rgba(198,40,40,0.12);
}
.taxifuture-tag i {
    color: #C62828;
}

.taxicta-section {
    background: linear-gradient(135deg, #C62828 0%, #8D0000 100%);
    color: white;
    text-align: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.taxicta-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.taxicta-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.taxicta-section h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 16px;
}
.taxicta-section p {
    font-size: 17px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 36px;
}
.btn-white-cs {
    background: white;
    color: #C62828;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    margin: 6px;
    transition: all 0.25s;
}
.btn-white-cs:hover,
.btn-white-cs:active,
.btn-white-cs:focus {
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    transform: translateY(-2px);
    color: #C62828;
}
.btn-ghost-white {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    margin: 6px;
    transition: all 0.25s;
    cursor: pointer;
}
.btn-ghost-white:hover,
.btn-ghost-white:active,
.btn-ghost-white:focus {
    border-color: white;
    background: rgba(255,255,255,0.1);
    color: white;
}

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to   {
        opacity: 1;
    }
}
.taxireveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.taxireveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media(max-width:991px) {
    .etaxihero-section {
        padding: 70px 0 50px;
    }
    .taxisection-pad {
        padding: 60px 0;
    }
    .taxistep-arrow {
        display: none;
    }
    .taxiapproach-box {
        margin-top: 30px;
    }
}
@media(max-width:767px) {
    .etaxihero-title { font-size: 2.1rem; }
    .etaxihero-desc { font-size: 15px; }
    .etaxihero-img-wrap { margin-top: 40px; text-align: center; }
    .taxisnap-card { margin-bottom: 20px; }
    .taxiscreen-tab { font-size: 12px; padding: 7px 14px; }
    .taxiresult-stat .taxibig-num { font-size: 2.2rem; }
    .taximid-cta { padding: 28px 20px; }
    .btn-primary-cs {
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
    .btn-outline-cs {
        width: 100%;
        text-align: center;
    }
}

/*--------E-Texi Booking Platform Case Study css End-------*/

/*--------Rumie – Campus Marketplace Case Study css Start-------*/
.rumie body {
    font-family: 'Poppins', sans-serif;
    color: #4a4060;
    background: #fff;
    overflow-x: hidden;
}
/*.rumie h1, .rumie h2,.rumie h3,.rumie h4,.rumie h5 {
    color: #1a0533;
}
.rumie a {
    color: #8B2FC9;
}
.rumie a:hover {
    color: #6B1FA0;
    text-decoration: none;
}*/
.rumiereveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.rumiereveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.rumiereveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.rumiereveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.rumiereveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.rumiereveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

.rumiehero-section {
    background: linear-gradient(135deg, #1a0533 0%, #2d0a5e 40%, #4a1282 70%, #6B1FA0 100%);
    padding: 90px 0 0;
    position: relative;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}
.rumiehero-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.rumiehero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: #fff;
    clip-path: ellipse(55% 100% at 50% 100%);
}
.rumiehero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    color: #e9d5ff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    animation: fadeInDown 0.8s ease both;
}
.rumiehero-badge .dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}
.rumiehero-title {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 22px;
    animation: fadeInUp 0.9s 0.1s ease both;
}
.rumiehero-title .highlight {
    background: linear-gradient(135deg, #c084fc, #a855f7, #f0abfc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rumiehero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin-bottom: 34px;
    animation: fadeInUp 0.9s 0.2s ease both;
    max-width: 530px;
}
.rumiehero-btns {
    animation: fadeInUp 0.9s 0.3s ease both;
    margin-bottom: 28px;
}
.btn-primary-purple {
    background: linear-gradient(135deg, #A855F7, #8B2FC9);
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.btn-primary-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(139,47,201,0.45);
    color: #fff;
}
.btn-outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.40);
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
    margin-left: 12px;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.70);
    color: #fff;
}
.rumiehero-trust {
    animation: fadeInUp 0.9s 0.4s ease both;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.60);
    flex-wrap: wrap;
}
.rumiehero-trust a {
    color: #d8b4fe;
    font-weight: 600;
    text-decoration: none;
}
.rumiehero-trust a:hover {
    color: #fff;
}
.trust-sep {
    color: rgba(255,255,255,0.30);
}
.rumiehero-img-wrap {
    position: relative;
    text-align: center;
    animation: floatUp 0.9s 0.5s ease both;
    padding-bottom: 80px;
}
.rumiehero-img-wrap img {
    max-width: 85%;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
    transition: transform 0.4s ease;
}
.rumiehero-img-wrap img:hover {
    transform: scale(1.03) rotate(-1deg);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floatUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.rumie section {
    padding: 80px 0;
}
.rumiesection-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8B2FC9;
    background: #F3E8FF;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.rumiesection-label i.fa.fa-star {
    color: #8B2FC9;
}
.rumiesection-title {
    font-size: 36px;
    font-weight: 900;
    color: #1a0533;
    line-height: 1.2;
    margin-bottom: 16px;
}
.rumiesection-title .purple {
    color: #8B2FC9;
}
.rumiesection-desc {
    font-size: 16px;
    color: #4a4060;
    line-height: 1.75;
    max-width: 600px;
}
.rumiedivider {
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #8B2FC9, #A855F7);
    border-radius: 2px;
    margin-bottom: 20px;
}

.rumiesnapshot-section { background: #F9F7FF; }
.rumiesnapshot-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(139,47,201,0.15);
}
.rumiesnapshot-table {
    width: 100%;
    border-collapse: collapse;
}
.rumiesnapshot-table tr {
    border-bottom: 1px solid #f0ebff;
}
.rumiesnapshot-table tr:last-child {
    border-bottom: none;
}
.rumiesnapshot-table td {
    padding: 18px 28px;
    font-size: 15px;
}
.rumiesnapshot-table td:first-child {
    font-weight: 700;
    color: #8B2FC9;
    width: 40%;
    background: #F3E8FF;
}
.rumiesnapshot-table td:last-child {
    color: #4a4060;
}

.rumiechallenge-section {
    background: #fff;
}
.rumiechallenge-card {
    background: #fff;
    border: 1.5px solid #EDE0FF;
    border-radius: 18px;
    padding: 28px 24px;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
}
.rumiechallenge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #8B2FC9, #A855F7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.rumiechallenge-card:hover::before {
    transform: scaleX(1);
}
.rumiechallenge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(139,47,201,0.15);
    border-color: #8B2FC9;
}
.rumiechallenge-icon {
    width: 52px;
    height: 52px;
    background: #F3E8FF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
    color: #8B2FC9;
}
.rumiechallenge-card h4 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a0533;
}
.rumiechallenge-card p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}


.rumiesolution-section {
    background: #F9F7FF;
}
.rumiesolution-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rumiesolution-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #EDE0FF;
    font-size: 15px;
}
.rumiesolution-list li:last-child {
    border-bottom: none;
}
.rumiesolution-list .icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: #8B2FC9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}
.phone-float {
    position: relative;
    text-align: center;
}
.phone-float img {
    max-width: 75%;
    filter: drop-shadow(0 25px 50px rgba(139,47,201,0.25));
    animation: phoneFloat 4s ease-in-out infinite;
}
@keyframes phoneFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

.rumiefeatures-section {
    background: #fff;
}
.rumiefeature-card {
    background: #F9F7FF;
    border-radius: 18px;
    padding: 26px 22px;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    cursor: default;
    border: 1.5px solid transparent;
}
.rumiefeature-card:hover {
    background: #fff;
    border-color: #EDE0FF;
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(139,47,201,0.15);
}
.rumiefeature-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8B2FC9, #A855F7);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 16px;
    transition: transform 0.3s;
}
.rumiefeature-card:hover .rumiefeature-icon {
    transform: rotate(-8deg) scale(1.1);
}
.rumiefeature-card h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}
.rumiefeature-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.rumiemid-cta {
    background: linear-gradient(135deg, #2d0a5e, #4a1282, #6B1FA0);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rumiemid-cta::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168,85,247,0.3) 0%, transparent 70%);
    border-radius: 50%;
}
.rumiemid-cta .rumiesection-title {
    color: #fff;
}
.rumiemid-cta .rumiesection-desc {
    color: rgba(255,255,255,0.75);
    margin: 0 auto 32px;
}
.rumiemid-cta .trust-note {
    color: rgba(255,255,255,0.50);
    font-size: 13px;
    margin-top: 20px;
}
.rumiemid-cta .trust-note i {
    color: #a855f7;
}

.rumiejourney-section {
    background: #F9F7FF;
}
.rumiestep-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border-radius: 18px;
    margin-bottom: 16px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1.5px solid transparent;
}
.rumiestep-item:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(139,47,201,0.10);
    border-color: #EDE0FF;
}
.rumiestep-number {
    min-width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8B2FC9, #A855F7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}
.rumiestep-item h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.rumiestep-item p {
    font-size: 14px;
    margin: 0;
    color: #4a4060;
}

.rumietrust-section {
    background: #fff;
}
.rumiesafety-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F3E8FF;
    border: 1px solid #EDE0FF;
    color: #6B1FA0;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    margin: 6px 4px;
    transition: background 0.2s, transform 0.2s;
    cursor: default;
}
.rumiesafety-tag:hover {
    background: #8B2FC9;
    color: #fff;
    transform: scale(1.04);
}

.rumieshowcase-section {
    background: #fff;
}
.rumieshowcase-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    /*box-shadow: 0 20px 60px rgba(139,47,201,0.18);*/
    transition: transform 0.4s;
}
.rumieshowcase-img-wrap:hover {
    transform: scale(1.02);
}
.rumieshowcase-img-wrap img {
    width: 100%;
    display: block;
}
.rumiescreen-tag {
    display: inline-block;
    background: #F3E8FF;
    color: #8B2FC9;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    margin: 4px;
}

.rumielive-section {
    background: #F9F7FF;
}
.rumielive-card {
    background: linear-gradient(135deg, #fff, #F3E8FF);
    border: 2px solid #EDE0FF;
    border-radius: 18px;
    padding: 40px 36px;
    text-align: center;
}
.rumielive-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dcfce7;
    color: #15803d;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
}
.rumielive-dot {
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
.btn-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #8B2FC9, #A855F7);
    color: #fff;
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 6px;
    text-decoration: none;
}
.btn-live:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(139,47,201,0.40);
    color: #fff;
}
.btn-live-outline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: #8B2FC9;
    border: 2px solid #8B2FC9;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s;
    margin: 6px;
    text-decoration: none;
}
.btn-live-outline:hover,
.btn-live-outline:active,
.btn-live-outline:focus {
    background: #8B2FC9;
    color: #fff;
}

.rumietech-section {
    background: #F9F7FF;
}
.rumietech-block {
    background: #fff;
    border-radius: 18px;
    padding: 30px 24px;
    height: 100%;
    border: 1.5px solid #EDE0FF;
    transition: transform 0.3s, box-shadow 0.3s;
}
.rumietech-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(139,47,201,0.15);
}
.rumietech-block h4 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8B2FC9;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rumietech-pill {
    display: inline-block;
    background: #F3E8FF;
    color: #6B1FA0;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    margin: 4px 4px 4px 0;
    transition: background 0.2s, color 0.2s;
}
.rumietech-pill:hover {
    background: #8B2FC9;
    color: #fff;
}

.rucs-section {
    background: #fff;
}
.rucs-item {
display: flex;
    gap: 20px;
    padding: 22px;
    border-radius: 18px;
    border: 1.5px solid #EDE0FF;
    margin-bottom: 16px;
    transition: box-shadow 0.3s, border-color 0.3s;
    background: #fff;
}
.rucs-item:hover {
    box-shadow: 0 4px 20px rgba(139,47,201,0.10);
    border-color: #8B2FC9;
}
.rucs-num {
    min-width: 40px;
    height: 40px;
    background: #F3E8FF;
    color: #8B2FC9;
    font-weight: 800;
    font-size: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rucs-item h5 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
}
.rucs-item p {
    font-size: 14px;
    margin: 0;
}

.rumieimpact-section {
    background: linear-gradient(135deg, #f8f0ff, #fff);
}
.rumieimpact-card {
    background: #fff;
    border: 1.5px solid #EDE0FF;
    border-radius: 18px;
    padding: 30px 24px;
    height: 100%;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.rumieimpact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(139,47,201,0.15);
    border-color: #8B2FC9;
}
.rumieimpact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B2FC9, #A855F7);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin: 0 auto 16px;
}
.rumieimpact-card h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}
.rumieimpact-card p {
    font-size: 14px;
    margin: 0;
    color: #4a4060;
}

.rumiefinal-cta {
    background: linear-gradient(135deg, #1a0533 0%, #3b0f7a 60%, #6B1FA0 100%);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rumiefinal-cta::before {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.rumiefinal-cta::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.rumiefinal-cta .rumiesection-title {
    color: #fff;
    font-size: 42px;
}
.rumiefinal-cta .rumiesection-desc {
    color: rgba(255,255,255,0.72);
    margin: 0 auto 36px;
}
@media (max-width: 991px) {
    .rumiehero-title { font-size: 36px; }
    .rumiesection-title { font-size: 28px; }
    .rumiehero-section { padding: 70px 0 0; min-height: auto; }
    .rumiehero-img-wrap { padding-bottom: 60px; margin-top: 40px; }
    .rumie section { padding: 60px 0; }
}
@media (max-width: 767px) {
    .rumiehero-title { font-size: 30px; }
    .rumiehero-sub { font-size: 15px; }
    .rumiesection-title { font-size: 26px; }
    .btn-outline-white { margin-left: 0; margin-top: 10px; }
    .rumiehero-btns { display: flex; flex-direction: column; align-items: flex-start; }
    .rumiesnapshot-table td { padding: 14px 16px; font-size: 14px; }
    .rumiefinal-cta .rumiesection-title { font-size: 28px; }
    .rumiestep-item { flex-direction: column; }
    .rucs-item { flex-direction: column; }
    .rumiereveal-right>div>div {grid-template-columns: 1fr!important;}
    .btn-live-outline {padding: 12px 15px;}
    .btn-live {padding: 13px 15px;}
    .btn-outline-white, .btn-primary-purple {justify-content: center;width: 100%;}
}
@media (max-width: 480px) {
    .rumiehero-title { font-size: 26px; }
    .rumiehero-section::after { height: 70px; }
}
/*--------Rumie – Campus Marketplace Case Study css End-------*/
/*--------DipDap Case Study css Start-------*/
.dip body {
    font-family: 'Poppins', sans-serif;
    color: #0F1923;
    background: #FFFFFF;
    overflow-x: hidden;
}
.dipsection-pad {
    padding: 80px 0;
}
.dipsection-pad-sm {
    padding: 50px 0;
}
.diplabel-tag {
    display: inline-block;
    background: #E8FAF3;
    color: #1AAD72;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.dipsection-title {
    font-size: 36px;
    font-weight: 700;
    color: #0F1923;
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.2;
}
.dipsection-sub {
    font-size: 17px;
    color: #3D4A56;
    max-width: 640px;
    line-height: 1.7;
    margin-bottom: 0;
}
@keyframes dipfadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dipfadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes dipfloatPhone {
    0%,100% { transform: translateY(0px) rotate(-2deg); }
    50%      { transform: translateY(-18px) rotate(-2deg); }
}
@keyframes dippulse-ring {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dipslideRight {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes dipcountUp {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes dipshimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
@keyframes dipspin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.dipanimate-fade-up {
    opacity: 0;
    animation: dipfadeUp 0.7s ease forwards;
}
.dipdelay-1 { animation-delay: 0.1s; }
.dipdelay-2 { animation-delay: 0.2s; }
.dipdelay-3 { animation-delay: 0.3s; }
.dipdelay-4 { animation-delay: 0.4s; }
.dipdelay-5 { animation-delay: 0.5s; }
.dipdelay-6 { animation-delay: 0.6s; }
.dipreveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.dipreveal.visible {
    opacity: 1;
    transform: translateY(0);
}
#diphero {
    min-height: 100vh;
    background: linear-gradient(135deg, #F0FDF8 0%, #FFFFFF 50%, #EEE9FF 100%);
    padding-top: 100px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.diphero-blob-1 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(46,201,138,0.15) 0%, transparent 70%);
    top: -100px;
    left: -150px;
    border-radius: 50%;
}
.diphero-blob-2 {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(45,27,105,0.10) 0%, transparent 70%);
    bottom: -80px;
    right: -100px;
    border-radius: 50%;
}
.diphero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #2EC98A;
    color: #1AAD72;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 30px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(46,201,138,0.10);
}
.diphero-badge .dot {
    width: 8px;
    height: 8px;
    background: #2EC98A;
    border-radius: 50%;
    animation: pulse-ring 1.5s ease-out infinite;
    position: relative;
}
.diphero-badge .dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #2EC98A;
    animation: pulse-ring 1.5s ease-out infinite;
}
.diphero-title {
    font-size: 50px;
    font-weight: 800;
    line-height: 1.1;
    color: #0F1923;
    margin-bottom: 22px;
}
.diphero-title .highlight {
    background: linear-gradient(135deg, #2EC98A 0%, #00A8E8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.diphero-desc {
    font-size: 18px;
    color: #3D4A56;
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
}
.dipbtn-primary-cs {
    background: linear-gradient(135deg, #2EC98A 0%, #1AAD72 100%);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 8px 24px rgba(46,201,138,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dipbtn-primary-cs:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(46,201,138,0.45);
    color: #fff;
    text-decoration: none;
}
.dipbtn-outline-cs {
    border: 2px solid #2EC98A;
    color: #1AAD72;
    padding: 12px 30px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    margin-left: 12px;
}
.dipbtn-outline-cs:hover {
    background: #2EC98A;
    color: #fff;
    text-decoration: none;
}
.diphero-trust {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.trust-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3D4A56;
    font-weight: 500;
}
.trust-pill i {
    color: #2EC98A;
    font-size: 14px;
}
.diphero-phone-wrap {
    position: relative;
    text-align: center;
}
.diphero-phone-wrap img {
    max-height: 580px;
    animation: floatPhone 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(46,201,138,0.2));
    position: relative;
    z-index: 2;
}
.diphero-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(46,201,138,0.25);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ring1 {
    width: 340px;
    height: 340px;
    animation: dipspin-slow 20s linear infinite;
}
.ring2 {
    width: 480px;
    height: 480px;
    animation: dipspin-slow 30s linear infinite reverse;
}

#dipsnapshot {
    background: #2D1B69;
    padding: 60px 0;
}
.dipsnapshot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.dipsnapshot-item {
    padding: 24px 30px;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex: 1 1 200px;
}
.dipsnapshot-item:last-child {
    border-right: none;
}
.dipsnapshot-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2EC98A;
    margin-bottom: 6px;
}
.dipsnapshot-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

#dipchallenge {
    background: #F7FDFB;
}
.dipchallenge-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #E0F3EC;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}
.dipchallenge-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, #2EC98A 0%, #2D1B69 100%);
    border-radius: 4px 0 0 4px;
}
.dipchallenge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(46,201,138,0.15);
}
.dipchallenge-card .icon-circle {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: #E8FAF3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
    color: #1AAD72;
}
.dipchallenge-card h5 {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 8px;
    color: #0F1923;
}
.dipchallenge-card p {
    font-size: 14px;
    color: #3D4A56;
    line-height: 1.6;
    margin: 0;
}
.dipchallenge-group-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2D1B69;
    border-bottom: 2px solid #EEE9FF;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#dipsolution {
    background: #fff;
}
.dipsolution-pill-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dipsolution-pill-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E0F3EC;
    font-size: 15px;
    color: #3D4A56;
}
.dipsolution-pill-list li:last-child {
    border-bottom: none;
}
.dipsolution-pill-list li i {
    color: #2EC98A;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

#dipgallery {
    background: #F7FDFB;
}
.dipphone-showcase {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    padding: 20px 10px 30px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
}
.dipphone-showcase::-webkit-scrollbar {
    height: 4px;
}
.dipphone-showcase::-webkit-scrollbar-track {
    background: #E0F3EC;
    border-radius: 2px;
}
.dipphone-showcase::-webkit-scrollbar-thumb {
    background: #2EC98A;
    border-radius: 2px;
}
.dipphone-card {
    flex: 0 0 auto;
    width: 180px;
    scroll-snap-align: start;
}
.dipphone-card img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    transition: transform 0.35s, box-shadow 0.35s;
}
.dipphone-card img:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 24px 60px rgba(46,201,138,0.25);
}
#dipplatform {
    background: #fff;
}
.dipplatform-card {
    background: #fff;
    border: 1.5px solid #E0F3EC;
    border-radius: 20px;
    padding: 32px 28px;
    height: 100%;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.dipplatform-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2EC98A, #2D1B69);
    transform: scaleX(0);
    transition: transform 0.3s;
}
.dipplatform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(46,201,138,0.18);
    border-color: #2EC98A;
}
.dipplatform-card:hover::after {
    transform: scaleX(1);
}
.dipplatform-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E8FAF3, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #1AAD72;
    margin-bottom: 18px;
    border: 1px solid #E0F3EC;
}
.dipplatform-card h4 {
    font-weight: 700;
    font-size: 18px;
    color: #0F1923;
    margin: 0 0 8px;
}
.dipplatform-card .sub {
    font-size: 13px;
    color: #1AAD72;
    font-weight: 600;
    margin-bottom: 16px;
}
.dipplatform-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dipplatform-card ul li {
    font-size: 14px;
    color: #3D4A56;
    padding: 6px 0;
    border-bottom: 1px dashed #E0F3EC;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dipplatform-card ul li:last-child {
    border-bottom: none;
}
.dipplatform-card ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2EC98A;
    flex-shrink: 0;
}

#diptech {
    background: #2D1B69;
}
.diptech-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px 20px;
    margin: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}
.diptech-badge:hover {
    background: rgba(46,201,138,0.2);
    border-color: #2EC98A;
    transform: translateY(-3px);
}
.diptech-badge i {
    color: #2EC98A;
    font-size: 18px;
}
.diptech-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2EC98A;
    margin-bottom: 14px;
    margin-top: 28px;
}

#dipcs {
    background: #fff;
} 
.dipcs-item {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E0F3EC;
    padding: 28px;
    margin-bottom: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: box-shadow 0.3s;
}
.dipcs-item:hover {
    box-shadow: 0 8px 32px rgba(46,201,138,0.15);
}
.dipcs-num {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #2EC98A, #1AAD72);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}
.dipcs-item h5 {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 6px;
    color: #0F1923;
}
.dipcs-item p {
    font-size: 14px;
    color: #3D4A56;
    margin: 0;
    line-height: 1.6;
}

#dipimpact {
    background: #F7FDFB;
}
.dipimpact-stat {
    background: #fff;
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    border: 1.5px solid #E0F3EC;
    transition: all 0.3s;
}
.dipimpact-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(46,201,138,0.15);
    border-color: #2EC98A;
}
.dipimpact-stat .big-num {
    font-size: 48px;
    font-weight: 800;
    color: #2EC98A;
    line-height: 1;
    margin-bottom: 8px;
}
.dipimpact-stat p {
    font-size: 14px;
    color: #3D4A56;
    margin: 0;
}
.dipoutcome-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dipoutcome-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E0F3EC;
    font-size: 15px;
    color: #3D4A56;
    font-weight: 500;
}
.dipoutcome-list li:last-child {
    border-bottom: none;
}
.dipoutcome-list li i {
    color: #2EC98A;
    font-size: 16px;
}

#dipfinal-cta {
    background: linear-gradient(135deg, #2D1B69 0%, #1A0E45 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}
#dipfinal-cta::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(46,201,138,0.15) 0%, transparent 60%);
    top: -200px;
    left: -100px;
    border-radius: 50%;
}
#dipfinal-cta::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(46,201,138,0.10) 0%, transparent 60%);
    bottom: -150px;
    right: -50px;
    border-radius: 50%;
}
.dipcta-title {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
}
.dipcta-title span {
    color: #2EC98A;
}
.dipcta-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: 36px;
}
.dipbtn-white-cs {
    background: #fff;
    color: #2D1B69;
    padding: 14px 32px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.dipbtn-white-cs:hover,
.dipbtn-white-cs:active,
.dipbtn-white-cs:focus {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.2);
    color: #2D1B69;
    text-decoration: none;
}
.dipbtn-ghost-cs {
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 12px 30px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    margin-left: 12px;
}
.dipbtn-ghost-cs:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    border-color: #2EC98A;
}

@media (max-width: 991px) {
    .diphero-title { font-size: 36px; }
    .dipsection-title { font-size: 28px; }
    #diphero { padding-top: 80px; min-height: auto; padding-bottom: 60px; }
    .diphero-phone-wrap { margin-top: 40px; }
    .diphero-phone-wrap img { max-height: 380px; }
    .ring1, .ring2 { display: none; }
    .dipsnapshot-item { border-right: none; flex: 1 1 45%; }
    .dipcta-title { font-size: 30px; }
    .dipbtn-outline-cs, .dipbtn-ghost-cs { margin-left: 0; margin-top: 12px; }
    .dipphone-showcase {justify-content: flex-start;}
}
@media (max-width: 767px) {
    .diphero-title { font-size: 30px; }
    .dipsection-title { font-size: 24px; }
    .dipsection-pad { padding: 60px 0; }
    .dipsnapshot-item { flex: 1 1 100%; border-right: none; }
    .dipphone-card { width: 150px; }
    .dipimpact-stat .big-num { font-size: 38px; }
    .dipcta-title { font-size: 26px; }
    .diphero-desc { font-size: 16px; }
    .dipbtn-outline-cs { display: block; text-align: center; margin-left: 0; margin-top: 12px; }
    .dipbtn-ghost-cs { display: block; text-align: center; margin-left: 0; margin-top: 12px; }
    #diphero { text-align: center; }
    .diphero-trust { justify-content: center; }
    .dipsection-sub { margin: 0 auto; }
    .dipbtn-white-cs {width: 100%;}
    .dipbtn-primary-cs {display: block;}
}
@media (max-width: 480px) {
    .diphero-title { font-size: 26px; }
}
/*--------DipDap Case Study css End-------*/
/*-------- Dooctoor Case Study css Start -------*/
.dooc body {
    font-family: 'Poppins', sans-serif;
    color: #222222;
    background: #FFFFFF;
    overflow-x: hidden;
    line-height: 1.7;
}
.dooc h1, .dooc h2, .dooc h3, .dooc h4, .dooc h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #222222;
}
.dooc img { max-width: 100%; height: auto; }
.dooctext-orange { color: #F77F20 !important; }
.doocsection-pad { padding: 80px 0; }
.doocsection-pad-sm { padding: 50px 0; }
.doocsection-heading {
    margin-bottom: 50px;
}
.doocsection-heading .dooceyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #F77F20;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}
.doocsection-heading .dooceyebrow i.fa.fa-star {
    color: #F77F20;
}
.doocsection-heading h2 {
    font-size: 36px;
    font-weight: 800;
    color: #222222;
    line-height: 1.25;
    margin: 0 0 16px;
}
.doocsection-heading p {
    font-size: 16px;
    color: #6c757d;
    max-width: 560px;
    margin: 0 auto;
}

.doocdivider-orange {
    display: inline-block;
    width: 50px;
    height: 4px;
    background: #F77F20;
    border-radius: 2px;
    margin-bottom: 16px;
}
.doocbadge-pill {
    display: inline-block;
    padding: 4px 14px;
    background: #FFF4EC;
    color: #F77F20;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #fdd9bb;
}

.doochero-section {
    background: linear-gradient(135deg, #FFF8F3 0%, #FFFFFF 50%, #FFF4EC 100%);
    padding: 100px 0 70px;
    position: relative;
    overflow: hidden;
}
.doochero-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(247,127,32,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.doochero-section::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(247,127,32,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.doochero-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    color: #222222;
    margin-bottom: 20px;
}
.doochero-title .highlight {
    color: #F77F20;
    position: relative;
}
.doochero-subtitle {
    font-size: 17px;
    color: #6c757d;
    font-weight: 400;
    max-width: 520px;
    margin-bottom: 36px;
    line-height: 1.8;
}
.doochero-tags {
    margin-bottom: 36px;
}
.doochero-tags .dooctag {
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    margin: 4px 4px 4px 0;
}
.doochero-tags .dooctag i {
    color: #F77F20;
    margin-right: 5px;
}
.doochero-img-wrap {
    position: relative;
    text-align: center;
}
.doochero-img-wrap img {
    max-height: 480px;
    width: auto;
    filter: drop-shadow(0 20px 60px rgba(247,127,32,0.2));
}
.doocpulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px solid rgba(247,127,32,0.3);
    border-radius: 50%;
    animation: doocpulse-ring 2.5s ease-out infinite;
    z-index: 0;
}
.doocpulse-ring-2 {
    animation-delay: 0.8s;
}

.doocoverview-section {
    background: #FFFFFF;
    padding: 60px 0;
}
.doocoverview-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}
.doocoverview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #F77F20, #FFB370);
}
.doocoverview-item h6 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 10px;
}
.doocoverview-item p, .doocoverview-item ul {
    font-size: 14px;
    color: #222222;
    font-weight: 500;
    margin: 0;
    padding: 0;
    list-style: none;
}
.doocoverview-item ul li {
    padding: 2px 0;
    color: #444444;
    font-weight: 400;
}
.doocoverview-item ul li i {
    color: #F77F20;
    margin-right: 6px;
    font-size: 10px;
}
.doocoverview-divider {
    width: 1px;
    background: #E8E8E8;
    margin: 0 auto;
    padding: 0;
}

.doocchallenge-section {
    background: #F5F5F5;
}
.doocchallenge-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-left: 4px solid #F77F20;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}
.doocchallenge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(247,127,32,0.12);
}
.doocchallenge-card .icon-wrap {
    width: 48px;
    height: 48px;
    background: #FFF4EC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.doocchallenge-card .icon-wrap i {
    color: #F77F20;
    font-size: 20px;
}
.doocchallenge-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}
.doocchallenge-card p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}
.doocsolution-section {
    background: #FFFFFF;
}
.doocsolution-img-col {
    position: relative;
}
.doocphone-stack {
    position: relative;
    text-align: center;
    padding: 20px;
}
.doocphone-stack img {
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    max-height: 420px;
    width: auto;
}
.doocphone-stack .phone-back {
    position: absolute;
    top: 0; left: 0;
    width: 65%;
    opacity: 0.7;
    transform: rotate(-5deg) translateX(-20px);
    z-index: 0;
}
.doocphone-stack .phone-front {
    position: relative;
    z-index: 1;
    margin-left: auto;
}
.doocsolution-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.doocsolution-list li {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #E8E8E8;
    font-size: 15px;
    color: #444444;
}
.doocsolution-list li:last-child {
    border-bottom: none;
}
.doocsolution-list li .check {
    width: 28px;
    height: 28px;
    background: #F77F20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.doocsolution-list li .check i {
    color: #FFFFFF;
    font-size: 12px;
}

.doocplatform-section {
    background: #FFF4EC;
}
.doocplatform-tabs {
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    justify-content: center;
}
.doocplatform-tabs li {
    margin: 0;
}
.doocplatform-tabs li a {
    background: #FFFFFF;
    border: 1px solid #E8E8E8 !important;
    border-radius: 30px !important;
    color: #444444 !important;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px !important;
    transition: all 0.3s !important;
}
.doocplatform-tabs li a i {
    margin-right: 8px;
}
.doocplatform-tabs li a:hover {
    border-color: #F77F20 !important;
    color: #F77F20 !important;
}
.doocplatform-tabs li.active a {
    background: #F77F20 !important;
    border-color: #F77F20 !important;
    color: #FFFFFF !important;
}
.doocplatform-content {
    display: none;
}
.doocplatform-content.active {
    display: block;
}
.doocplatform-panel {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.doocplatform-panel h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 14px;
}
.doocplatform-panel p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.8;
}
.doocfeature-chip {
    display: inline-block;
    background: #FFF4EC;
    color: #F77F20;
    border: 1px solid #fdd9bb;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    margin: 4px 4px 4px 0;
}
.doocfeature-chip i {
    margin-right: 5px;
}

.doocscreenshots-section {
    background: #FFFFFF;
}
.doocscreenshot-item {
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.doocscreenshot-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(247,127,32,0.2);
}
.doocscreenshot-item img {
    display: block;
    width: 100%;
    border-radius: 24px;
}

.doocfeatures-section {
    background: #F5F5F5;
}
.doocfeature-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.doocfeature-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 3px;
    background: #F77F20;
    transition: width 0.3s;
}
.doocfeature-card:hover::after {
    width: 100%;
}
.doocfeature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(247,127,32,0.12);
}
.doocfeature-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #FFF4EC, #ffe8d4);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: background 0.3s;
}
.doocfeature-card:hover .doocfeature-icon { background: #F77F20; }
.doocfeature-icon i { color: #F77F20; font-size: 26px; transition: color 0.3s; }
.doocfeature-card:hover .doocfeature-icon i { color: #FFFFFF; }
.doocfeature-card h5 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.doocfeature-card p { font-size: 14px; color: #6c757d; line-height: 1.6; margin: 0; }

.doocjourney-section {
    background: #FFFFFF;
}
.doocjourney-steps {
    position: relative;
}
.doocjourney-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F77F20, transparent);
}
.doocjourney-step {
    text-align: center;
    position: relative;
}
.doocstep-num {
    width: 72px;
    height: 72px;
    background: #FFFFFF;
    border: 3px solid #F77F20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    font-weight: 800;
    color: #F77F20;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(247,127,32,0.2);
}
.doocjourney-step:hover .doocstep-num {
    background: #F77F20;
    color: #FFFFFF;
    transform: scale(1.1);
}
.doocjourney-step h6 {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}





.doocmid-cta {
    background: #FFFFFF;
    border: 2px solid #E8E8E8;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.doocmid-cta h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
}
.doocmid-cta p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 28px;
}
.doocbtn-orange {
    background: #F77F20;
    color: #FFFFFF!important;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    margin: 6px;
}
.doocbtn-orange:hover {
    background: #E06A10;
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(247,127,32,0.12);
}
.doocbtn-outline-orange {
    background: transparent;
    color: #F77F20;
    border: 2px solid #F77F20;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    margin: 6px;
}
.doocbtn-outline-orange:hover {
    background: #F77F20;
    color: #FFFFFF!important;
    transform: translateY(-3px);
}
.doocequal-height {
    display: flex;
    flex-wrap: wrap;
}
.doocequal-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
@media (max-width: 767px) {
    .doocequal-height > [class*="col-"] {
        display: block;
    }
}

.dooctech-section {
    background: #F5F5F5;
}
.dooctech-category h5 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #F77F20;
    margin-bottom: 16px;
}
.dooctech-badge {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.dooctech-badge:hover {
    border-color: #F77F20;
    color: #F77F20;
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(247,127,32,0.12);
}
.dooctech-badge i {
    margin-right: 8px;
    font-size: 18px;
    color: #F77F20;
}

.doocimpact-section {
    background: #1A1A2E;
    position: relative;
    overflow: hidden;
}
.doocimpact-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(247,127,32,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.doocimpact-section .doocsection-heading h2 {
    color: #FFFFFF;
}
.doocimpact-section .doocsection-heading p {
    color: rgba(255,255,255,0.6);
}
.doocimpact-item {
    text-align: center;
    padding: 30px 20px;
}
.doocimpact-item .doocnumber {
    font-size: 56px;
    font-weight: 800;
    color: #F77F20;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}
.doocimpact-item .dooclabel {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
}
.doocimpact-list {
    list-style: none;
    padding: 0;
}
.doocimpact-list li {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
}
.doocimpact-list li:last-child {
    border-bottom: none;
}
.doocimpact-list li i {
    color: #F77F20;
    margin-right: 12px;
}

.dooccta-section {
    background: linear-gradient(135deg, #F77F20 0%, #E06A10 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.dooccta-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}
.dooccta-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: 10%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
}
.dooccta-section h2 {
    color: #FFFFFF;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 16px;
}
.dooccta-section p {
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    margin-bottom: 36px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.doocbtn-cta-white {
    background: #FFFFFF;
    color: #F77F20;
    border: none;
    border-radius: 30px;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    margin: 6px;
}
.doocbtn-cta-white:hover {
    background: #1A1A2E;
    color: #FFFFFF!important;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.doocbtn-cta-outline {
    background: transparent;
    color: #FFFFFF!important;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 30px;
    padding: 14px 36px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    margin: 6px;
}
.doocbtn-cta-outline:hover {
    background: #FFFFFF;
    color: #F77F20!important;
    border-color: #FFFFFF;
    transform: translateY(-3px);
}

@media (max-width: 991px) {
    .doochero-title { font-size: 34px; }
    .doochero-section { padding: 70px 0 40px; }
    .doochero-img-wrap { margin-top: 40px; }
    .doochero-img-wrap img { max-height: 340px; }
    .doocsection-pad { padding: 60px 0; }
    .doocsection-heading h2 { font-size: 28px; }
    .doocjourney-steps::before { display: none; }
    .doocoverview-card { padding: 24px; }
    .doocoverview-divider { display: none; }
    .doocplatform-panel { padding: 24px; }
}
@media (max-width: 767px) {
    .doochero-title { font-size: 28px; }
    .doochero-section { padding: 60px 0 30px; }
    .doocsection-heading h2 { font-size: 24px; }
    .dooccta-section h2 { font-size: 26px; }
    .doocimpact-item .doocnumber { font-size: 42px; }
    .doocphone-stack img { max-height: 280px; }
    .doocoverview-card { padding: 20px; }
    .doocmid-cta { padding: 30px 20px; }
    .doocmid-cta h3 { font-size: 22px; }
    .doocscreenshot-item { margin-bottom: 20px; }
    .doocfeature-card { margin-bottom: 20px; }
    .doocchallenge-card { margin-bottom: 16px; }
}
@media (max-width: 576px) {
    .doocbtn-orange, .doocbtn-outline-orange, .doocbtn-cta-white, .doocbtn-cta-outline {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .doochero-title { font-size: 24px; }
}
/*-------- Dooctoor Case Study css End -------*/
/*-------- Custom-app-development css Start -------*/
.custome-appd{
    font-size: 16px;
    color: #1a1a1a;
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.cappsection {
    padding: 72px 0;
    border-bottom: 1px solid rgba(0,0,0,.10);
}
.cappsection-header {
    margin-bottom: 40px;
}
.cappsection-header p {
    max-width: 560px;
    margin-top: .5rem;
    font-size: .9375rem;
}
.custome-appd h1 { margin-top: 0; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; }
.custome-appd h2 { font-size: clamp(24px, 3vw, 2rem); font-weight: 600; line-height: 1.2;margin-top:0 }
.custome-appd h3 { margin-top: 0; font-size: 1rem; font-weight: 600; }
.custome-appd p  { margin-top: 0; color: #5f5e5a; line-height: 1.7; }
.cappbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 10px; font-size: .9375rem; font-weight: 600; transition: background .15s, border-color .15s, transform .1s; }
.cappbtn:active { transform: scale(.98); }
.cappbtn-primary { background: #185FA5; color: #fff; border: 2px solid #185FA5; }
.cappbtn-primary:hover { background: #0C447C; border-color: #0C447C; }
.cappbtn-ghost { background: transparent; color: #1a1a1a; border: 2px solid rgba(0,0,0,.18); }
.cappbtn-ghost:hover { background: #f5f4f0; border-color: rgba(0,0,0,.18);color:#1a1a1a }
.cappbtn-sm { padding: 8px 16px; font-size: .875rem; }
.cappeyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f5e5a; margin-bottom: .5rem; }
.capphero {
    padding: 80px 0 72px;
    border-bottom: 1px solid rgba(0,0,0,.10);
}
.capphero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.capphero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    background: #E6F1FB;
    color: #0C447C;
    border-radius: 99px;
    margin-bottom: 20px;
}
.capphero h1 {
    margin-bottom: 18px;
}
.capphero h1 span {
    color: #185FA5;
}
.capphero-sub {
    font-size: 17px;
    margin-bottom: 32px;
}
.capphero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.capphero-divider {
    height: 1px;
    background: rgba(0,0,0,.10);
    margin-bottom: 32px;
}
.capphero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.capphero-stat-val {
    font-size: 1.625rem;
    font-weight: 700;
    color: #185FA5;
}
.capphero-stat-lbl {
    font-size: 13px;
    color: #5f5e5a;
    margin-top: 2px;
}
.capphero-panel {
    background: #f5f4f0;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hcard {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color .15s;
}
.hcard:hover {
    border-color: #B5D4F4;
}
.hcard-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #E6F1FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hcard-icon svg {
    width: 20px;
    height: 20px;
    stroke: #185FA5;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hcard-label {
    font-size: .9375rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.hcard-sub {
    font-size: 13px;
    color: #5f5e5a;
}
.hcard-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .6875rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    background: #eaf3de;
    color: #27500a;
    letter-spacing: .04em;
}
.capptrust-bar { padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,.10); background: #f5f4f0; }
.capptrust-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.capptrust-label { font-size: .75rem; color: #9a9890; flex-shrink: 0; }
.capptrust-sep { width: 1px; height: 16px; background: rgba(0,0,0,.18); }
.capptrust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 12px; background: #ffffff; border: 1px solid rgba(0,0,0,.10); border-radius: 6px; }
.capptrust-badge .stars { color: #BA7517; letter-spacing: 1px; font-size: .75rem; margin-bottom: 0}
.capptrust-check { width: 14px; height: 14px; border-radius: 50%; background: #eaf3de; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.capptrust-check svg { width: 8px; height: 8px; stroke: #27500a; stroke-width: 2.5; fill: none; }
.capptrust-offices { font-size: 13px; color: #5f5e5a; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.capptrust-offices svg { width: 14px; height: 14px; stroke: #9a9890; stroke-width: 1.75; fill: none; flex-shrink: 0; }

.cappreveal { opacity: 0; transform: translateY(18px); transition: opacity .60s ease, transform .60s ease; }
.cappreveal.visible { opacity: 1; transform: none; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-card { background: #ffffff; border: 1px solid rgba(0,0,0,.10); border-radius: 14px; padding: 20px; transition: border-color .15s, background .15s; }
.svc-card:hover { border-color: #B5D4F4; background: #E6F1FB; }
.svc-icon { width: 40px; height: 40px; border-radius: 6px; background: #f5f4f0; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background .15s; }
.svc-card:hover .svc-icon { background: #B5D4F4; }
.svc-icon svg { width: 22px; height: 22px; stroke: #5f5e5a; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.svc-card:hover .svc-icon svg { stroke: #0C447C; }
.svc-card h3 { margin-bottom: 6px; font-size: .9375rem; }
.svc-card p { font-size: .875rem; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-card { padding: 20px; background: #f5f4f0; border-radius: 10px; border-left: 3px solid #185FA5; }
.why-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;font-size:16px; margin-top:0;font-weight:600; }
.why-card h3 svg { width: 18px; height: 18px; stroke: #185FA5; stroke-width: 1.75; fill: none; flex-shrink: 0; }
.why-card p { font-size: .875rem; }

.capptech-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.capptech-tab { font-size: .875rem; font-weight: 500; padding: 7px 18px; border: 1px solid rgba(0,0,0,.18); border-radius: 99px; background: transparent; color: #5f5e5a; transition: all .15s; }
.capptech-tab:hover { background: #f5f4f0; }
.capptech-tab.active { background: #185FA5; border-color: #185FA5; color: #fff; }
.capptech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.capptech-pill { background: #f5f4f0; border: 1px solid rgba(0,0,0,.10); border-radius: 6px; padding: 10px 14px; font-size: .875rem; font-weight: 500; text-align: center; display: none; }
.capptech-pill.show { display: block; }

.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ind-card { background: #ffffff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 18px 14px; text-align: center; transition: border-color .15s; }
.ind-card:hover { border-color: #B5D4F4; }
.ind-card svg { width: 28px; height: 28px; stroke: #5f5e5a; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 10px; }
.ind-card span { font-size: 13px; color: #5f5e5a; font-weight: 500; }

.process-list { display: flex; flex-direction: column; }
.pstep { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,.10); align-items: flex-start; }
.pstep:last-child { border-bottom: none; }
.pstep-num { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; color: #5f5e5a; flex-shrink: 0; margin-top: 2px; transition: all .15s; }
.pstep.active .pstep-num { background: #185FA5; border-color: #185FA5; color: #fff; }
.pstep:hover .pstep-num { background: #185FA5; border-color: #185FA5; color: #fff; }
.pstep-body h3 {margin-top: 0;font-weight: 600; margin-bottom: 6px; font-size: 1rem; }
.pstep-body p { font-size: .9375rem; }
.pstep-tag { display: inline-block; margin-top: 10px; font-size: .75rem; font-weight: 600; padding: 3px 10px; background: #eeedea; color: #5f5e5a; border-radius: 99px; }

.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj-card { background: #ffffff; border: 1px solid rgba(0,0,0,.10); border-radius: 14px; overflow: hidden; transition: border-color .15s; }
.proj-card:hover { border-color: rgba(0,0,0,.18); }
.proj-img { height: 120px; background: #f5f4f0; display: flex; align-items: center; justify-content: center; }
.proj-img svg { width: 40px; height: 40px; stroke: #9a9890; stroke-width: 1.25; fill: none; }
.proj-body { padding: 16px; }
.proj-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.proj-tag { font-size: .6875rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #f5f4f0; color: #5f5e5a; }
.proj-card h3 { color: #1a1a1a; font-size: .9375rem; margin-bottom: 4px; }
.proj-card p { font-size: 13px; }
.proj-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #185FA5; }
.proj-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

.proof-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.proof-num { background: #f5f4f0; border-radius: 10px; padding: 18px 20px; }
.proof-val { font-size: 28px; font-weight: 700; color: #185FA5; }
.proof-platform { font-size: 13px; color: #5f5e5a; margin-top: 3px; }
.proof-stars { color: #BA7517; font-size: .875rem; letter-spacing: 1px; margin-top: 5px; }
.testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.testi { background: #ffffff; border: 1px solid rgba(0,0,0,.10); border-radius: 14px; padding: 22px; }
.testi-quote { font-size: .9375rem; color: #5f5e5a; line-height: 1.7; font-style: italic; margin-bottom: 18px; position: relative; padding-left: 20px; }
.testi-quote::before { content: '\201C'; position: absolute; left: 0; top: -4px; font-size: 2rem; color: #B5D4F4; font-style: normal; line-height: 1; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 36px; height: 36px; border-radius: 50%; background: #E6F1FB; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #0C447C; flex-shrink: 0; }
.testi-name { font-size: .9375rem; font-weight: 600; }
.testi-role { font-size: 13px; color: #5f5e5a; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pt { background: #f5f4f0; border-radius: 10px; padding: 20px; border: 2px solid transparent; transition: border-color .15s; }
.pt:hover { border-color: #B5D4F4; }
.pt-range { font-size: 18px; font-weight: 700; color: #185FA5; margin-bottom: 4px; }
.pt-label { font-size: .875rem; font-weight: 600; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.18); }
.pt ul { display: flex; flex-direction: column; gap: 8px; }
.pt li { font-size: 13px; color: #5f5e5a; display: flex; align-items: flex-start; gap: 7px; }
.pt li svg { width: 14px; height: 14px; stroke: #27500a; stroke-width: 2.5; fill: none; flex-shrink: 0; margin-top: 1px; }

.faq-list { border-top: 1px solid rgba(0,0,0,.10); }
.faq-item { border-bottom: 1px solid rgba(0,0,0,.10); }
.faq-q { width: 100%; background: none; border: none; text-align: left; font-size: 1rem; font-weight: 600; color: #1a1a1a; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.faq-q svg { width: 18px; height: 18px; stroke: #5f5e5a; stroke-width: 2; fill: none; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { font-size: .9375rem; color: #5f5e5a; padding-bottom: 20px; display: none; line-height: 1.7; max-width: 720px; }
.faq-item.open .faq-a { display: block; }
div#quote h3.main_title {
    color: #333333;
    font-size: 20px;
    font-size: clamp(24px, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
}
@media (max-width: 900px) {
    .capphero-grid { grid-template-columns: 1fr; }
    .capphero-panel { display: none; }
    .capphero-stats { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials { grid-template-columns: 1fr; }
    .proof-nums { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .services-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .projects-grid { grid-template-columns: 1fr; }
    .proof-nums { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/*-------- Custom-app-development css End -------*/
/*-------- Yoga App Case Study css Start -------*/
.yogaapp body {
    font-family: 'Poppins', sans-serif;
    background-color: #fdf6ee;
    color: #2e1f12;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}
.yogaapp h1, .yogaapp  h2, .yogaapp  h3, .yogaapp  h5 {
    color: #5c3d2a;
}
@keyframes yogafadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes yogafadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes yogafadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes yogascaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes yogafloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

@keyframes yogashimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes yogadrawLine {
    from { width: 0; }
    to   { width: 60px; }
}
@keyframes yogapulseRing {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.animated {
    opacity: 1;
    transform: none !important;
}
.anim-up    { transform: translateY(40px); }
.anim-left  { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }
.anim-scale { transform: scale(0.93); }

.yogahero-section {
    padding: 80px 0 80px;
    background: linear-gradient(135deg, #fffaf4 0%, #fdf6ee 50%, #f4e9da 100%);
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}
.yogahero-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(193,113,79,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.yogahero-section::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -60px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(122,158,126,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.yogahero-tag {
    display: inline-block;
    background: linear-gradient(135deg, #c1714f, #8e6245);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 24px;
    animation: yogafadeInUp 0.6s ease both;
}
.yogahero-title {
    font-size: 50px;
    line-height: 1.18;
    font-weight: 700;
    color: #5c3d2a;
    margin-bottom: 24px;
    animation: yogafadeInUp 0.7s ease 0.1s both;
}
.yogahero-title em {
    font-style: italic;
    color: #c1714f;
}
.yogahero-subtitle {
    font-size: 17px;
    color: #8a6e58;
    max-width: 520px;
    margin-bottom: 36px;
    animation: yogafadeInUp 0.7s ease 0.2s both;
    line-height: 1.8;
}
.yogahero-buttons {
    animation: yogafadeInUp 0.7s ease 0.3s both;
    margin-bottom: 40px;
}
.yogabtn-primary-custom {
    background: linear-gradient(135deg, #c1714f 0%, #8e6245 100%);
    color: #fff !important;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-right: 12px;
    margin-bottom: 12px;
    box-shadow: 0 6px 24px rgba(193,113,79,0.35);
}
.yogabtn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(193,113,79,0.45);
    color: #fff !important;
}
.yogabtn-outline-custom {
    background: transparent;
    color: #5c3d2a !important;
    border: 2px solid #8e6245;
    padding: 13px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
    margin-bottom: 12px;
}
.yogabtn-outline-custom:hover {
    background: #5c3d2a;
    color: #fff !important;
    border-color: #5c3d2a;
    transform: translateY(-3px);
}
.yogahero-trust {
    animation: yogafadeInUp 0.7s ease 0.4s both;
}
.yogatrust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.7);
    border: 1px solid #e8d8c8;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 13px;
    color: #7a9e7e;
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 10px;
}
.yogatrust-badge .fa {
    color: #7a9e7e;
}
.yogatrust-links {
    margin-top: 12px;
}
.yogatrust-links a {
    font-size: 13px;
    color: #8a6e58;
    margin-right: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
}
.yogatrust-links a:hover {
    color: #c1714f;
}
.yogatrust-links a .fa {
    margin-right: 5px;
}
.yogahero-phones {
    position: relative;
    text-align: center;
    animation: yogafadeInRight 0.9s ease 0.3s both;
}
.yogaphone-mockup {
    display: inline-block;
    position: relative;
}
.yogaphone-mockup img {
    border-radius: 28px;
    box-shadow: 0 32px 80px rgba(92, 61, 42, 0.22);
}
.yogaphone-main {
    width: 220px;
    position: relative;
    z-index: 2;
    animation: yogafloat 4s ease-in-out infinite;
}
.yogaphone-secondary {
    width: 180px;
    position: absolute;
    z-index: 1;
    opacity: 0.85;
}
.yogaphone-left {
    top: 60px;
    left: -90px;
    animation: yogafloat 4.5s ease-in-out 0.5s infinite;
}
.yogaphone-right {
    top: 60px;
    right: -90px;
    animation: yogafloat 4.2s ease-in-out 1s infinite;
}

.yogasection-pad {
    padding: 90px 0;
}
.yogasection-pad-sm {
    padding: 60px 0;
}
.yogasection-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c1714f;
    margin-bottom: 14px;
}
.yogasection-title {
    font-size: 38px;
    font-weight: 700;
    color: #5c3d2a;
    margin-bottom: 20px;
    line-height: 1.25;
}
.yogasection-title em {
    font-style: italic;
    color: #c1714f;
}
.yogasection-desc {
    font-size: 16px;
    color: #8a6e58;
    max-width: 600px;
    line-height: 1.8;
    margin-bottom: 0;
}
.yogatitle-line {
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #c1714f, #7a9e7e);
    border-radius: 2px;
    margin-bottom: 20px;
    transition: width 0.8s ease;
}
.yogatitle-line.animated {
    width: 60px;
}
.bg-cream-soft {
    background-color: #fffaf4;
}
.bg-cream-mid {
    background-color: #f4e9da;
}

.yogaoverview-card {
    background: #fff;
    border: 1px solid #e8d8c8;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    box-shadow: 0 4px 20px rgba(92, 61, 42, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yogaoverview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(92, 61, 42, 0.22);
}
.yogaoverview-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c1714f;
    margin-bottom: 12px;
}
.yogaoverview-card h4 {
    font-size: 20px;
    margin-bottom: 14px;
    color: #5c3d2a;
}
.yogaoverview-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.yogaoverview-card ul li {
    color: #5a3e2b;
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid #e8d8c8;
    display: flex;
    align-items: center;
    gap: 8px;
}
.yogaoverview-card ul li:last-child {
    border-bottom: none;
}
.yogaoverview-card ul li .fa {
    color: #c1714f;
    font-size: 12px;
}
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e8d8c8, transparent);
    margin: 0;
}

.yogachallenge-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 14px;
    border-left: 4px solid #c1714f;
    box-shadow: 0 2px 16px rgba(92, 61, 42, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yogachallenge-item:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 28px rgba(92, 61, 42, 0.22);
}
.yogachallenge-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(193,113,79,0.12), rgba(193,113,79,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1714f;
    font-size: 18px;
}
.yogachallenge-text h5 {
    font-size: 16px;
    margin-bottom: 4px;
    color: #5c3d2a;
}
.yogachallenge-text p {
    font-size: 14px;
    margin: 0;
    color: #8a6e58;
}
/* Challenge image display */
.yogachallenge-img-wrap {
    position: relative;
    padding: 20px;
}
.yogachallenge-img-wrap img {
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(92, 61, 42, 0.22);
    width: 100%;
}
.yogafloating-badge {
    position: absolute;
    background: #fff;
    border: 1px solid #e8d8c8;
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 8px 24px rgba(92, 61, 42, 0.12);
    font-size: 13px;
    font-weight: 600;
    color: #5c3d2a;
    animation: yogafloat 3.5s ease-in-out infinite;
}
.yogafloating-badge .fa {
    color: #7a9e7e;
    margin-right: 6px;
}
.yogabadge-top-right {
    top: -10px;
    right: 10px;
}
.yogabadge-bottom-left {
    bottom: -10px;
    left: 10px;
}

.yogashowcase-wrap {
    position: relative;
}
.yogashowcase-image {
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(92, 61, 42, 0.22);
    width: 100%;
    margin-bottom: 16px;
    transition: transform 0.4s ease;
}
.yogashowcase-image:hover {
    transform: scale(1.02);
}

.yogaapp .text-terracotta { color: #c1714f; }
.yogaapp .text-brown      { color: #5c3d2a; }
.yogaapp .mt-8  { margin-top:  8px; }
.yogaapp .mt-16 { margin-top: 16px; }
.yogaapp .mt-24 { margin-top: 24px; }
.yogaapp .mt-32 { margin-top: 32px; }
.yogaapp .mb-0  { margin-bottom: 0; }

.yogagallery-phones {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0;
}
.yogagallery-phone {
    width: 190px;
    flex-shrink: 0;
}
.yogagallery-phone img {
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(92, 61, 42, 0.22);
    width: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.yogagallery-phone:hover img {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 28px 60px rgba(92, 61, 42, 0.22);
}
.yogagallery-phone:nth-child(odd) {
    margin-top: 30px;
}

.yogasteps-section {
    background: linear-gradient(135deg, #5c3d2a 0%, #3e2215 100%);
    position: relative;
    overflow: hidden;
}
.yogasteps-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(193,113,79,0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(122,158,126,0.1) 0%, transparent 40%);
    pointer-events: none;
}
.yogasteps-section .yogasection-label {
    color: #d9967a;
}
.yogasteps-section .yogasection-title {
    color: #fff;
}
.yogasteps-section .yogasection-desc {
    color: rgba(255,255,255,0.65);
}
.yogastep-item {
    text-align: center;
    padding: 24px 10px;
    position: relative;
}
.yogastep-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(193,113,79,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    font-weight: 700;
    color: #d9967a;
    position: relative;
    transition: all 0.3s ease;
}
.yogastep-item:hover .yogastep-number {
    background: #c1714f;
    border-color: #c1714f;
    color: #fff;
    transform: scale(1.1);
}
.yogastep-number::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(193,113,79,0.2);
    top: -12px;
    left: -12px;
}
.yogastep-connector {
    position: absolute;
    top: 52px;
    right: -50%;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, rgba(193,113,79,0.4), transparent);
}
.yogastep-item h5 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 8px;
}
.yogastep-item p {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

.yogafeature-card {
    background: #fff;
    border: 1px solid #e8d8c8;
    border-radius: 20px;
    padding: 28px 14px;
    margin-bottom: 24px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(92, 61, 42, 0.12);
    transition: all 0.3s ease;
    height: 100%;
}
.yogafeature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(92, 61, 42, 0.22);
    border-color: #d9967a;
}
.yogafeature-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #c1714f, #8e6245);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(193,113,79,0.3);
    transition: transform 0.3s ease;
}
.yogafeature-card:hover .yogafeature-icon-wrap {
    transform: scale(1.1) rotate(-4deg);
}
.yogafeature-card h4 {
    font-size: 17px;
    margin-bottom: 10px;
    color: #5c3d2a;
}
.yogafeature-card p {
    font-size: 14px;
    color: #8a6e58;
    margin: 0;
    line-height: 1.7;
}

.yogacta-section {
    background: linear-gradient(135deg, #c1714f 0%, #9e5535 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.yogacta-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}
.yogacta-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}
.yogacta-section h2 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 14px;
}
.yogacta-section p {
    color: rgba(255,255,255,0.8);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto 32px;
}
.yogabtn-white {
    background: #fff;
    color: #c1714f !important;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 6px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.yogabtn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    color: #5c3d2a !important;
}
.yogabtn-white-outline {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.6);
    padding: 13px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 6px;
    cursor: pointer;
}
.yogabtn-white-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff !important;
    transform: translateY(-3px);
}

.yogatech-card {
    background: #fff;
    border: 1px solid #e8d8c8;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(92, 61, 42, 0.12);
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 24px;
}
.yogatech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(92, 61, 42, 0.22);
}
.yogatech-icon {
    font-size: 36px;
    color: #c1714f;
    margin-bottom: 14px;
}
.yogatech-card h4 {
    font-size: 18px;
    margin-bottom: 14px;
    color: #5c3d2a;
}
.yogatech-tag {
    display: inline-block;
    background: #f4e9da;
    color: #8e6245;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    margin: 3px;
    border: 1px solid #e8d8c8;
}

.yogaimpact-item {
    text-align: center;
    padding: 32px 20px;
}
.yogaimpact-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(193,113,79,0.12), rgba(193,113,79,0.04));
    border: 1px solid rgba(193,113,79,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 26px;
    color: #c1714f;
    transition: all 0.3s ease;
}
.yogaimpact-icon i.fa.fa-star {
    color: #c1714f;
}
.yogaimpact-item:hover .yogaimpact-icon {
    background: #c1714f;
    color: #fff;
    transform: rotate(-5deg) scale(1.1);
}
.yogaimpact-item:hover .yogaimpact-icon i.fa.fa-star {
    color: #fff;
}
.yogaimpact-item h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #5c3d2a;
}
.yogaimpact-item p {
    font-size: 14px;
    color: #8a6e58;
    margin: 0;
}

.conclusion-box {
    background: linear-gradient(135deg, #f4e9da, #fffaf4);
    border: 1px solid #e8d8c8;
    border-radius: 24px;
    padding: 56px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.conclusion-box::before {
    content: '\f05b';
    font-family: FontAwesome;
    font-size: 160px;
    color: rgba(193,113,79,0.05);
    position: absolute;
    top: -20px;
    left: -30px;
    pointer-events: none;
}
.conclusion-box h2 {
    font-size: 34px;
    margin-bottom: 20px;
}
.conclusion-box p {
    font-size: 16px;
    max-width: 680px;
    margin: 0 auto 30px;
    color: #5a3e2b;
}
@media (max-width: 991px) {
    .yogahero-title       { font-size: 38px; }
    .yogasection-title    { font-size: 30px; }
    .yogaphone-left,
    .yogaphone-right      { display: none; }
    .yogaphone-main       { width: 300px; }
    .yogahero-phones      { margin-top: 50px; }
    .yogaphone-mockup   { width: 300px!important;height: 500px!important}
    .yogaoverview-card  { margin-bottom: 20px;
    }
}
@media (max-width: 767px) {
    .yogahero-section    { padding: 100px 0 60px; min-height: auto; }
    .yogahero-title      { font-size: 30px; }
    .yogasection-title   { font-size: 26px; }
    .yogasection-pad     { padding: 60px 0; }
    .conclusion-box  { padding: 36px 24px; }
    .yogagallery-phone   { width: 120px; }
    .yogagallery-phone:nth-child(odd) { margin-top: 20px; }
    .yogastep-connector  { display: none; }
    .yogastep-item {padding: 24px 20px;}
}
@media (max-width: 480px) {
    .yogahero-title  { font-size: 26px; }
    .yogatrust-links a { display: block; margin-bottom: 8px; }
}
/*-------- Yoga App Case Study css End -------*/

/*-------- AI EDU Case Study css End -------*/
html.aipe {
    scroll-behavior: smooth;
}
.aipe body {
    color: #1A2E45;
    background-color: #FFFFFF;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    font-family: Poppins, sans-serif;
}
.aipe-section {
    padding: 90px 0;
}
.aipe-section-sm {
    padding: 60px 0;
}
.aipe-section-bg {
    background-color: #EEF4FA;
}
.aipe-section-dark {
    background: linear-gradient(135deg, #0E2841 0%, #156082 60%, #0F9ED5 100%);
    color: #fff;
}
.aipe-section-dark h2,
.aipe-section-dark h3,
.aipe-section-dark p {
    color: rgba(255,255,255,0.92);
}
.aipe-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0F9ED5;
    margin-bottom: 14px;
}
.aipe-label-white {
    color: rgba(255,255,255,0.7);
}
.aipe-section-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    margin-bottom: 16px;
}
.aipe-section-subtitle {
    font-size: 17px;
    color: #5A7287;
    max-width: 640px;
    margin-bottom: 50px;
}
.aipe-divider {
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, #156082, #E97132);
    border-radius: 2px;
    margin-bottom: 28px;
}
.aipe-divider-center {
    margin-left: auto;
    margin-right: auto;
}
.aipe-text-center {
    text-align: center;
}
.aipe-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.aipe-reveal.aipe-visible {
    opacity: 1;
    transform: translateY(0);
}
.aipe-reveal-delay-1 { transition-delay: 0.1s; }
.aipe-reveal-delay-2 { transition-delay: 0.2s; }
.aipe-reveal-delay-3 { transition-delay: 0.3s; }
.aipe-reveal-delay-4 { transition-delay: 0.4s; }
.aipe-reveal-delay-5 { transition-delay: 0.5s; }
.aipe-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0E2841;
    padding-top: 0px;
}
.aipe-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0E2841 0%, #156082 55%, #0a4d6e 100%);
    z-index: 0;
}
/* Animated grid lines */
.aipe-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 158, 213, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 158, 213, 0.07) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: aipe-grid-pan 20s linear infinite;
    z-index: 1;
}
@keyframes aipe-grid-pan {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}
/* Floating orbs */
.aipe-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: aipe-orb-pulse 8s ease-in-out infinite;
    z-index: 1;
}
.aipe-hero-orb-1 {
    width: 500px;
    height: 500px;
    background: #0F9ED5;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}
.aipe-hero-orb-2 {
    width: 300px;
    height: 300px;
    background: #E97132;
    bottom: -50px;
    left: 10%;
    animation-delay: 3s;
}
.aipe-hero-orb-3 {
    width: 200px;
    height: 200px;
    background: #0F9ED5;
    top: 40%;
    left: 40%;
    animation-delay: 6s;
}
@keyframes aipe-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.25; }
    50%       { transform: scale(1.2); opacity: 0.35; }
}
.aipe-hero-content {
    position: relative;
    z-index: 2;
}
.aipe-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 158, 213, 0.15);
    border: 1px solid rgba(15, 158, 213, 0.35);
    border-radius: 50px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0F9ED5;
    margin-bottom: 28px;
    animation: aipe-fade-in-down 0.8s ease both;
}
.aipe-hero-eyebrow .aipe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E97132;
    animation: aipe-blink 1.5s ease infinite;
}
@keyframes aipe-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}
.aipe-hero-title {
    font-size: clamp(32px, 5.5vw, 62px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 24px;
    animation: aipe-fade-in-up 0.9s ease 0.2s both;
}
.aipe-hero-title .aipe-highlight {
    background: linear-gradient(90deg, #0F9ED5, #E97132);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.aipe-hero-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    max-width: 580px;
    line-height: 1.75;
    margin-bottom: 40px;
    animation: aipe-fade-in-up 0.9s ease 0.4s both;
}
.aipe-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    animation: aipe-fade-in-up 0.9s ease 0.6s both;
}
.aipe-hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.12);
    animation: aipe-fade-in-up 0.9s ease 0.8s both;
}
.aipe-hero-stat-item {
    text-align: left;
}
.aipe-hero-stat-num {
    font-size: 32px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 4px;
}
.aipe-hero-stat-num span {
    color: #E97132;
}
.aipe-hero-stat-label {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
/* Hero Visual Card */
.aipe-hero-visual {
    position: relative;
    z-index: 2;
    animation: aipe-float 6s ease-in-out infinite;
}
@keyframes aipe-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-16px); }
}
.aipe-hero-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.3);
}
.aipe-hero-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.aipe-hero-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.aipe-hero-card-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}
.aipe-hero-card-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.aipe-hero-card-metric-info {
    flex: 1;
}
.aipe-hero-card-metric-label {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 4px;
    font-weight: 500;
}
.aipe-hero-card-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.aipe-hero-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(21, 96, 130, 0.5);
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #0F9ED5;
}
.aipe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50px;
    padding: 14px 30px;
    border: none;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important;
    letter-spacing: 0.3px;
}
.aipe-btn-primary {
    background: #E97132;
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(233, 113, 50, 0.4);
}
.aipe-btn-primary:hover {
    background: #d4612a;
    box-shadow: 0 10px 32px rgba(233, 113, 50, 0.55);
    transform: translateY(-2px);
    color: #fff !important;
}
.aipe-btn-outline {
    background: transparent;
    color: rgba(255,255,255,0.9) !important;
    border: 2px solid rgba(255,255,255,0.3);
}
.aipe-btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
    color: #fff !important;
    transform: translateY(-2px);
}
.aipe-btn-blue {
    background: linear-gradient(135deg, #0E2841 0%, #156082 60%, #0F9ED5 100%);
    color: #fff !important;
    box-shadow: 0 6px 24px rgba(21, 96, 130, 0.4);
}
.aipe-btn-blue:hover {
    box-shadow: 0 12px 36px rgba(21, 96, 130, 0.55);
    transform: translateY(-2px);
    color: #fff !important;
}
.aipe-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    background: #EEF4FA;
    color: #156082;
    border: 1px solid #D0E2EE;
    margin: 3px;
}
.aipe-tag i {
    color: #E97132;
    font-size: 10px;
}
.aipe-highlights-bar {
    background: #FFFFFF;
    border-bottom: 1px solid #D0E2EE;
    padding: 0;
}
.aipe-highlights-list {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aipe-highlights-list::-webkit-scrollbar {
    display: none;
}
.aipe-highlights-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1A2E45;
    border-right: 1px solid #D0E2EE;
    white-space: nowrap;
}
.aipe-highlights-item i {
    color: #156082;
    font-size: 15px;
}
.aipe-highlights-item:last-child {
    border-right: none;
}
.aipe-problem-card {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(21, 96, 130, 0.12);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}
.aipe-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
    border-color: #0F9ED5;
}
.aipe-problem-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(233,113,50,0.12), rgba(233,113,50,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #E97132;
    flex-shrink: 0;
}
.aipe-problem-text {
    font-size: 15px;
    font-weight: 500;
    color: #1A2E45;
    margin: 0;
    line-height: 1.5;
}
.aipe-arch-layer {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(21, 96, 130, 0.12);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}
.aipe-arch-layer:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
}
.aipe-arch-layer-header {
    padding: 24px 26px 20px;
    position: relative;
}
.aipe-arch-layer-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: 800;
    color: rgba(21, 96, 130, 0.06);
    line-height: 1;
}
.aipe-arch-layer-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
}
.aipe-arch-layer-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #0E2841;
}
.aipe-arch-layer-body {
    padding: 0 26px 24px;
}
.aipe-arch-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aipe-arch-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #5A7287;
    padding: 7px 0;
    border-bottom: 1px solid #D0E2EE;
}
.aipe-arch-list li:last-child {
    border-bottom: none;
}
.aipe-arch-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0F9ED5;
    flex-shrink: 0;
}
.aipe-feature-card {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 20px;
    padding: 32px 28px;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
.aipe-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #0E2841 0%, #156082 60%, #0F9ED5 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.aipe-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
    border-color: transparent;
}
.aipe-feature-card:hover::before {
    transform: scaleX(1);
}
.aipe-feature-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 22px;
}
.aipe-feature-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0E2841;
}
.aipe-feature-desc {
    font-size: 15px;
    color: #5A7287;
    line-height: 1.7;
    margin-bottom: 20px;
}
.aipe-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aipe-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1A2E45;
    padding: 6px 0;
}
.aipe-feature-list li i {
    color: #0F9ED5;
    font-size: 12px;
    flex-shrink: 0;
}
.aipe-journey {
    position: relative;
}
.aipe-journey::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #156082, #0F9ED5, #E97132);
    transform: translateX(-50%);
}
.aipe-journey-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 48px;
}
.aipe-journey-step:last-child {
    margin-bottom: 0;
}
.aipe-journey-step:nth-child(odd) {
    flex-direction: row;
}
.aipe-journey-step:nth-child(even) {
    flex-direction: row-reverse;
}
.aipe-journey-content {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 12px;
    padding: 26px 28px;
    box-shadow: 0 8px 32px rgba(21, 96, 130, 0.12);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.aipe-journey-content:hover {
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
    transform: scale(1.01);
}
.aipe-journey-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0E2841 0%, #156082 60%, #0F9ED5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 0 0 6px rgba(21, 96, 130, 0.12);
    z-index: 2;
    flex-shrink: 0;
}
.aipe-journey-spacer {
    flex: 1;
}
.aipe-journey-step-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0F9ED5;
    margin-bottom: 8px;
}
.aipe-journey-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #0E2841;
    margin-bottom: 10px;
}
.aipe-journey-step-desc {
    font-size: 14.5px;
    color: #5A7287;
    line-height: 1.65;
    margin: 0;
}
.aipe-tech-group {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 32px rgba(21, 96, 130, 0.12);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.aipe-tech-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
}
.aipe-tech-group-header {
    padding: 22px 24px;
    border-bottom: 1px solid #D0E2EE;
}
.aipe-tech-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #0E2841;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.aipe-tech-group-title i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}
.aipe-tech-group-body {
    padding: 16px 24px 20px;
}
.aipe-tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 14.5px;
    color: #1A2E45;
    border-bottom: 1px dashed #D0E2EE;
}
.aipe-tech-item:last-child {
    border-bottom: none;
}
.aipe-tech-item i {
    color: #0F9ED5;
    width: 16px;
    text-align: center;
}
.aipe-impact-card {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 20px;
    padding: 30px 26px;
    height: 100%;
    box-shadow: 0 8px 32px rgba(21, 96, 130, 0.12);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
.aipe-impact-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.aipe-impact-card-1::after { background: #156082; }
.aipe-impact-card-2::after { background: #0F9ED5; }
.aipe-impact-card-3::after { background: #E97132; }
.aipe-impact-card-4::after { background: #196B24; }
.aipe-impact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
}
.aipe-impact-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
}
.aipe-impact-title {
    font-size: 17px;
    font-weight: 700;
    color: #0E2841;
    margin-bottom: 14px;
}
.aipe-impact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aipe-impact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #5A7287;
    padding: 5px 0;
}
.aipe-impact-list li i {
    color: #E97132;
    margin-top: 2px;
    font-size: 11px;
    flex-shrink: 0;
}
.aipe-mid-cta {
    background: linear-gradient(135deg, #0E2841, #156082);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.aipe-mid-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(15,158,213,0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(233,113,50,0.12) 0%, transparent 50%);
}
.aipe-mid-cta .aipe-section-title {
    color: #fff;
}
.aipe-mid-cta p {
    color: rgba(255,255,255,0.75);
    max-width: 600px;
    margin: 0 auto 36px;
}
.aipe-final-cta {
    background: #EEF4FA;
    padding: 100px 0;
    text-align: center;
}
.aipe-final-cta-card {
    background: #FFFFFF;
    border: 1px solid #D0E2EE;
    border-radius: 24px;
    padding: 60px 40px;
    box-shadow: 0 20px 60px rgba(14, 40, 65, 0.18);
    position: relative;
    overflow: hidden;
}
.aipe-final-cta-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #156082, #E97132, #0F9ED5);
    border-radius: 0 0 4px 4px;
}
.aipe-bg-primary    { background: #156082 !important; }
.aipe-bg-primary-d  { background: #0E2841 !important; }
.aipe-bg-light-blue { background: #0F9ED5 !important; }
.aipe-bg-accent     { background: #E97132 !important; }
.aipe-bg-green      { background: #196B24 !important; }
.aipe-color-accent  { color: #E97132 !important; }
.aipe-bg-grad-1 { background: linear-gradient(135deg, #156082, #0E2841); }
.aipe-bg-grad-2 { background: linear-gradient(135deg, #0F9ED5, #156082); }
.aipe-bg-grad-3 { background: linear-gradient(135deg, #E97132, #c5562a); }
.aipe-bg-grad-4 { background: linear-gradient(135deg, #196B24, #0e4d18); }
.aipe-bg-grad-2 i.fa.fa-star { color:#fff }
@keyframes aipe-fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes aipe-fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 991px) {
    .aipe-section {
        padding: 70px 0;
    }
    .aipe-hero {
        min-height: auto;
        padding: 120px 0 70px;
    }
    .aipe-hero-stats {
        gap: 24px;
        flex-wrap: wrap;
    }
    .aipe-journey::before {
        left: 26px;
    }
    .aipe-journey-step,
    .aipe-journey-step:nth-child(even) {
        flex-direction: column;
        padding-left: 70px;
    }
    .aipe-journey-node {
        left: 0;
        transform: none;
    }
    .aipe-journey-spacer {
        display: none;
    }
    .aipe-journey-content {
        flex: none;
        width: 100%;
    }
    .aipe-highlights-item {
        padding: 16px 20px;
    }
}

@media (max-width: 767px) {
    .aipe-section {
        padding: 55px 0;
    }
    .aipe-hero-card {
        margin-top: 40px;
    }
    .aipe-hero-stats {
        gap: 20px;
    }
    .aipe-hero-stat-num {
        font-size: 24px;
    }
    .aipe-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .aipe-final-cta-card {
        padding: 40px 24px;
    }
    .aipe-mid-cta {
        padding: 60px 0;
    }
}
@media (max-width: 480px) {
    .aipe-btn {
        width: 100%;
        justify-content: center;
    }
    .aipe-hero-actions {
        width: 100%;
    }
}

/*-------- AI EDU Case Study css End -------*/
/*-------- Zegofit Case Study css Start -------*/
.zfit body {
    color: #333333;
    background-color: #FFFFFF;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', sans-serif;
}
.zfit-accent {
    color: #F5B800;
}
.zfit-section {
    padding: 90px 0;
}
.zfit-section-alt {
    background-color: #FAFAFA;
}
.zfit-section-dark {
    background-color: #1A1A1A;
    color: #FFFFFF;
}
.zfit-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #F5B800;
    background: rgba(245,184,0,0.10);
    border: 1px solid rgba(245,184,0,0.30);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}
.zfit-heading {
    font-weight: 800;
    line-height: 1.15;
    color: #1A1A1A;
    margin-top: 0;
}
.zfit-heading-white {
    color: #FFFFFF;
}
.zfit-heading-lg {
    font-size: 48px;
}
.zfit-heading-md {
    font-size: 36px;
}
.zfit-heading-sm {
    font-size: 26px;
}
.zfit-lead {
    font-size: 18px;
    color: #6C6C6C;
    line-height: 1.8;
    max-width: 680px;
}
.zfit-divider {
    width: 60px;
    height: 4px;
    background: #F5B800;
    border-radius: 4px;
    margin: 20px 0 30px;
}
.zfit-divider-center {
    margin: 20px auto 30px;
}
.zfit-text-center {
    text-align: center;
}
.zfit-mb-0  { margin-bottom: 0; }
.zfit-mb-10 { margin-bottom: 10px; }
.zfit-mb-20 { margin-bottom: 20px; }
.zfit-mb-30 { margin-bottom: 30px; }
.zfit-mb-40 { margin-bottom: 40px; }
.zfit-mb-50 { margin-bottom: 50px; }
@keyframes zfit-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zfit-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zfit-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zfit-pulse-ring {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes zfit-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}
@keyframes zfit-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes zfit-countUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zfit-barGrow {
    from { height: 0; }
    to   { height: var(--zfit-bar-h); }
}
.zfit-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.zfit-animate.zfit-visible {
    opacity: 1;
    transform: translateY(0);
}
.zfit-animate-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.zfit-animate-left.zfit-visible {
    opacity: 1;
    transform: translateX(0);
}
.zfit-animate-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.zfit-animate-right.zfit-visible {
    opacity: 1;
    transform: translateX(0);
}
.zfit-delay-1 { transition-delay: 0.1s; }
.zfit-delay-2 { transition-delay: 0.2s; }
.zfit-delay-3 { transition-delay: 0.3s; }
.zfit-delay-4 { transition-delay: 0.4s; }
.zfit-delay-5 { transition-delay: 0.5s; }
.zfit-delay-6 { transition-delay: 0.6s; }

.zfit-hero {
    padding-top: 50px;
    background: #FFFFFF;
    overflow: hidden;
}
.zfit-hero-inner {
    min-height: 85vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}
.zfit-hero-bg-accent {
    position: absolute;
    top: -120px;
    right: -180px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(245,184,0,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.zfit-hero-bg-dots {
    position: absolute;
    bottom: 40px;
    left: -60px;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(circle, rgba(245,184,0,0.25) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.5;
}
.zfit-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 0;
}
.zfit-hero-eyebrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #F5B800;
    margin-bottom: 22px;
}
.zfit-hero-eyebrow span {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #F5B800;
}
.zfit-hero-title {
    font-size: 58px;
    font-weight: 900;
    line-height: 1.05;
    color: #1A1A1A;
    margin: 0 0 24px;
    letter-spacing: -0.5px;
}
.zfit-hero-title em {
    font-style: normal;
    color: #F5B800;
    position: relative;
}
.zfit-hero-desc {
    font-size: 18px;
    color: #6C6C6C;
    line-height: 1.8;
    max-width: 520px;
    margin-bottom: 40px;
}
.zfit-hero-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 50px;
}
.zfit-btn-primary {
    display: inline-block;
    background: #F5B800;
    color: #1A1A1A;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid #F5B800;
    cursor: pointer;
    transition: all 0.35s ease;
    letter-spacing: 0.3px;
}
.zfit-btn-primary:hover {
    background: #D9A200;
    border-color: #D9A200;
    color: #1A1A1A;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(245,184,0,0.40);
}
.zfit-btn-outline {
    display: inline-block;
    background: transparent;
    color: #1A1A1A;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid #E8E8E8;
    cursor: pointer;
    transition: all 0.35s ease;
}
.zfit-btn-outline:hover {
    border-color: #F5B800;
    color: #F5B800;
    background: rgba(245,184,0,0.06);
    transform: translateY(-2px);
}
.zfit-btn-white {
    display: inline-block;
    background: #FFFFFF;
    color: #1A1A1A;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    transition: all 0.35s ease;
}
.zfit-btn-white:hover {
    background: #F5B800;
    border-color: #F5B800;
    color: #1A1A1A;
    transform: translateY(-2px);
}
.zfit-btn-white-outline {
    display: inline-block;
    background: transparent;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.35s ease;
}
.zfit-btn-white-outline:hover {
    border-color: #FFFFFF;
    background: rgba(255,255,255,0.10);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.zfit-hero-trust {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
.zfit-hero-trust-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6C6C6C;
}
.zfit-hero-trust-item i {
    color: #F5B800;
    font-size: 16px;
}
.zfit-hero-visuals {
    position: relative;
    z-index: 2;
    padding: 40px 0 40px 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
}
.zfit-phone-wrap {
    position: relative;
}
.zfit-phone-main {
    width: 220px;
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    animation: zfit-float 4s ease-in-out infinite;
}
.zfit-phone-secondary {
    width: 180px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    margin-top: 60px;
    animation: zfit-float 4s ease-in-out infinite 0.8s;
}
.zfit-hero-badge {
    position: absolute;
    top: 30px;
    left: -20px;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    z-index: 9;
}
.zfit-hero-badge-icon {
    width: 36px;
    height: 36px;
    background: rgba(245,184,0,0.15);
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #F5B800;
    font-size: 16px;
}
.zfit-hero-badge-text {
    font-size: 12px;
    font-weight: 700;
    color: #1A1A1A;
    display: block;
    line-height: 1.2;
}
.zfit-hero-badge-sub {
    font-size: 11px;
    color: #6C6C6C;
    display: block;
}
.zfit-hero-badge-2 {
    position: absolute;
    bottom: 80px;
    right: -30px;
    top: unset;
    left: unset;
}
.zfit-overview-strip {
    background: #1A1A1A;
    padding: 50px 0;
}
.zfit-overview-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0;
}
.zfit-overview-item {
    padding: 24px 40px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.08);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
}
.zfit-overview-item:last-child {
    border-right: none;
}
.zfit-overview-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F5B800;
    display: block;
    margin-bottom: 10px;
}
.zfit-overview-value {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.4;
}
.zfit-challenge-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 14px;
    padding: 30px;
    height: 100%;
    transition: all 0.35s ease;
    border-top: 3px solid transparent;
}
.zfit-challenge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.10);
    border-top-color: #F5B800;
}
.zfit-challenge-icon {
    width: 52px;
    height: 52px;
    background: rgba(245,184,0,0.12);
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #F5B800;
    font-size: 22px;
    margin-bottom: 18px;
}
.zfit-challenge-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 10px;
}
.zfit-challenge-text {
    font-size: 14px;
    color: #6C6C6C;
    line-height: 1.7;
    margin: 0;
}
.zfit-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.zfit-solution-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #E8E8E8;
    font-size: 15px;
    color: #333333;
}
.zfit-solution-list li:last-child {
    border-bottom: none;
}
.zfit-solution-list li i {
    color: #F5B800;
    font-size: 16px;
    margin-top: 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.zfit-tabs-wrap {
    border: none;
}
.zfit-tab-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 40px;
    border: none;
    padding: 0;
}
.zfit-tab-btn {
    background: #FFFFFF;
    border: 2px solid #E8E8E8;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #6C6C6C;
    cursor: pointer;
    transition: all 0.35s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}
.zfit-tab-btn.zfit-active,
.zfit-tab-btn:hover {
    background: #F5B800;
    border-color: #F5B800;
    color: #1A1A1A;
}
.zfit-tab-panel {
    display: none;
}
.zfit-tab-panel.zfit-active {
    display: block;
    animation: zfit-fadeInUp 0.4s ease;
}
.zfit-feature-pill {
    display: inline-block;
    background: rgba(245,184,0,0.10);
    border: 1px solid rgba(245,184,0,0.25);
    color: #1A1A1A;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    margin: 5px 5px 5px 0;
    transition: all 0.35s ease;
}
.zfit-feature-pill:hover {
    background: #F5B800;
    border-color: #F5B800;
}
.zfit-section-header {
    margin-bottom: 60px;
}
.zfit-section-header.zfit-center {
    text-align: center;
}
.zfit-section-header.zfit-center .zfit-lead {
    margin: 0 auto;
}

.zfit-steps-wrap {
    position: relative;
}
.zfit-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
}
.zfit-step-num {
    width: 54px;
    height: 54px;
    background: #F5B800;
    color: #1A1A1A;
    font-size: 22px;
    font-weight: 900;
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.zfit-step-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 6px;
}
.zfit-step-content p {
    font-size: 14px;
    color: #6C6C6C;
    margin: 0;
    line-height: 1.7;
}

.zfit-cta-section {
    background: linear-gradient(135deg, #1A1A1A 0%, #2a2a2a 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.zfit-cta-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245,184,0,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.zfit-cta-section::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,184,0,0.06) 0%, transparent 70%);
    border-radius: 50%;
}
.zfit-cta-content {
    position: relative;
    z-index: 2;
}

.zfit-feature-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}
.zfit-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F5B800, #FFD34D);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.zfit-feature-card:hover::before {
    transform: scaleX(1);
}
.zfit-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.10);
}
.zfit-feature-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(245,184,0,0.12);
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #F5B800;
    font-size: 24px;
    margin-bottom: 20px;
    transition: all 0.35s ease;
}
.zfit-feature-card:hover .zfit-feature-card-icon {
    background: #F5B800;
    color: #1A1A1A;
}
.zfit-feature-card h4 {
    font-size: 19px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 10px;
}
.zfit-feature-card p {
    font-size: 14px;
    color: #6C6C6C;
    margin: 0;
    line-height: 1.7;
}

.zfit-screens-wrap {
    position: relative;
    overflow: hidden;
}
.zfit-screens-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.zfit-screen-item {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.zfit-screen-img {
    width: 200px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20);
    transition: all 0.35s ease;
    display: block;
}
.zfit-screen-img:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.30);
}
.zfit-screen-web {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20);
    transition: all 0.35s ease;
    display: block;
    width: 100%;
}
.zfit-screen-web:hover {
    transform: scale(1.02) translateY(-6px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}

.zfit-tech-card {
    background: #2D2D2D;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.35s ease;
    height: 100%;
}
.zfit-tech-card:hover {
    transform: translateY(-6px);
    background: #222222;
    box-shadow: 0 16px 50px rgba(0,0,0,0.30);
}
.zfit-tech-icon {
    font-size: 36px;
    color: #F5B800;
    margin-bottom: 16px;
    display: block;
}
.zfit-tech-name {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px;
}
.zfit-tech-role {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F5B800;
}

.zfit-stat-card {
    text-align: center;
    padding: 40px 20px;
}
.zfit-stat-num {
    font-size: 56px;
    font-weight: 900;
    color: #F5B800;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}
.zfit-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
@media (max-width: 992px) {
    .zfit-hero-title {
        font-size: 44px;
    }
    .zfit-heading-lg {
        font-size: 38px;
    }
    .zfit-heading-md {
        font-size: 30px;
    }
    .zfit-hero-visuals {
        padding: 0;
        margin-top: 50px;
    }
    .zfit-phone-main {
        width: 180px;
    }
    .zfit-phone-secondary {
        width: 150px;
    }
    .zfit-overview-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .zfit-overview-item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .zfit-section {
        padding: 60px 0;
    }
    .zfit-hero {
        padding-top: 0px;
    }
    .zfit-hero-title {
        font-size: 36px;
    }
    .zfit-heading-lg {
        font-size: 32px;
    }
    .zfit-heading-md {
        font-size: 26px;
    }
    .zfit-hero-actions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .zfit-hero-badge {
        display: none;
    }
    .zfit-screen-img {
        width: 150px;
    }
    .zfit-stat-num {
        font-size: 42px;
    }
    .zfit-footer-inner {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
    .zfit-hero-eyebrow {
        letter-spacing: 2px;
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    .zfit-hero-title {
        font-size: 30px;
    }
    .zfit-cta-section {
        padding: 60px 0;
    }
}

/*-------- Zegofit Case Study css End -------*/
/*-------- Flutter App Development css Start -------*/
.fdev-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5f5e5a;
    margin-bottom: .5rem;
}
.fdev-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}
.fdev-section {
    padding: 72px 0;
    border-bottom: 1px solid rgba(0,0,0,.10);
}
.fdev-section-header {
    margin-bottom: 40px;
}
.fdev-section-header p {
    max-width: 560px;
    margin-top: .5rem;
    font-size: 15px;
}

.fdev-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: background .15s, border-color .15s, transform .1s;
    border: 2px solid transparent;
}
.fdev-btn:active {
    transform: scale(.98);
}
.fdev-btn-primary {
    background: #185FA5;
    color: #fff;
    border-color: #185FA5;
}
.fdev-btn-primary:hover {
    background: #0C447C;
    border-color: #0C447C;
}
.fdev-btn-ghost {
    background: transparent;
    color: #1a1a1a;
    border-color: rgba(0,0,0,.18);
}
.fdev-btn-ghost:hover {
    background: #f5f4f0;
    color: #1a1a1a;
}
.fdev-btn-sm {
    padding: 8px 16px;
    font-size: .875rem;
}

.fdev-hero {
    padding: 80px 0 72px;
    border-bottom: 1px solid rgba(0,0,0,.10);
}
.fdev-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.fdev-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    background: #E6F1FB;
    color: #0C447C;
    border-radius: 99px;
    margin-bottom: 20px;
}
.fdev-hero-tag .fdev-flutter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #54C5F8;
}
.fdev-hero h1 {
    margin-bottom: 18px;
}
.fdev-hero h1 span {
    color: #185FA5;
}
.fdev-hero-sub {
    font-size: 17px;
    margin-bottom: 32px;
}
.fdev-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.fdev-hero-divider {
    height: 1px;
    background: rgba(0,0,0,.10);
    margin-bottom: 32px;
}
.fdev-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.fdev-stat-val {
    font-size: 24px;
    font-weight: 700;
    color: #185FA5;
}
.fdev-stat-lbl {
    font-size: 13px;
    color: #5f5e5a;
    margin-top: 2px;
}

.fdev-hero-panel {
    background: #f5f4f0;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fdev-hcard {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: border-color .15s;
}
.fdev-hcard:hover {
    border-color: #B5D4F4;
}
.fdev-hcard-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #E6F1FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fdev-hcard-icon svg {
    width: 18px;
    height: 18px;
    stroke: #185FA5;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fdev-hcard-label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.fdev-hcard-sub {
    font-size: 13px;
    color: #5f5e5a;
}
.fdev-hcard-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
    flex-shrink: 0;
}
.fdev-badge-live {
    background: #eaf3de;
    color: #27500a;
}
.fdev-badge-flutter {
    background: #E3F2FD;
    color: #0C447C;
}

.fdev-trust-bar {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,.10);
    background: #f5f4f0;
}
.fdev-trust-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fdev-trust-label {
    font-size: 12px;
    color: #9a9890;
    flex-shrink: 0;
}
.fdev-trust-sep {
    width: 1px;
    height: 16px;
    background: rgba(0,0,0,.18);
}
.fdev-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 6px;
}
.fdev-stars {
    color: #BA7517;
    letter-spacing: 1px;
    font-size: 13px;
}
.fdev-chk {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #eaf3de;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fdev-chk svg {
    width: 8px;
    height: 8px;
    stroke: #27500a;
    stroke-width: 2.5;
    fill: none;
}
.fdev-trust-offices {
    font-size: 13px;
    color: #5f5e5a;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.fdev-trust-offices svg {
    width: 14px;
    height: 14px;
    stroke: #9a9890;
    stroke-width: 1.75;
    fill: none;
    flex-shrink: 0;
}

.fdev-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.fdev-intro-body h2 {
    margin-bottom: 16px;
}
.fdev-intro-body p {
    margin-bottom: 16px;
}
.fdev-intro-body p:last-child {
    margin-bottom: 0;
}
.fdev-flutter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}
.fdev-flutter-pill {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 99px;
    background: #E6F1FB;
    color: #0C447C;
    border: 1px solid #B5D4F4;
}
.fdev-intro-visual {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fdev-stat-card {
    background: #f5f4f0;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(0,0,0,.10);
}
.fdev-stat-card-val {
    font-size: 28px;
    font-weight: 700;
    color: #185FA5;
}
.fdev-stat-card-lbl {
    font-size: 14px;
    color: #5f5e5a;
    margin-top: 2px;
}
.fdev-stat-card-sub {
    font-size: 13px;
    color: #9a9890;
    margin-top: 4px;
}

.fdev-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.fdev-svc-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 20px;
    transition: border-color .15s, background .15s;
}
.fdev-svc-card:hover {
    border-color: #B5D4F4;
    background: #E6F1FB;
}
.fdev-svc-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f5f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: background .15s;
}
.fdev-svc-card:hover .fdev-svc-icon {
    background: #B5D4F4;
}
.fdev-svc-icon svg {
    width: 22px;
    height: 22px;
    stroke: #5f5e5a;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .15s;
}
.fdev-svc-card:hover .fdev-svc-icon svg {
    stroke: #0C447C;
}
.fdev-svc-card h3 {
    margin-bottom: 6px;
    font-size: 15px;
}
.fdev-svc-card p {
    font-size: 14px;
}

.fdev-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.fdev-why-card {
    padding: 20px;
    background: #f5f4f0;
    border-radius: 10px;
    border-left: 3px solid #185FA5;
}
.fdev-why-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.fdev-why-card h3 svg {
    width: 18px;
    height: 18px;
    stroke: #185FA5;
    stroke-width: 1.75;
    fill: none;
    flex-shrink: 0;
}
.fdev-why-card p {
    font-size: 14px;
}

.fdev-vs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.fdev-vs-table th {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 16px;
    background: #f5f4f0;
    text-align: left;
    border-bottom: 2px solid rgba(0,0,0,.10);
}
.fdev-vs-table th.fdev-col-flutter {
    color: #185FA5;
}
.fdev-vs-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    vertical-align: top;
    color: #5f5e5a;
    font-size: 14px;
    line-height: 1.5;
}
.fdev-vs-table tr:last-child td {
    border-bottom: none;
}
.fdev-vs-table td:first-child {
    font-weight: 600;
    color: #1a1a1a;
    width: 22%;
}
.fdev-vs-table td.fdev-winner {
    color: #0C447C;
    font-weight: 500;
}
.fdev-win-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: #E6F1FB;
    color: #0C447C;
    margin-left: 6px;
    vertical-align: middle;
}
.fdev-vs-note {
    margin-top: 16px;
    font-size: 14px;
    background: #E6F1FB;
    border-radius: 10px;
    padding: 12px 16px;
    color: #0C447C;
}

.fdev-ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.fdev-ind-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    padding: 18px 14px;
}
.fdev-ind-card:hover {
    border-color: #B5D4F4;
}
.fdev-ind-card svg {
    width: 26px;
    height: 26px;
    stroke: #5f5e5a;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    margin-bottom: 10px;
}
.fdev-ind-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}
.fdev-ind-flutter-note {
    font-size: 12px;
    color: #9a9890;
    line-height: 1.4;
}

.fdev-process-list {
    display: flex;
    flex-direction: column;
}
.fdev-pstep {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0,0,0,.10);
    align-items: flex-start;
}
.fdev-pstep:last-child {
    border-bottom: none;
}
.fdev-pstep-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #5f5e5a;
    flex-shrink: 0;
    margin-top: 2px;
}
.fdev-pstep.fdev-active .fdev-pstep-num {
    background: #185FA5;
    border-color: #185FA5;
    color: #fff;
}
.fdev-pstep-body h3 {
    margin-bottom: 6px;
    font-size: 1rem;
    margin-top: 0;
}
.fdev-pstep-body p {
    font-size: 15px;
}
.fdev-pstep-tag {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    background: #eeedea;
    color: #5f5e5a;
    border-radius: 99px;
}

.fdev-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.fdev-proj-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .15s;
}
.fdev-proj-card:hover {
    border-color: rgba(0,0,0,.18);
}
.fdev-proj-img {
    height: 120px;
    background: #f5f4f0;
    overflow: hidden;
}
.fdev-proj-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fdev-proj-body {
    padding: 14px;
}
.fdev-proj-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.fdev-proj-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
    background: #f5f4f0;
    color: #5f5e5a;
}
.fdev-proj-tag.fdev-flutter {
    background: #E3F2FD;
    color: #0C447C;
}
.fdev-proj-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.fdev-proj-card p {
    font-size: 13px;
}
.fdev-proj-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #185FA5;
}
.fdev-proj-link svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.fdev-proof-nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
.fdev-proof-num {
    background: #f5f4f0;
    border-radius: 10px;
    padding: 18px 20px;
}
.fdev-proof-val {
    font-size: 28px;
    font-weight: 700;
    color: #185FA5;
}
.fdev-proof-platform {
    font-size: 13px;
    color: #5f5e5a;
    margin-top: 3px;
}
.fdev-proof-stars {
    color: #BA7517;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 5px;
}
.fdev-testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.fdev-testi {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 22px;
}
.fdev-testi-quote {
    font-size: 15px;
    color: #5f5e5a;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 18px;
    position: relative;
    padding-left: 20px;
}
.fdev-testi-quote::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -4px;
    font-size: 2rem;
    color: #B5D4F4;
    font-style: normal;
    line-height: 1;
}
.fdev-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fdev-testi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E6F1FB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #0C447C;
    flex-shrink: 0;
}
.fdev-testi-name {
    font-size: 15px;
    font-weight: 600;
}
.fdev-testi-role {
    font-size: 13px;
    color: #5f5e5a;
}

.fdev-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.fdev-model-card {
    border: 2px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 22px;
    transition: border-color .15s;
}
.fdev-model-card:hover {
    border-color: #B5D4F4;
}
.fdev-model-icon {
    font-size: 28px;
    margin-bottom: 12px;
}
.fdev-model-card h3 {
    margin-bottom: 8px;
}
.fdev-model-card p {
    font-size: 14px;
}
.fdev-model-tag {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    background: #E6F1FB;
    color: #0C447C;
    border-radius: 99px;
}

.fdev-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.fdev-pt {
    background: #f5f4f0;
    border-radius: 10px;
    padding: 20px;
    border: 2px solid transparent;
    transition: border-color .15s;
}
.fdev-pt:hover {
    border-color: #B5D4F4;
}
.fdev-pt-range {
    font-size: 18px;
    font-weight: 700;
    color: #185FA5;
    margin-bottom: 4px;
}
.fdev-pt-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,.18);
}
.fdev-pt ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fdev-pt li {
    font-size: 13px;
    color: #5f5e5a;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.fdev-pt li svg {
    width: 14px;
    height: 14px;
    stroke: #27500a;
    stroke-width: 2.5;
    fill: none;
    flex-shrink: 0;
    margin-top: 1px;
}
.fdev-pt-saving {
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px;
    color: #0C447C;
    background: #E6F1FB;
    border-radius: 99px;
    padding: 3px 10px;
    display: inline-block;
}

.fdev-faq-list {
    border-top: 1px solid rgba(0,0,0,.10);
}
.fdev-faq-item {
    border-bottom: 1px solid rgba(0,0,0,.10);
}
.fdev-faq-q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}
.fdev-faq-q svg {
    width: 18px;
    height: 18px;
    stroke: #5f5e5a;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
    transition: transform .2s;
}
.fdev-faq-item.fdev-open .fdev-faq-q svg {
    transform: rotate(180deg);
}
.fdev-faq-a {
    font-size: 15px;
    color: #5f5e5a;
    padding-bottom: 20px;
    display: none;
    line-height: 1.7;
    max-width: 720px;
}
.fdev-faq-item.fdev-open .fdev-faq-a {
    display: block;
}

.fdev-cta-section {
    padding: 80px 0;
    background: #f5f4f0;
}
.fdev-cta-inner {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
}
.fdev-cta-inner h2 {
    margin-bottom: 12px;
}
.fdev-cta-inner > p {
    margin-bottom: 36px;
    font-size: 17px;
}
.fdev-quote-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fdev-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fdev-quote-form input,
.fdev-quote-form select,
.fdev-quote-form textarea {
    width: 100%;
    font-size: 15px;
    font-family: inherit;
    padding: 11px 16px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    background: #ffffff;
    color: #1a1a1a;
    transition: border-color .15s;
}
.fdev-quote-form input:focus,
.fdev-quote-form select:focus,
.fdev-quote-form textarea:focus {
    outline: none;
    border-color: #185FA5;
}
.fdev-quote-form textarea {
    resize: vertical;
    min-height: 90px;
}
.fdev-quote-form .fdev-btn-primary {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
}
.fdev-form-note {
    font-size: 13px;
    color: #9a9890;
    text-align: center;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.fdev-form-note svg {
    width: 13px;
    height: 13px;
    stroke: #9a9890;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}
.fdev-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
}
.fdev-reveal.fdev-visible {
    opacity: 1;
    transform: none;
}
.fdev-main h1 {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
}
.fdev-main h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    line-height: 1.2;
}
.fdev-main h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}
.fdev-main p  {
    color: #5f5e5a;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .fdev-hero-grid, .fdev-intro-grid {
        grid-template-columns: 1fr;
    }
    .fdev-hero-panel {
        display: none;
    }
    .fdev-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .fdev-services-grid, .fdev-why-grid, .fdev-projects-grid, .fdev-models-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fdev-testimonials {
        grid-template-columns: 1fr;
    }
    .fdev-proof-nums, .fdev-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fdev-footer-top {
        grid-template-columns: 1fr 1fr;
    }
    .fdev-nav-links {
        display: none;
    }
    .fdev-vs-table th, .fdev-vs-table td {
        padding: 10px 10px;
        font-size: 13px;
    }
}
@media (max-width: 580px) {
    .fdev-services-grid, .fdev-why-grid, .fdev-projects-grid, .fdev-models-grid {
        grid-template-columns: 1fr;
    }
    .fdev-proof-nums, .fdev-pricing-grid {
        grid-template-columns: 1fr;
    }
    .fdev-form-row {
        grid-template-columns: 1fr;
    }
    .fdev-footer-top {
        grid-template-columns: 1fr;
    }
}

/*-------- Flutter App Development css End -------*/
/*-------- MatchKit Case Study css Start -------*/

.mkit body {
    color: #1F2937;
    background: #FFFFFF;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.7;
    font-family: 'Poppins', sans-serif;
}
.mkit-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E8001D;
    display: inline-block;
    margin-bottom: 12px;
}
.mkit-section-label.mkit-label-indigo {
    color: #3B2EB0;
}
.mkit-section-label.mkit-label-white {
    color: rgba(255,255,255,0.75);
}
.mkit-heading-xl {
    
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #1F2937;
    margin: 0 0 20px;
}
.mkit-heading-lg {
    
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: #1F2937;
    margin: 0 0 16px;
}
.mkit-heading-md {
    
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    color: #1F2937;
    margin: 0 0 12px;
}
.mkit-heading-sm {
    
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #1F2937;
    margin: 0 0 10px;
}
.mkit-text-white {
    color: #FFFFFF !important;
}
.mkit-text-red {
    color: #E8001D !important;
}
.mkit-text-indigo {
    color: #3B2EB0 !important;
}
.mkit-lead {
    font-size: 18px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.75;
    margin-bottom: 24px;
}
.mkit-body {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.75;
}
.mkit-btn {
    display: inline-block;
    
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
}
.mkit-btn-primary {
    background: #E8001D;
    color: #FFFFFF;
    border-color: #E8001D;
    box-shadow: 0 4px 20px rgba(232,0,29,0.3);
}
.mkit-btn-primary:hover,
.mkit-btn-primary:focus {
    background: #B8001A;
    border-color: #B8001A;
    color: #FFFFFF;
    box-shadow: 0 6px 28px rgba(232,0,29,0.45);
    transform: translateY(-2px);
}
.mkit-btn-secondary {
    background: transparent;
    color: #3B2EB0;
    border-color: #3B2EB0;
}
.mkit-btn-secondary:hover,
.mkit-btn-secondary:focus {
    background: #3B2EB0;
    color: #FFFFFF;
    transform: translateY(-2px);
}
.mkit-btn-indigo {
    background: #3B2EB0;
    color: #FFFFFF;
    border-color: #3B2EB0;
    box-shadow: 0 4px 20px rgba(59,46,176,0.3);
}
.mkit-btn-indigo:hover,
.mkit-btn-indigo:focus {
    background: #2D2288;
    border-color: #2D2288;
    color: #FFFFFF;
    box-shadow: 0 6px 28px rgba(59,46,176,0.45);
    transform: translateY(-2px);
}
.mkit-btn-outline-white {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.6);
}
.mkit-btn-outline-white:hover,
.mkit-btn-outline-white:focus {
    background: #FFFFFF;
    color: #3B2EB0;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

.mkit-hero {
    position: relative;
    overflow: hidden;
    background: #0A0A0A;
    min-height: 580px;
    display: flex;
    align-items: center;
}
.mkit-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(232,0,29,0.15) 0%,
        rgba(59,46,176,0.25) 50%,
        rgba(0,0,0,0.4) 100%
    );
    z-index: 1;
}
.mkit-hero-bg {
    /*position: absolute;
    inset: 0;*/
    /*background-image: url('../images/projects/matchkit/slider-4.jpg');
    background-size: cover;
    background-position: center top;*/
    /*opacity: 0.35;
    transform: scale(1.05);
    transition: transform 8s ease-out;*/
}
.mkit-hero-bg.mkit-parallax-ready {
    transform: scale(1);
}
.mkit-hero-content {
    position: relative;
    z-index: 2;
    padding: 100px 0 80px;
}
.mkit-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,0,29,0.15);
    border: 1px solid rgba(232,0,29,0.35);
    color: #FF6B7A;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
}
.mkit-hero-badge i {
    font-size: 9px;
}
.mkit-hero h1 {
    
    font-size: clamp(38px, 7vw, 76px);
    font-weight: 900;
    line-height: 1.0;
    color: #FFFFFF;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.mkit-hero h1 span {
    color: #E8001D;
}
.mkit-hero-subtitle {
    font-size: clamp(16px, 2.5vw, 20px);
    color: rgba(255,255,255,0.72);
    font-weight: 500;
    margin: 16px 0 36px;
    max-width: 540px;
}
.mkit-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.mkit-hero-trust {
    margin-top: 48px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.mkit-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
}
.mkit-hero-trust-item i {
    color: #E8001D;
    font-size: 10px;
}
.mkit-hero-trust-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.2);
}

.mkit-overview-strip {
    background: #F4F6F9;
    border-bottom: 1px solid #E5E7EB;
    padding: 48px 0;
}
.mkit-overview-item {
    padding: 20px 24px;
}
.mkit-overview-item-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.mkit-overview-item-label i {
    color: #E8001D;
    font-size: 12px;
}
.mkit-overview-item-value {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.5;
}
.mkit-overview-item-value span {
    display: block;
}
.mkit-overview-divider {
    width: 1px;
    background: #E5E7EB;
    margin: 0;
}

.mkit-highlights {
    padding: 80px 0;
    background: #FFFFFF;
}
.mkit-highlight-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 28px 24px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mkit-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #E8001D;
    transform: scaleX(0);
    transition: transform 0.35s ease;
    transform-origin: left;
}
.mkit-highlight-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    border-color: transparent;
}
.mkit-highlight-card:hover::before {
    transform: scaleX(1);
}
.mkit-highlight-icon {
    width: 48px;
    height: 48px;
    background: rgba(232,0,29,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.mkit-highlight-icon i {
    color: #E8001D;
    font-size: 20px;
}

.mkit-challenge {
    padding: 80px 0;
    background: #F4F6F9;
}
.mkit-challenge-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mkit-challenge-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    font-size: 15px;
    color: #6B7280;
    font-weight: 500;
}
.mkit-challenge-list li:last-child {
    border-bottom: none;
}
.mkit-challenge-list li i {
    color: #E8001D;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}
.mkit-solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mkit-solution-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    font-size: 15px;
    color: #6B7280;
    font-weight: 500;
}
.mkit-solution-list li:last-child {
    border-bottom: none;
}
.mkit-solution-list li i {
    color: #3B2EB0;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
}

.mkit-showcase {
    padding: 80px 0;
    background: #FFFFFF;
}
.mkit-showcase-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 56px rgba(0,0,0,0.18);
    position: relative;
}
.mkit-showcase-img img {
    width: 100%;
    transition: transform 0.6s ease;
}
.mkit-showcase-img:hover img {
    transform: scale(1.03);
}
.mkit-showcase-img-label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
}
.mkit-mockup-wrap {
    position: relative;
    text-align: center;
}
.mkit-mockup-wrap img {
    filter: drop-shadow(0 24px 64px rgba(0,0,0,0.18));
}

.mkit-ecosystem {
    padding: 80px 0;
    background: #F4F6F9;
}
.mkit-eco-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 32px 24px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    margin-bottom: 24px;
}
.mkit-eco-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    border-color: rgba(232,0,29,0.15);
}
.mkit-eco-number {
    
    font-size: 48px;
    font-weight: 900;
    color: rgba(232,0,29,0.08);
    line-height: 1;
    margin-bottom: 12px;
}
.mkit-eco-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #E8001D, #FF4D6D);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(232,0,29,0.25);
}
.mkit-eco-icon i {
    color: #FFFFFF;
    font-size: 22px;
}
.mkit-eco-icon.mkit-eco-icon-indigo {
    background: linear-gradient(135deg, #3B2EB0, #6C63FF);
    box-shadow: 0 6px 20px rgba(59,46,176,0.25);
}

.mkit-steps {
    padding: 80px 0;
    background: #FFFFFF;
}
.mkit-steps-list {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}
.mkit-step-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
}
.mkit-step-item:last-child {
    margin-bottom: 0;
}
.mkit-step-num {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E8001D;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(232,0,29,0.3);
    position: relative;
    z-index: 1;
}
.mkit-step-connector {
    position: absolute;
    left: 25px;
    top: 52px;
    width: 2px;
    height: calc(100% - 52px + 32px);
    background: linear-gradient(to bottom, #E8001D, rgba(232,0,29,0.1));
}
.mkit-step-item:last-child .mkit-step-connector {
    display: none;
}
.mkit-step-body {
    padding-top: 10px;
}

.mkit-platform-section {
    padding: 80px 0;
    background: #1A1A2E;
    position: relative;
    overflow: hidden;
}
.mkit-platform-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,0,29,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.mkit-platform-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,46,176,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.mkit-cta-banner {
    padding: 80px 0;
    background: linear-gradient(135deg, #3B2EB0 0%, #1a1260 100%);
    position: relative;
    overflow: hidden;
}
.mkit-cta-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(232,0,29,0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}
.mkit-cta-pattern {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    opacity: 0.04;
    background-image: repeating-linear-gradient( 45deg, #fff 0, #fff 1px, transparent 0, transparent 50%);
    background-size: 24px 24px;
}
.mkit-cta-content {
    position: relative;
    z-index: 1;
}

.mkit-features {
    padding: 80px 0;
    background: #FFFFFF;
}
.mkit-feature-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}
.mkit-feature-card:hover {
    border-color: rgba(59,46,176,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}
.mkit-feature-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(59,46,176,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.mkit-feature-icon-wrap i {
    color: #3B2EB0;
    font-size: 18px;
}
.mkit-feature-icon-wrap.mkit-red-icon {
    background: rgba(232,0,29,0.08);
}
.mkit-feature-icon-wrap.mkit-red-icon i {
    color: #E8001D;
}

.mkit-tech {
    padding: 80px 0;
    background: #F4F6F9;
}
.mkit-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    width: 100%;
    margin-bottom: 12px;
}
.mkit-tech-badge:hover {
    border-color: #E8001D;
    box-shadow: 0 4px 16px rgba(232,0,29,0.15);
    transform: translateX(4px);
}
.mkit-tech-badge i {
    color: #E8001D;
    font-size: 18px;
}
.mkit-tech-badge.mkit-tech-indigo i {
    color: #3B2EB0;
}

.mkit-impact {
    padding: 80px 0;
    background: #FFFFFF;
}
.mkit-impact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #E5E7EB;
}
.mkit-impact-item:last-child {
    border-bottom: none;
}
.mkit-impact-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: #E8001D;
    border-radius: 50%;
    margin-top: 7px;
}

.mkit-closing {
    padding: 80px 0;
    background: #F4F6F9;
}
.mkit-quote-block {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 48px 40px;
    border-left: 4px solid #E8001D;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    position: relative;
}
.mkit-quote-block::before {
    content: '\201C';
    position: absolute;
    top: -16px;
    left: 32px;
    font-size: 80px;
    font-family: inherit;
    color: #E8001D;
    line-height: 1;
}
.mkit-quote-text {
    font-size: 20px;
    font-weight: 500;
    color: #1F2937;
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

.mkit-final-cta {
    padding: 100px 0;
    background: #0A0A0A;
    position: relative;
    overflow: hidden;
}
.mkit-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(232,0,29,0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(59,46,176,0.12) 0%, transparent 50%);
}
.mkit-final-cta-content {
    position: relative;
    z-index: 1;
}

.mkit-section {
    padding: 80px 0;
}
.mkit-section-header {
    margin-bottom: 52px;
}
.mkit-section-header.mkit-center {
    text-align: center;
}
.mkit-divider {
    width: 48px;
    height: 4px;
    background: #E8001D;
    border-radius: 2px;
    margin-bottom: 20px;
}
.mkit-divider.mkit-center {
    margin: 0 auto 20px;
}

.mkit-fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.mkit-fade-up.mkit-in-view {
    opacity: 1;
    transform: translateY(0);
}

.mkit-fade-up-d1 { transition-delay: 0.1s; }
.mkit-fade-up-d2 { transition-delay: 0.2s; }
.mkit-fade-up-d3 { transition-delay: 0.3s; }
.mkit-fade-up-d4 { transition-delay: 0.4s; }
.mkit-fade-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.mkit-fade-left.mkit-in-view {
    opacity: 1;
    transform: translateX(0);
}
.mkit-fade-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.mkit-fade-right.mkit-in-view {
    opacity: 1;
    transform: translateX(0);
}

.mkit-mt-0 { margin-top: 0; }
.mkit-mb-0 { margin-bottom: 0; }
.mkit-mb-8 { margin-bottom: 8px; }
.mkit-mb-16 { margin-bottom: 16px; }
.mkit-mb-24 { margin-bottom: 24px; }
.mkit-mb-32 { margin-bottom: 32px; }
.mkit-mb-48 { margin-bottom: 48px; }

.mkit-bg-white  { background: #FFFFFF; }
.mkit-bg-light  { background: #F4F6F9; }
.mkit-bg-dark   { background: #1A1A2E; }
.mkit-bg-black  { background: #0A0A0A; }

@media (max-width: 991px) {
    .mkit-section { padding: 60px 0; }
    .mkit-hero-content { padding: 80px 0 60px; }
    .mkit-overview-divider { display: none; }
}
@media (max-width: 767px) {
    .mkit-section { padding: 48px 0; }
    .mkit-hero-content { padding: 64px 0 48px; }
    .mkit-hero h1 { font-size: 38px; }
    .mkit-hero-trust { flex-direction: column; align-items: flex-start; gap: 12px; }
    .mkit-hero-trust-divider { display: none; }
    .mkit-hero-actions { flex-direction: column; align-items: flex-start; }
    .mkit-btn { width: 100%; text-align: center; justify-content: center; }
    .mkit-cta-banner { padding: 60px 0; }
    .mkit-final-cta { padding: 72px 0; }
    .mkit-quote-block { padding: 36px 24px 28px; }
    .mkit-quote-block::before { top: -12px; left: 20px; font-size: 60px; }
}
@media (max-width: 480px) {
    .mkit-hero h1 { font-size: 32px; }
    .mkit-overview-item { padding: 16px 12px; }
}

/*-------- MatchKit Case Study css End -------*/

/*-------- RAG AI Platform Case Study css Start -------*/

html.fwnes {
    scroll-behavior: smooth;
}
.fwnes body {
    color: #1c2340;
    background-color: #ffffff;
    overflow-x: hidden;
    line-height: 1.7;
    font-family: 'Poppins', sans-serif;
}
.fwnes-heading-xl {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-top: 0;
}
.fwnes-heading-lg {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-top: 0;
}
.fwnes-heading-md {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
}
.fwnes-heading-sm {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 0;
}
.fwnes-text-body {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.75;
}
.fwnes-text-sm {
    font-size: 14px;
    color: #6b7280;
}
.fwnes-gradient-text {
    background: linear-gradient(135deg, #1a6bff 0%, #7c3aed 60%, #00d4aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fwnes-hero {
    min-height: 100vh;
    background: linear-gradient(160deg, #f0f4ff 0%, #e8eeff 40%, #f4f0ff 100%);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 68px;
}
.fwnes-hero-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}
.fwnes-hero-bg-shape--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #1a6bff 0%, transparent 70%);
    top: -150px;
    right: -100px;
    animation: fwnes-float1 8s ease-in-out infinite;
}
.fwnes-hero-bg-shape--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    bottom: 0px;
    left: -100px;
    animation: fwnes-float2 10s ease-in-out infinite;
}
.fwnes-hero-bg-shape--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #00d4aa 0%, transparent 70%);
    top: 40%;
    right: 30%;
    animation: fwnes-float3 12s ease-in-out infinite;
}
.fwnes-hero-grid-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(26,107,255,0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.fwnes-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 60px;
}
.fwnes-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26,107,255,0.1);
    border: 1px solid rgba(26,107,255,0.2);
    color: #1a6bff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 28px;
    animation: fwnes-fade-up 0.6s ease both;
}
.fwnes-hero-badge i {
    font-size: 12px;
}
.fwnes-hero-title {
    margin-bottom: 24px;
    animation: fwnes-fade-up 0.7s ease 0.1s both;
}
.fwnes-hero-desc {
    font-size: 18px;
    color: #6b7280;
    max-width: 560px;
    margin-bottom: 40px;
    line-height: 1.8;
    animation: fwnes-fade-up 0.7s ease 0.2s both;
}
.fwnes-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 56px;
    animation: fwnes-fade-up 0.7s ease 0.3s both;
}
.fwnes-hero-trust {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    animation: fwnes-fade-up 0.7s ease 0.4s both;
}
.fwnes-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.fwnes-hero-trust-item i {
    color: #00d4aa;
    font-size: 14px;
}
.fwnes-hero-visual {
    position: relative;
    z-index: 2;
    animation: fwnes-fade-up 0.8s ease 0.2s both;
}
.fwnes-chat-mockup {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(26,107,255,0.18), 0 0 0 1px rgba(26,107,255,0.08);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fwnes-chat-mockup:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}
.fwnes-chat-header {
    background: linear-gradient(135deg, #1a6bff 0%, #7c3aed 100%);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.fwnes-chat-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}
.fwnes-chat-header-info h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    
}
.fwnes-chat-status {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 5px;
}
.fwnes-chat-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d4aa;
}
.fwnes-chat-body {
    padding: 24px 20px;
    background: #f9faff;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.fwnes-chat-bubble {
    max-width: 82%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
}
.fwnes-chat-bubble--user {
    background: #1a6bff;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.fwnes-chat-bubble--ai {
    background: #ffffff;
    color: #1c2340;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 12px rgba(26,107,255,0.08);
}
.fwnes-chat-recs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.fwnes-chat-rec-item {
    background: #f4f7ff;
    border: 1px solid #e2e8f8;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.fwnes-chat-rec-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.fwnes-chat-rec-icon--podcast {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
}
.fwnes-chat-rec-icon--video {
    background: rgba(26,107,255,0.1);
    color: #1a6bff;
}
.fwnes-chat-rec-icon--article {
    background: rgba(0,212,170,0.1);
    color: #00d4aa;
}
.fwnes-chat-input {
    padding: 16px 20px;
    background: #ffffff;
    border-top: 1px solid #e2e8f8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fwnes-chat-input-field {
    flex: 1;
    background: #f4f7ff;
    border: 1px solid #e2e8f8;
    border-radius: 50px;
    padding: 10px 16px;
    font-size: 13px;
    color: #6b7280;
    
}
.fwnes-chat-send {
    width: 38px;
    height: 38px;
    background: #1a6bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.fwnes-floating-stat {
    position: absolute;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(26,107,255,0.15);
    border: 1px solid rgba(26,107,255,0.08);
    z-index: 3;
}
.fwnes-floating-stat--1 {
    bottom: -24px;
    left: -30px;
    animation: fwnes-float2 6s ease-in-out infinite;
}
.fwnes-floating-stat--2 {
    top: 30px;
    right: -30px;
    animation: fwnes-float1 7s ease-in-out infinite;
}
.fwnes-floating-stat .fwnes-stat-num {
    
    font-size: 24px;
    font-weight: 800;
    color: #1a6bff;
    line-height: 1;
}
.fwnes-floating-stat .fwnes-stat-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
}
.fwnes-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    font-weight: 600;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.fwnes-btn:hover {
    text-decoration: none;
}
.fwnes-btn--primary {
    background: #1a6bff;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(26,107,255,0.30);
}
.fwnes-btn--primary:hover {
    background: #1253cc;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26,107,255,0.40);
    color: #ffffff;
}
.fwnes-btn--outline {
    background: transparent;
    color: #1a6bff;
    border: 2px solid #1a6bff;
}
.fwnes-btn--outline:hover {
    background: #1a6bff;
    color: #ffffff;
    transform: translateY(-2px);
}
.fwnes-btn--white {
    background: #ffffff;
    color: #1a6bff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.fwnes-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    color: #1a6bff;
}
.fwnes-btn--outline-white {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.5);
}
.fwnes-btn--outline-white:hover {
    background: rgba(255,255,255,0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
    color: #ffffff;
}

.fwnes-section {
    padding: 100px 0;
}
.fwnes-section--light {
    background: #ffffff;
}
.fwnes-section--surface {
    background: #f4f7ff;
}
.fwnes-section--dark {
    background: #0d0f1a;
}
.fwnes-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a6bff;
    margin-bottom: 16px;
}
.fwnes-section-label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #1a6bff;
    border-radius: 2px;
}
.fwnes-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #1a6bff, #00d4aa);
    border-radius: 2px;
    margin: 20px 0 28px;
}

.fwnes-overview-section {
    background: #ffffff;
}
.fwnes-overview-card {
    background: #f4f7ff;
    border: 1px solid #e2e8f8;
    border-radius: 16px;
    padding: 28px;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.fwnes-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a6bff, #00d4aa);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fwnes-overview-card:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-4px);
    border-color: rgba(26,107,255,0.2);
}
.fwnes-overview-card:hover::before {
    transform: scaleX(1);
}
.fwnes-overview-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a6bff 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
.fwnes-overview-card h4 {
    
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 12px;
}
.fwnes-overview-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fwnes-overview-card ul li {
    font-size: 14px;
    color: #1c2340;
    font-weight: 500;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fwnes-overview-card ul li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a6bff;
    flex-shrink: 0;
}

.fwnes-challenge-section {
    background: #f4f7ff;
}
.fwnes-challenge-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e2e8f8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.fwnes-challenge-card:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-4px);
    border-color: rgba(26,107,255,0.2);
}
.fwnes-challenge-card-num {
    font-size: 48px;
    font-weight: 900;
    color: rgba(26,107,255,0.08);
    line-height: 1;
    margin-bottom: 12px;
    position: absolute;
    right: 28px;
}
.fwnes-challenge-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(26,107,255,0.08);
    color: #1a6bff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.fwnes-arch-section {
    background: #ffffff;
}
.fwnes-arch-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    background: #ffffff;
}
.fwnes-arch-card:hover {
    box-shadow: 0 16px 64px rgba(26,107,255,0.15);
    transform: translateY(-6px);
    border-color: rgba(26,107,255,0.2);
}
.fwnes-arch-card-header {
    padding: 28px 28px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.fwnes-arch-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.fwnes-arch-card-icon--blue {
    background: linear-gradient(135deg, rgba(26,107,255,0.12), rgba(26,107,255,0.04));
    color: #1a6bff;
}
.fwnes-arch-card-icon--purple {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.04));
    color: #7c3aed;
}
.fwnes-arch-card-icon--teal {
    background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
    color: #00d4aa;
}
.fwnes-arch-card-icon--orange {
    background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.04));
    color: #f97316;
}
.fwnes-arch-card-icon--indigo {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04));
    color: #6366f1;
}
.fwnes-arch-card-body {
    padding: 0 28px 28px;
}
.fwnes-arch-card-body ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}
.fwnes-arch-card-body ul li {
    font-size: 14px;
    color: #6b7280;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f4f7ff;
}
.fwnes-arch-card-body ul li:last-child {
    border-bottom: none;
}
.fwnes-arch-card-body ul li i {
    color: #1a6bff;
    font-size: 12px;
    width: 16px;
}

.fwnes-pipeline-section {
    background: #f4f7ff;
}
.fwnes-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 8px;
}
.fwnes-pipeline-step {
    flex: 1;
    min-width: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}
.fwnes-pipeline-step::after {
    content: '';
    position: absolute;
    top: 36px;
    right: -24px;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #1a6bff, #7c3aed);
    z-index: 1;
}
.fwnes-pipeline-step:last-child::after {
    display: none;
}
.fwnes-pipeline-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #e2e8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #1a6bff;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
}
.fwnes-pipeline-step:hover .fwnes-pipeline-icon {
    border-color: #1a6bff;
    background: #1a6bff;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(26,107,255,0.30);
}
.fwnes-pipeline-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #1c2340;
}
.fwnes-pipeline-sub {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    margin-top: 4px;
}

.fwnes-demo-section {
    background: #ffffff;
}
.fwnes-demo-chat {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 16px 64px rgba(26,107,255,0.15);
    overflow: hidden;
    border: 1px solid #e2e8f8;
}
.fwnes-demo-chat-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #0d0f1a 0%, #1a1f40 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fwnes-demo-chat-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    
    display: flex;
    align-items: center;
    gap: 10px;
}
.fwnes-demo-chat-title span {
    background: #00d4aa;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.fwnes-demo-chat-badges {
    display: flex;
    gap: 6px;
}
.fwnes-demo-chat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.fwnes-demo-chat-body {
    padding: 32px 28px;
    background: #f8f9ff;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fwnes-demo-message-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.fwnes-demo-message-row--user {
    flex-direction: row-reverse;
}
.fwnes-demo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.fwnes-demo-avatar--ai {
    background: linear-gradient(135deg, #1a6bff, #7c3aed);
    color: #fff;
}
.fwnes-demo-avatar--user {
    background: #eef2ff;
    color: #1c2340;
}
.fwnes-demo-bubble {
    max-width: 75%;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.65;
}
.fwnes-demo-bubble--user {
    background: #1a6bff;
    color: #fff;
    border-top-right-radius: 4px;
}
.fwnes-demo-bubble--ai {
    background: #ffffff;
    color: #1c2340;
    border-top-left-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.fwnes-demo-recs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.fwnes-demo-rec {
    background: #f4f7ff;
    border: 1px solid #e2e8f8;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.fwnes-demo-rec:hover {
    border-color: #1a6bff;
    background: rgba(26,107,255,0.04);
    transform: translateX(4px);
}
.fwnes-demo-rec-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.fwnes-journey-section {
    background: #f4f7ff;
}
.fwnes-step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    border: 1px solid #e2e8f8;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.fwnes-step-card:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-4px);
    border-color: rgba(26,107,255,0.2);
}
.fwnes-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a6bff, #7c3aed);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(26,107,255,0.30);
}

.fwnes-features-section {
    background: #ffffff;
}
.fwnes-feature-item {
    display: flex;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #e2e8f8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    background: #ffffff;
}
.fwnes-feature-item:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-4px);
    border-color: rgba(26,107,255,0.2);
}
.fwnes-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.fwnes-tech-section {
    background: #f4f7ff;
}
.fwnes-tech-card {
    background: #ffffff;
    border: 1px solid #e2e8f8;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.fwnes-tech-card:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-6px);
    border-color: #1a6bff;
}
.fwnes-tech-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.fwnes-tech-card-layer {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 8px;
}

.fwnes-impact-section {
    background: #ffffff;
}
.fwnes-impact-card {
    background: #f4f7ff;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid #e2e8f8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.fwnes-impact-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a6bff, #00d4aa);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fwnes-impact-card:hover {
    box-shadow: 0 4px 24px rgba(26,107,255,0.10);
    transform: translateY(-6px);
}
.fwnes-impact-card:hover::after {
    transform: scaleX(1);
}
.fwnes-impact-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #1a6bff, #7c3aed);
    color: #fff;
    box-shadow: 0 8px 24px rgba(26,107,255,0.25);
}

.fwnes-midcta-section {
    background: #0d0f1a;
    position: relative;
    overflow: hidden;
}
.fwnes-midcta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(26,107,255,0.15) 0%, transparent 60%),
                      radial-gradient(circle at 80% 50%, rgba(124,58,237,0.15) 0%, transparent 60%);
}
.fwnes-midcta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.fwnes-finalcta-section {
    background: linear-gradient(160deg, #f4f7ff 0%, #eef2ff 100%);
    position: relative;
    overflow: hidden;
}
.fwnes-finalcta-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,107,255,0.08) 0%, transparent 70%);
    top: -200px;
    right: -100px;
}

.fwnes-global-section {
    background: #0d0f1a;
    position: relative;
    overflow: hidden;
}

.fwnes-lang-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fwnes-lang-tag:hover {
    background: rgba(26,107,255,0.2);
    border-color: rgba(26,107,255,0.4);
    color: #fff;
    transform: translateY(-3px);
}

.fwnes-animate {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fwnes-animate.fwnes-visible {
    opacity: 1;
    transform: translateY(0);
}
.fwnes-animate-delay-1 { transition-delay: 0.1s; }
.fwnes-animate-delay-2 { transition-delay: 0.2s; }
.fwnes-animate-delay-3 { transition-delay: 0.3s; }
.fwnes-animate-delay-4 { transition-delay: 0.4s; }
.fwnes-animate-delay-5 { transition-delay: 0.5s; }

@keyframes fwnes-float1 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-24px); }
}
@keyframes fwnes-float2 {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-16px); }
}
@keyframes fwnes-float3 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50%       { transform: translateY(-12px) translateX(8px); }
}
@keyframes fwnes-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fwnes-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.8); }
}
@keyframes fwnes-typing {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
@keyframes fwnes-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 991px) {
    .fwnes-section {
        padding: 72px 0;
    }
    .fwnes-hero-content {
        padding: 48px 0 40px;
        text-align: center;
    }
    .fwnes-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .fwnes-hero-btns {
        justify-content: center;
    }
    .fwnes-hero-trust {
        justify-content: center;
    }
    .fwnes-hero-visual {
        margin-top: 48px;
    }
    .fwnes-chat-mockup {
        transform: none;
    }
    .fwnes-floating-stat--1,
    .fwnes-floating-stat--2 {
        display: none;
    }
    .fwnes-pipeline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    .fwnes-pipeline-step::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .fwnes-section {
        padding: 56px 0;
    }
    .fwnes-nav-links {
        display: none;
    }
    .fwnes-feature-item {
        flex-direction: column;
    }
    .fwnes-demo-chat-body {
        padding: 20px 16px;
    }
    .fwnes-demo-bubble {
        max-width: 90%;
    }
}
.fwnes-typing-cursor::after {
    content: '|';
    animation: fwnes-typing 1s infinite;
    color: #1a6bff;
}
.fwnes-gradient-border {
    position: relative;
    border-radius: 16px;
    background: #ffffff;
}
.fwnes-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(16px + 1px);
    background: linear-gradient(135deg, #1a6bff, #7c3aed, #00d4aa);
    z-index: -1;
}
.fwnes-counter {
    font-size: 42px;
    font-weight: 800;
    color: #1a6bff;
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

/*-------- RAG AI Platform Case Study css End -------*/
/*-------- Foil Republic Case Study css Start -------*/
.foilr {
    scroll-behavior: smooth;
}
.foilr body {
    font-family: 'Poppins', sans-serif;        
    font-size: 16px;
    color: #1c1e21;
    background: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.foilr-section {
    padding: 80px 0;
}
.foilr-section-sm {
    padding: 50px 0;
}
.foilr-section-lg {
    padding: 110px 0;
}
.foilr-bg-white {
    background: #ffffff;
}
.foilr-bg-offwhite {
    background: #f7f9f9;
}
.foilr-bg-charcoal {
    background: #1c1e21;
}
.foilr-bg-dark {
    background: #252829;
}
.foilr-bg-teal {
    background: #2DB5A3;
}
.foilr-teal-text {
    color: #2DB5A3;
}
.foilr-white-text {
    color: #ffffff !important;
}
.foilr-overline {
    
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2DB5A3;
    display: block;
    margin-bottom: 14px;
}
.foilr-section-title {
    font-size: 38px;
    font-weight: 800;
    color: #1c1e21;
    margin-bottom: 20px;
}
.foilr-section-title.foilr-white-text {
    color: #ffffff;
}
.foilr-lead {
    font-size: 17px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 680px;
}
.foilr-lead.foilr-white-text {
    color: rgba(255,255,255,0.75);
}
.foilr-divider {
    width: 48px;
    height: 4px;
    background: #2DB5A3;
    border-radius: 2px;
    margin-bottom: 28px;
}

.foilr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.foilr-btn-primary {
    background: #2DB5A3;
    color: #ffffff;
    border-color: #2DB5A3;
}
.foilr-btn-primary:hover,
.foilr-btn-primary:focus {
    background: #1e9488;
    border-color: #1e9488;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,181,163,0.35);
}
.foilr-btn-outline {
    background: transparent;
    color: #2DB5A3;
    border-color: #2DB5A3;
}
.foilr-btn-outline:hover,
.foilr-btn-outline:focus {
    background: #2DB5A3;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,181,163,0.25);
}
.foilr-btn-white {
    background: #ffffff;
    color: #2DB5A3;
    border-color: #ffffff;
}
.foilr-btn-white:hover,
.foilr-btn-white:focus {
    background: #2DB5A3;
    color: #ffffff;
    border-color: #2DB5A3;
    transform: translateY(-2px);
}
.foilr-btn-outline-white {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255,255,255,0.6);
}
.foilr-btn-outline-white:hover {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.foilr-hero {
    min-height: 100vh;
    background: #1c1e21;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.foilr-hero-bg-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 70% 50%, rgba(45,181,163,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(45,181,163,0.07) 0%, transparent 55%);
    pointer-events: none;
}
.foilr-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(45,181,163,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,181,163,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}
.foilr-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 100px;
}
.foilr-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45,181,163,0.15);
    border: 1px solid rgba(45,181,163,0.3);
    color: #2DB5A3;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
}
.foilr-hero-tag .fa {
    font-size: 10px;
}
.foilr-hero-title {
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 24px;
}
.foilr-hero-title span {
    color: #2DB5A3;
}
.foilr-hero-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
    max-width: 560px;
    margin-bottom: 36px;
}
.foilr-hero-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 48px;
}
.foilr-hero-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.foilr-hero-trust-dot {
    width: 8px;
    height: 8px;
    background: #2DB5A3;
    border-radius: 50%;
    animation: foilr-pulse 2s ease-in-out infinite;
}
.foilr-hero-image-wrap {
    position: relative;
    z-index: 2;
    text-align: center;
}
.foilr-hero-image-wrap img {
    max-width: 100%;
    height: auto;
    animation: foilr-float 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
}

.foilr-highlights {
    background: #2DB5A3;
    padding: 22px 0;
}
.foilr-highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.foilr-highlight-item .fa {
    font-size: 16px;
    opacity: 0.85;
}
.foilr-highlight-sep {
    color: rgba(255,255,255,0.3);
    font-size: 18px;
    line-height: 1;
}

.foilr-overview-card {
    background: #ffffff;
    border: 1px solid #e4eaea;
    border-radius: 12px;
    padding: 32px 28px;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(45,181,163,0.10);
}
.foilr-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(45,181,163,0.15);
    border-color: rgba(45,181,163,0.25);
}
.foilr-overview-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2DB5A3;
    margin-bottom: 14px;
}
.foilr-overview-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 12px;
}
.foilr-overview-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.foilr-overview-card ul li {
    font-size: 14px;
    color: #6b7280;
    padding: 5px 0;
    border-bottom: 1px solid #e4eaea;
    display: flex;
    align-items: center;
    gap: 8px;
}
.foilr-overview-card ul li:last-child {
    border-bottom: none;
}
.foilr-overview-card ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #2DB5A3;
    border-radius: 50%;
    flex-shrink: 0;
}

.foilr-challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #ffffff;
    border-radius: 10px;
    border-left: 3px solid #2DB5A3;
    box-shadow: 0 2px 12px rgba(45,181,163,0.10);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-challenge-item:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 32px rgba(45,181,163,0.15);
}
.foilr-challenge-icon {
    width: 40px;
    height: 40px;
    background: #e8f8f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2DB5A3;
    font-size: 17px;
    flex-shrink: 0;
}
.foilr-challenge-item p {
    margin: 0;
    font-size: 14.5px;
    color: #1c1e21;
    font-weight: 500;
}

.foilr-solution-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e8f8f6;
    color: #1e9488;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    margin: 5px 4px;
    border: 1px solid rgba(45,181,163,0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-solution-pill:hover {
    background: #2DB5A3;
    color: #ffffff;
    transform: translateY(-2px);
}

.foilr-feature-card {
    background: #ffffff;
    border: 1px solid #e4eaea;
    border-radius: 14px;
    padding: 30px 26px;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.foilr-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2DB5A3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(28,30,33,0.14);
    border-color: rgba(45,181,163,0.2);
}
.foilr-feature-card:hover::before {
    transform: scaleX(1);
}
.foilr-feature-icon {
    width: 54px;
    height: 54px;
    background: #e8f8f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2DB5A3;
    font-size: 22px;
    margin-bottom: 20px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-feature-card:hover .foilr-feature-icon {
    background: #2DB5A3;
    color: #ffffff;
}
.foilr-feature-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 10px;
}
.foilr-feature-card p {
    font-size: 14px;
    margin: 0;
    color: #6b7280;
}

.foilr-journey-wrap {
    position: relative;
}
.foilr-journey-step {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 36px;
    position: relative;
}
.foilr-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.foilr-step-num {
    width: 52px;
    height: 52px;
    background: #2DB5A3;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(45,181,163,0.35);
}
.foilr-step-line {
    width: 2px;
    flex: 1;
    min-height: 30px;
    background: linear-gradient(to bottom, #2DB5A3, rgba(45,181,163,0.15));
    margin-top: 8px;
}
.foilr-step-content {
    padding-top: 10px;
}
.foilr-step-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1c1e21;
    margin-bottom: 6px;
}
.foilr-step-content p {
    font-size: 14.5px;
    margin: 0;
}

.foilr-logistics-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e4eaea;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(45,181,163,0.10);
}
.foilr-logistics-badge:hover {
    border-color: #2DB5A3;
    box-shadow: 0 8px 32px rgba(45,181,163,0.15);
    transform: translateX(4px);
}
.foilr-logistics-badge .foilr-badge-icon {
    width: 42px;
    height: 42px;
    background: #e8f8f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2DB5A3;
    font-size: 18px;
    flex-shrink: 0;
}
.foilr-logistics-badge strong {
    font-size: 15px;
    font-weight: 700;
    color: #1c1e21;
    display: block;
}
.foilr-logistics-badge span {
    font-size: 12.5px;
    color: #6b7280;
}

.foilr-tech-group {
    margin-bottom: 32px;
}
.foilr-tech-group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2DB5A3;
    margin-bottom: 14px;
}
.foilr-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1c1e21;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 4px 4px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-tech-badge:hover {
    background: #2DB5A3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45,181,163,0.3);
}
.foilr-tech-badge .fa {
    font-size: 14px;
}

.foilr-stat-card {
    background: #ffffff;
    border: 1px solid #e4eaea;
    border-radius: 14px;
    padding: 34px 24px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(45,181,163,0.10);
}
.foilr-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(45,181,163,0.15);
    border-color: rgba(45,181,163,0.25);
}
.foilr-stat-num {
    font-size: 48px;
    font-weight: 800;
    color: #2DB5A3;
    line-height: 1;
    margin-bottom: 8px;
}
.foilr-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.foilr-mid-cta {
    background: #1c1e21;
    position: relative;
    overflow: hidden;
}
.foilr-mid-cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(45,181,163,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.foilr-mid-cta-content {
    position: relative;
    z-index: 1;
}

.foilr-final-cta {
    background: linear-gradient(135deg, #2DB5A3 0%, #1e9488 100%);
    position: relative;
    overflow: hidden;
}
.foilr-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}
.foilr-final-cta-content {
    position: relative;
    z-index: 1;
}

.foilr-gallery-wrap {
    position: relative;
}
.foilr-gallery-main {
    border-radius: 16px;
    overflow: hidden;
}
.foilr-gallery-main img {
    width: 100%;
    height: auto;
    display: block;
}
.foilr-phones-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}
.foilr-phone-thumb {
    flex: 1;
    max-width: 22%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.foilr-phone-thumb:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 8px 32px rgba(45,181,163,0.15);
}
.foilr-phone-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.foilr-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.foilr-fade-up.foilr-visible {
    opacity: 1;
    transform: translateY(0);
}
.foilr-fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.foilr-fade-left.foilr-visible {
    opacity: 1;
    transform: translateX(0);
}
.foilr-fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.foilr-fade-right.foilr-visible {
    opacity: 1;
    transform: translateX(0);
}
.foilr-delay-1 { transition-delay: 0.1s; }
.foilr-delay-2 { transition-delay: 0.2s; }
.foilr-delay-3 { transition-delay: 0.3s; }
.foilr-delay-4 { transition-delay: 0.4s; }
.foilr-delay-5 { transition-delay: 0.5s; }
@keyframes foilr-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}
@keyframes foilr-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}
@keyframes foilr-fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes foilr-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes foilr-scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.foilr-anim-1 { animation: foilr-fadeInDown 0.8s ease forwards; }
.foilr-anim-2 { animation: foilr-fadeInUp 0.8s 0.2s ease both; }
.foilr-anim-3 { animation: foilr-fadeInUp 0.8s 0.4s ease both; }
.foilr-anim-4 { animation: foilr-fadeInUp 0.8s 0.6s ease both; }
.foilr-anim-img { animation: foilr-scaleIn 1s 0.3s ease both; }

@media (max-width: 992px) {
    .foilr-section { padding: 60px 0; }
    .foilr-section-lg { padding: 70px 0; }
    .foilr-hero-content { text-align: center; }
    .foilr-hero-subtitle { margin: 0 auto 36px; }
    .foilr-hero-cta-wrap { justify-content: center; }
    .foilr-hero-trust { justify-content: center; }
    .foilr-hero-image-wrap { margin-top: 40px; }
    .foilr-lead { max-width: 100%; }
}
@media (max-width: 767px) {
    .foilr-section { padding: 50px 0; }
    .foilr-section-title { font-size: 28px; }
    .foilr-stat-num { font-size: 38px; }
    .foilr-phones-row { flex-wrap: wrap; }
    .foilr-phone-thumb { max-width: 45%; }
    .foilr-highlight-sep { display: none; }
    .foilr-highlights .col-xs-12 { text-align: center; justify-content: center; }
    .foilr-highlight-item { justify-content: center; }
}
@media (max-width: 480px) {
    .foilr-hero-title { font-size: 28px; }
    .foilr-btn { padding: 12px 22px; font-size: 13px; }
    .foilr-stat-num { font-size: 32px; }
}

/*-------- Foil Republic Case Study css End -------*/
/*-------- Courier Booking Case Study css Start -------*/
.logida {
    scroll-behavior: smooth;
}
.logida body {
    font-family: 'Poppins', sans-serif;
    color: #1a2340;
    background-color: #ffffff;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.7;
}
.logida-section {
    padding: 90px 0;
}
.logida-section-sm {
    padding: 60px 0;
}
.logida-section-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
}
.logida-section-subtitle {
    font-size: 17px;
    color: #4a5568;
    max-width: 620px;
    margin: 0 auto 50px auto;
}
.logida-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #1447a2;
    background: rgba(20, 71, 162, 0.09);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}
.logida-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #1447a2, #47704c);
    border-radius: 4px;
    margin: 0 auto 28px auto;
}
.logida-divider-left {
    margin-left: 0;
}
.logida-text-primary {
    color: #1447a2;
}
.logida-text-accent {
    color: #47704c;
}
.logida-bg-light {
    background-color: #f4f7fc;
}
.logida-bg-pattern {
    background-color: #f4f7fc;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(20, 71, 162, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(71, 112, 76, 0.06) 0%, transparent 50%);
}

.logida-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.logida-fade-up.logida-visible {
    opacity: 1;
    transform: translateY(0);
}
.logida-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.logida-fade-left.logida-visible {
    opacity: 1;
    transform: translateX(0);
}
.logida-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.logida-fade-right.logida-visible {
    opacity: 1;
    transform: translateX(0);
}
.logida-delay-1 { transition-delay: 0.1s; }
.logida-delay-2 { transition-delay: 0.2s; }
.logida-delay-3 { transition-delay: 0.3s; }
.logida-delay-4 { transition-delay: 0.4s; }
.logida-delay-5 { transition-delay: 0.5s; }
.logida-delay-6 { transition-delay: 0.6s; }

.logida-hero {
    background: linear-gradient(135deg, #0f3480 0%, #1447a2 50%, #1e5abf 100%);
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
}
.logida-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(71, 112, 76, 0.25) 0%, transparent 55%),
        radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}
.logida-hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 80px;
    background: #ffffff;
    clip-path: ellipse(55% 100% at 50% 100%);
}
.logida-hero-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0.04;
    background-image: repeating-linear-gradient(
        45deg,
        #fff 0,
        #fff 1px,
        transparent 0,
        transparent 50%
    );
    background-size: 20px 20px;
}
.logida-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.logida-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
}
.logida-hero-badge .fa {
    color: #ffd700;
}
.logida-hero-title {
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 24px;
}
.logida-hero-title span {
    color: #ffd700;
}
.logida-hero-text {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 36px;
    max-width: 560px;
}
.logida-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.logida-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #1447a2;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: 16px;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}
.logida-btn-primary:hover,
.logida-btn-primary:focus {
    background: transparent;
    color: #ffffff;
    text-decoration: none;
}
.logida-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}
.logida-btn-secondary:hover,
.logida-btn-secondary:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
}
.logida-btn-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1447a2;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: 16px;
    border: 2px solid #1447a2;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}
.logida-btn-blue:hover,
.logida-btn-blue:focus {
    background: #0f3480;
    border-color: #0f3480;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(20, 71, 162, 0.35);
}
.logida-btn-outline-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #1447a2;
    font-weight: 600;
    font-size: 14px;
    padding: 13px 28px;
    border-radius: 16px;
    border: 2px solid #1447a2;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}
.logida-btn-outline-blue:hover,
.logida-btn-outline-blue:focus {
    background: #1447a2;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}
.logida-hero-trust {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.logida-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
}
.logida-trust-item .fa {
    color: #ffd700;
    font-size: 15px;
}
.logida-hero-image-wrap {
    position: relative;
    z-index: 2;
    padding-top: 20px;
}
.logida-hero-device-frame {
    position: relative;
    display: inline-block;
}
.logida-hero-device-frame img {
    border-radius: 24px;
    /*box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);*/
    display: block;
}
.logida-hero-float-badge {
    position: absolute;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    font-weight: 600;
    color: #1a2340;
}
.logida-hero-float-badge.logida-badge-top {
    top: 30px;
    left: -20px;
    animation: logidaFloat 3s ease-in-out infinite;
}
.logida-hero-float-badge.logida-badge-bottom {
    bottom: 50px;
    right: -20px;
    animation: logidaFloat 3s ease-in-out infinite reverse;
}
.logida-hero-float-badge .logida-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1447a2, #2560c8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
}
@keyframes logidaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes logidaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes logidaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logida-overview {
    background: #ffffff;
}
.logida-overview-card {
    background: #ffffff;
    border: 1px solid #d8e2f3;
    border-radius: 16px;
    padding: 36px 32px;
    height: 100%;
    box-shadow: 0 8px 40px rgba(20, 71, 162, 0.12);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.logida-overview-card:hover {
    box-shadow: 0 20px 60px rgba(20, 71, 162, 0.22);
    transform: translateY(-6px);
    border-color: #1447a2;
}
.logida-overview-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1447a2, #2560c8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 20px;
}
.logida-overview-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #718096;
    margin-bottom: 8px;
}
.logida-overview-card-value {
    font-size: 16px;
    font-weight: 600;
    color: #1a2340;
    margin: 0;
}
.logida-overview-card-list {
    margin: 0;
}
.logida-overview-card-list li {
    font-size: 14px;
    color: #4a5568;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logida-overview-card-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1447a2;
    flex-shrink: 0;
}
.logida-nda-banner {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
}
.logida-nda-banner .fa {
    font-size: 22px;
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}
.logida-nda-banner p {
    margin: 0;
    font-size: 14px;
    color: #7c5200;
}

.logida-challenge {
    background: #f4f7fc;
}
.logida-challenge-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d8e2f3;
    margin-bottom: 14px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.logida-challenge-point:hover {
    border-color: #1447a2;
    box-shadow: 0 4px 20px rgba(20, 71, 162, 0.1);
    transform: translateX(4px);
}
.logida-challenge-point-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(20, 71, 162, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1447a2;
    flex-shrink: 0;
}
.logida-challenge-point-text {
    font-size: 15px;
    color: #4a5568;
    margin: 0;
    padding-top: 8px;
}
.logida-challenge-image-wrap {
    position: relative;
}
.logida-challenge-image-wrap img {
    border-radius: 16px;
    /*box-shadow: 0 8px 40px rgba(20, 71, 162, 0.12);*/
    width: 100%;
}
.logida-challenge-image-wrap::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: 15px;
    bottom: 15px;
    border: 0px solid #1447a2;
    border-radius: 16px;
    opacity: 0.25;
    z-index: 0;
}

.logida-solution {
    background: #ffffff;
}
.logida-solution-feature {
    position: relative;
    padding: 50px 0;
    border-bottom: 1px solid #d8e2f3;
}
.logida-solution-feature:last-child {
    border-bottom: none;
}
.logida-solution-feature-number {
    font-size: 80px;
    font-weight: 800;
    color: rgba(20, 71, 162, 0.06);
    line-height: 1;
    position: absolute;
    top: 40px;
    left: 0;
}
.logida-solution-feature-content {
    position: relative;
    z-index: 1;
}
.logida-solution-feature h3 {
    font-size: 26px;
    margin-bottom: 16px;
}
.logida-solution-feature p {
    font-size: 15px;
    line-height: 1.8;
}
.logida-solution-feature-list li {
    font-size: 14px;
    color: #4a5568;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.logida-solution-feature-list li .fa {
    color: #47704c;
    font-size: 13px;
}
.logida-app-screenshots {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.logida-app-screenshots img {
    border-radius: 20px;
    /*box-shadow: 0 10px 40px rgba(20, 71, 162, 0.15);*/
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.logida-app-screenshots img:hover {
    transform: translateY(-8px) scale(1.02);
    /*box-shadow: 0 20px 60px rgba(20, 71, 162, 0.25);*/
}
.logida-screenshot-main {
    width: 48%;
}
.logida-screenshot-side {
    width: 30%;
}

.logida-features {
    background: #f4f7fc;
}
.logida-feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    height: 100%;
    border: 1px solid #d8e2f3;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.logida-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1447a2, #47704c);
    transform: scaleX(0);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
}
.logida-feature-card:hover {
    box-shadow: 0 20px 60px rgba(20, 71, 162, 0.22);
    transform: translateY(-8px);
    border-color: transparent;
}
.logida-feature-card:hover::before {
    transform: scaleX(1);
}
.logida-feature-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}
.logida-icon-blue {
    background: rgba(20, 71, 162, 0.1);
    color: #1447a2;
}
.logida-icon-green {
    background: rgba(71, 112, 76, 0.1);
    color: #47704c;
}
.logida-feature-card h4 {
    font-size: 18px;
    margin-bottom: 12px;
}
.logida-feature-card p {
    font-size: 14px;
    margin: 0;
}

.logida-tech {
    background: #ffffff;
}
.logida-tech-card {
    background: #f4f7fc;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #d8e2f3;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}
.logida-tech-card:hover {
    background: #1447a2;
    border-color: #1447a2;
    transform: translateY(-6px);
    box-shadow: 0 8px 40px rgba(20, 71, 162, 0.12);
}
.logida-tech-card:hover .logida-tech-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}
.logida-tech-card:hover h4,
.logida-tech-card:hover p {
    color: #ffffff;
}
.logida-tech-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(20, 71, 162, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #1447a2;
    margin: 0 auto 20px auto;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.logida-tech-card h4 {
    font-size: 17px;
    margin-bottom: 10px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.logida-tech-card p {
    font-size: 13px;
    margin: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.logida-outcomes {
    background: #f4f7fc;
}
.logida-outcome-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #d8e2f3;
}
.logida-outcome-item:last-child {
    border-bottom: none;
}
.logida-outcome-check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #47704c, #5a8a60);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    flex-shrink: 0;
}
.logida-outcome-text {
    font-size: 15px;
    color: #4a5568;
    margin: 0;
    padding-top: 6px;
}

.logida-feedback {
    background: linear-gradient(135deg, #0f3480 0%, #1447a2 100%);
    position: relative;
    overflow: hidden;
}
.logida-feedback::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}
.logida-feedback::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(71, 112, 76, 0.15);
}
.logida-feedback-content {
    position: relative;
    z-index: 2;
}
.logida-review-stars {
    color: #ffd700;
    font-size: 22px;
    margin-bottom: 20px;
    letter-spacing: 4px;
}
.logida-review-stars .fa.fa-star{
    color: #ffd700;
}
.logida-testimonial-quote {
    font-size: 52px;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
    margin-bottom: -20px;
}
.logida-testimonial-text {
    font-size: 22px;
    color: #ffffff;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 28px;
    font-weight: 300;
}
.logida-testimonial-text-sm {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.88);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 300;
}
.logida-reviewer {
    display: flex;
    align-items: center;
    gap: 16px;
}
.logida-reviewer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.logida-reviewer-name {
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 2px;
}
.logida-reviewer-role {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}
.logida-clutch-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 10px 22px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.logida-clutch-badge .fa {
    color: #ffd700;
}

.logida-mid-cta {
    background: #ffffff;
    border-top: 1px solid #d8e2f3;
    border-bottom: 1px solid #d8e2f3;
}
.logida-mid-cta-card {
    background: linear-gradient(135deg, #f4f7fc, #e8eef8);
    border-radius: 16px;
    padding: 60px 50px;
    border: 1px solid #d8e2f3;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.logida-mid-cta-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(20, 71, 162, 0.06);
}
.logida-mid-cta-card h2 {
    font-size: 34px;
    margin-bottom: 18px;
}
.logida-mid-cta-card p {
    font-size: 16px;
    max-width: 550px;
    margin: 0 auto 32px auto;
}
.logida-mid-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.logida-final-cta {
    background: linear-gradient(135deg, #1a2340 0%, #2d3a5a 100%);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.logida-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(20, 71, 162, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(71, 112, 76, 0.2) 0%, transparent 50%);
}
.logida-final-cta-content {
    position: relative;
    z-index: 2;
}
.logida-final-cta h2 {
    font-size: 44px;
    color: #ffffff;
    margin-bottom: 20px;
}
.logida-final-cta p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 40px auto;
}
.logida-final-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.logida-section-header {
    text-align: center;
    margin-bottom: 60px;
}
.logida-section-header.logida-left-align {
    text-align: left;
}
.logida-section-header.logida-left-align .logida-divider {
    margin-left: 0;
}
.logida-section-header.logida-left-align .logida-section-subtitle {
    margin-left: 0;
}

.logida-stat-item {
    text-align: center;
    padding: 24px;
}
.logida-stat-number {
    font-size: 48px;
    font-weight: 800;
    color: #1447a2;
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}
.logida-stat-label {
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
}
.logida-stats-row {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(20, 71, 162, 0.12);
    padding: 10px 0;
    margin-top: -50px;
    position: relative;
    z-index: 5;
}
.logida-stats-row .col-xs-6,
.logida-stats-row .col-sm-3 {
    border-right: 1px solid #d8e2f3;
}
.logida-stats-row .col-xs-6:last-child,
.logida-stats-row .col-sm-3:last-child {
    border-right: none;
}

@media (max-width: 991px) {
    .logida-hero-title {
        font-size: 36px;
    }
    .logida-section-title {
        font-size: 30px;
    }
    .logida-hero {
        padding: 70px 0 100px;
    }
    .logida-section {
        padding: 70px 0;
    }
    .logida-hero-image-wrap {
        margin-top: 50px;
    }
    .logida-hero-float-badge {
        display: none;
    }
    .logida-solution-feature-number {
        display: none;
    }
    .logida-mid-cta-card {
        padding: 40px 30px;
    }
    .logida-final-cta h2 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .logida-hero-title {
        font-size: 28px;
    }
    .logida-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .logida-hero-trust {
        flex-direction: column;
        gap: 14px;
    }
    .logida-section-title {
        font-size: 26px;
    }
    .logida-section {
        padding: 55px 0;
    }
    .logida-app-screenshots {
        flex-direction: column;
        align-items: center;
    }
    .logida-screenshot-main,
    .logida-screenshot-side {
        width: 80%;
    }
    .logida-final-cta h2 {
        font-size: 26px;
    }
    .logida-final-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .logida-mid-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .logida-stats-row {
        margin-top: 20px;
    }
    .logida-stats-row .col-xs-6 {
        border-right: none;
        border-bottom: 1px solid #d8e2f3;
    }
}
.logida-count-up {
    display: block;
}

/*-------- Courier Booking Case Study css End -------*/

/*-------- Shellby Power Case Study css Start -------*/
.spower {
    scroll-behavior: smooth;
}
.spower body {
    font-family: 'Poppins', sans-serif;
    color: #1c1c24;
    background-color: #ffffff;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}
.spower-accent-text {
    color: #9D0203;
    position: relative;
    display: inline;
}
@keyframes spower-fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes spower-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes spower-slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes spower-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}
@keyframes spower-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
@keyframes spower-scroll-line {
    0%   { height: 0; opacity: 1; }
    100% { height: 48px; opacity: 0; }
}
@keyframes spower-orb-rotate {
    0%   { transform: rotate(0deg) translateX(60px); }
    100% { transform: rotate(360deg) translateX(60px); }
}
@keyframes spower-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.spower-animate-fade-up {
    opacity: 0;
    animation: spower-fadeUp 0.7s ease forwards;
}
.spower-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #9D0203;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #9D0203;
    letter-spacing: 0.01em;
    cursor: pointer;
}
.spower-btn-primary:hover,
.spower-btn-primary:focus {
    background: #7a0102;
    border-color: #7a0102;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(157, 2, 3, 0.15);
}
.spower-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #1c1c24;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #e2e2ec;
}
.spower-btn-ghost:hover,
.spower-btn-ghost:focus {
    border-color: #9D0203;
    color: #9D0203;
    text-decoration: none;
    transform: translateY(-2px);
}
.spower-btn-large {
    padding: 16px 36px;
    font-size: 16px;
}

.spower-hero {
    position: relative;
    padding: 160px 0 140px;
    background: linear-gradient(
        135deg,
        #fafafa 0%,
        #f5f5f8 40%,
        #fff0f0 70%,
        #fff5f5 100%
    );
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}
.spower-hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#e2e2ec 1px, transparent 1px),
        linear-gradient(90deg, #e2e2ec 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}
.spower-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.spower-hero-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(157,2,3,0.12), transparent 70%);
    top: -100px;
    right: -100px;
    animation: spower-float 8s ease-in-out infinite;
}
.spower-hero-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(157,2,3,0.08), transparent 70%);
    bottom: 0;
    left: 5%;
    animation: spower-float 10s ease-in-out infinite reverse;
}
.spower-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #9D0203;
    background: rgba(157, 2, 3, 0.08);
    border: 1px solid rgba(157, 2, 3, 0.2);
    padding: 6px 16px;
    border-radius: 100px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.spower-hero-title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.08;
    color: #111113;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.spower-hero-sub {
    font-size: 18px;
    color: #5a5a72;
    max-width: 560px;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.65;
}
.spower-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 60px;
}
.spower-hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.spower-hero-highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e2ec;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c24;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.spower-hero-highlight-item .fa {
    color: #9D0203;
    font-size: 14px;
}
.spower-hero-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8888a0;
}
.spower-scroll-line {
    width: 1px;
    background: #9D0203;
    animation: spower-scroll-line 1.8s ease infinite;
}

.spower-hero-screens {
    background: #111113;
    padding: 48px 0;
    overflow: hidden;
}
.spower-screens-strip {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
    overflow-x: auto;
}
.spower-screen-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    min-width: 260px;
    flex: 1;
    max-width: 400px;
    transition: all 0.3s ease;
}
.spower-screen-card:hover {
    transform: translateY(-6px);
    border-color: #9D0203;
}
.spower-screen-card img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}
.spower-screen-wide img {
    height: 240px;
}
.spower-screen-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 20px 14px 10px;
    letter-spacing: 0.03em;
}

.spower-stats-bar {
    background: #ffffff;
    border-bottom: 1px solid #e2e2ec;
    padding: 48px 0;
}
.spower-stat-item {
    text-align: center;
    padding: 20px;
    position: relative;
}
.spower-stat-item + .spower-stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #e2e2ec;
}
.spower-stat-number {
    display: inline-block;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: #9D0203;
    line-height: 1;
    letter-spacing: -0.03em;
}
.spower-stat-plus {
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    color: #9D0203;
    line-height: 1;
    vertical-align: top;
    margin-top: 6px;
}
.spower-stat-label {
    font-size: 13px;
    color: #5a5a72;
    font-weight: 500;
    margin-top: 6px;
    letter-spacing: 0.02em;
}

.spower-section {
    padding: 90px 0;
    position: relative;
}
.spower-section-light {
    background: #fafafa;
}
.spower-section-white {
    background: #ffffff;
}
.spower-section-gray {
    background: #f4f4f6;
}
.spower-section-dark {
    background: #111113;
}
.spower-section-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.spower-section-header {
    margin-bottom: 60px;
}
.spower-section-tag {
    display: inline-block;
    
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9D0203;
    background: rgba(157, 2, 3, 0.08);
    border: 1px solid rgba(157, 2, 3, 0.2);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.spower-tag-light {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
}
.spower-section-title {
    
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #111113;
    margin-bottom: 16px;
}
.spower-title-light {
    color: #ffffff;
}
.spower-section-desc {
    font-size: 17px;
    color: #5a5a72;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
}
.spower-desc-light {
    color: rgba(255,255,255,0.65);
}

.spower-challenge-content {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
}
.spower-challenge-text {
    font-size: 16px;
    color: #5a5a72;
    margin-bottom: 32px;
    line-height: 1.75;
}
.spower-pain-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.spower-pain-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e2ec;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.spower-pain-item:hover {
    border-color: #9D0203;
    box-shadow: 0 4px 16px rgba(157, 2, 3, 0.15);
    transform: translateX(4px);
}
.spower-pain-icon .fa {
    color: #9D0203;
    font-size: 16px;
}
.spower-pain-text {
    font-size: 15px;
    font-weight: 500;
    color: #1c1c24;
}
.spower-challenge-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.spower-challenge-img {
    width: 100%;
    display: block;
    border-radius: 20px;
}
.spower-challenge-img-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    color: #ffffff;
    
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spower-challenge-img-badge .fa {
    color: #f59e0b;
}

.spower-requirements-box {
    background: #111113;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(255,255,255,0.06);
}
.spower-req-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.spower-req-title .fa {
    color: #9D0203;
}
.spower-req-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color 0.2s;
}
.spower-req-item:hover {
    color: #ffffff;
}
.spower-req-item .fa {
    color: #9D0203;
    width: 16px;
    text-align: center;
}

.spower-solution-cards {
    gap: 0;
}
.spower-solution-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px;
    height: 100%;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}
.spower-solution-card:hover {
    border-color: rgba(157,2,3,0.4);
    background: rgba(157,2,3,0.06);
    transform: translateY(-4px);
}
.spower-solution-card-accent {
    border-color: rgba(157,2,3,0.3);
    background: rgba(157,2,3,0.04);
}
.spower-solution-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.spower-solution-card-header h3 {
    
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.spower-solution-icon {
    width: 44px;
    height: 44px;
    background: #9D0203;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.spower-solution-icon .fa {
    color: #ffffff;
    font-size: 18px;
}
.spower-solution-card p {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
    line-height: 1.7;
}
.spower-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.spower-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.spower-feature-list li .fa {
    color: #9D0203;
    font-size: 13px;
    flex-shrink: 0;
}
.spower-solution-img-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 24px;
}
.spower-solution-img-wrap img {
    width: 100%;
    display: block;
}
.spower-mobile-wrap {
    display: flex;
    justify-content: center;
}
.spower-mobile-img {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.spower-workflow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 60px;
    padding: 30px 10px;
    background: #f4f4f6;
    border-radius: 20px;
    border: 1px solid #e2e2ec;
}
.spower-workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e2ec;
    min-width: 110px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}
.spower-workflow-step:hover {
    border-color: #9D0203;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(157, 2, 3, 0.15);
}
.spower-wf-icon {
    width: 48px;
    height: 48px;
    background: rgba(157,2,3,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spower-wf-icon .fa {
    color: #9D0203;
    font-size: 18px;
}
.spower-wf-label {
    
    font-size: 12px;
    font-weight: 700;
    color: #1c1c24;
    letter-spacing: 0.02em;
}
.spower-workflow-arrow {
    color: #9D0203;
    font-size: 16px;
    opacity: 0.6;
}

.spower-offline-row {
    align-items: center;
}
.spower-offline-card {
    padding: 40px;
    background: #111113;
    border-radius: 20px;
    height: 100%;
    color: #ffffff;
}
.spower-offline-icon {
    width: 56px;
    height: 56px;
    background: #9D0203;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.spower-offline-icon .fa {
    color: #ffffff;
    font-size: 22px;
}
.spower-offline-card h3 {
    
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
    line-height: 1.3;
}
.spower-offline-card p {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 24px;
    line-height: 1.7;
}
.spower-offline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.spower-offline-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}
.spower-offline-list li .fa {
    color: #9D0203;
    font-size: 16px;
}
.spower-offline-visual {
    display: flex;
    justify-content: center;
    padding: 20px;
}
.spower-offline-img {
    max-width: 90%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: spower-float 6s ease-in-out infinite;
}

.spower-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e2ec;
    border-radius: 20px;
}
.spower-tab-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #5a5a72;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.01em;
}
.spower-tab-btn:hover {
    background: #f4f4f6;
    color: #1c1c24;
}
.spower-tab-active {
    background: #9D0203 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(157, 2, 3, 0.15);
}
.spower-tab-content {
    animation: spower-fadeIn 0.4s ease;
}
.spower-tab-hidden {
    display: none;
}
.spower-tab-panel {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e2ec;
    overflow: hidden;
}
.spower-tab-inner {
    padding: 40px;
    align-items: center;
}
.spower-tab-feature-title {
    
    font-size: 22px;
    font-weight: 700;
    color: #111113;
    margin-bottom: 14px;
    line-height: 1.3;
}
.spower-tab-inner p {
    font-size: 15px;
    color: #5a5a72;
    margin-bottom: 24px;
    line-height: 1.7;
}
.spower-feature-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.spower-feature-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1c1c24;
}
.spower-feature-checks li .fa {
    color: #9D0203;
    font-size: 15px;
    flex-shrink: 0;
}

.spower-screen-frame {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e2ec;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.spower-screen-bar {
    background: #f0f0f4;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #e2e2ec;
}
.spower-sb-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}
.spower-sb-red    { background: #ff5f57; }
.spower-sb-yellow { background: #ffbd2e; }
.spower-sb-green  { background: #28c840; }
.spower-screen-frame img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.spower-more-screens {
    margin-top: 60px;
}
.spower-screens-subtitle {
    
    font-size: 20px;
    font-weight: 700;
    color: #111113;
    margin-bottom: 24px;
}
.spower-screen-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    border: 1px solid #e2e2ec;
}
.spower-screen-thumb img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}
.spower-screen-thumb:hover img {
    transform: scale(1.04);
}
.spower-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(157,2,3,0.85));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 14px;
}
.spower-screen-thumb:hover .spower-thumb-overlay {
    opacity: 1;
}
.spower-thumb-label {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.spower-mid-cta {
    position: relative;
    padding: 90px 0;
    background: #111113;
    overflow: hidden;
    text-align: center;
}
.spower-mid-cta-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(157,2,3,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.spower-mid-cta-icon {
    width: 64px;
    height: 64px;
    background: #9D0203;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.spower-mid-cta-icon .fa {
    color: #ffffff;
    font-size: 26px;
}
.spower-mid-cta-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.spower-mid-cta-desc {
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.spower-mobile-gallery {
    align-items: flex-start;
}
.spower-mobile-screen {
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    border: 1px solid #e2e2ec;
    transition: all 0.3s ease;
}
.spower-mobile-screen:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.spower-mobile-screen img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    object-position: top;
}

.spower-tech-grid {
    margin-top: 10px;
}
.spower-tech-card {
    text-align: center;
    padding: 28px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    cursor: default;
}
.spower-tech-card:hover {
    background: rgba(157,2,3,0.1);
    border-color: #9D0203;
    transform: translateY(-4px);
}
.spower-tech-icon {
    width: 52px;
    height: 52px;
    background: rgba(157,2,3,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: all 0.3s ease;
}
.spower-tech-card:hover .spower-tech-icon {
    background: #9D0203;
}
.spower-tech-icon .fa {
    color: #9D0203;
    font-size: 20px;
    transition: color 0.2s;
}
.spower-tech-card:hover .spower-tech-icon .fa {
    color: #ffffff;
}
.spower-tech-name {
    
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}
.spower-tech-role {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.spower-outcomes-grid {
    margin-top: -10px;
}
.spower-outcome-card {
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid #e2e2ec;
    border-radius: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    height: calc(100% - 24px);
}
.spower-outcome-card:hover {
    border-color: #9D0203;
    box-shadow: 0 8px 32px rgba(157, 2, 3, 0.15);
    transform: translateY(-4px);
}
.spower-outcome-icon {
    width: 48px;
    height: 48px;
    background: rgba(157,2,3,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: all 0.3s ease;
}
.spower-outcome-card:hover .spower-outcome-icon {
    background: #9D0203;
}
.spower-outcome-icon .fa {
    color: #9D0203;
    font-size: 18px;
    transition: color 0.2s;
}
.spower-outcome-card:hover .spower-outcome-icon .fa {
    color: #ffffff;
}
.spower-outcome-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #111113;
    margin-bottom: 10px;
    line-height: 1.3;
}
.spower-outcome-card p {
    font-size: 14px;
    color: #5a5a72;
    margin: 0;
    line-height: 1.65;
}

.spower-final-cta {
    position: relative;
    padding: 120px 0;
    background: #0e0e11;
    overflow: hidden;
    text-align: center;
}
.spower-final-cta-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}
.spower-final-cta-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(157,2,3,0.2) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.spower-final-cta-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #9D0203;
    background: rgba(157,2,3,0.12);
    border: 1px solid rgba(157,2,3,0.3);
    padding: 6px 16px;
    border-radius: 100px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.spower-final-cta-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.spower-final-cta-desc {
    font-size: 18px;
    color: rgba(255,255,255,0.55);
    max-width: 580px;
    margin: 0 auto 44px;
    line-height: 1.7;
}
.spower-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 36px;
}
.spower-final-cta .spower-btn-ghost {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.2);
    cursor: pointer;
}
.spower-final-cta .spower-btn-ghost:hover {
    color: #ffffff;
    border-color: #9D0203;
}
.spower-cta-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
}
.spower-cta-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.spower-cta-trust .fa {
    color: #9D0203;
}

@media (max-width: 991px) {
    .spower-challenge-content {
        flex-direction: column;
    }
    .spower-hero {
        padding: 130px 0 60px;
        min-height: auto;
    }
    .spower-hero-title {
        font-size: 40px;
    }
    .spower-challenge-content .col-md-6:last-child {
        margin-top: 30px;
    }
    .spower-workflow {
        gap: 6px;
        padding: 24px 16px;
    }
    .spower-workflow-step {
        min-width: 90px;
        padding: 14px 10px;
    }
    .spower-tab-inner {
        padding: 24px;
    }
    .spower-offline-row .col-md-6:last-child {
        margin-top: 30px;
    }
    .spower-stat-item + .spower-stat-item::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .spower-section {
        padding: 60px 0;
    }
    .spower-hero {
        padding: 110px 0 50px;
        text-align: center;
    }
    .spower-hero-sub {
        margin-left: auto;
        margin-right: auto;
    }
    .spower-hero-actions {
        justify-content: center;
    }
    .spower-hero-highlights {
        justify-content: center;
    }
    .spower-hero-scroll-hint {
        display: none;
    }
    .spower-screens-strip {
        flex-direction: column;
        align-items: center;
    }
    .spower-screen-card {
        max-width: 100%;
        width: 100%;
    }
    .spower-workflow {
        flex-direction: column;
        align-items: flex-start;
    }
    .spower-workflow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
    .spower-workflow-step {
        width: 100%;
        flex-direction: row;
        min-width: unset;
        text-align: left;
    }
    .spower-tab-inner {
        padding: 20px 16px;
    }
    .spower-tab-inner .col-md-5,
    .spower-tab-inner .col-md-7 {
        float: none;
        width: 100%;
    }
    .spower-tab-inner .col-md-7 {
        margin-top: 20px;
    }
    .spower-tabs-nav {
        flex-direction: column;
    }
    .spower-tab-btn {
        width: 100%;
        justify-content: flex-start;
    }
    .spower-requirements-box {
        padding: 24px 16px;
    }
    .spower-offline-card {
        padding: 24px 20px;
    }
    .spower-offline-img {
        max-width: 100%;
    }
    .spower-final-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .spower-cta-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .spower-stat-item {
        padding: 16px 8px;
    }
}
@media (max-width: 480px) {
    .spower-hero-title {
        font-size: 32px;
    }
    .spower-hero-highlight-item span {
        display: none;
    }
    .spower-hero-highlight-item {
        padding: 10px 14px;
    }
    .spower-solution-card {
        padding: 24px 20px;
    }
    .spower-section-title {
        font-size: 26px;
    }
    .spower-footer {
        padding: 40px 0 0;
    }
    .spower-footer-brand,
    .spower-footer-nav,
    .spower-footer-cta-box {
        margin-bottom: 32px;
    }
}

/*-------- Shellby Power Case Study css End -------*/
/*-------- hackh Case Study css Start -------*/
.hackh {
    scroll-behavior: smooth;
}
.hackh body {
    font-family: 'Poppins', sans-serif;
    color: #1e2832;
    background-color: #ffffff;
    overflow-x: hidden;
    line-height: 1.7;
}
.hackh-section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2BBFB3;
    margin-bottom: 12px;
}
.hackh-section-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: #111820;
    margin-top: 0;
    margin-bottom: 16px;
}
.hackh-section-title span {
    color: #2BBFB3;
}
.hackh-lead {
    font-size: 17px;
    color: #5a6a7a;
    font-weight: 400;
    line-height: 1.8;
    max-width: 680px;
}

.hackh-hero {
    background: linear-gradient(135deg, #111820 0%, #1e2832 50%, #0d2a28 100%);
    position: relative;
    overflow: hidden;
    padding: 90px 0 70px;
}
.hackh-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(43,191,179,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hackh-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(43,191,179,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.hackh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(43,191,179,0.12);
    border: 1px solid rgba(43,191,179,0.3);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #2BBFB3;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.hackh-hero-title {
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 24px;
}
.hackh-hero-title span {
    color: #2BBFB3;
}
.hackh-hero-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 580px;
}
.hackh-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 36px;
}
.hackh-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hackh-hero-meta-item i {
    color: #2BBFB3;
    font-size: 16px;
}
.hackh-hero-meta-item span {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.hackh-hero-img-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    border: 1px solid rgba(43,191,179,0.2);
    animation: hackh-float 6s ease-in-out infinite;
}
.hackh-hero-img-wrap img {
    width: 100%;
    display: block;
}
.hackh-hero-img-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(17,24,32,0.6) 100%);
}
.hackh-btn-primary {
    display: inline-block;
    background: #2BBFB3;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}
.hackh-btn-primary:hover,
.hackh-btn-primary:focus {
    background: #1fa89d;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(43,191,179,0.35);
}
.hackh-btn-outline {
    display: inline-block;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.35);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 12px;
}
.hackh-btn-outline:hover,
.hackh-btn-outline:focus {
    border-color: #2BBFB3;
    color: #2BBFB3;
    text-decoration: none;
    transform: translateY(-2px);
}

.hackh-stats-bar {
    background: #2BBFB3;
    padding: 28px 0;
}
.hackh-stat-item {
    text-align: center;
    padding: 8px 0;
}
.hackh-stat-number {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    display: block;
}
.hackh-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 4px;
    display: block;
}
.hackh-stat-divider {
    border-left: 1px solid rgba(255,255,255,0.25);
    height: 50px;
    margin: auto;
}

.hackh-section {
    padding: 90px 0;
}
.hackh-section-alt {
    background: #f0f4f3;
}
.hackh-section-teal-soft {
    background: #e0f7f5;
}

.hackh-overview-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 8px 32px rgba(43, 191, 179, 0.12);
    border: 1px solid #d0e8e5;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}
.hackh-overview-card.hackh-visible {
    opacity: 1;
    transform: translateY(0);
}
.hackh-overview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(43, 191, 179, 0.18);
}
.hackh-overview-icon {
    width: 56px;
    height: 56px;
    background: #e0f7f5;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    color: #2BBFB3;
}
.hackh-overview-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #111820;
    margin-top: 0;
    margin-bottom: 10px;
}
.hackh-overview-card p {
    font-size: 14px;
    color: #5a6a7a;
    margin: 0;
    line-height: 1.7;
}

.hackh-content-block {
    padding: 0;
}
.hackh-content-block img {
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(43, 191, 179, 0.18);
    width: 100%;
}
.hackh-list-custom {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hackh-list-custom li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #5a6a7a;
    border-bottom: 1px solid #d0e8e5;
}
.hackh-list-custom li:last-child {
    border-bottom: none;
}
.hackh-list-custom li i {
    color: #2BBFB3;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.hackh-feature-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 8px 32px rgba(43, 191, 179, 0.12);
    border: 1px solid #d0e8e5;
    border-top: 4px solid #2BBFB3;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(24px);
}
.hackh-feature-card.hackh-visible {
    opacity: 1;
    transform: translateY(0);
}
.hackh-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(43, 191, 179, 0.18);
}
.hackh-feature-icon {
    width: 50px;
    height: 50px;
    background: #e0f7f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #2BBFB3;
}
.hackh-feature-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #111820;
    margin-top: 0;
    margin-bottom: 10px;
}
.hackh-feature-card p {
    font-size: 13px;
    color: #5a6a7a;
    margin: 0;
    line-height: 1.7;
}

.hackh-screen-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    border: none;
}
.hackh-tab-btn {
    background: #fff;
    border: 2px solid #d0e8e5;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #5a6a7a;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}
.hackh-tab-btn:hover,
.hackh-tab-btn.hackh-active {
    background: #2BBFB3;
    border-color: #2BBFB3;
    color: #fff;
}
.hackh-screen-panel {
    display: none;
}
.hackh-screen-panel.hackh-active {
    display: block;
}
.hackh-screen-frame {
    background: #1e2832;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.hackh-screen-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hackh-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.hackh-dot-red { background: #ff5f56; }
.hackh-dot-yellow { background: #ffbd2e; }
.hackh-dot-green { background: #27c93f; }
.hackh-screen-frame img {
    border-radius: 8px;
    width: 100%;
    display: block;
}

.hackh-tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.hackh-tech-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid #d0e8e5;
    border-radius: 50px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2832;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.9);
}
.hackh-tech-pill.hackh-visible {
    opacity: 1;
    transform: scale(1);
}
.hackh-tech-pill:hover {
    border-color: #2BBFB3;
    color: #2BBFB3;
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(43, 191, 179, 0.12);
}
.hackh-tech-pill i {
    font-size: 18px;
    color: #2BBFB3;
}

.hackh-timeline {
    position: relative;
    padding: 0;
    list-style: none;
}
.hackh-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #2BBFB3, #e0f7f5);
}
.hackh-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 36px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hackh-timeline-item.hackh-visible {
    opacity: 1;
    transform: translateX(0);
}
.hackh-timeline-dot {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: #2BBFB3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(43,191,179,0.35);
    z-index: 1;
    position: relative;
}
.hackh-timeline-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    border: 1px solid #d0e8e5;
    flex: 1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.hackh-timeline-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #111820;
    margin-top: 0;
    margin-bottom: 6px;
}
.hackh-timeline-content p {
    font-size: 13px;
    color: #5a6a7a;
    margin: 0;
}

.hackh-testimonial-section {
    background: linear-gradient(135deg, #111820 0%, #0d2a28 100%);
    position: relative;
    overflow: hidden;
    padding: 90px 0;
}
.hackh-testimonial-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(43,191,179,0.1) 0%, transparent 70%);
}
.hackh-quote-icon {
    font-size: 64px;
    color: #2BBFB3;
    opacity: 0.4;
    line-height: 1;
    margin-bottom: 24px;
}
.hackh-testimonial-text {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 500;
    color: #fff;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 32px;
}
.hackh-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hackh-author-avatar {
    width: 52px;
    height: 52px;
    background: #2BBFB3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}
.hackh-author-info strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.hackh-author-info span {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.hackh-stars {
    color: #ffc107;
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}
.hackh-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(43,191,179,0.12);
    border: 1px solid rgba(43,191,179,0.3);
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 32px;
}
.hackh-review-badge i {
    font-size: 28px;
    color: #2BBFB3;
}
.hackh-review-badge-text strong {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}
.hackh-review-badge-text span {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.hackh-result-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(43, 191, 179, 0.12);
    border: 1px solid #d0e8e5;
    text-align: center;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
}
.hackh-result-card.hackh-visible {
    opacity: 1;
    transform: translateY(0);
}
.hackh-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(43, 191, 179, 0.18);
    border-color: #2BBFB3;
}
.hackh-result-icon {
    width: 60px;
    height: 60px;
    background: #e0f7f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: #2BBFB3;
}
.hackh-result-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #111820;
    margin-top: 0;
    margin-bottom: 8px;
}
.hackh-result-card p {
    font-size: 13px;
    color: #5a6a7a;
    margin: 0;
}

.hackh-mid-cta {
    background: linear-gradient(135deg, #2BBFB3 0%, #1a9e94 100%);
    border-radius: 14px;
    padding: 60px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hackh-mid-cta::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.hackh-mid-cta::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.hackh-mid-cta h2 {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    color: #fff;
    margin-top: 0;
    margin-bottom: 14px;
}
.hackh-mid-cta p {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
    margin: 0 auto 32px;
}
.hackh-btn-white {
    display: inline-block;
    background: #fff;
    color: #2BBFB3;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hackh-btn-white:hover,
.hackh-btn-white:focus {
    background: #111820;
    color: #2BBFB3;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.hackh-final-cta {
    background: linear-gradient(135deg, #111820 0%, #1e2832 100%);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hackh-final-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(43,191,179,0.08) 0%, transparent 70%);
}
.hackh-final-cta h2 {
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 900;
    color: #fff;
    margin-top: 0;
    margin-bottom: 18px;
}
.hackh-final-cta h2 span {
    color: #2BBFB3;
}
.hackh-final-cta p {
    font-size: 17px;
    color: rgba(255,255,255,0.65);
    max-width: 600px;
    margin: 0 auto 40px;
}

@keyframes hackh-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
@keyframes hackh-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes hackh-fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hackh-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(43,191,179,0.4); }
    70%  { box-shadow: 0 0 0 20px rgba(43,191,179,0); }
    100% { box-shadow: 0 0 0 0 rgba(43,191,179,0); }
}
.hackh-animate-1 { animation: hackh-fadeInUp 0.7s ease both; }
.hackh-animate-2 { animation: hackh-fadeInUp 0.7s ease 0.15s both; }
.hackh-animate-3 { animation: hackh-fadeInUp 0.7s ease 0.3s both; }
.hackh-animate-4 { animation: hackh-fadeInUp 0.7s ease 0.45s both; }
.hackh-animate-left { animation: hackh-fadeInLeft 0.7s ease both; }

@media (max-width: 991px) {
    .hackh-hero {
        padding: 60px 0 50px;
    }
    .hackh-hero-img-wrap {
        margin-top: 40px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .hackh-section {
        padding: 60px 0;
    }
    .hackh-mid-cta {
        padding: 48px 24px;
    }
    .hackh-timeline::before {
        display: none;
    }
}
@media (max-width: 767px) {
    .hackh-hero {
        padding: 50px 0 40px;
        text-align: center;
    }
    .hackh-hero-meta {
        justify-content: center;
    }
    .hackh-hero-desc {
        margin: 0 auto 30px;
    }
    .hackh-btn-outline {
        margin-left: 0;
        margin-top: 12px;
        display: inline-block;
    }
    .hackh-section-title {
        font-size: 26px;
    }
    .hackh-stat-divider {
        display: none;
    }
    .hackh-tech-pill {
        font-size: 13px;
        padding: 10px 18px;
    }
    .hackh-back-top {
        bottom: 16px;
        right: 16px;
    }
    .hackh-final-cta {
        padding: 70px 0;
    }
}
@media (max-width: 480px) {
    .hackh-hero-title {
        font-size: 28px;
    }
    .hackh-overview-card,
    .hackh-feature-card {
        margin-bottom: 20px;
    }
}
.hackh-row-gap [class^="col-"] {
    margin-bottom: 24px;
}



/*-------- hackh Case Study css End -------*/
/*-------- Compass Lingo Case Study css Start -------*/
.clingo body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #1A2340;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 68px;
}
.clingo-section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1565C0;
    background: #E3F2FD;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.clingo-section-label--light {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
}
.clingo-section-title {
    font-size: 32px;
    font-weight: 800;
    color: #1A2340;
    margin-bottom: 20px;
    line-height: 1.2;
}
.clingo-title-light {
    color: #FFFFFF;
}
.clingo-section-text {
    font-size: 15px;
    color: #3D5073;
    line-height: 1.8;
    margin-bottom: 18px;
}
.clingo-text-light {
    color: rgba(255, 255, 255, 0.85);
}
.clingo-text-center {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.clingo-btn {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 13px 28px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.clingo-btn-primary {
    background: #1565C0;
    color: #FFFFFF;
    border-color: #1565C0;
    box-shadow: 0 4px 18px rgba(21, 101, 192, 0.3);
}

.clingo-btn-primary:hover,
.clingo-btn-primary:focus {
    background: #0D47A1;
    border-color: #0D47A1;
    color: #FFFFFF;
    box-shadow: 0 6px 24px rgba(21, 101, 192, 0.4);
    transform: translateY(-2px);
}

.clingo-btn-outline {
    background: transparent;
    color: #1565C0;
    border-color: #1565C0;
}

.clingo-btn-outline:hover,
.clingo-btn-outline:focus {
    background: #1565C0;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.clingo-btn-outline-white {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.6);
}

.clingo-btn-outline-white:hover,
.clingo-btn-outline-white:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

.clingo-btn-lg {
    font-size: 15px;
    padding: 16px 36px;
}

.clingo-btn-sm {
    font-size: 12px;
    padding: 9px 20px;
}

.clingo-btn .fa {
    margin-right: 8px;
}
.clingo-fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.clingo-fade-up.clingo-visible {
    opacity: 1;
    transform: translateY(0);
}

.clingo-delay-1 {
    transition-delay: 0.12s;
}

.clingo-delay-2 {
    transition-delay: 0.24s;
}

.clingo-delay-3 {
    transition-delay: 0.36s;
}
.clingo-hero {
    position: relative;
    background: linear-gradient(145deg, #F0F6FF 0%, #E8F4FD 40%, #F5FFFE 100%);
    padding: 90px 0 80px;
    overflow: hidden;
}
.clingo-hero-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.clingo-decor {
    position: absolute;
    border-radius: 50%;
    opacity: 0.55;
}

.clingo-decor-1 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, #BBDEFB 0%, transparent 70%);
    top: -80px;
    right: -60px;
    animation: clingoFloat 7s ease-in-out infinite;
}

.clingo-decor-2 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, #B2EBF2 0%, transparent 70%);
    bottom: 40px;
    left: -40px;
    animation: clingoFloat 9s ease-in-out infinite reverse;
}

.clingo-decor-3 {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #FFF9C4 0%, transparent 70%);
    top: 40px;
    left: 45%;
    animation: clingoFloat 11s ease-in-out infinite;
}

.clingo-decor-4 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #C8E6C9 0%, transparent 70%);
    bottom: 30px;
    right: 25%;
    animation: clingoFloat 8s ease-in-out infinite 2s;
}

.clingo-decor-5 {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #FFCCBC 0%, transparent 70%);
    top: 30%;
    left: 5%;
    animation: clingoFloat 10s ease-in-out infinite 1s;
}

@keyframes clingoFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.04); }
}

.clingo-hero-row {
    align-items: center;
    position: relative;
    z-index: 1;
}

.clingo-hero-content {
    padding-right: 20px;
    animation: clingoSlideUp 0.7s ease both;
}

@keyframes clingoSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.clingo-industry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #00695C;
    background: #E0F2F1;
    border: 1px solid rgba(0, 137, 123, 0.2);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.clingo-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
    color: #1A2340;
    margin-bottom: 20px;
}

.clingo-title-highlight {
    color: #1565C0;
    display: block;
}

.clingo-hero-subtitle {
    font-size: 16px;
    color: #3D5073;
    line-height: 1.75;
    margin-bottom: 32px;
}

.clingo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}
.clingo-trust-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 18px 24px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
    border: 1px solid #E0ECF8;
    max-width: 520px;
}

.clingo-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.clingo-trust-number {
    font-size: 18px;
    font-weight: 800;
    color: #1565C0;
    line-height: 1;
}

.clingo-trust-number .fa {
    font-size: 16px;
    color: #FFB300;
}

.clingo-trust-label {
    font-size: 10px;
    font-weight: 500;
    color: #6B85A8;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.clingo-trust-divider {
    width: 1px;
    height: 36px;
    background: #E0ECF8;
    flex-shrink: 0;
}
.clingo-hero-image-wrap {
    position: relative;
    animation: clingoSlideUp 0.8s ease 0.2s both;
}

.clingo-hero-img {
    border-radius: 22px;
    width: 100%;
}

.clingo-hero-badge-float {
    position: absolute;
    background: #FFFFFF;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #1A2340;
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
    display: flex;
    align-items: center;
    gap: 6px;
    animation: clingoFloat 6s ease-in-out infinite;
}

.clingo-hero-badge-float .fa {
    color: #1565C0;
}

.clingo-hero-badge-float--tl {
    top: 16px;
    left: -10px;
    animation-delay: 0s;
}

.clingo-hero-badge-float--br {
    bottom: 20px;
    right: -10px;
    animation-delay: 2s;
    color: #00695C;
}

.clingo-hero-badge-float--br .fa {
    color: #00897B;
}
.clingo-overview {
    padding: 90px 0;
    background: #FFFFFF;
}

.clingo-overview-row {
    align-items: center;
}

.clingo-mockup-wrap {
    padding-left: 24px;
}

.clingo-mockup-img {
    border-radius: 22px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-mockup-img:hover {
    transform: scale(1.02);
}

.clingo-orgs-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clingo-org-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #3D5073;
}

.clingo-org-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clingo-org-dot--blue   { background: #1565C0; }
.clingo-org-dot--teal   { background: #00897B; }
.clingo-org-dot--orange { background: #F57C00; }
.clingo-stats-band {
    padding: 56px 0;
    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 60%, #1A6EBF 100%);
    position: relative;
    overflow: hidden;
}

.clingo-stats-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.clingo-stat-item {
    text-align: center;
    padding: 12px 8px;
    position: relative;
    z-index: 1;
}

.clingo-stat-icon {
    display: block;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
}
.clingo-stat-icon i.fa.fa-star {
    color: rgba(255, 255, 255, 0.65);
}

.clingo-stat-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 6px;
}

.clingo-stat-suffix {
    font-size: 28px;
    font-weight: 800;
    color: #FFFFFF;
    vertical-align: top;
    margin-top: 2px;
    margin-left: 2px;
}

.clingo-stat-desc {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 4px;
}
.clingo-challenge {
    padding: 90px 0;
    background: #F8FAFD;
}

.clingo-challenge-grid {
    margin-top: 50px;
}

.clingo-challenge-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 30px 28px;
    margin-bottom: 24px;
    border: 1px solid #E0ECF8;
    box-shadow: 0 2px 12px rgba(21, 101, 192, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-challenge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
    border-color: rgba(21, 101, 192, 0.2);
}

.clingo-challenge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 22px;
    margin-bottom: 18px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-challenge-card:hover .clingo-challenge-icon {
    background: #1565C0;
    color: #FFFFFF;
}

.clingo-challenge-icon--teal {
    background: #E0F2F1;
    color: #00897B;
}

.clingo-challenge-card:hover .clingo-challenge-icon--teal {
    background: #00897B;
    color: #FFFFFF;
}

.clingo-challenge-icon--orange {
    background: #FFF3E0;
    color: #F57C00;
}

.clingo-challenge-card:hover .clingo-challenge-icon--orange {
    background: #F57C00;
    color: #FFFFFF;
}

.clingo-challenge-title {
    font-size: 16px;
    font-weight: 700;
    color: #1A2340;
    margin-bottom: 10px;
}

.clingo-challenge-text {
    font-size: 14px;
    color: #6B85A8;
    line-height: 1.7;
    margin: 0;
}
.clingo-workflow {
    padding: 90px 0;
    background: #FFFFFF;
}

.clingo-flow-diagram {
    padding: 10px 20px 10px 40px;
}

.clingo-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #E0ECF8;
    border-radius: 14px;
    padding: 22px 24px;
    position: relative;
    box-shadow: 0 2px 12px rgba(21, 101, 192, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateX(20px);
}

.clingo-flow-step.clingo-flow-visible {
    opacity: 1;
    transform: translateX(0);
}

.clingo-flow-step:hover {
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
    border-color: rgba(21, 101, 192, 0.2);
    transform: translateX(4px);
}

.clingo-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 20px;
    flex-shrink: 0;
}

.clingo-flow-icon--blue   { background: #E3F2FD;   color: #1565C0; }
.clingo-flow-icon--teal   { background: #E0F2F1;   color: #00897B; }
.clingo-flow-icon--orange { background: #FFF3E0; color: #F57C00; }
.clingo-flow-icon--green  { background: #E8F5E9; color: #2E7D32; }

.clingo-flow-content {
    flex: 1;
}

.clingo-flow-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A2340;
    margin: 0 0 4px;
}

.clingo-flow-desc {
    font-size: 13px;
    color: #6B85A8;
    line-height: 1.6;
    margin: 0;
}

.clingo-flow-num {
    font-size: 28px;
    font-weight: 800;
    color: #E0ECF8;
    line-height: 1;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.clingo-flow-arrow {
    text-align: center;
    color: #E3F2FD;
    font-size: 20px;
    margin: 8px 0;
    padding-left: 24px;
}
.clingo-solution {
    padding: 90px 0;
    background: linear-gradient(145deg, #0D47A1 0%, #1A73C9 100%);
    position: relative;
    overflow: hidden;
}

.clingo-solution::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.clingo-solution-features {
    margin-top: 56px;
    position: relative;
    z-index: 1;
}

.clingo-feature-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 30px 26px;
    margin-bottom: 24px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.clingo-feature-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-6px);
}

.clingo-feature-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 22px;
    margin-bottom: 18px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-feature-card:hover .clingo-feature-icon-wrap {
    background: rgba(255, 255, 255, 0.25);
}

.clingo-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.clingo-feature-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0;
}
.clingo-screenshots {
    padding: 90px 0;
    background: #F8FAFD;
}

.clingo-screenshots-row {
    margin-top: 48px;
    margin-bottom: 24px;
    align-items: stretch;
}

.clingo-screenshot-card {
    background: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
    margin-bottom: 24px;
    border: 1px solid #E0ECF8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-screenshot-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(21, 101, 192, 0.18);
}

.clingo-screenshot-img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.clingo-screenshot-card:hover .clingo-screenshot-img {
    transform: scale(1.02);
}

.clingo-screenshot-caption {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #3D5073;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clingo-screenshot-caption .fa {
    color: #1565C0;
}

.clingo-screenshot-card--wide .clingo-screenshot-img {
    max-height: 480px;
}
.clingo-collab {
    padding: 90px 0;
    background: #FFFFFF;
}

.clingo-collab-cards {
    margin-top: 56px;
}

.clingo-collab-card {
    border-radius: 22px;
    padding: 36px 30px;
    margin-bottom: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.clingo-collab-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.12;
}

.clingo-collab-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(21, 101, 192, 0.18);
}

.clingo-collab-card--blue {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border: 1px solid rgba(21, 101, 192, 0.15);
}

.clingo-collab-card--blue::before {
    background: #1565C0;
}

.clingo-collab-card--teal {
    background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%);
    border: 1px solid rgba(0, 137, 123, 0.15);
}

.clingo-collab-card--teal::before {
    background: #00897B;
}

.clingo-collab-card--orange {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    border: 1px solid rgba(245, 124, 0, 0.15);
}

.clingo-collab-card--orange::before {
    background: #F57C00;
}

.clingo-collab-card-icon {
    font-size: 36px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.clingo-collab-card--blue   .clingo-collab-card-icon { color: #1565C0; }
.clingo-collab-card--teal   .clingo-collab-card-icon { color: #00897B; }
.clingo-collab-card--orange .clingo-collab-card-icon { color: #F57C00; }

.clingo-collab-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #1A2340;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.clingo-collab-card-text {
    font-size: 14px;
    color: #3D5073;
    line-height: 1.75;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.clingo-collab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.clingo-collab-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3D5073;
    margin-bottom: 8px;
}

.clingo-collab-list .fa-check {
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clingo-collab-card--blue   .clingo-collab-list .fa-check { background: #1565C0;   color: white; }
.clingo-collab-card--teal   .clingo-collab-list .fa-check { background: #00897B;   color: white; }
.clingo-collab-card--orange .clingo-collab-list .fa-check { background: #F57C00; color: white; }
.clingo-delivery {
    padding: 90px 0;
    background: #F0F6FF;
}
.clingo-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    padding-left: 0px;
}

.clingo-timeline::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom, #1565C0, #00897B);
    border-radius: 2px;
}

.clingo-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
}

.clingo-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #1565C0;
    color: #1565C0;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(21, 101, 192, 0.15);
}

.clingo-timeline-item:hover .clingo-timeline-dot {
    background: #1565C0;
    color: #FFFFFF;
}

.clingo-timeline-content {
    flex: 1;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 2px 12px rgba(21, 101, 192, 0.08);
    border: 1px solid #E0ECF8;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clingo-timeline-item:hover .clingo-timeline-content {
    box-shadow: 0 6px 28px rgba(21, 101, 192, 0.13);
}

.clingo-timeline-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A2340;
    margin: 0 0 6px;
}

.clingo-timeline-text {
    font-size: 13.5px;
    color: #6B85A8;
    line-height: 1.65;
    margin: 0;
}
.clingo-tech-stack {
    margin-top: 36px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E0ECF8;
    box-shadow: 0 2px 12px rgba(21, 101, 192, 0.08);
}

.clingo-tech-title {
    font-size: 13px;
    font-weight: 700;
    color: #6B85A8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.clingo-tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clingo-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #1565C0;
    background: #E3F2FD;
    border: 1px solid rgba(21, 101, 192, 0.15);
    padding: 6px 14px;
    border-radius: 50px;
}
.clingo-results {
    padding: 90px 0;
    background: linear-gradient(145deg, #00695C 0%, #00897B 100%);
    position: relative;
    overflow: hidden;
}

.clingo-results-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.clingo-results-decor {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.clingo-results-decor-1 {
    width: 400px;
    height: 400px;
    background: white;
    top: -100px;
    right: -80px;
}

.clingo-results-decor-2 {
    width: 250px;
    height: 250px;
    background: white;
    bottom: -60px;
    left: 10%;
}

.clingo-results-grid {
    margin-top: 56px;
    position: relative;
    z-index: 1;
}

.clingo-result-item {
    text-align: center;
    padding: 32px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    margin-bottom: 24px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.clingo-result-item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-6px);
}

.clingo-result-icon {
    display: block;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

.clingo-result-stat {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 8px;
}

.clingo-result-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.4;
}
.clingo-cta {
    padding: 100px 0;
    background: #F0F6FF;
    position: relative;
    overflow: hidden;
}

.clingo-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(21, 101, 192, 0.06) 0%, transparent 70%);
}

.clingo-cta-inner {
    background: linear-gradient(145deg, #0D47A1 0%, #1565C0 100%);
    border-radius: 22px;
    padding: 70px 50px;
    box-shadow: 0 16px 48px rgba(21, 101, 192, 0.18);
    position: relative;
    overflow: hidden;
}

.clingo-cta-inner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.clingo-cta-title {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.clingo-cta-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.clingo-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .clingo body {
        padding-top: 56px;
    }

    .clingo-hero {
        padding: 60px 0 50px;
    }

    .clingo-hero-title {
        font-size: 30px;
    }

    .clingo-section-title {
        font-size: 26px;
    }

    .clingo-hero-content {
        padding-right: 0;
    }

    .clingo-mockup-wrap {
        padding-left: 0;
        margin-top: 30px;
    }

    .clingo-flow-diagram {
        padding: 10px 0;
    }

    .clingo-overview,
    .clingo-challenge,
    .clingo-workflow,
    .clingo-solution,
    .clingo-screenshots,
    .clingo-collab,
    .clingo-delivery,
    .clingo-results,
    .clingo-cta {
        padding: 60px 0;
    }

    .clingo-cta-inner {
        padding: 48px 32px;
    }

    .clingo-cta-title {
        font-size: 28px;
    }
}
@media (max-width: 767px) {
    .clingo-hero {
        padding: 50px 0 40px;
    }

    .clingo-hero-title {
        font-size: 26px;
    }

    .clingo-section-title {
        font-size: 22px;
    }

    .clingo-hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .clingo-btn {
        text-align: center;
        display: block;
        width: 100%;
    }

    .clingo-hero-actions .clingo-btn {
        width: auto;
        display: inline-block;
    }

    .clingo-trust-strip {
        gap: 16px;
        padding: 16px;
    }

    .clingo-stat-num {
        font-size: 28px;
    }

    .clingo-stat-icon {
        font-size: 22px;
    }

    .clingo-flow-step {
        gap: 14px;
        padding: 16px 18px;
    }

    .clingo-flow-num {
        display: none;
    }

    .clingo-collab-card {
        padding: 26px 22px;
    }

    .clingo-timeline::before {
        display: none;
    }

    .clingo-timeline-item {
        flex-direction: column;
        gap: 10px;
    }

    .clingo-timeline-dot {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .clingo-cta-inner {
        padding: 36px 20px;
    }

    .clingo-cta-title {
        font-size: 22px;
    }

    .clingo-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .clingo-footer {
        padding: 50px 0 0;
    }

    .clingo-footer-bottom .text-right {
        text-align: left;
        margin-top: 8px;
    }

    .clingo-footer-legal:first-child {
        margin-left: 0;
    }

    .clingo-trust-divider {
        display: none;
    }

    .clingo-nav-links > li > a.clingo-nav-cta {
        margin-top: 6px;
        margin-left: 0;
        display: inline-block;
    }

    .clingo-back-top {
        bottom: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}
/*-------- Compass Lingo Case Study css End -------*/
/*-------- AWS Development Company css Start -------*/
.awsser {
    scroll-behavior: smooth;
}
.awsser body {
    background-color: #050d1f;
    color: #f0f6ff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
section h1,section h2,section h3,section h4 {
    color: #f0f6ff;
}
.awsser-hero {
    background-color: #050d1f;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 70px;
    position: relative;
    overflow: hidden;
}

.awsser-hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.awsser-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.awsser-hero-glow-2 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    bottom: 100px;
    left: -80px;
    pointer-events: none;
}

.awsser-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 60px;
}

.awsser-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 13px;
    color: #38bdf8;
    font-weight: 500;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

.awsser-hero-badge .fa {
    font-size: 11px;
}

.awsser-hero-title {
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 24px;
    color: #f0f6ff;
}

.awsser-hero-title .awsser-highlight {
    color: #00d4ff;
}

.awsser-hero-subtitle {
    font-size: 17px;
    color: #8ba5c4;
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 36px;
}

.awsser-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px;
}

.awsser-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0ea5e9;
    color: #fff;
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.awsser-btn-primary:hover {
    background: #38bdf8;
    color: #fff;
    box-shadow: 0 0 28px rgba(14, 165, 233, 0.55);
    transform: translateY(-2px);
}

.awsser-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #f0f6ff;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(14, 165, 233, 0.2);
    cursor: pointer;
    transition: all 0.25s ease;
}

.awsser-btn-outline:hover {
    border-color: #0ea5e9;
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.07);
}

.awsser-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.awsser-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 10px 0;
    margin-right: 20px;
    border-right: 1px solid rgba(14, 165, 233, 0.2);
    font-size: 13px;
    color: #8ba5c4;
    font-weight: 500;
}

.awsser-trust-item:last-child {
    border-right: none;
}

.awsser-trust-item .fa {
    color: #0ea5e9;
    font-size: 14px;
}
.awsser-hero-visual {
    position: relative;
    z-index: 2;
    padding: 40px 0;
}

.awsser-arch-diagram {
    background: rgba(10, 24, 48, 0.8);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    padding: 36px 28px;
    backdrop-filter: blur(10px);
    position: relative;
}

.awsser-arch-diagram::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.awsser-arch-title {
    
    font-size: 11px;
    letter-spacing: 2px;
    color: #0ea5e9;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-align: center;
}

.awsser-arch-node {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(14, 165, 233, 0.07);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 26px;
    transition: border-color 0.2s, background 0.2s;

}

.awsser-arch-node:hover {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.14);
}

.awsser-arch-node-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.awsser-arch-node-icon .fa {
    color: #00d4ff;
    font-size: 16px;
}

.awsser-arch-node-label {
    font-size: 13px;
    font-weight: 600;
    color: #f0f6ff;
}

.awsser-arch-node-sub {
    font-size: 11px;
    color: #8ba5c4;
}

.awsser-arch-arrow {
    text-align: center;
    color: #0ea5e9;
    font-size: 14px;
    line-height: 1.2;
    margin: 2px 0;
    opacity: 0.6;
}

.awsser-arch-image {
    width: 100%;
    border-radius: 10px;
    margin-top: 20px;
    opacity: 0.75;
    border: 1px solid rgba(14, 165, 233, 0.2);
}
.awsser-section-dark {
    background-color: #050d1f;
    padding: 90px 0;
}

.awsser-section-light {
    background-color: #f4f8ff;
    padding: 90px 0;
}

.awsser-section-light h2,
.awsser-section-light h3,
.awsser-section-light h4 {
    color: #0a1830;
}

.awsser-section-light p {
    color: #050d1f;
}

.awsser-section-light .awsser-muted-text {
    color: #4a6080;
}

.awsser-section-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
}

.awsser-section-subtitle {
    font-size: 16px;
    color: #8ba5c4;
    max-width: 560px;
    margin: 0 auto 56px;
    line-height: 1.7;
}

.awsser-label {
    
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0ea5e9;
    margin-bottom: 12px;
    display: block;
}

.awsser-label-dark {
    color: #0369a1;
}
.awsser-services-grid {
    margin-top: 12px;
}

.awsser-service-card {
    background: rgba(10, 24, 48, 1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 14px;
    padding: 30px 26px;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.awsser-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0ea5e9 0%, #00d4ff 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.awsser-service-card:hover {
    border-color: rgba(14, 165, 233, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(14, 165, 233, 0.12);
}

.awsser-service-card:hover::before {
    transform: scaleX(1);
}

.awsser-service-card-icon {
    width: 52px;
    height: 52px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background 0.3s;
}

.awsser-service-card:hover .awsser-service-card-icon {
    background: rgba(14, 165, 233, 0.22);
}

.awsser-service-card-icon .fa {
    font-size: 22px;
    color: #38bdf8;
}

.awsser-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #f0f6ff;
}

.awsser-service-card p {
    font-size: 14px;
    color: #8ba5c4;
    margin-bottom: 18px;
}

.awsser-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.awsser-tag {
    font-size: 11px;
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 4px;
    padding: 3px 9px;
    font-weight: 500;
}

.awsser-row-card {
    margin-bottom: 24px;
}
.awsser-mid-cta {
    background: linear-gradient(135deg, #061024 0%, #0a1d3e 50%, #061024 100%);
    border-top: 1px solid rgba(14, 165, 233, 0.2);
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.awsser-mid-cta-glow {
    position: absolute;
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.awsser-mid-cta h2 {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 700;
    margin-bottom: 16px;
}

.awsser-mid-cta p {
    font-size: 16px;
    color: #8ba5c4;
    max-width: 500px;
    margin: 0 auto 32px;
}
.awsser-cap-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e0eaf5;
    margin-bottom: 28px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(10, 24, 48, 0.06);
}

.awsser-cap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(10, 24, 48, 0.14);
}

.awsser-cap-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.awsser-cap-card-img-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #0a1830 0%, #0f2244 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.awsser-cap-card-img-placeholder .fa {
    font-size: 48px;
    color: rgba(14, 165, 233, 0.5);
}

.awsser-cap-card-body {
    padding: 24px;
}

.awsser-cap-card-body h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0a1830;
    margin: 0 0 10px;
}

.awsser-cap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.awsser-cap-tag {
    font-size: 11px;
    background: #e8f4fd;
    color: #0369a1;
    border-radius: 4px;
    padding: 3px 9px;
    font-weight: 600;
}
.awsser-tech-category {
    margin-bottom: 40px;
}

.awsser-tech-category-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0ea5e9;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

.awsser-tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.awsser-tech-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 233, 0.07);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #f0f6ff;
    transition: all 0.2s;
}

.awsser-tech-badge:hover {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.14);
    color: #00d4ff;
}

.awsser-tech-badge .fa {
    color: #0ea5e9;
    font-size: 14px;
}

.awsser-tech-visual {
    background: rgba(10, 24, 48, 0.8);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    padding: 36px;
}
.awsser-why-item {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.awsser-why-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.awsser-why-icon-wrap .fa {
    font-size: 22px;
    color: #0ea5e9;
}

.awsser-why-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0a1830;
    margin: 0 0 8px;
}

.awsser-why-content p {
    font-size: 14px;
    color: #4a6080;
    margin: 0;
    line-height: 1.7;
}

.awsser-process-track {
    position: relative;
    padding: 20px 0;
}

.awsser-process-line {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0ea5e9 0%, #00d4ff 100%);
    opacity: 0.25;
}

.awsser-process-step {
    text-align: center;
    position: relative;
    padding: 0 8px;
    margin-bottom: 20px;
}

.awsser-process-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0f2244;
    border: 2px solid #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    
    font-size: 14px;
    font-weight: 700;
    color: #00d4ff;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.awsser-process-step:hover .awsser-process-num {
    background: #0ea5e9;
    color: #fff;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
}

.awsser-process-label {
    font-size: 13px;
    font-weight: 600;
    color: #f0f6ff;
}
.awsser-faq-item {
    border: 1px solid #e0eaf5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.awsser-faq-question {
    background: #fff;
    padding: 18px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #0a1830;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.2s;
}

.awsser-faq-question:hover {
    background: #f0f7ff;
}

.awsser-faq-question .awsser-faq-icon {
    color: #0369a1;
    font-size: 14px;
    transition: transform 0.25s;
    flex-shrink: 0;
}

.awsser-faq-question.awsser-faq-open .awsser-faq-icon {
    transform: rotate(45deg);
}

.awsser-faq-answer {
    display: none;
    padding: 18px 22px 18px;
    background: #fff;
    font-size: 14px;
    color: #4a6080;
    line-height: 1.75;
}

.awsser-faq-answer.awsser-open {
    display: block;
}
button.awsser-faq-question.awsser-faq-open {
    background: #f0f7ff;
}

.awsser-testimonial-card {
    background: rgba(10, 24, 48, 0.8);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    padding: 36px 32px;
    margin-bottom: 28px;
    position: relative;
}

.awsser-testimonial-card::before {
    content: '\f10d';
    font-family: 'FontAwesome';
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 36px;
    color: rgba(14, 165, 233, 0.12);
}

.awsser-stars {
    color: #f59e0b;
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 2px;
}

.awsser-testimonial-text {
    font-size: 16px;
    color: #f0f6ff;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 24px;
}

.awsser-testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.awsser-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #00d4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.awsser-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #f0f6ff;
    margin: 0 0 3px;
}

.awsser-author-role {
    font-size: 12px;
    color: #8ba5c4;
}
.awsser-final-cta {
    background: linear-gradient(135deg, #061024 0%, #0a1d3e 40%, #061024 100%);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.awsser-final-cta-glow {
    position: absolute;
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(14, 165, 233, 0.18) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.awsser-final-cta h2 {
    font-size: clamp(28px, 4.5vw, 50px);
    font-weight: 700;
    margin-bottom: 18px;
}

.awsser-final-cta p {
    font-size: 17px;
    color: #8ba5c4;
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.75;
}

.awsser-final-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.awsser-text-center {
    text-align: center;
}

.awsser-mt-12 {
    margin-top: 12px;
}

.awsser-divider {
    height: 1px;
    background: rgba(14, 165, 233, 0.2);
    margin: 0;
}

.process-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}
.awsser-step {
    position: relative;
}
.awsser-step-number {
    width: 50px;
    height: 50px;
    border: 2px solid #18b6ff;
    color: #18b6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto 15px;
    background: #020817;
    transform: all 0.3s;
}
.awsser-step:hover .awsser-step-number {
    background: #18b6ff;
    color: #fff;
    border-color: #18b6ff;
}
.awsser-step-card {
    background: linear-gradient(180deg, #07132a, #030b1f);
    border: 1px solid rgba(24,182,255,0.2);
    border-radius: 14px;
    padding: 24px;
    min-height: 150px;
    text-align: center;
}
.awsser-step-card h4 {
    margin-bottom: 10px;
    font-size: 18px;
}
.awsser-step-card p {
    font-size: 14px;
    color: #9bb0c8;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .process-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .process-wrapper {
        grid-template-columns: 1fr;
    }
    .awsser-step-card {
        min-height: auto;
    }
}

@media (max-width: 991px) {
    .awsser-process-line {
        display: none;
    }
}

@media (max-width: 767px) {
    .awsser-hero-content {
        padding: 50px 0 30px;
    }

    .awsser-hero-visual {
        padding: 30px 0 20px;
    }

    .awsser-trust-item {
        border-right: none;
        margin-right: 0;
    }

    .awsser-why-item {
        flex-direction: column;
        gap: 12px;
    }

    .awsser-why-icon-wrap {
        width: 48px;
        height: 48px;
    }

    .awsser-section-dark,
    .awsser-section-light {
        padding: 60px 0;
    }
}
@keyframes awsser-pulse-glow {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.awsser-pulse {
    animation: awsser-pulse-glow 3s ease-in-out infinite;
}

@keyframes awsser-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.awsser-float {
    animation: awsser-float 4s ease-in-out infinite;
}

/*-------- AWS Development Company css End -------*/
/*-------- Wordpress Development css Start -------*/
html.wpdevn {
    scroll-behavior: smooth;
}
html.wpdevn body {
    color: #334155;
    background: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
}
section h1,section  h2,section  h3,section  h4,section  h5,section  h6 {
    color: #0f172a;
    margin-top: 0;
}
section a {
    color: #2563eb;
    text-decoration: none;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
section a:hover {
    color: #1d4ed8;
    text-decoration: none;
}
.wpdevn-fade-up {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .65s ease, transform .65s ease;
}
.wpdevn-fade-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity .65s ease, transform .65s ease;
}
.wpdevn-fade-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity .65s ease, transform .65s ease;
}
.wpdevn-fade-up.wpdevn-animated,
.wpdevn-fade-left.wpdevn-animated,
.wpdevn-fade-right.wpdevn-animated {
    opacity: 1;
    transform: translate(0, 0);
}
.wpdevn-delay-1 {
    transition-delay: .12s;
}
.wpdevn-delay-2 {
    transition-delay: .24s;
}
.wpdevn-delay-3 {
    transition-delay: .36s;
}
.wpdevn-delay-4 {
    transition-delay: .48s;
}

.wpdevn-text-gradient {
    background: linear-gradient(130deg, #8d0306 0%, #e7464a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wpdevn-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dbeafe;
    color: #2563eb;
    
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.wpdevn-section-label i {
    font-size: 14px;
}
.wpdevn-section-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: -.5px;
}
.wpdevn-section-subtitle,
.wpdevn-section-desc {
    font-size: 16px;
    color: #64748b;
    max-width: 620px;
    margin: 0 auto 40px;
}
.wpdevn-section-header {
    margin-bottom: 52px;
}

.wpdevn-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.wpdevn-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 6px 24px rgba(37,99,235,.35);
}
.wpdevn-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(37,99,235,.45);
}
.wpdevn-btn-outline {
    background: transparent;
    color: #2563eb;
    border-color: #2563eb;
}
.wpdevn-btn-outline:hover,
.wpdevn-btn-outline:active,
.wpdevn-btn-outline:focus {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
}

.wpdevn-hero {
    position: relative;
    background: linear-gradient(160deg, #eef4ff 0%, #f0fdf4 50%, #fff7ed 100%);
    padding: 160px 0 100px;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    align-items: center;
}
.wpdevn-hero-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.wpdevn-shape {
    position: absolute;
    border-radius: 50%;
    opacity: .45;
}
.wpdevn-shape-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(37,99,235,.18) 0%, transparent 70%);
    top: -120px;
    right: -100px;
    animation: wpdevnFloat 7s ease-in-out infinite;
}
.wpdevn-shape-2 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(249,115,22,.14) 0%, transparent 70%);
    bottom: 40px;
    left: -80px;
    animation: wpdevnFloat 9s ease-in-out infinite reverse;
}
.wpdevn-shape-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(16,185,129,.18) 0%, transparent 70%);
    top: 30%;
    left: 30%;
    animation: wpdevnFloat 6s ease-in-out infinite 2s;
}
.wpdevn-shape-4 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(124,58,237,.22) 0%, transparent 70%);
    top: 15%;
    right: 35%;
    animation: wpdevnFloat 8s ease-in-out infinite 1s;
}
@keyframes wpdevnFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-24px) rotate(4deg); }
}
.wpdevn-hero-row {
    position: relative;
    z-index: 2;
    align-items: center;
}
.wpdevn-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(249,115,22,.08));
    border: 1px solid rgba(37,99,235,.2);
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.wpdevn-hero-badge i {
    font-size: 18px;
    color: #f97316;
}
.wpdevn-hero-title {
    font-size: 58px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}
.wpdevn-hero-desc {
    font-size: 17px;
    color: #64748b;
    max-width: 560px;
    margin-bottom: 36px;
    line-height: 1.75;
}
.wpdevn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
}
.wpdevn-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.wpdevn-stat-item {
    padding: 0 28px 0 0;
}
.wpdevn-stat-item:first-child {
    padding-left: 0;
}
.wpdevn-stat-number {
    
    font-size: 36px;
    font-weight: 900;
    color: #2563eb;
    line-height: 1;
    display: inline-block;
}
.wpdevn-stat-suffix {
    
    font-size: 22px;
    font-weight: 900;
    color: #f97316;
}
.wpdevn-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.wpdevn-stat-divider {
    width: 1px;
    height: 44px;
    background: #e2e8f0;
    margin-right: 28px;
}

.wpdevn-hero-visual {
    position: relative;
    height: 420px;
}
.wpdevn-hero-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 20px;
    
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    box-shadow: 0 4px 16px rgba(37,99,235,.10);
    z-index: 3;
}
.wpdevn-hero-card i {
    font-size: 16px;
    color: #2563eb;
}
.wpdevn-hcard-1 {
    top: 10px;
    left: -20px;
    animation: wpdevnCardFloat 5s ease-in-out infinite;
}
.wpdevn-hcard-2 {
    bottom: 80px;
    right: 0px;
    animation: wpdevnCardFloat 6s ease-in-out infinite 1s;
}
.wpdevn-hcard-3 {
    bottom: 10px;
    left: 10px;
    animation: wpdevnCardFloat 7s ease-in-out infinite .5s;
}
@keyframes wpdevnCardFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
.wpdevn-hero-mockup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.wpdevn-mockup-browser {
    width: 400px;
    max-width: 100%;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.wpdevn-mockup-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.wpdevn-mockup-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.wpdevn-mockup-bar span:nth-child(1) { background: #f87171; }
.wpdevn-mockup-bar span:nth-child(2) { background: #fbbf24; }
.wpdevn-mockup-bar span:nth-child(3) { background: #34d399; }
.wpdevn-mockup-screen {
    padding: 20px 18px;
}
.wpdevn-mockup-line {
    height: 20px;
    border-radius: 6px;
    background: #e2e8f0;
    margin-bottom: 16px;
}
.wpdevn-mockup-line-wide   { width: 90%; }
.wpdevn-mockup-line-medium { width: 65%; }
.wpdevn-mockup-line-short  { width: 45%; }
.wpdevn-mockup-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.wpdevn-mockup-block {
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    animation: wpdevnPulse 2.5s ease-in-out infinite;
}
.wpdevn-mockup-block:nth-child(2) { animation-delay: .4s; }
.wpdevn-mockup-block:nth-child(3) { animation-delay: .8s; }
@keyframes wpdevnPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.wpdevn-mockup-btn-row {
    margin-top: 6px;
}
.wpdevn-mockup-cta-btn {
    height: 32px;
    width: 110px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #f97316);
    animation: wpdevnPulse 2.2s ease-in-out infinite;
}
.wpdevn-hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0;
}
.wpdevn-hero-wave svg {
    width: 100%;
    height: 80px;
    display: block;
}

.wpdevn-about {
    background: #f8faff;
    padding: 100px 0;
}
.wpdevn-about-row {
    align-items: center;
}
.wpdevn-about-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
}
.wpdevn-about-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    cursor: default;
}
.wpdevn-about-icon-card i {
    font-size: 26px;
}
.wpdevn-about-icon-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
}
.wpdevn-aic-blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.wpdevn-aic-green  { background: linear-gradient(135deg, #10b981, #059669); }
.wpdevn-aic-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.wpdevn-aic-purple { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.wpdevn-aic-teal   { background: linear-gradient(135deg, #0d9488, #0f766e); }
.wpdevn-aic-red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.wpdevn-about-highlights {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.wpdevn-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
}
.wpdevn-highlight-item i {
    color: #10b981;
    font-size: 18px;
    flex-shrink: 0;
}

.wpdevn-services {
    position: relative;
    padding: 100px 0;
    background: #fff;
}
.wpdevn-services-grid {
    margin-top: 0;
}
.wpdevn-service-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 36px 28px;
    margin-bottom: 28px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.wpdevn-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #f97316);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.wpdevn-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
    border-color: transparent;
}
.wpdevn-service-card:hover::before {
    transform: scaleX(1);
}
.wpdevn-service-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-service-card:hover .wpdevn-service-icon {
    transform: scale(1.1) rotate(-4deg);
}
.wpdevn-icon-blue   { background: rgba(37,99,235,.1); color: #2563eb; }
.wpdevn-icon-purple { background: rgba(124,58,237,.1); color: #7c3aed; }
.wpdevn-icon-green  { background: rgba(16,185,129,.1); color: #10b981; }
.wpdevn-icon-orange { background: rgba(249,115,22,.1); color: #f97316; }
.wpdevn-icon-teal   { background: rgba(13,148,136,.1); color: #0d9488; }
.wpdevn-icon-red    { background: rgba(239,68,68,.1); color: #ef4444; }
.wpdevn-service-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #0f172a;
}
.wpdevn-service-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 18px;
}
.wpdevn-service-link {
    
    font-size: 14px;
    font-weight: 700;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wpdevn-service-link:hover {
    gap: 10px;
    color: #1d4ed8;
}

.wpdevn-why {
    padding: 80px 0;
    background: #f8faff;
}
.wpdevn-why-grid {
    margin-top: 48px;
}
.wpdevn-why-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 26px;
    text-align: center;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
}
.wpdevn-why-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin: 0 auto 22px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 6px 20px rgba(37,99,235,.3);
}
.wpdevn-why-card:hover .wpdevn-why-icon {
    transform: scale(1.1) rotate(-6deg);
    background: linear-gradient(135deg, #ee4d51, #d9383c);
    box-shadow: 0 8px 24px rgba(249, 115, 22, .35);
}
.wpdevn-why-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
}
.wpdevn-why-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

.wpdevn-industries {
    position: relative;
    padding: 100px 0;
    background: #fff;
}
.wpdevn-industries-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 0;
}
.wpdevn-industry-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    cursor: default;
}
.wpdevn-industry-tag i {
    color: #2563eb;
    font-size: 15px;
}
.wpdevn-industry-tag:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(37,99,235,.25);
}
.wpdevn-industry-tag:hover i {
    color: #fff;
}

.wpdevn-process {
    padding: 100px 0;
    background: #f8faff;
}
.wpdevn-process-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 52px;
}
.wpdevn-process-step {
    background: #fff;
    border-radius: 16px;
    padding: 32px 26px;
    border: 1px solid #e2e8f0;
    position: relative;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-process-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
    border-color: #dbeafe;
}
.wpdevn-process-num {
    font-size: 64px;
    font-weight: 900;
    color: #dbeafe;
    line-height: 1;
    position: absolute;
    top: 16px;
    right: 20px;
    pointer-events: none;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-process-step:hover .wpdevn-process-num {
    color: rgba(37,99,235,.12);
}
.wpdevn-process-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(37,99,235,.3);
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-process-step:hover .wpdevn-process-icon {
    transform: rotate(-8deg) scale(1.08);
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 4px 16px rgba(249,115,22,.35);
}
.wpdevn-process-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.35;
}
.wpdevn-process-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.7;
}

.wpdevn-perf {
    position: relative;
    padding: 100px 0;
    background: #fff;
}
.wpdevn-perf-cards {
    margin-top: 16px;
}
.wpdevn-perf-card {
    background: #f8faff;
    border-radius: 16px;
    padding: 40px 30px;
    border: 1px solid #e2e8f0;
    margin-bottom: 28px;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.wpdevn-perf-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(37,99,235,.14);
    background: #fff;
}
.wpdevn-perf-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 22px;
    box-shadow: 0 6px 20px rgba(37,99,235,.3);
}
.wpdevn-perf-icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 20px rgba(16,185,129,.3);
}
.wpdevn-perf-icon-orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 20px rgba(249,115,22,.3);
}
.wpdevn-perf-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}
.wpdevn-perf-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 22px;
    line-height: 1.7;
}
.wpdevn-perf-meter {
    margin-top: auto;
}
.wpdevn-meter-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 8px;
}
.wpdevn-meter-fill {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    width: 0;
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.wpdevn-meter-green {
    background: linear-gradient(90deg, #10b981, #6ee7b7);
}
.wpdevn-meter-orange {
    background: linear-gradient(90deg, #f97316, #fbbf24);
}
.wpdevn-meter-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.wpdevn-cta {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 40%, #0e7490 100%);
    overflow: hidden;
}
.wpdevn-cta-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wpdevn-cta-shape {
    position: absolute;
    border-radius: 50%;
}
.wpdevn-cta-s1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
    top: -200px;
    right: -150px;
    animation: wpdevnFloat 8s ease-in-out infinite;
}
.wpdevn-cta-s2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(249,115,22,.15) 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    animation: wpdevnFloat 10s ease-in-out infinite reverse;
}
.wpdevn-cta-s3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(16,185,129,.12) 0%, transparent 70%);
    top: 30%;
    left: 40%;
    animation: wpdevnFloat 6s ease-in-out infinite 1.5s;
}
.wpdevn-cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.wpdevn-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.wpdevn-cta-badge i {
    font-size: 18px;
    color: #60a5fa;
}
.wpdevn-cta-title {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.8px;
    margin-bottom: 22px;
}
.wpdevn-cta-highlight {
    color: #fbbf24;
    position: relative;
}
.wpdevn-cta-desc {
    font-size: 17px;
    color: rgba(255,255,255,.8);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.wpdevn-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-bottom: 36px;
}
.wpdevn-btn-cta-primary {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 6px 28px rgba(249,115,22,.45);
    border-color: transparent;
    font-size: 16px;
    padding: 16px 36px;
}
.wpdevn-btn-cta-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(249,115,22,.55);
}
.wpdevn-btn-cta-outline {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.4);
    font-size: 16px;
    padding: 16px 36px;
    backdrop-filter: blur(8px);
}
.wpdevn-btn-cta-outline:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.65);
}
.wpdevn-cta-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.wpdevn-cta-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    
}
.wpdevn-cta-trust i {
    color: #34d399;
    font-size: 16px;
}

@media (max-width: 1024px) {
    .wpdevn-section-title {
        font-size: 32px;
    }
    .wpdevn-hero-title {
        font-size: 46px;
    }
    .wpdevn-process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991px) {
    .wpdevn-hero {
        padding: 130px 0 80px;
        min-height: auto;
        text-align: center;
    }
    .wpdevn-hero-title {
        font-size: 38px;
    }
    .wpdevn-hero-actions {
        justify-content: center;
    }
    .wpdevn-hero-stats {
        justify-content: center;
    }
    .wpdevn-about-icon-grid {
        max-width: 360px;
        margin: 0 auto 40px;
    }
    .wpdevn-section-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .wpdevn-cta-title {
        font-size: 36px;
    }
    .wpdevn-process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .wpdevn-hero {
        padding: 110px 0 60px;
    }
    .wpdevn-hero-title {
        font-size: 30px;
        letter-spacing: -.5px;
    }
    .wpdevn-hero-desc {
        font-size: 15px;
    }
    .wpdevn-section-title {
        font-size: 26px;
    }
    .wpdevn-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .wpdevn-btn {
        width: 100%;
        justify-content: center;
        max-width: 320px;
    }
    .wpdevn-hero-stats {
        flex-wrap: wrap;
        gap: 0;
    }
    .wpdevn-stat-item {
        padding: 12px 16px;
        text-align: center;
    }
    .wpdevn-stat-divider {
        display: none;
    }
    .wpdevn-about-icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .wpdevn-process-timeline {
        grid-template-columns: 1fr;
    }
    .wpdevn-industries-grid {
        gap: 10px;
    }
    .wpdevn-cta-title {
        font-size: 28px;
    }
    .wpdevn-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .wpdevn-btn-cta-primary,
    .wpdevn-btn-cta-outline {
        width: 100%;
        justify-content: center;
        max-width: 320px;
    }
    .wpdevn-cta-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .wpdevn-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .wpdevn-footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
    .wpdevn-about {
        padding: 60px 0;
    }
    .wpdevn-services,
    .wpdevn-why,
    .wpdevn-industries,
    .wpdevn-process,
    .wpdevn-perf,
    .wpdevn-cta {
        padding: 70px 0;
    }
}
@media (max-width: 480px) {
    .wpdevn-about-icon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wpdevn-hero-title {
        font-size: 26px;
    }
}

/*-------- Wordpress Development css End -------*/
/*-------- Wordpress Development 2 css Start -------*/
html.wpdv {
    scroll-behavior: smooth;
}
.wpdv body {
    font-family: 'Poppins', sans-serif;
    color: #1e293b;
    background-color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}
.wpdv-section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a6ef5;
    background: #e8f0fe;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.wpdv-section-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #0a0f1e;
    margin-bottom: 16px;
}
.wpdv-section-subtitle {
    font-size: 17px;
    font-weight: 400;
    color: #64748b;
    max-width: 580px;
    line-height: 1.7;
}
.wpdv-btn-primary {
    display: inline-block;
    background: #1a6ef5;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.wpdv-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-btn-primary:hover {
    background: #0d4ecc;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 110, 245, 0.35);
    text-decoration: none;
}
.wpdv-btn-primary:hover::after {
    opacity: 1;
}
.wpdv-btn-outline {
    display: inline-block;
    background: transparent;
    color: #1a6ef5;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 32px;
    border-radius: 50px;
    border: 2px solid #1a6ef5;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-btn-outline:hover,
.wpdv-btn-outline:active,
.wpdv-btn-outline:focus {
    background: #1a6ef5;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(26, 110, 245, 0.12);
    text-decoration: none;
}
.wpdv-btn-white {
    display: inline-block;
    background: #ffffff;
    color: #1a6ef5;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-btn-white:hover {
    background: #e8f0fe;
    color: #0d4ecc;
    transform: translateY(-2px);
    text-decoration: none;
}
.wpdv-btn-white-outline {
    display: inline-block;
    background: transparent;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 32px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-btn-white-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

.wpdv-hero {
    padding: 140px 0 100px;
    background: linear-gradient(145deg, #f8faff 0%, #eef3ff 50%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
}
.wpdv-hero-bg-shape-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(26, 110, 245, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wpdv-hero-bg-shape-2 {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wpdv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f0fe;
    color: #1a6ef5;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(26, 110, 245, 0.2);
    animation: wpdv-fade-up 0.6s ease both;
}
.wpdv-hero-badge i {
    font-size: 11px;
}
.wpdv-hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    color: #0a0f1e;
    margin-bottom: 24px;
    animation: wpdv-fade-up 0.6s ease 0.1s both;
}
.wpdv-hero-title .wpdv-highlight {
    color: #1a6ef5;
    position: relative;
}
.wpdv-hero-title .wpdv-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, rgba(26, 110, 245, 0.3), rgba(26, 110, 245, 0));
    border-radius: 3px;
}
.wpdv-hero-desc {
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    max-width: 540px;
    margin-bottom: 40px;
    line-height: 1.8;
    animation: wpdv-fade-up 0.6s ease 0.2s both;
}
.wpdv-hero-btns {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 52px;
    animation: wpdv-fade-up 0.6s ease 0.3s both;
}
.wpdv-hero-visual {
    animation: wpdv-fade-left 0.8s ease 0.2s both;
}
.wpdv-hero-mockup {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(26, 110, 245, 0.2);
    overflow: hidden;
    border: 1px solid rgba(26, 110, 245, 0.1);
}
.wpdv-mockup-bar {
    background: #f0f4ff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.wpdv-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.wpdv-mockup-dot-red {
    background: #ff5f57;
}
.wpdv-mockup-dot-yellow {
    background: #ffbd2e;
}
.wpdv-mockup-dot-green {
    background: #28c840;
}
.wpdv-mockup-url {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-left: 8px;
}
.wpdv-mockup-body {
    padding: 0;
}
.wpdv-mockup-header-bar {
    background: #1a6ef5;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wpdv-mockup-logo-text {
    color: white;
    font-size: 14px;
    font-weight: 700;
}
.wpdv-mockup-nav-items {
    display: flex;
    gap: 16px;
}
.wpdv-mockup-nav-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
}
.wpdv-mockup-hero-area {
    background: linear-gradient(135deg, #f8faff, #eef3ff);
    padding: 32px 24px;
}
.wpdv-mockup-hero-tag {
    background: #e8f0fe;
    color: #1a6ef5;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
}
.wpdv-mockup-hero-title {
    font-size: 18px;
    font-weight: 800;
    color: #0a0f1e;
    margin-bottom: 8px;
    line-height: 1.3;
}
.wpdv-mockup-hero-sub {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 14px;
    line-height: 1.6;
}
.wpdv-mockup-hero-btns {
    display: flex;
    gap: 8px;
}
.wpdv-mockup-btn-blue {
    background: #1a6ef5;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
}
.wpdv-mockup-btn-outline {
    border: 1.5px solid #1a6ef5;
    color: #1a6ef5;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}
.wpdv-mockup-cards-row {
    display: flex;
    gap: 10px;
    padding: 20px 24px;
    background: white;
}
.wpdv-mockup-mini-card {
    flex: 1;
    background: #f8faff;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
}
.wpdv-mockup-mini-card i {
    color: #1a6ef5;
    font-size: 16px;
    margin-bottom: 6px;
    display: block;
}
.wpdv-mockup-mini-card-label {
    font-size: 9px;
    font-weight: 600;
    color: #1e293b;
}
.wpdv-trust-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    animation: wpdv-fade-up 0.6s ease 0.4s both;
}
.wpdv-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wpdv-trust-icon {
    width: 40px;
    height: 40px;
    background: #e8f0fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6ef5;
    font-size: 16px;
    flex-shrink: 0;
}
.wpdv-trust-icon i.fa.fa-star {
    color: #1a6ef5;
}
.wpdv-trust-number {
    font-size: 20px;
    font-weight: 800;
    color: #0a0f1e;
    line-height: 1;
}
.wpdv-trust-text {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.wpdv-section {
    padding: 100px 0;
}
.wpdv-section-alt {
    background: #f1f5fd;
}
.wpdv-section-header {
    text-align: center;
    margin-bottom: 60px;
}
.wpdv-service-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.wpdv-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a6ef5, #6ba3ff);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(26, 110, 245, 0.18);
    border-color: transparent;
}
.wpdv-service-card:hover::before {
    opacity: 1;
}
.wpdv-service-icon {
    width: 56px;
    height: 56px;
    background: #e8f0fe;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6ef5;
    font-size: 22px;
    margin-bottom: 20px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-service-card:hover .wpdv-service-icon {
    background: #1a6ef5;
    color: #ffffff;
    transform: scale(1.05);
}
.wpdv-service-name {
    font-size: 18px;
    font-weight: 700;
    color: #0a0f1e;
    margin-bottom: 10px;
}
.wpdv-service-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 0;
}

.wpdv-project-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
}
.wpdv-project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(26, 110, 245, 0.18);
    border-color: transparent;
}
.wpdv-project-thumb {
    height: 220px;
    background: linear-gradient(135deg, #1a6ef5 0%, #4a9eff 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpdv-project-thumb-2 {
    background: linear-gradient(135deg, #0d47a1 0%, #1a6ef5 100%);
}
.wpdv-project-thumb-3 {
    background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%);
}
.wpdv-project-thumb-inner {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 28px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
}
.wpdv-project-thumb-icon {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    display: block;
}
.wpdv-project-thumb-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
}
.wpdv-project-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    letter-spacing: 0.5px;
}
.wpdv-project-body {
    padding: 28px 28px 24px;
}
.wpdv-project-name {
    font-size: 19px;
    font-weight: 700;
    color: #0a0f1e;
    margin-bottom: 10px;
}
.wpdv-project-impact {
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 18px;
}
.wpdv-project-metrics {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.wpdv-project-metric {
    text-align: center;
}
.wpdv-project-metric-val {
    font-size: 22px;
    font-weight: 800;
    color: #1a6ef5;
    line-height: 1;
}
.wpdv-project-metric-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
}
.wpdv-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wpdv-tech-tag {
    background: #e8f0fe;
    color: #1a6ef5;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
}

.wpdv-why-content {
    padding-right: 40px;
}
.wpdv-why-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}
.wpdv-why-feature-icon {
    width: 48px;
    height: 48px;
    background: #e8f0fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6ef5;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-why-feature:hover .wpdv-why-feature-icon {
    background: #1a6ef5;
    color: white;
}
.wpdv-why-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a0f1e;
    margin-bottom: 4px;
}
.wpdv-why-feature-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}
.wpdv-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.wpdv-stat-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 28px 24px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-stat-box:hover {
    border-color: #1a6ef5;
    box-shadow: 0 8px 32px rgba(26, 110, 245, 0.12);
}
.wpdv-stat-number {
    font-size: 40px;
    font-weight: 900;
    color: #1a6ef5;
    line-height: 1;
    margin-bottom: 8px;
}
.wpdv-stat-suffix {
    font-size: 22px;
}
.wpdv-stat-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

.wpdv-mid-cta {
    background: linear-gradient(135deg, #0a1628 0%, #1a2e5a 50%, #0d2060 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.wpdv-mid-cta-glow-1 {
    position: absolute;
    top: -100px;
    right: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(26, 110, 245, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wpdv-mid-cta-glow-2 {
    position: absolute;
    bottom: -80px;
    left: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wpdv-mid-cta-title {
    font-size: 42px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.wpdv-mid-cta-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.wpdv-capability-item {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px 22px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 16px;
    cursor: default;
}
.wpdv-capability-item:hover {
    border-color: #1a6ef5;
    background: #e8f0fe;
    transform: translateX(6px);
}
.wpdv-capability-icon {
    width: 48px;
    height: 48px;
    background: #e8f0fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6ef5;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-capability-item:hover .wpdv-capability-icon {
    background: #1a6ef5;
    color: white;
}
.wpdv-capability-name {
    font-size: 16px;
    font-weight: 600;
    color: #0a0f1e;
    margin-bottom: 3px;
}
.wpdv-capability-sub {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 0;
}
.wpdv-capability-arrow {
    margin-left: auto;
    color: #64748b;
    font-size: 14px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-capability-item:hover .wpdv-capability-arrow {
    color: #1a6ef5;
    transform: translateX(4px);
}

@media (min-width: 992px){
    .wpdv-process-wrapper .row .col-md-3 {
        width: 14%;
    }
}
.wpdv-process-wrapper {
    position: relative;
}
.wpdv-process-line {
    position: absolute;
    top: 36px;
    left: calc(5.28% + 36px);
    right: calc(7.28% + 36px);
    height: 2px;
    background: linear-gradient(90deg, #1a6ef5, #6ba3ff);
    z-index: 0;
}
.wpdv-process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.wpdv-process-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #1a6ef5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    color: #1a6ef5;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.wpdv-process-step:hover .wpdv-process-circle {
    background: #1a6ef5;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(26, 110, 245, 0.12);
}
.wpdv-process-label {
    font-size: 13px;
    font-weight: 700;
    color: #0a0f1e;
    margin-bottom: 4px;
}
.wpdv-process-sub {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
}

.wpdv-review-main {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px;
    border: 1px solid #e2e8f0;
    position: relative;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(26, 110, 245, 0.08);
}
.wpdv-review-quote-icon {
    font-size: 64px;
    color: #1a6ef5;
    opacity: 0.15;
    position: absolute;
    top: 28px;
    right: 40px;
    line-height: 1;
}
.wpdv-review-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}
.wpdv-review-stars i {
    color: #fbbf24;
    font-size: 16px;
}
.wpdv-review-text {
    font-size: 20px;
    font-weight: 500;
    color: #0a0f1e;
    line-height: 1.7;
    margin-bottom: 28px;
    font-style: italic;
}
.wpdv-review-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wpdv-review-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1a6ef5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
}
.wpdv-review-name {
    font-size: 15px;
    font-weight: 700;
    color: #0a0f1e;
    margin-bottom: 2px;
}
.wpdv-review-role {
    font-size: 13px;
    color: #64748b;
}
.wpdv-review-platform {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: #e8f0fe;
    padding: 6px 14px;
    border-radius: 50px;
    color: #1a6ef5;
    font-size: 12px;
    font-weight: 600;
}
.wpdv-review-mini {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-review-mini:hover {
    border-color: #1a6ef5;
    box-shadow: 0 2px 8px rgba(26, 110, 245, 0.08);
}
.wpdv-review-mini-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}
.wpdv-review-mini-stars i {
    color: #fbbf24;
    font-size: 12px;
}
.wpdv-review-mini-text {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
}
.wpdv-review-mini-name {
    font-size: 13px;
    font-weight: 700;
    color: #0a0f1e;
}
.wpdv-review-mini-company {
    font-size: 11px;
    color: #64748b;
}

.wpdv-faq-item {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-faq-item.wpdv-open {
    border-color: #1a6ef5;
    box-shadow: 0 2px 8px rgba(26, 110, 245, 0.08);
}
.wpdv-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    cursor: pointer;
    user-select: none;
}
.wpdv-faq-q-text {
    font-size: 16px;
    font-weight: 600;
    color: #0a0f1e;
    padding-right: 16px;
}
.wpdv-faq-icon {
    width: 32px;
    height: 32px;
    background: #e8f0fe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6ef5;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-faq-item.wpdv-open .wpdv-faq-icon {
    background: #1a6ef5;
    color: white;
    transform: rotate(45deg);
}
.wpdv-faq-answer {
    display: none;
    padding: 0 28px 22px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.8;
}
.wpdv-faq-answer.wpdv-visible {
    display: block;
}

.wpdv-final-cta {
    background: linear-gradient(145deg, #e8f0fe 0%, #dce8ff 100%);
    padding: 110px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.wpdv-final-cta-shape {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(26, 110, 245, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.wpdv-final-cta-title {
    font-size: 48px;
    font-weight: 900;
    color: #0a0f1e;
    margin-bottom: 20px;
    line-height: 1.15;
}
.wpdv-final-cta-title span {
    color: #1a6ef5;
}
.wpdv-final-cta-desc {
    font-size: 18px;
    color: #64748b;
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.7;
}
.wpdv-final-cta-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wpdv-sticky-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.wpdv-sticky-cta.wpdv-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.wpdv-sticky-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a6ef5;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(26, 110, 245, 0.4);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpdv-sticky-btn:hover {
    background: #0d4ecc;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(26, 110, 245, 0.5);
    color: white;
    text-decoration: none;
}
@keyframes wpdv-fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes wpdv-fade-left {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes wpdv-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}
@keyframes wpdv-count-up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.wpdv-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.wpdv-animate.wpdv-in-view {
    opacity: 1;
    transform: translateY(0);
}
.wpdv-animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.wpdv-animate-left.wpdv-in-view {
    opacity: 1;
    transform: translateX(0);
}
.wpdv-animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.wpdv-animate-right.wpdv-in-view {
    opacity: 1;
    transform: translateX(0);
}
.wpdv-delay-1 {
    transition-delay: 0.1s;
}
.wpdv-delay-2 {
    transition-delay: 0.2s;
}
.wpdv-delay-3 {
    transition-delay: 0.3s;
}
.wpdv-delay-4 {
    transition-delay: 0.4s;
}
.wpdv-delay-5 {
    transition-delay: 0.5s;
}

@media (max-width: 991px) {
    .wpdv-process-sub {
        margin-bottom: 10px;
    }
    .wpdv-hero-title {
        font-size: 40px;
    }
    .wpdv-section-title {
        font-size: 30px;
    }
    .wpdv-why-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .wpdv-mid-cta-title {
        font-size: 32px;
    }
    .wpdv-final-cta-title {
        font-size: 36px;
    }
    .wpdv-process-line {
        display: none;
    }
    .wpdv-review-main {
        padding: 32px 28px;
    }
    .wpdv-review-text {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .wpdv-nav-links,
    .wpdv-nav-cta {
        display: none;
    }
    .wpdv-nav-toggle {
        display: block;
    }
    .wpdv-hero {
        padding: 110px 0 70px;
        text-align: center;
    }
    .wpdv-hero-title {
        font-size: 32px;
    }
    .wpdv-hero-desc {
        font-size: 15px;
    }
    .wpdv-hero-btns {
        justify-content: center;
    }
    .wpdv-trust-row {
        justify-content: center;
        gap: 20px;
    }
    .wpdv-hero-visual {
        margin-top: 48px;
    }
    .wpdv-section {
        padding: 70px 0;
    }
    .wpdv-section-title {
        font-size: 26px;
    }
    .wpdv-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .wpdv-mid-cta-title {
        font-size: 26px;
    }
    .wpdv-final-cta-title {
        font-size: 28px;
    }
    .wpdv-final-cta-btns {
        flex-direction: column;
        align-items: center;
    }
    .wpdv-review-main {
        padding: 24px 20px;
    }
    .wpdv-review-text {
        font-size: 15px;
    }
    .wpdv-review-platform {
        display: none;
    }
    .wpdv-sticky-cta {
        bottom: 16px;
        right: 16px;
    }
}

@media (max-width: 480px) {
    .wpdv-hero-title {
        font-size: 28px;
    }
    .wpdv-hero-btns {
        flex-direction: column;
        align-items: center;
    }
    .wpdv-project-metrics {
        justify-content: center;
    }
}
/*-------- Wordpress Development 2 css End -------*/
/*-------- Laravel Development css Start -------*/
html.laradev { scroll-behavior: smooth; }
html.laradev section h2 {
    font-weight: 600;
    font-size: clamp(26px, 68px, 34px);
    line-height: 1.2;
    font-family: 'DM Serif Display', Georgia, serif;
}
html.laradev section h1 {
    font-family: 'DM Serif Display', Georgia, serif;
}
html.laradev section h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.laradev body {
    color: #1A2030;
    background: #FFFFFF;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.laraeyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #1A56A0;
    margin-bottom: 14px;
}
.laraeyebrow::before {
    content: ''; display: block; width: 20px; height: 2px;
    background: #1A56A0; border-radius: 2px;
}
.laralead { font-size: 16px; color: #4A5568; line-height: 1.75; }
.larasmall { font-size: 0.875rem; }
.laradev .section { padding: 80px 0; }
.laradev .section-sm { padding: 56px 0; }
.larabtn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600;
    padding: 13px 26px; border-radius: 10px;
    cursor: pointer; transition: all .18s ease; border: none;
    white-space: nowrap;
}
.larabtn-primary {
    background: #1A56A0; color: #fff;
}
.larabtn-primary:hover { color: #ffffff; background: #2E7DD1; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.larabtn-outline {
    background: transparent; color: #1A56A0;
    border: 1.5px solid #D6E8F7;
}
.larabtn-outline:hover { background: #EBF3FB; border-color: #1A56A0; }
.larabtn-white {
    background: #fff; color: #1A56A0; font-weight: 600;
}
.larabtn-white:hover { background: #EBF3FB; }
.larabtn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── HERO ── */
.larahero {
    background: #FFFFFF;
    padding: 80px 0 72px;
    border-bottom: 1px solid #E2E8F0;
}
.larahero-inner {
    display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: center;
}
.larahero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    background: #EBF3FB; color: #1A56A0;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 20px;
    margin-bottom: 22px;
}
.larahero h1 {
    margin-bottom: 18px;
    font-weight: 500;
    font-size: clamp(36px, 96px, 54.4px);
    line-height: 1.15;
}
.larahero h1 em { font-style: italic; color: #1A56A0; }
.larahero-sub { font-size: 17px; color: #4A5568; line-height: 1.75; margin-bottom: 32px; max-width: 520px; }
.larahero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.larahero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid #E2E8F0; border-radius: 16px;
    overflow: hidden;
}
.larahero-stat {
    padding: 18px 20px; background: #F7F9FC;
    border-right: 1px solid #E2E8F0;
}
.larahero-stat:last-child { border-right: none; }
.larahero-stat-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 32px; color: #0D1B2A; line-height: 1; margin-bottom: 4px;font-weight:500; }
.larahero-stat-label { font-size: 14px; color: #718096; font-weight: 500; }
/* laraHero form card */
.larahero-form-card {
    background: #F7F9FC;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 32px 28px;
}
.larahero-form-card h3 { font-size: 18px!important; margin-bottom: 6px; }
.larahero-form-card .sub { font-size: 14px; color: #718096; margin-bottom: 22px; }
.laraform-group { margin-bottom: 14px;padding-bottom:0 }
.laraform-group label { display: block; font-size: 0.8rem; font-weight: 600; color: #4A5568; margin-bottom: 5px; }
.laraform-group input,
.laraform-group select,
.laraform-group textarea {
    width: 100%; padding: 10px 14px;
    font-size: 14px; color: #1A2030;
    background: #FFFFFF; border: 1px solid #CBD5E0;
    border-radius: 6px; outline: none; transition: border-color .15s;
}
.laraform-group select {
    border: 1px solid #CBD5E0 !important;
    padding: 10px 14px !important;
    height: auto !important;
    background-position: right top;
    color: #1A2030 !important;
    background: #fff !important;
    font-weight: 400 !important;
}
.laraform-group input:focus,
.laraform-group select:focus,
.laraform-group textarea:focus { border-color: #1A56A0; }
.laraform-group textarea { resize: none; min-height: 80px; }
.laraform-submit {
    width: 100%; background: #1A56A0; color: #fff;
    font-size: 15px; font-weight: 600;
    padding: 13px; border: none; border-radius: 10px;
    cursor: pointer; transition: background .18s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.laraform-submit:hover { background: #2E7DD1; }
.form-note { font-size: 12px; color: #718096; text-align: center; margin-top: 10px; }
/* ── TRUST BAR ── */
.laratrust-bar {
    background: #F7F9FC;
    border-bottom: 1px solid #E2E8F0;
    padding: 14px 0;
}
.laratrust-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.laratrust-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 500; color: #4A5568;
}
.laratrust-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #0E9F6E; flex-shrink: 0;
}
.laratrust-divider { width: 1px; height: 18px; background: #CBD5E0; }
/* ── SERVICES ── */
.laraservices-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 40px;
}
.larasvc-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px 22px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.larasvc-card:hover {
    border-color: #D6E8F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.larasvc-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: #EBF3FB; display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.larasvc-icon svg { width: 20px; height: 20px; color: #1A56A0; }
.larasvc-card h3 { margin-bottom: 8px; }
.larasvc-card p { font-size: 14px; color: #718096; line-height: 1.6; }
/* ── PROJECTS ── */
.laraprojects-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 40px;
}
.laraproject-card {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.laraproject-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.10); }
.laraproject-thumb {
    height: 160px; background: #EEF2F7;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.laraproject-thumb-inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; 
}
.laraproject-thumb-1 { background: linear-gradient(135deg, #0D1B2A 0%, #1A56A0 100%); color: #fff; }
.laraproject-thumb-2 { background: linear-gradient(135deg, #0A2342 0%, #0E9F6E 100%); color: #fff; }
.laraproject-thumb-3 { background: linear-gradient(135deg, #1A2030 0%, #2E7DD1 100%); color: #fff; }
.laraproject-tag {
    position: absolute; top: 12px; left: 12px;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.2);
}
.laraproject-body { height: 100%; padding: 20px; background: #FFFFFF; }
.laraproject-body h3 { margin-bottom: 6px; font-size: 16px; }
.laraproject-body p { font-size: 14px; color: #718096; line-height: 1.55; margin-bottom: 14px; }
.laraproject-link {
    font-size: 14px; font-weight: 600; color: #1A56A0;
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .15s;
}
.laraproject-link:hover { gap: 8px; }
.laraproject-stack { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stack-tag {
    font-size: 12px; font-weight: 600; padding: 2px 8px;
    background: #EEF2F7; color: #4A5568;
    border-radius: 4px;
}
/* ── WHY US ── */
.larawhy-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 40px;
}
.larawhy-card {
    padding: 22px 20px;
    background: #F7F9FC;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
}
.larawhy-icon {
    width: 36px; height: 36px; border-radius: 6px;
    background: #E3F8F0; display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.larawhy-icon svg { width: 18px; height: 18px; color: #0E9F6E; }
.larawhy-card h3 { font-size: 16px; margin-bottom: 6px; }
.larawhy-card p { font-size: 14px; color: #718096; line-height: 1.6; }
/* ── INDUSTRIES ── */
.laraindustries-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    margin-top: 36px;
}
.laraind-card {
    padding: 16px 14px; text-align: left;
    border: 1px solid #E2E8F0; border-radius: 10px;
    background: #FFFFFF;
    transition: border-color .15s, background .15s;
}
.laraind-card:hover { background: #EBF3FB; border-color: #D6E8F7; }
.laraind-icon { font-size: 20px; margin-bottom: 7px; }
.laraind-name { font-size: 14px; font-weight: 600; color: #0D1B2A; }
.laraind-desc { font-size: 12px; color: #718096; line-height: 1.5; margin-top: 4px; }
/* ── PROCESS ── */
.laraprocess-list { margin-top: 40px; }
.laraprocess-step {
    display: grid; grid-template-columns: 48px 1fr; gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #E2E8F0;
    align-items: start;
}
.laraprocess-step:last-child { border-bottom: none; }
.laraprocess-num {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid #CBD5E0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #1A56A0;
    flex-shrink: 0;
}
.laraprocess-step h3 { margin-bottom: 4px; }
.laraprocess-step p { font-size: 14px; color: #718096; line-height: 1.6;margin-bottom:0; }
/* ── FAQ ── */
.larafaq-list { margin-top: 40px; }
.larafaq-item {
    border-bottom: 1px solid #E2E8F0;
    padding: 16px 0;
}
.larafaq-item:first-child { border-top: 1px solid #E2E8F0; }
.larafaq-q {
    font-size: 16px; font-weight: 600; color: #0D1B2A;
    cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    user-select: none;
}
.larafaq-q svg { width: 18px; height: 18px; flex-shrink: 0; color: #1A56A0; transition: transform .2s; margin-top: 2px; }
.larafaq-a {
    font-size: 14px; color: #4A5568; line-height: 1.75;
    margin-top: 12px; max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.larafaq-item.open .larafaq-a { max-height: 200px; }
.larafaq-item.open .larafaq-q svg { transform: rotate(45deg); }
/* ── CTA BAND ── */
.laracta-band {
    background: #0D1B2A;
    padding: 64px 0;
}
.laracta-inner {
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.laracta-band h2 { color: #fff; margin-bottom: 10px; }
.laracta-band p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 520px; }
.laracta-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.laracta-contact { font-size: 0.83rem; color: rgba(255,255,255,.5); text-align: right; }
.laracta-contact a { color: rgba(255,255,255,.75); font-weight: 500; }

/* ── SECTION HEADER ── */
.larasection-header { max-width: 600px; }
.larasection-header.center { max-width: 580px; margin: 0 auto; text-align: center; }
.larasection-header.center .laraeyebrow { margin: 0 auto 14px; }
.larasection-header h2 { margin-bottom: 12px; }
.larasection-header p { color: #4A5568; font-size: 16px; line-height: 1.7; }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.larafade-up { animation: fadeUp .5s ease both; }
.larafade-up-1 { animation-delay: .1s; }
.larafade-up-2 { animation-delay: .2s; }
.larafade-up-3 { animation-delay: .3s; }
.larafade-up-4 { animation-delay: .4s; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .larahero-sub{
        max-width: 100%;
    }
    .larahero-inner { grid-template-columns: 1fr; gap: 40px; }
    .larahero-form-card { max-width: 500px; }
    .laraservices-grid, .larawhy-grid { grid-template-columns: 1fr 1fr; }
    .laraprojects-grid { grid-template-columns: 1fr 1fr; }
    .laraindustries-grid { grid-template-columns: repeat(3, 1fr); }
    .laracta-inner { grid-template-columns: 1fr; }
    .laracta-actions { align-items: flex-start; }
    @media (max-width: 991px) {
        section#larawhy-laravel .container>div,
        section#process .container>div,
        section#faq .container>div {
            grid-template-columns: 1fr!important;
            gap: 32px!important;
        }
    }
}
@media (max-width: 600px) {
    .larahero-form-card { max-width: 100%; padding: 30px 20px; }
    .laraservices-grid, .larawhy-grid, .laraprojects-grid { grid-template-columns: 1fr; }
    .laraindustries-grid { grid-template-columns: repeat(2, 1fr); }
    .larahero-stats { grid-template-columns: 1fr; }
    .larahero-stat { border-right: none; border-bottom: 1px solid #E2E8F0; }
    .laratrust-inner { gap: 16px; }
    .laratrust-divider { display: none; }
}
/*-------- Laravel Development css End -------*/
/*-------- React Native App Development css Start -------*/
.reactapp {
    scroll-behavior: smooth;
}
.reactapp body {
    font-size: 15px;
    line-height: 1.7;
    color: #1A2030;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}
.reactapp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #1A56A0;
    margin-bottom: 14px;
}
.reactapp-eyebrow i {
    font-size: 13px;
}
.reactapp-eyebrow--center {
    justify-content: center;
}
.reactapp-section-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 14px;
}
.reactapp-section-intro {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.75;
    margin-bottom: 20px;
}
.reactapp-section-body {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.75;
    margin-bottom: 24px;
}
.reactapp-intro-center {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.reactapp-section-header {
    margin-bottom: 40px;
}
.reactapp-text-link {
    color: #1A56A0;
    font-weight: 500;
    border-bottom: 1px solid #B5D4F4;
}
.reactapp-text-link:hover {
    color: #2E7DD1;
    border-bottom-color: #2E7DD1;
}

.reactapp-btn-primary,
.reactapp-btn-outline,
.reactapp-btn-white,
.reactapp-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 2px solid transparent;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}
.reactapp-btn-primary {
    background-color: #1A56A0;
    color: #ffffff;
    border-color: #1A56A0;
}
.reactapp-btn-primary:hover,
.reactapp-btn-primary:focus {
    background-color: #2E7DD1;
    border-color: #2E7DD1;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}
.reactapp-btn-outline {
    background-color: transparent;
    color: #1A56A0;
    border-color: #B5D4F4;
}
.reactapp-btn-outline:hover,
.reactapp-btn-outline:focus {
    background-color: #EBF3FB;
    border-color: #1A56A0;
    color: #1A56A0;
    text-decoration: none;
}
.reactapp-btn-white {
    background-color: #ffffff;
    color: #1A56A0;
    border-color: #ffffff;
}
.reactapp-btn-white:hover,
.reactapp-btn-white:focus {
    background-color: #EBF3FB;
    color: #1A56A0;
    text-decoration: none;
}
.reactapp-btn-submit {
    background-color: #1A56A0;
    color: #ffffff;
    border-color: #1A56A0;
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 13px 22px;
}
.reactapp-btn-submit:hover,
.reactapp-btn-submit:focus {
    background-color: #2E7DD1;
    border-color: #2E7DD1;
    color: #ffffff;
}
.reactapp-btn-lg {
    font-size: 14px;
    padding: 13px 26px;
}

.reactapp-hero {
    padding: 72px 0 64px;
    background-color: #ffffff;
    border-bottom: 1px solid #E2E8F0;
}
.reactapp-hero-row .reactapp-hero-left {
    padding-top: 40px;
}
.reactapp-hero-heading {
    font-size: 38px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 18px;
}
.reactapp-hero-sub {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.8;
    max-width: 520px;
    margin-bottom: 28px;
}
.reactapp-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.reactapp-stats-row {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
}
.reactapp-stat-box {
    padding: 18px 20px;
    background-color: #F7F9FC;
    text-align: center;
}
.reactapp-stat-box--mid {
    border-left: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
}
.reactapp-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1;
    margin-bottom: 4px;
}
.reactapp-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: #718096;
}
.reactapp-hero-right {
    padding-left: 24px;
}
.reactapp-form-card {
    background-color: #F7F9FC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 30px 26px;
}
.reactapp-form-title {
    font-size: 17px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 4px;
}
.reactapp-form-sub {
    font-size: 13px;
    color: #718096;
    margin-bottom: 20px;
}
.reactapp-form-group {
    margin-bottom: 14px;
}
.reactapp-label {
    font-size: 12px;
    font-weight: 600;
    color: #4A5568;
    margin-bottom: 5px;
    display: block;
}
.reactapp-input {
    font-size: 13px;
    color: #1A2030;
    border: 1px solid #CBD5E0;
    border-radius: 6px;
    height: 40px;
    transition: border-color 0.15s ease;
    box-shadow: none;
}
.reactapp-input:focus {
    border-color: #1A56A0;
    box-shadow: 0 0 0 3px rgba(26, 86, 160, 0.1);
    outline: none;
}
.reactapp-textarea {
    height: 88px;
    resize: vertical;
}
.reactapp-form-note {
    font-size: 11px;
    color: #718096;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}
.reactapp-form-note i {
    margin-right: 4px;
}

.reactapp-trust-bar {
    background-color: #F7F9FC;
    border-bottom: 1px solid #E2E8F0;
    padding: 14px 0;
}
.reactapp-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
}
.reactapp-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #4A5568;
    padding: 0 16px;
}
.reactapp-trust-item i {
    color: #0E9F6E!important;
    font-size: 13px;
}
.reactapp-trust-divider {
    width: 1px;
    height: 18px;
    background-color: #CBD5E0;
}

.reactapp-section {
    padding: 72px 0;
}
.reactapp-section--alt {
    background-color: #F7F9FC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}
.reactapp-section--industries {
    background-color: #F7F9FC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.reactapp-why-left {
    padding-right: 40px;
}
.reactapp-why-list {
    display: flex;
    flex-direction: column;
}
.reactapp-why-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #E2E8F0;
    align-items: flex-start;
}
.reactapp-why-item--last {
    border-bottom: none;
}
.reactapp-why-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.reactapp-why-icon i {
    font-size: 16px;
    color: #1A56A0;
}
.reactapp-why-content {
    flex: 1;
}
.reactapp-why-title {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 4px;
}
.reactapp-why-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 0;
}

.reactapp-services-grid {
    margin-top: 8px;
}
.reactapp-svc-col {
    padding-bottom: 20px;
}
.reactapp-svc-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.reactapp-svc-card:hover {
    border-color: #B5D4F4;
    transform: translateY(-2px);
}
.reactapp-svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.reactapp-svc-icon i {
    font-size: 20px;
    color: #1A56A0;
}
.reactapp-svc-title {
    font-size: 15px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 8px;
}
.reactapp-svc-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 0;
}

.reactapp-projects-grid {
    margin-top: 8px;
}
.reactapp-project-col {
    padding-bottom: 24px;
}
.reactapp-project-card {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    background-color: #ffffff;
}
.reactapp-project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}
.reactapp-project-thumb {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.reactapp-project-thumb--1 {
    background-color: #1A2E44;
}
.reactapp-project-thumb--2 {
    background-color: #0A2342;
}
.reactapp-project-thumb--3 {
    background-color: #1A2030;
}
.reactapp-project-initials {
    font-size: 36px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
}
.reactapp-project-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.reactapp-project-body {
    padding: 20px;
}
.reactapp-project-title {
    font-size: 15px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 8px;
}
.reactapp-project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.reactapp-stack-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background-color: #EEF2F7;
    color: #4A5568;
    border-radius: 4px;
}
.reactapp-project-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 14px;
}
.reactapp-project-link {
    font-size: 13px;
    font-weight: 600;
    color: #1A56A0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.15s ease;
}
.reactapp-project-link:hover {
    gap: 8px;
    color: #2E7DD1;
}
.reactapp-projects-more {
    margin-top: 16px;
}

.reactapp-why-us-grid {
    margin-top: 8px;
}
.reactapp-why-us-col {
    padding-bottom: 16px;
}
.reactapp-why-us-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 20px 18px;
    height: 100%;
}
.reactapp-why-us-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #E3F8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.reactapp-why-us-icon i {
    font-size: 16px;
    color: #0E9F6E;
}
.reactapp-why-us-title {
    font-size: 13px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 6px;
}
.reactapp-why-us-desc {
    font-size: 12px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 0;
}

.reactapp-industries-grid {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.reactapp-ind-col {
    padding-bottom: 12px;
}
.reactapp-ind-card {
    padding: 16px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    height: 100%;
}
.reactapp-ind-card:hover {
    background-color: #EBF3FB;
    border-color: #B5D4F4;
}
.reactapp-ind-icon {
    font-size: 22px;
    color: #1A56A0;
    margin-bottom: 8px;
    display: block;
}
.reactapp-ind-name {
    font-size: 12px;
    font-weight: 600;
    color: #0D1B2A;
    margin-bottom: 4px;
}
.reactapp-ind-desc {
    font-size: 11px;
    color: #718096;
    line-height: 1.5;
}

.reactapp-process-list {
    padding-top: 8px;
}
.reactapp-process-step {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #E2E8F0;
    align-items: flex-start;
}
.reactapp-process-step--last {
    border-bottom: none;
}
.reactapp-process-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #CBD5E0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #1A56A0;
    flex-shrink: 0;
    margin-top: 2px;
}
.reactapp-process-title {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 4px;
}
.reactapp-process-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 0;
}

.reactapp-faq-accordion {
    margin-top: 8px;
}
.reactapp-faq-panel {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.reactapp-faq-heading {
    background-color: transparent;
    border-bottom: none;
    padding: 0;
    border-radius: 8px;
}
.reactapp-faq-question {
    margin: 0;
    font-size: 14px;
}
.reactapp-faq-question a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    color: #0D1B2A;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s ease;
    border-radius: 8px;
}
.reactapp-faq-question a:hover,
.reactapp-faq-question a:focus {
    color: #1A56A0;
    text-decoration: none;
    background-color: transparent;
}
.reactapp-faq-question a[aria-expanded="true"] {
    color: #1A56A0;
    border-bottom: 1px solid #E2E8F0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.reactapp-faq-icon {
    font-size: 16px;
    color: #1A56A0;
    flex-shrink: 0;
    margin-top: 1px;
}
.reactapp-faq-body {
    border-top: none;
}
.reactapp-faq-answer {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.75;
    padding: 14px 18px 16px 44px;
}

.reactapp-cta-band {
    background-color: #0D1B2A;
    padding: 60px 0;
}
.reactapp-cta-row {
    display: flex;
    align-items: center;
}
.reactapp-cta-heading {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 10px;
}
.reactapp-cta-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
    max-width: 480px;
}
.reactapp-cta-right {
    text-align: right;
}
.reactapp-cta-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
    margin-bottom: 0;
}
.reactapp-cta-contact i {
    margin-right: 4px;
}
.reactapp-cta-contact a {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}
.reactapp-cta-contact a:hover {
    color: #ffffff;
}

@media (max-width: 991px) {
    .reactapp-hero-heading {
        font-size: 30px;
    }
    .reactapp-hero {
        padding: 48px 0 40px;
    }
    .reactapp-hero-left {
        margin-bottom: 36px;
    }
    .reactapp-hero-right {
        padding-left: 15px;
    }
    .reactapp-why-left {
        padding-right: 15px;
        margin-bottom: 32px;
    }
    .reactapp-section-heading {
        font-size: 24px;
    }
    .reactapp-cta-left {
        margin-bottom: 24px;
    }
    .reactapp-cta-right {
        text-align: center;
    }
    .reactapp-trust-divider {
        display: none;
    }
    .reactapp-trust-inner {
        gap: 6px 0;
    }
    .reactapp-trust-item {
        padding: 4px 12px;
    }
    .reactapp-cta-row {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .reactapp-cta-contact {
        text-align: center;
    }
    .reactapp-cta-sub {
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .reactapp-hero {
        padding: 36px 0 32px;
    }
    .reactapp-hero-heading {
        font-size: 26px;
    }
    .reactapp-hero-sub {
        font-size: 14px;
    }
    .reactapp-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .reactapp-btn-lg {
        width: 100%;
        justify-content: center;
    }
    .reactapp-section {
        padding: 48px 0;
    }
    .reactapp-section-heading {
        font-size: 22px;
    }
    .reactapp-svc-col,
    .reactapp-project-col,
    .reactapp-why-us-col,
    .reactapp-ind-col {
        padding-bottom: 12px;
    }
    .reactapp-cta-band {
        padding: 40px 0;
    }
    .reactapp-cta-heading {
        font-size: 22px;
    }
    .reactapp-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .reactapp-footer-bottom-links {
        gap: 14px;
    }
    .reactapp-stat-box {
        padding: 14px 10px;
    }
    .reactapp-stat-num {
        font-size: 22px;
    }
}
@media (max-width: 480px) {
    .reactapp-hero-heading {
        font-size: 22px;
    }
    .reactapp-faq-answer {
        padding-left: 18px;
    }
    .reactapp-industries-grid .col-xs-6 {
        width: 50%;
    }
}
.reactapp-hero-heading-accent{
    color: #1A56A0;
}
.appdevicon{
    background: #E3F8F0!important;
}
.appdevicon i{
    color: #0E9F6E!important;
}
.reactapp-platforms-grid {
    margin-top: 8px;
}

.reactapp-platform-col {
    padding-bottom: 20px;
}
.reactapp-platform-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px 20px;
    height: 100%;
    position: relative;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.reactapp-platform-card:hover {
    border-color: #B5D4F4;
    transform: translateY(-2px);
}
.reactapp-platform-card--featured {
    border-color: #1A56A0;
    border-width: 2px;
}
.reactapp-platform-card--hire {
    background-color: #F7F9FC;
}
.reactapp-featured-badge {
    position: absolute;
    top: -1px;
    right: 16px;
    background-color: #1A56A0;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 0 0 6px 6px;
}
.reactapp-featured-badge i.fa.fa-star {
    color: #fff;
}
.reactapp-featured-badge i {
    margin-right: 3px;
    font-size: 9px;
}
.reactapp-platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.reactapp-platform-icon i {
    font-size: 22px;
}
.reactapp-platform-icon--ios {
    background-color: #E8E8EA;
}
.reactapp-platform-icon--ios i {
    color: #1C1C1E;
}
.reactapp-platform-icon--android {
    background-color: #E6F4EA;
}
.reactapp-platform-icon--android i {
    color: #3DDC84;
}
.reactapp-platform-icon--rn {
    background-color: #E8F4FF;
}
.reactapp-platform-icon--rn i {
    color: #61DAFB;
}
.reactapp-platform-icon--flutter {
    background-color: #E3F2FD;
}
.reactapp-platform-icon--flutter i {
    color: #027DFD;
}
.reactapp-platform-icon--custom {
    background-color: #EBF3FB;
}
.reactapp-platform-icon--custom i {
    color: #1A56A0;
}
.reactapp-platform-icon--hire {
    background-color: #E3F8F0;
}
.reactapp-platform-icon--hire i {
    color: #0E9F6E;
}
.reactapp-platform-title {
    font-size: 15px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 8px;
}
.reactapp-platform-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 12px;
}
.reactapp-platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}
.reactapp-ptag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background-color: #EEF2F7;
    color: #4A5568;
    border-radius: 4px;
}
.reactapp-platform-link {
    font-size: 13px;
    font-weight: 600;
    color: #1A56A0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.15s ease;
}
.reactapp-platform-link:hover {
    gap: 8px;
    color: #2E7DD1;
}

.reactapp-choose-left {
    padding-right: 40px;
}
.reactapp-choose-right {
    padding-top: 8px;
}
.reactapp-choose-tabs {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
}
.reactapp-tab-nav {
    border-bottom: 1px solid #E2E8F0;
    background-color: #F7F9FC;
    margin: 0;
    display: flex;
}
.reactapp-tab-nav > li {
    flex: 1;
    margin-bottom: 0;
}
.reactapp-tab-nav > li > a {
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 12px 8px;
    text-align: center;
    margin-right: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.reactapp-tab-nav > li > a:hover {
    background-color: transparent;
    border-color: transparent;
    color: #1A56A0;
}
.reactapp-tab-nav > li.active > a,
.reactapp-tab-nav > li.active > a:hover,
.reactapp-tab-nav > li.active > a:focus {
    color: #1A56A0;
    background-color: #ffffff;
    border: none;
    border-bottom: 3px solid #1A56A0;
}
.reactapp-tab-nav > li > a i {
    display: block;
    font-size: 18px;
    margin-bottom: 3px;
}
.reactapp-tab-content {
    padding: 24px 20px;
    background-color: #ffffff;
}
.reactapp-tab-pane {
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.reactapp-tab-heading {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 14px;
}
.reactapp-choose-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.reactapp-choose-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #4A5568;
    line-height: 1.6;
    padding: 6px 0;
    border-bottom: 1px solid #F0F4F8;
}
.reactapp-choose-list li:last-child {
    border-bottom: none;
}
.reactapp-choose-list li i {
    color: #0E9F6E;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.reactapp-tab-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
}
.reactapp-tech-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    background-color: #EBF3FB;
    color: #1A56A0;
    border-radius: 4px;
}
.reactapp-tab-link {
    font-size: 12px;
    font-weight: 600;
    color: #1A56A0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.reactapp-tab-link:hover {
    color: #2E7DD1;
}

/*-------- React Native App Development css End -------*/
/*-------- About-us css Start -------*/
html.aboutpg {
    scroll-behavior: smooth;
}
html.aboutpg body {
    font-size: 16px;
    line-height: 1.8;
    color: #1A2030;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}
.aboutpg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #1A56A0;
    margin-bottom: 14px;
}
.aboutpg-eyebrow i {
    font-size: 13px;
}
.aboutpg-eyebrow--center {
    justify-content: center;
}
.aboutpg-section-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 14px;
}
.aboutpg-section-intro {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.75;
    margin-bottom: 20px;
}
.aboutpg-section-body {
    font-size: 14px;
    color: #4A5568;
    line-height: 1.75;
    margin-bottom: 16px;
}
.aboutpg-intro-center {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.aboutpg-section-header {
    margin-bottom: 40px;
}

.aboutpg-btn-primary,
.aboutpg-btn-outline,
.aboutpg-btn-white,
.aboutpg-btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.aboutpg-btn-primary {
    background-color: #1A56A0;
    color: #ffffff;
    border-color: #1A56A0;
}
.aboutpg-btn-primary:hover,
.aboutpg-btn-primary:focus {
    background-color: #2E7DD1;
    border-color: #2E7DD1;
    color: #ffffff;
    transform: translateY(-1px);
}
.aboutpg-btn-outline {
    background-color: transparent;
    color: #1A56A0;
    border-color: #B5D4F4;
}
.aboutpg-btn-outline:hover,
.aboutpg-btn-outline:focus {
    background-color: #EBF3FB;
    border-color: #1A56A0;
    color: #1A56A0;
}
.aboutpg-btn-white {
    background-color: #ffffff;
    color: #1A56A0;
    border-color: #ffffff;
}
.aboutpg-btn-white:hover,
.aboutpg-btn-white:focus {
    background-color: #EBF3FB;
    color: #1A56A0;
}
.aboutpg-btn-outline-light {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
}
.aboutpg-btn-outline-light:hover,
.aboutpg-btn-outline-light:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}
.aboutpg-btn-lg {
    font-size: 14px;
    padding: 13px 26px;
}

.aboutpg-hero {
    padding: 80px 0 72px;
    background-color: #ffffff;
    border-bottom: 1px solid #E2E8F0;
}
.aboutpg-hero-heading {
    font-size: 36px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 18px;
}
.aboutpg-hero-accent {
    color: #1A56A0;
}
.aboutpg-hero-sub {
    font-size: 16px;
    color: #4A5568;
    line-height: 1.8;
    max-width: 620px;
    margin-bottom: 32px;
}
.aboutpg-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aboutpg-stats-bar {
    background-color: #F7F9FC;
    border-bottom: 1px solid #E2E8F0;
    padding: 0;
}
.aboutpg-stats-row {
    margin: 0;
}
.aboutpg-stat-col {
    padding: 0;
}
.aboutpg-stat-box {
    padding: 24px 20px;
    text-align: center;
}
.aboutpg-stat-box--bordered {
    border-left: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
}
.aboutpg-stat-num {
    font-size: 30px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1;
    margin-bottom: 5px;
}
.aboutpg-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #718096;
}

.aboutpg-section {
    padding: 72px 0;
}
.aboutpg-section--alt {
    background-color: #F7F9FC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.aboutpg-who-row {
    display: flex;
    align-items: flex-start;
}
.aboutpg-who-left {
    padding-right: 20px;
}
.aboutpg-values-list {
    display: flex;
    flex-direction: column;
}
.aboutpg-value-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #E2E8F0;
    align-items: flex-start;
}
.aboutpg-value-item--last {
    border-bottom: none;
}
.aboutpg-value-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.aboutpg-value-icon i {
    font-size: 18px;
    color: #1A56A0;
}
.aboutpg-value-title {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 6px;
}
.aboutpg-value-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 0;
}

.aboutpg-trust-bar {
    background-color: #0D1B2A;
    padding: 14px 0;
}
.aboutpg-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.aboutpg-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 18px;
}
.aboutpg-trust-item i {
    color: #0E9F6E!important;
    font-size: 13px;
}
.aboutpg-trust-divider {
    width: 1px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.15);
}

.aboutpg-founders-row {
    display: flex;
    align-items: stretch;
}
.aboutpg-founder-col {
    padding-bottom: 24px;
}
.aboutpg-founder-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aboutpg-founder-photo-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #EEF2F7;
    padding-left: 40%;
    padding-right: 10%;
}
.aboutpg-founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.aboutpg-founder-body {
    padding: 24px 24px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.aboutpg-founder-meta {
    margin-bottom: 16px;
}
.aboutpg-founder-name {
    font-size: 18px;
    font-weight: 700;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 6px;
}
.aboutpg-founder-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1A56A0;
    background-color: #EBF3FB;
    padding: 3px 10px;
    border-radius: 4px;
}
.aboutpg-founder-title i {
    font-size: 11px;
}
.aboutpg-founder-bio {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.75;
    margin-bottom: 12px;
}
.aboutpg-founder-social {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
    display: flex;
    gap: 10px;
}
.aboutpg-social-link {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A56A0;
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.aboutpg-social-link:hover {
    background-color: #1A56A0;
    color: #ffffff;
}

.aboutpg-work-grid {
    margin-top: 8px;
}
.aboutpg-work-col {
    padding-bottom: 20px;
}
.aboutpg-work-card {
    display: block;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    background-color: #ffffff;
    text-decoration: none;
    color: inherit;
}
.aboutpg-work-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    color: inherit;
    text-decoration: none;
}
.aboutpg-work-thumb {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.aboutpg-work-thumb--1 { background: linear-gradient(135deg, #0D1B2A 0%, #1A56A0 100%); }
.aboutpg-work-thumb--2 { background: linear-gradient(135deg, #0A2342 0%, #0E9F6E 100%); }
.aboutpg-work-thumb--3 { background: linear-gradient(135deg, #1A2E44 0%, #2E7DD1 100%); }
.aboutpg-work-thumb--4 { background: linear-gradient(135deg, #1A1A2E 0%, #6C5CE7 100%); }
.aboutpg-work-thumb--5 { background: linear-gradient(135deg, #0A2E1A 0%, #00B894 100%); }
.aboutpg-work-thumb--6 { background: linear-gradient(135deg, #2D3436 0%, #E17055 100%); }
.aboutpg-work-initials {
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
}
.aboutpg-work-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.40);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.aboutpg-work-body {
    padding: 16px 18px 18px;
}
.aboutpg-work-title {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 5px;
}
.aboutpg-work-desc {
    font-size: 12px;
    color: #718096;
    line-height: 1.6;
    margin-bottom: 10px;
}
.aboutpg-work-link {
    font-size: 12px;
    font-weight: 600;
    color: #1A56A0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.15s ease;
}
.aboutpg-work-card:hover .aboutpg-work-link {
    gap: 8px;
}
.aboutpg-work-more {
    margin-top: 20px;
}

.aboutpg-offices-grid {
    margin-top: 8px;
}
.aboutpg-office-col {
    padding-bottom: 20px;
}
.aboutpg-office-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    position: relative;
    transition: border-color 0.18s ease;
}
.aboutpg-office-card:hover {
    border-color: #B5D4F4;
}
.aboutpg-office-card--hq {
    border-color: #1A56A0;
    border-width: 2px;
}
.aboutpg-office-flag {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.aboutpg-office-flag i {
    font-size: 16px;
    color: #1A56A0;
}
.aboutpg-office-hq-badge {
    position: absolute;
    top: -1px;
    right: 14px;
    background-color: #1A56A0;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
}
.aboutpg-office-country {
    font-size: 15px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 12px;
}
.aboutpg-office-details {
    list-style: none;
    padding: 0;
    margin: 0;
}
.aboutpg-office-details li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}
.aboutpg-office-details i {
    color: #1A56A0;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}
.aboutpg-office-details a {
    color: #4A5568;
    transition: color 0.15s ease;
}
.aboutpg-office-details a:hover {
    color: #1A56A0;
}

.aboutpg-cta-band {
    background-color: #0D1B2A;
    padding: 64px 0;
}
.aboutpg-cta-row {
    display: flex;
    align-items: center;
}
.aboutpg-cta-heading {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 10px;
}
.aboutpg-cta-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
    max-width: 500px;
}
.aboutpg-cta-left {
    margin-bottom: 0;
}
.aboutpg-cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.aboutpg-values-grid {
    margin-top: 8px;
}
.aboutpg-cv-col {
    padding-bottom: 20px;
}
.aboutpg-cv-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.aboutpg-cv-card:hover {
    border-color: #B5D4F4;
    transform: translateY(-2px);
}
.aboutpg-cv-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #EBF3FB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.aboutpg-cv-icon i {
    font-size: 20px;
    color: #1A56A0;
}
.aboutpg-cv-title {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 8px;
}
.aboutpg-cv-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 0;
}

.aboutpg-testi-grid {
    margin-top: 8px;
}
.aboutpg-testi-col {
    padding-bottom: 20px;
}
.aboutpg-testi-card {
    background-color: #F7F9FC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aboutpg-testi-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}
.aboutpg-testi-stars i {
    font-size: 13px;
    color: #F6AD55;
}
.aboutpg-testi-quote {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 18px;
    flex: 1;
}
.aboutpg-testi-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
}
.aboutpg-testi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #1A56A0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aboutpg-testi-info {
    flex: 1;
}
.aboutpg-testi-name {
    font-size: 13px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.3;
}
.aboutpg-testi-role {
    font-size: 11px;
    color: #718096;
}
.aboutpg-testi-source {
    font-size: 11px;
    font-weight: 600;
    color: #1A56A0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.aboutpg-testi-source:hover {
    color: #2E7DD1;
}
.aboutpg-testi-source i {
    font-size: 10px;
}
.aboutpg-testi-footer {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.aboutpg-testi-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aboutpg-testi-rating-score {
    font-size: 28px;
    font-weight: 700;
    color: #0D1B2A;
    line-height: 1;
}
.aboutpg-testi-rating-score span {
    font-size: 16px;
    font-weight: 500;
    color: #718096;
}
.aboutpg-testi-rating-stars {
    display: flex;
    gap: 2px;
}
.aboutpg-testi-rating-stars i {
    font-size: 14px;
    color: #F6AD55;
}
section#aboutpg-testimonials i.fa.fa-star {
    color: #F6AD55 !important;
}
.aboutpg-testi-rating-label {
    font-size: 12px;
    font-weight: 500;
    color: #718096;
}

.aboutpg-models-right {
    padding-top: 8px;
}
.aboutpg-model-card {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #E2E8F0;
    align-items: flex-start;
}
.aboutpg-model-card--last {
    border-bottom: none;
}
.aboutpg-model-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aboutpg-model-icon i {
    font-size: 18px;
    color: #1A56A0;
}
.aboutpg-model-title {
    font-size: 15px;
    font-weight: 600;
    color: #0D1B2A;
    margin-top: 0;
    margin-bottom: 6px;
}
.aboutpg-model-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.65;
    margin-bottom: 10px;
}
.aboutpg-model-tag {
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    color: #1A56A0;
    background-color: #EBF3FB;
    padding: 3px 10px;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .aboutpg-cta-row,
    .aboutpg-founders-row,
    .aboutpg-who-row {
        flex-direction: column;
    }
    .aboutpg-hero-heading {
        font-size: 28px;
    }
    .aboutpg-who-left {
        padding-right: 15px;
        margin-bottom: 32px;
    }
    .aboutpg-cta-right {
        align-items: flex-start;
        margin-top: 24px;
    }
    .aboutpg-trust-divider {
        display: none;
    }
    .aboutpg-stat-box--bordered {
        border-left: none;
        border-right: none;
        border-top: 1px solid #E2E8F0;
        border-bottom: 1px solid #E2E8F0;
    }
}

@media (max-width: 767px) {
    .aboutpg-hero {
        padding: 40px 0 32px;
    }
    .aboutpg-hero-heading {
        font-size: 24px;
    }
    .aboutpg-hero-sub {
        font-size: 14px;
    }
    .aboutpg-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .aboutpg-btn-lg {
        width: 100%;
        justify-content: center;
    }
    .aboutpg-section {
        padding: 48px 0;
    }
    .aboutpg-section-heading {
        font-size: 22px;
    }
    .aboutpg-founder-photo-wrap {
        height: 200px;
    }
    .aboutpg-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .aboutpg-footer-bottom-links {
        gap: 14px;
    }
    .aboutpg-cta-right {
        flex-direction: column;
        width: 100%;
    }
    .aboutpg-stat-num {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .aboutpg-hero-heading {
        font-size: 21px;
    }
    .aboutpg-stat-box {
        padding: 16px 10px;
    }
}



/*-------- About-us css End -------*/