/*===============================================
Template Name: polytia - SEO Marketing Agency HTML5 Template
Author:  https://Templatemonstar.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: polytia
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. polytia Header Top Menu Area Css
02. polytia Nav Menu Area Css 
03. polytia Slider Area Css
04. polytia Section Title Css
05. polytia Service Area css
06. polytia About Area Css
07. polytia Counter Area Css
08. polytia Case Study Area Css
09. polytia Testimonial Area Css
10. polytia Process Area Css
11. polytia Team Area Css
12. polytia Faq Area Css
13. polytia Brand Section Css
14. polytia Call Do Section Css
15. polytia Form Box Css
16. polytia Skill Area Css
17. polytia Blog Area Css
18. polytia footer Area Css
19. polytia Subscribe Area Css
20. polytia Lines CSS
21. polytia Prossess Ber Css
22. polytia Scrollup Section
23. polytia Bounce Animation Css 
24. polytia Animation Dance
25. polytia Breadcumb Area Css
26. polytia abouts_areas Css
27. polytia Feture-Area Css
28. polytia Pricing Section Css
29. polytia Web Development Section CSS
30. polytia Contact  US Css
31. polytia Blog Sidber Widget CSS
32. polytia Case Study Details Css
33. polytia Search Box Css
34. polytia Loader Css
=======================*/



/*==============header-main-area-start=====================*/

.digital-marketing_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    padding: 0 60px 0;
    background-color: rgb(255, 255, 255);
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .digital-marketing_menu>ul>li>a {
    color: #101010;
}

.sticky .main-btn {
    background: linear-gradient(90deg, rgba(115,71,242,1) 0%, rgba(238,83,248,1) 100%);
}


/* polytia Menu Css*/
nav.digital-marketing_menu {
    text-align: right;
    position: relative;
    z-index: 1;
    margin-left: 11px;
}

.digital-marketing_menu ul {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.digital-marketing_menu>ul>li {
    display: inline-block;
    position: relative;
    margin-right: 33px;
    z-index: 1;
}


.digital-marketing_menu>ul>li>a {
    text-decoration: none;
    position: relative;
    font-size: 16px;
    display: block;
    padding: 37px 0;
    transition: .5s;
    color: rgb(7, 7, 7);
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
}


.digital-marketing_menu>ul>li>a:hover{
    color: rgb(255, 67, 1);
}


nav.digital-marketing_menu span {
    font-size: 11px;
    font-family: 'Barlow', sans-serif;
}


/*menu button*/
 
.header-src-btn {
    display: inline-block;
    position: relative;
    padding-right: 50px;
    top: 10px;
}


.search-box-btn.search-box-outer {
    position: absolute;
    bottom: 4px;
    right: 20px;
}

.search-box-btn.search-box-outer i {
    font-size: 15px;
    display: inline-block;
    color: #0a2c3d;
    cursor: pointer;
}



/*Style Two Nav Menu*/

.style-two.digital-marketing_nav_manu {
    border-bottom: 1px solid rgba(255,255,255,0.10196078431372549);
}

.style-two .digital-marketing_menu>ul>li>a {
    color: #fff;

}

/*style two btn*/

.style-two .header-button a {
    background: rgba(16,18,16,0);
    
}

.header-main-button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 這是重點：重新定義 a 標籤，讓它變成一個橙色膠囊 */
.header-main-button a {
    display: inline-flex;
    align-items: center;
    background-color: rgb(255, 67, 1); /* 保持你原本的橙色 */
    padding: 8px 20px;
    border-radius: 50px;
    gap: 15px;
    transition: .3s;
    position: relative;
    top: 0; /* 修正原本的 22px 偏移，讓它居中 */
    text-decoration: none;
}

/* 移除原本 CSS 裡的 ::before 黑影動畫，否則圖標背景會變黑 */
.header-main-button a::before {
    display: none !important;
}

/* 設置圖標大小和白色濾鏡 */
.header-main-button a img {
    width: 22px;
    height: auto;
    filter: brightness(0) invert(1); /* 讓黑色圖標變白色 */
}


/* --- 1. 放大导航菜单文字 (Home, Service等) --- */
.nav_scroll li a {
    font-size: 18px !important;   /* 增大字体，建议 18px-20px */
    font-weight: 500 !important;  /* 稍微加粗，更有质感 */
}

/* --- 2. 保持橙色背景大小，仅放大内部图标 --- */
.header-main-button.upper a img {
    width: 26px !important;       /* 图标从 20px 放大到 26px */
    height: auto !important;
    margin: 0 !important;
    filter: brightness(0) invert(1); /* 确保图标是白色的 */
}

/* --- 3. 微调橙色背板内部的间距，防止图标挤在一起 --- */
/* 注意：这里的选择器对应我们之前新建的 div 容器 */
.header-main-button.upper div {
    gap: 10px !important;         /* 缩小图标之间的距离，给图标腾空间 */
    padding: 8px 15px !important;  /* 固定内边距，锁死橙色块的高度不被撑大 */
    display: inline-flex !important;
    align-items: center !important;
}

/* 鼠标悬停时的动效（可选） */
.header-main-button.upper a:hover img {
    transform: scale(1.15);       /* 悬停时图标放大 15% */
    transition: 0.2s;
}



/*** Sub Menu Style 
==========================***/

.digital-marketing_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: #fff;
    padding: 0;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid linear-gradient(90deg, rgba(115,71,242,1) 0%, rgba(238,83,248,1) 100%);
    opacity: 0;
}

.digital-marketing_menu ul li:hover>.sub-menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

.digital-marketing_menu ul .sub-menu li {
    position: relative;
}

.digital-marketing_menu ul .sub-menu li a {
    text-decoration: none;
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .1s;
    transition: .1s;
    visibility: inherit !important;
    color: #101210 !important;
}

.digital-marketing_menu ul .sub-menu li:hover>a,
.digital-marketing_menu ul .sub-menu .sub-menu li:hover>a,
.digital-marketing_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.digital-marketing_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
    background-color: rgb(255, 65, 0);
    color: #fff !important;
}

/* sub menu 2 
=================*/

.digital-marketing_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.digital-marketing_menu ul .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

/* sub menu 3 
==================*/

.digital-marketing_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.digital-marketing_menu ul .sub-menu .sub-menu .sub-menu {
    right: 100%;
    left: auto;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.digital-marketing_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

ul.sub-menu li a span {
    background-color: rgb(255, 65, 0);
    padding: 5px 10px;
    color: #fff;
    opacity: 1;
    font-family: 'Barlow', sans-serif;
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span{
    background: rgba(255,255,255, 0.20);
}

/* sub menu 4 
====================*/

.digital-marketing_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}


.digital-marketing_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

.digital-marketing_menu li a:hover:before {
    width: 101%;
}

.digital-marketing_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.digital-marketing_nav_manu.sticky .main_sticky {
    display: inherit;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

/*=============sticky-header-area-end================*/



/*=============start-home-section================*/

.home-section {
    background-image: url(../image/home-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 140px 0 90px;
}

.home-title h1 {
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    color: rgb(7, 7, 7);
    font-family: 'Barlow', sans-serif;
}
  
.home-button {
    text-align: center;
}


.home-button a {
    display: inline-block;
    font-size: 16px;
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
    border: 2px solid rgb(255, 67, 1);
    padding: 16px 37px;
    font-family: 'Barlow', sans-serif;
    margin: 33px 0 80px;
    transition: .5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.home-button a::before{
    position: absolute;
    content: "";
    top: 0px;
    height: 120%;
    left: -25%;
    width: 0%;
    background: #101010;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: -1;
    transition: .5s;
}

.home-button a:hover:before {
    width: 200%;
}

.upper a span{
    position: relative;
    top: 2px;
    left: 3px;
    transition: .5s;
}

.home-thumb {
    text-align: center;
    position: relative;
    z-index: 1;
}


.home-shape{
    position: relative;
  
}

.home-shape img {
    position: absolute;
    top: -740px;
    left: 70px;
}

.home-shape2{
    position: relative;
    z-index: 1;
}

.home-shape2 img {
    position: absolute;
    right: 33px;
    top: -422px;
}


.bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate1 {
    animation-name: float-bob;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes float-bob {
    0% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px); }
    50% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px); }
    100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px); } }


/*=============end-home-section================*/  


  

/*================start-service-section===================*/

.service-section {
    padding: 0px 0 100px;
}

.service-title h1 {
    font-size: 45px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    margin-bottom: 70px;
    font-family: 'Barlow', sans-serif;
}

.service-disc p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    padding: 40px 0 0;
    font-family: 'Barlow', sans-serif;
}

.service-single-box {
    padding: 75px 0 45px 40px;
    border-radius: 10px;
    box-shadow: 0px 5px 20px 0px rgba(98, 26, 255, 0.07);
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-bottom: 30px;
}

.service-single-box::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgb(255, 65, 0);
    transition: .5s;
    border-radius: 10px;
    z-index: -1;
}

.service-single-box:hover:before{
    width: 100%;
}

.service-info span {
    font-size: 46px;
    font-weight: bold;
    color: rgb(255, 67, 1);
    margin-bottom: 18px;
    display: inline-block;
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.service-shape {
    position: relative;
}

.service-shape img {
    position: absolute;
    top: -60px;
}

.service-content h4 {
    font-size: 22px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.service-content p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    padding: 12px 0 0;
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.service-button a {
    display: inline-block;
    font-size: 16px;
    color: rgb(255, 67, 1);
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.service-single-box:hover .service-info span,
.service-single-box:hover .service-content h4,
.service-single-box:hover .service-content p,
.service-single-box:hover .service-button a{
    color: rgb(254, 254, 255);
}


/*================end-service-section===================*/

.breadcumb-area {
    background-image: url(../image/breadcum-img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 230px 0px 220px;
    margin: 0 0 50px;
}



.breadcumb-title h1 {
    font-size: 60px;
    color: rgb(254, 254, 255);
}





.breadcumb-content-menu {
    padding-top: 10px;
}

.breadcumb-content-menu ul li {
    display: inline-block;
    list-style: none;
}

.breadcumb-content-menu ul li a {
    color: rgb(254, 254, 255);
    font-size: 20px;
    font-weight: 600;
}

.breadcumb-content-menu ul li a i{
    margin-left: 10px;
}

.breadcumb-content-menu ul li span {
    color: rgb(255, 67, 1);
    font-size: 20px;
    font-weight: 500;
    margin-left: 10px;
}

.breadcumb-content-menu h1 {
    font-size: 38px;
    font-weight: 600;
    margin: 35px 0 0;
    color: rgb(254, 254, 255);
    font-family: 'Barlow', sans-serif;
}

.breadcumb-content-menu ul li {
    color: #fff;
}


/*=====================start-contact-area=====================*/

.contact-map iframe {
    width: 100%;
    height: 250px;
    margin-bottom: 40px;
}


.contact-title h3 {
    text-align: center;
    font-size: 35px;
    margin: 35px 0 60px;
}

.contact-sub-title h4 {
    margin-bottom: 15px;
}

.contact-single-box {
    margin-bottom: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
    transition: 0.5s;
    padding: 22px 26px 28px;
}


.contact-sub-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-sub-content ul li p {
    display: inline-block;
    margin: 0;
    padding-left: 5px;
}

.contact-sub-content ul li a {
    display: inline-block;
    font-size: 16px;
    margin: 5px;
}

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

.contact-social ul li {
    display: inline-block;
}


.contact-social ul li a {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    margin-left: 12px;
    height: 35px;
    width: 35px;
    line-height: 35px;
    color: rgb(255, 67, 1);
    border-radius: 100%;
    border: 1px solid;
    text-align: center;
    transition: .5s;
    margin-top: 20px;
}

.contact-social ul li a:hover{
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
}


.blog-leave-area {
    padding: 20px 0 250px;
}

.single-blog-box{
    margin-bottom: 40px;
	border-radius: 8px;
	background: #fff; 
	border: 1px solid #e6e6e6;
	box-shadow: 0 0 5px rgba(0,0,0,0.10);
	transition: 0.5s;
    padding: 22px 26px 28px;
}

.single-blog-box:hover{
    box-shadow: 6px 5px 30px rgba(0,0,0,0.12);
    border-color: transparent;
}

.blog-leave-title h3 {
    font-size: 30px;
    margin-bottom: 20px;
}



.form-box{
    margin-bottom: 30px;
}

.form-box input {
	width: 100%;
	height: 54px;
	padding-left: 20px;
	background: #fff;
	border-radius: 3px;
	transition: .5s;
	border: 1px solid #EEECFE;
}

.form-box textarea {
	width: 100%;
	padding-left: 20px;
	padding-top: 15px;
	border: 1px solid #EEECFE;
    height: 150px; 
	outline: 0;
	transition: .5s;
	background: #fff;
	margin-top: 7px;
}

.form-button {
	text-align: center;
	margin-top: 25px;
    transition: .5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.form-button button {
	display: inline-block;
	color: rgb(254, 254, 255);
	font-weight: 600;
	padding: 15px 35px;
	background-color: rgb(255, 67, 1);
    border: 2px solid rgb(255, 67, 1);
	text-transform: capitalize;
	transition: 0.5s;
	font-size: 18px;
	position: relative;
	z-index: 1;
	border-radius: 5px;
	overflow: hidden;
}


.form-button button:before {
    position: absolute;
    content: "";
    top: 0px;
    height: 120%;
    left: -25%;
    width: 0%;
    background: #101010;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: -1;
    transition: .5s;
}


.form-button button:hover:before {
    width: 200%;
}

/*=================end-contact-area===================*/



/*==================start-blog-list-section==============*/

.single-blog-list.Categories {
    margin: 70px 0 0px;
}




/*=================end-blog-list-section====================*/




/*=====================start-blog-details-section==================*/

.blog-description h3 a {
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 30px;
    font-family: 'Barlow', sans-serif;
}

.blog-area-details {
    padding-top: 50px;
}

.blog-single-details {
	margin-bottom: 40px;
	border-radius: 8px;
    background-color: rgb(254, 254, 255);
	border: 1px solid #e6e6e6;
	box-shadow: 0 0 5px rgba(0,0,0,0.10);
	transition: 0.5s;
	 padding: 0; 
}

.blog-details-thumb img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.blog-details-content {
    overflow: visible;
    padding: 22px 26px 28px;
    box-shadow: 0 3px 19px rgb(0 0 0 / 8%);
}

.blog-details-meta {
    margin-bottom: 25px;
}

.blog-details-meta span {
    margin-right: 40px;
}

.blog-details-meta a:hover {
    color: rgb(255, 67, 1);
}

.blog-details-inner h3 {
    font-size: 30px;
    margin: 20px 0 10px;
    font-family: 'Barlow', sans-serif;
}

.blog-details-social-icon {
    margin-top: 30px;
}

.blog-details-social-icon ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-details-social-icon ul li {
    display: inline-block;
}


.blog-details-social-icon ul li a {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    margin-left: 12px;
    height: 35px;
    width: 35px;
    line-height: 35px;
    color: rgb(255, 67, 1);
    border-radius: 100%;
    border: 1px solid;
    text-align: center;
    transition: .5s;
}

.blog-details-social-icon ul li a:hover{
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
}

.blog-list-left {
    margin-bottom: 40px;
    padding: 45px 30px 28px;
    border-radius: 8px;
    background-color: rgb(254, 254, 255);
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
}

.blog-form-field {
    display: block;
    position: relative;
    width: 90%;
}

.blog-list-left input[type="email"] {
    padding: 9px;
    border-radius: 8px;
    flex-grow: 1;
    min-width: 3em;
    color: rgb(97, 97, 97);
    border: 1px solid rgb(255, 67, 1);
    font-size: inherit;
    font-family: inherit;
    width: 76% !important;
    line-height: inherit;
}

p.blog-submit-button {
    color: rgb(254, 254, 255);
    border-radius: 3px;
    border: initial;
    position: absolute;
    padding: 0;
    right: -30px;
    top: 0;
}

.blog-list-left input[type="submit"] {
    color: rgb(254, 254, 255);
    border-radius: 3px;
    border: 1px solid rgb(255, 67, 1);
    background-color: rgb(255, 67, 1);
    padding: 8px 25px;
}

.single-widget-item {
    background-color: rgb(254, 254, 255);
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
    padding: 20px 20px 20px;
}

.recent-post-item {
    position: relative;
    z-index: 1;
}

.single-widget-item h2 {
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 15px;
    font-family: 'Barlow', sans-serif;
}

.recent-post-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-post-item ul li {
    display: block;
    margin-bottom: 15px;
    background: transparent;
    padding: 5px 20px 15px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #CED3D9;
}

.recent-post-item ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: rgb(255, 67, 1);
    transition: .5s;
    border-radius: 4px;
    z-index: -1;
}

.recent-post-item ul li:hover:before {
    width: 100%;
}

.recent-post-item ul li a {
    display: block;
    font-size: 16px;
    padding: 15px 0 0;
    font-family: 'Barlow', sans-serif;
}

.recent-post-item ul li a span{
    float: right;
   
}

.recent-post-item ul li:hover a{
    color: rgb(254, 254, 255);
}

.single-recent-post {
    background-color: rgb(254, 254, 255);
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
    padding: 10px 15px 20px;
    margin: 50px 0;
    transition: .5s;
}

.recent-post-title h3 {
    font-size: 30px;
    font-weight: 700;
    margin: 15px 0 20px;
    font-family: 'Barlow', sans-serif;
}

.rpost-thumb a img {
    margin-right: 20px;
    margin-bottom: 40px;
    display: inline-block;
}

.rpost-content h4 a {
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    display: inline-block;
    transition: .5s;
}

.rpost-content span {
    font-size: 15px;
    padding: 6px 0 0;
    display: inline-block;
}

.rpost-content {
    margin-top: -15px;
}

.single-recent-post:hover {
    box-shadow: 6px 5px 30px rgba(0,0,0,0.12);
    border-color: transparent;
}

.rpost-content h4 a:hover {
    color: rgb(255, 67, 1);
}

.widget-sidebar-box {
    background-color: rgb(254, 254, 255);
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgba(0,0,0,0.10);
    padding: 10px 17px 20px;
}

.sidebar-title h4 {
    font-size: 24px;
    font-weight: 700;
    padding: 0 0 15px;
    font-family: 'Barlow', sans-serif;
}

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

.tag-item ul li {
    display: inline-block;
}

.tag-item a {
    display: inline-block;
    font-size: 16px;
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
    border: 2px solid rgb(255, 67, 1);
    padding: 10px 25px;
    font-family: 'Barlow', sans-serif;
    margin: 5px 3px 5px;
    transition: .5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tag-item a::before{
    position: absolute;
    content: "";
    top: 0px;
    height: 120%;
    left: -25%;
    width: 0%;
    background: #101010;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: -1;
    transition: .5s;
}

.tag-item a:hover:before {
    width: 200%;
}

/*===================end-blog-details-area=================*/


/*==================start-portfolio-details-section===================*/

.skill-content h5 {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Barlow', sans-serif;
}

.skill-content h1 {
    font-size: 40px;
    font-weight: 700;
    margin: 5px 0 20px;
    font-family: 'Barlow', sans-serif;
}

.prossess-ber-plugin span {
    font-size: 16px;
    font-weight: 700;
    color: rgb(97, 97, 97);
}

.barfiller {
    width: 100%;
    height: 12px;
    position: relative;
    margin-bottom: 25px;
    margin-top: 12px;
    border-radius: 5px;
    background-color: rgb(97, 97, 97);
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}

.barfiller .tipWrap { display: none; }

.barfiller .tip {
    font-size: 16px;
    left: 0px;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
    top: -39px;
    font-weight: 700;
    color: rgb(97, 97, 97);
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

span.fill {
    background-color: rgb(255, 67, 1) !important;
    border-radius: 5px;
}


.skill-button a {
    display: inline-block;
    font-size: 16px;
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
    border: 2px solid rgb(255, 67, 1);
    padding: 16px 37px;
    font-family: 'Barlow', sans-serif;
    margin: 33px 0 80px;
    transition: .5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.skill-button a::before{
    position: absolute;
    content: "";
    top: 0px;
    height: 120%;
    left: -25%;
    width: 0%;
    background: #101010;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: -1;
    transition: .5s;
}

.skill-button a:hover:before {
    width: 200%;
}

.skill-section {
    padding: 40px 0 80px;
}

.skill-thumb {
    text-align: center;
}

.skill-thumb img {
    position: relative;
    -webkit-animation: bounceHero 5s ease-in-out infinite;
	animation: bounceHero 5s ease-in-out infinite;
}

.skill-shape img {
    position: absolute;
    top: -220px;
    left: 35px;
}

.skill-shape.welcome-animation {
	position: relative;
	-webkit-animation: bounceHero 6s ease-in-out infinite;
	animation: bounceHero 6s ease-in-out infinite;
}

.skill-shape2 img {
    position: absolute;
    top: -190px;
    left: 180px;
}

.skill-shape2.welcome-animation{
    position: relative;
	-webkit-animation: bounceHero 8s ease-in-out infinite;
	animation: bounceHero 8s ease-in-out infinite;
}

.skill-shape3 img {
    position: absolute;
    left: 335px;
}

.skill-shape3.welcome-animation{
    position: relative;
	-webkit-animation: bounceHero 4s ease-in-out infinite;
	animation: bounceHero 4s ease-in-out infinite;
}


@-webkit-keyframes bounceHero {
    0% {
        top: 0px;
    }

    50% {
        top: 25px;
    }

    100% {
        top: 0px;
    }
}

@keyframes bounceHero {
    0% {
        top: 0px;
    }

    50% {
        top: 25px;
    }

    100% {
        top: 0px;
    }
}


/*==============end-portfolio-details-section===============*/



/*==================start-pricing-section===============*/

.pricing-section {
    background-color: #FFF7FF; 
    padding: 74px 0px 80px 0px;
}

.pricing-title{
    text-align: center;
}

.pricing-title h5 {
    display: inline-block;
    color: rgb(255, 67, 1);
    font-size: 17px;
    font-weight: 600;
}

.pricing-title h2 {
    color: rgb(7, 7, 7);
    font-size: 42px;
    font-weight: 700;
    font-family: 'Barlow', sans-serif;
    margin: 12px 0 25px;
}

.pricing-title h2 span{
    color: rgb(7, 7, 7);
    font-weight: 600;
}

.pricing-title p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(7, 7, 7);
    margin-bottom: 75px;
    font-family: 'Barlow', sans-serif;
}

.pricing-head {
    text-align: center;
    border-bottom: 1px solid rgba(30, 38, 109, 0.1);
    margin-bottom: 30px;
}

.pricing-single-box {
    position: relative;
    padding: 75px 40px 40px;
    background-color: #fff;
    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    z-index: 1;
    transition: .5s;
    margin-bottom: 30px;
}

.pricing-single-box::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: rgb(255, 67, 1);
    z-index: -1;
    border-radius: 10px;
    transition: .5s;
}


.pricing-head h5 {
    position: absolute;
    top: -10px;
    left: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
    transform: translateX(-50%);
    background-color: rgb(255, 67, 1);
    padding: 10px 36px;
    box-shadow: 0px 15px 50px 0px rgba(157, 35, 190, 0.2);
}

.pricing-head h3 {
    color: rgb(7, 7, 7);
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.pricing-head p {
    color: rgb(7, 7, 7);
    font-family: 'Barlow', sans-serif;
    margin: 9px 0 40px;
}

.pricing {
    margin-bottom: 30px;
}

.pricing .currency {
    color: rgb(7, 7, 7);
    font-size: 24px;
    font-weight: 700;
}

.pricing .tk {
    color: rgb(7, 7, 7);
    font-size: 50px;
    font-weight: 700;
}

.pricing .price-mon {
    color: rgb(7, 7, 7);
    font-size: 17px;
    font-weight: 400;
}

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

.pricing-boody ul li i {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: rgb(255, 67, 1);
    border-radius: 50%;
    margin-right: 6px;
}

.pricing-boody ul li {
    font-weight: 400;
    color: rgb(7, 7, 7);
    margin-bottom: 12px;
    font-family: 'Barlow', sans-serif;
}

.price-btn a {
    display: inline-block;
    color: rgb(7, 7, 7);
    font-weight: 500;
    font-family: 'Barlow', sans-serif;
    padding: 15px 30px;
    width: 100%;
    background-color: transparent;
    border: 1px solid rgb(255, 67, 1);
    border-radius: 30px;
    text-align: center;
    margin-top: 37px;
}

.pricing-single-box:hover:before{
    height: 100%;
 }

 .pricing-single-box:hover .pricing-head h3,
 .pricing-single-box:hover .pricing-head p,
 .pricing-single-box:hover .currency,
 .pricing-single-box:hover .tk,
 .pricing-single-box:hover .price-mon{
    color: #fff;
 }


 .pricing-single-box:hover .pricing-boody ul li{
    color: #fff;
 }

 .pricing-single-box:hover .price-btn a{
    color: #fff;
    background-color: rgb(7, 7, 7);
 }

/*==================end-pricing-section===============*/


/*
<--   Faq section Css -->
===============================================*/

.about-section.style-three {
    padding: 30px 0;
}

.faq-section {
    background: #fff;
    padding: 86px 0 85px;
}

.digital-content h1 {
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 18px;
    font-family: 'Barlow', sans-serif;
}

.digital-content p {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    font-family: 'Barlow', sans-serif;
}

/*accordion*/

.col-lg-6.col-md-6.faq-pd {
    padding: 0 30px 0 0;
}

.tab_container {
    overflow: hidden;
    padding: 20px 0 0;
}

h2.accordion-title {
    font-size: 30px;
    padding: 0 0 37px;
}

.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #101210!important;
    border-bottom: 1px solid rgba(19,17,37,0.15);
    padding: 27px 20px 20px 0px;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    padding: 0px 0px 20px 0px;
    margin: 0;
    border-bottom: 1px solid rgba(19,17,37,0.15);
}

.accordion li a i {
    float: right;
    transform: rotate(-90deg);
    transition: .5s;
    font-size: 20px;
}

.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  background-color: rgb(255, 67, 1);
  opacity: 1;
}

a.active i {
    transform: rotate(0deg) !important;
}

.accordion a.active {
    border-bottom: 0;
    padding: 25px 20px 15px 0px;
    color: rgb(255, 67, 1) !important;
}

/*==================team-section==============*/

.team_area {
    padding: 50px 0 60px;
}

.section_title h1 {
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 10px;
    font-family: 'Barlow', sans-serif;
}

.section_title p {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 35px;
    font-family: 'Barlow', sans-serif;
}

.single_team_title {
    padding: 0 10px 25px;
}

.single_team{
    margin-bottom: 30px;
	transition:.5s;
    border-radius: 10px;
    box-shadow: 0px 15px 50px 0px rgba(157, 35, 190, 0.2);
}
.single_team_thumb {
    position: relative;
	transition:.5s;
	
}
.single_team_thumb::before {
    position: absolute;
	content: "";
    left: 0;
    top: -30px;
    height: 100%;
    width: 100%;
    background: rgba(255,113,116,0.5);
    overflow: hidden;
	opacity:0;
	transition:.5s;
	border-radius:7px;
}
.single_team_thumb img{
	width:100%;
}
.single_team_title h4 {
    padding-bottom: 6px;
}
.single_team_icon {
    position: absolute;
    content: "";
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
	opacity:0;
	transition:.5s;
}
.single_team_icon a {
    color: #fff;
    text-align: center;
    margin: 0 4px;
}
.single_team:hover .single_team_thumb::before {
	opacity:1;
	top:0;
}
.single_team:hover .single_team_icon{
	opacity:1;
	top:50%;
}



/*================about-area-start===================*/

.about-area {
    background-image: url(../image/about-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0 0;
}
  
.about-title h5 {
    font-size: 17px;
    font-weight: 600;
    color: rgb(255, 67, 1);
    font-family: 'Barlow', sans-serif;
}

.about-title h1 {
    font-size: 42px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    padding: 6px 0 20px;
    font-family: 'Barlow', sans-serif;
}

.about-title p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    font-family: 'Barlow', sans-serif;
}

.sec-widget-element ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sec-widget-element ul li{
    font-size: 17px;
    font-weight: 500;
    color: rgb(97, 97, 97);
    font-family: 'Barlow', sans-serif;
}

.sec-widget-element ul li span {
    color: rgb(255, 67, 1);
    font-size: 20px;
    margin-right: 5px;
}

.about-button a {
    display: inline-block;
    font-size: 16px;
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
    border: 2px solid rgb(255, 67, 1);
    padding: 16px 37px;
    font-family: 'Barlow', sans-serif;
    margin: 33px 0 80px;
    transition: .5s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.about-button a::before{
    position: absolute;
    content: "";
    top: 0px;
    height: 120%;
    left: -25%;
    width: 0%;
    background: #101010;
    transform: skew(50deg);
    transition-duration: .6s;
    z-index: -1;
    transition: .5s;
}

.about-button a:hover:before {
    width: 200%;
}

.all-shape{
    position: relative;
}

.about-shape img {
    position: absolute;
    top: -135px;
    left: -120px;
}

.about-shape2 img {
    position: absolute;
    left: 130px;
    top: -140px;
}

/*================about-area-end===================*/



/**
======================================================
           <--  start-brand Section -->
======================================================**/

.brand-area {
    padding: 100px 0;
}

.brand-thumb {
    text-align: center;
    cursor: pointer;
    filter: grayscale(1);
    transition: .5s;
}

.owl-carousel .owl-item img {
    display: inline-block;
}


.brand-single-box {
	position: relative;
	text-align: center;
}


.brand-thumb:hover {
    filter: none;
}

/**
======================================================
         <-- end-brand Section -->
======================================================**/




/*================start-overview-section===================*/

.overview-section {
    background-image: url(../image/overview-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 105px 0;
}

.overview-title h5 {
    font-size: 17px;
    font-weight: 600;
    color: rgb(255, 67, 1);
    font-family: 'Barlow', sans-serif;
}

.overview-title h1 {
    font-size: 42px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    padding: 6px 0 40px;
    font-family: 'Barlow', sans-serif;
}

.overview-disc p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    padding: 40px 0 0;
    font-family: 'Barlow', sans-serif;
}

.overview-thumb img {
    width: 100%;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

/*================end-overview-section===================*/




/*==================start-portfolio-section===============*/

.portfolio-title h5 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: rgb(255, 67, 1);
    font-family: 'Barlow', sans-serif;
}

.portfolio-title h1 {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    color: rgb(7, 7, 7);
    padding: 6px 0 0px;
    font-family: 'Barlow', sans-serif;
}

.portfolio-title p {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: rgb(97, 97, 97);
    padding: 20px 0 75px;
    font-family: 'Barlow', sans-serif;
}

.portfolio-single-box {
    text-align: center;
    padding: 60px 0 20px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    position: relative;
    border-radius: 10px;
    transition: .5s;
    z-index: 1;
}

.portfolio-single-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgb(7, 7, 7);
    transition: .5s;
    border-radius: 10px;
    z-index: -1;
}

.portfolio-number p {
    font-size: 150px;
    color: rgb(254, 254, 255);
    font-weight: bold;
    text-shadow: -2px 0 #fee4de, 0 2px #fee4de, 2px 0 #fee4de, 0 -2px #fee4de;
    z-index: 268;
    transition: .5s;
    font-family: 'Barlow', sans-serif;
  }

  .portfolio-number p::after {
    position: absolute;
    content: "";
    top: 120px;
    left: 295px;
    height: 10px;
    width: 10px;
    background-color: rgb(255, 67, 1);
    z-index: -1;
}

  .portfolio-content h5 a {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    margin: 70px 0 15px;
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.portfolio-content p {
    font-size: 17px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    font-family: 'Barlow', sans-serif;
}

.portfolio-single-box:hover:before{
    width: 100%;
}

.portfolio-single-box:hover .portfolio-number p{
    color: rgb(255, 67, 1);
}

.portfolio-single-box:hover .portfolio-content h5 a,
.portfolio-single-box:hover .portfolio-content p{
    color: rgb(254, 254, 255);
}

/*==================end-portfolio-section===============*/



  

/*==================start-about-two-section===============*/

.about-two-section {
    padding: 100px 0;
}

.about-two-content h5 {
    font-size: 17px;
    font-weight: 600;
    color: rgb(255, 67, 1);
    font-family: 'Barlow', sans-serif;
}

.about-two-content h1 {
    font-size: 42px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    padding: 6px 0 0px;
    font-family: 'Barlow', sans-serif;
}

.about-two-content p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    padding: 20px 0 30px;
    font-family: 'Barlow', sans-serif;
}

.about-sub-thumb {
    display: inline-block;
}

.about-two-info {
    display: inline-block;
    margin: 0px 0px 0px 12px;
    position: relative;
    top: 15px;
}

.about-two-info a p {
    font-size: 18px;
    font-weight: 700;
    color: rgb(7, 7, 7);
    transition: .5s;
    position: relative;
    top: 30px;
    left: -20px;
    font-family: 'Barlow', sans-serif;
}

.about-two-disc p {
    font-size: 18px;
    font-weight: 400;
    color: rgb(97, 97, 97);
    font-family: 'Barlow', sans-serif;
    position: absolute;
    top: 160px;
    left: 20px;
}

.about-two-box{
    margin-bottom: 30px;
}

.about-two-thumb {
    padding: 25px 0 0;
    text-align: center;
}

.about-two-shape {
    position: relative;
}


.about-two-shape img {
    position: absolute;
    top: -115px;
    left: 85px;
}

.about-two-box:hover .about-two-info a p{
    color: rgb(255, 67, 1);
}

/*==================end-about-two-section===============*/


 
/*==================start-service-two-section===============*/

.service-two-section {
    padding: 90px 0 80px;
}

.cntr-bg-up {
    background-image: url(../image/subscribe-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 9px;
    padding: 80px 0;
}

.service-two-content h5 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: rgb(254, 254, 255);
    font-family: 'Barlow', sans-serif;
}

.service-two-content h1 {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    color: rgb(254, 254, 255);
    padding: 6px 0 0px;
    font-family: 'Barlow', sans-serif;
}

.service-two-button {
    text-align: center;
}

.service-two-button {
    text-align: center;
    padding: 45px 0 0;
}

.ply-btn {
    margin-right: 20px;
}

/*==================end-service-two-section===============*/



/*==================start-blog-section===============*/

.blog-section {
    padding: 10px 0 75px;
}

.blog-title h5 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: rgb(255, 67, 1);
    font-family: 'Barlow', sans-serif;
}

.blog-title h1 {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    color: rgb(7, 7, 7);
    padding: 6px 0 0px;
    font-family: 'Barlow', sans-serif;
}

.blog-title p {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: rgb(97, 97, 97);
    padding: 20px 0 40px;
    font-family: 'Barlow', sans-serif;
}

.blog-single-box{
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    margin-bottom: 30px;
}

.blog-thumb{
    position: relative;
}

.blog-thumb img {
    width: 100%;
}

.blog-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(0,0,0,0.3);
    transition: .5s;
}


.blog-sub-date {
    position: relative;
}

.blog-sub-date p {
    position: absolute;
    top: -281px;
    left: 0px;
    font-size: 16px;
    font-weight: 500;
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
    padding: 15px 32px;
}

.blog-content {
    margin: 0 0 0 42px;
}

.blog-date {
    display: inline-block;
    position: relative;
}

.blog-date p {
    margin: 25px 0 0;
    font-size: 16px;
}

.blog-date p span {
    margin-right: 5px;
    color: rgb(255, 67, 1);
}



.blog-meta {
    display: inline-block;
}

.blog-meta p {
    margin: 0 0 0 115px;
    font-size: 16px;
}

.blog-meta p span {
    margin-right: 5px;
    color: rgb(255, 67, 1);
}

.blog-info h3 {
    margin: 7px 0 0;
}

.blog-info h3 a {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: rgb(7, 7, 7);
    display: inline-block;
    padding: 30px 0 0;
    font-family: 'Barlow', sans-serif;
}

.blog-button a {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: rgb(255, 67, 1);
    padding: 18px 0 35px;
    transition: .5s;
}

.blog-info h3 a:hover{
    color: rgb(255, 67, 1);
}

.blog-single-box:hover .blog-thumb:before{
    width: 100%;
}

.blog-single-box:hover .blog-button a{
    color: rgb(7, 7, 7);
}

.blog-single-box:hover .blog-button a span{
    padding-left: 5px;
    transition: .5s;
}

/*==================end-blog-section===============*/
.subscribe-area {
    margin: 80px 0 0;
}

.counter-bg-up {
    background-image: url(../image/subscribe-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0 95px;
    position: relative;
    z-index: 1;
    margin-bottom: -240px;
}
 
.subscribe-content {
    margin-left: 85px;
}

.subscribe-content h1 {
    font-size: 46px;
    color: rgb(254, 254, 255);
    font-weight: 600;
    text-align: center;
    padding: 5px 0 15px;
    margin: 0;
    font-family: 'Barlow', sans-serif;
}

.subscribe-content p {
    font-size: 16px;
    font-weight: 400;
    color: rgb(254, 254, 255);
    font-weight: bold;
    text-align: center;
    padding: 10px 0 0;
    margin: 0;
    font-family: 'Barlow', sans-serif;
}

.subscribe-box form {
    text-align: center;
}

.subscribe-box form input {
    width: 38%;
    font-size: 16px;
    padding: 18px 12px;
    background-color: rgb(254, 254, 255);
    border: 0;
    color: rgb(97, 97, 97);
    line-height: 1.35;
    margin-top: 38px;
}

.subscribe-button {
    position: relative;
}

.subscribe-button a {
    display: inline-block;
    position: absolute;
    top: -58px;
    font-size: 16px;
    right: 315px;
    color: rgb(254, 254, 255);
    background-color: rgb(7, 7, 7);
    padding: 16px 25px;
    transition: .5s;
}

.subscribe-button a:hover {
    color: rgb(255, 67, 1);
    background-color: rgb(7, 7, 7);
}
/*
<!-- ============================================================== -->
<!--  end-Dreamhub-subscribe Section  Css -->
<!-- ============================================================== -->*/

  

/*
<!-- ============================================================== -->
      <!--start-Dreamhub-footer Section Css -->
<!-- ============================================================== -->*/

.footer-section {
    background-image: url(../image/footer-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0 20px;
}

.widgets-company-info{
    margin-bottom: 30px;
}

.company-info-desc p {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.702);
    line-height: 1.5;
    padding: 25px 0;
    margin: 0;
    font-family: 'Barlow', sans-serif;
}

.menu-quick-link-content {
    margin: 20px 0 0;
}

.footer-social-icon ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social-icon ul li {
    display: inline-block;
}

.footer-social-icon ul li a {
    display: inline-block;
    font-size: 17px;
    color: rgb(255, 67, 1);
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;
    background-color: rgb(7, 7, 7);
    border-radius: 100%;
    border: 1px solid rgb(97, 97, 97);
    transition: .5s;
}

.widget-nav-menu{
    margin-bottom: 30px;
}

.widget-title {
    font-size: 25px;
    font-weight: 700;
    color: rgb(254, 254, 255);
    font-family: 'Barlow', sans-serif;
}

.menu-quick-info-content {
    margin: 20px 0 0;
}

.menu-quick-link-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-quick-link-content ul li a {
    font-size: 16px;
    font-weight: 400px;
    display: inline-block;
    padding: 6px 0;
    transition: .5s;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
}

.menu-quick-info-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-quick-info-content ul li a{
    font-size: 16px;
    font-weight: 400px;
    padding: 6px 0;
    display: inline-block;
    color: rgba(255, 255, 255, 0.702);
    transition: .5s;
    font-family: 'Barlow', sans-serif;
}

.footer-sub-disc p {
    font-size: 16px;
    font-weight: 400;
    margin: 20px 0 10px;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
}

.footer-sub-disc p span {
    margin-right: 5px;
    color: rgb(255, 67, 1);
}

.footer-inner-address p {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
    display: flex;
}

.footer-inner-address p span {
    margin-right: 12px;
    color: rgb(255, 67, 1);
}

.footer-inner-social p {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
}

.footer-inner-social p span {
    margin-right: 5px;
    color: rgb(255, 67, 1);
}

.footer-inner-disc p {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
}

.footer-inner-disc p span {
    margin-right: 5px;
    color: rgb(255, 67, 1);
}

.footer-bottom-content p {
    text-align: center;
    font-size: 16px;
    margin: 10px 0 10px;
    color: rgba(255, 255, 255, 0.702);
    font-family: 'Barlow', sans-serif;
}

.footer-social-icon ul li a:hover{
    color: rgb(254, 254, 255);
    background-color: rgb(255, 67, 1);
}

.menu-quick-link-content ul li a:hover{
    color: rgb(255, 67, 1);
}

.menu-quick-info-content ul li a:hover{
    color: rgb(255, 67, 1);
}

/*
<!-- ============================================================== -->
      <!--end-Dreamhub-footer Section Css -->
<!-- ============================================================== -->*/



/*==========================================
    Prygo Search Popup Css
=========================================*/

.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: rgb(255, 67, 1);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: #ffffff;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:#ffffff;
}

.search-box-btn.search-box-outer i {
    font-size: 17px;
    display: inline-block;
    color: rgb(255, 67, 1);
    cursor: pointer;
}



/*===========================
<-- polytia Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: rgb(255, 67, 1);
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: rgb(255, 67, 1);
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/

.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}


/*
<!-- ============================================================== -->
<!--Scrollup Button Section -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(187, 247, 55, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: rgb(255, 67, 1);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: rgb(255, 67, 1);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}




/* --- 针对中间橙色大板块图标的自定义样式 --- */

/* 1. 基础样式：将黑色 PNG 强行变白，并设置过渡动画 */
.orange-box-btn img {
    filter: brightness(0) invert(1); /* 这是关键！把黑色变白色 */
    transition: transform 0.3s ease, filter 0.3s ease; /* 设置0.3秒的平滑过渡 */
    display: block;
    margin: 0 auto; /* 确保图标在链接内居中 */
    opacity: 0.9;   /* 平时稍微带点透明度，看起来更精致 */
}

/* 2. 鼠标悬停（Hover）效果：放大图标 + 变亮 */
.orange-box-btn:hover img {
    transform: scale(1.18); /* 悬停时图标放大18% */
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* 保持白色，并加一圈淡淡的白光 */
    opacity: 1; /* 悬停时变成全亮 */
}

/* 3. (可选) 鼠标悬停时文字稍微加亮或变色，增加互动感 */
.orange-box-btn:hover div {
    color: #f0f0f0 !important; /* 悬停时文字变成浅灰色 */
}



/* 针对您添加的新图片的样式 */
.case-study-img {
    width: 60px; /* 设置您想要的图片宽度，例如与原圆圈差不多大 */
    height: 60px; /* 设置与宽度相同的值以保持正方形 */
    border-radius: 50%; /* 如果图片不是圆形的，这行代码可以让其变为圆形 */
    object-fit: cover; /* 确保图片完整填满区域且不拉伸 */
    margin-right: 15px; /* 添加与右侧文字的间距 */
    float: left; /* 如果原样式中圆圈是浮动的，请保留这行 */
    /* 其他可能需要的样式，如 border 或 padding */
}

/* 为了确保父容器能够包裹浮动的图片 */
.about-two-box::after {
    content: "";
    display: table;
    clear: both;
}




/* 1. 强制父容器使用 Flex 布局 */
.case-study-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* 确保顶部对齐 */
}

/* 2. 这里的 box 需要垂直排列内部元素 */
.about-two-box {
    display: flex;
    flex-wrap: wrap; /* 允许内部元素换行 */
    align-items: center; /* 让图片和旁边的标题垂直居中对齐 */
    margin-bottom: 30px;
}

/* 3. 控制图片的尺寸和形状 */
.case-study-img {
    width: 120px;      /* 统一宽度 */
    height: 120px;     /* 统一高度 */
    object-fit: contain; /* 保证 Logo 不被拉伸变形 */
    margin-right: 15px; /* 图片和标题的间距 */
    flex-shrink: 0;   /* 防止图片被挤压 */
}

/* 4. 标题部分 */
.about-two-info {
    flex: 1; /* 占据剩余宽度 */
}

.about-two-info p {
    margin: 0;
    font-weight: bold;
    line-height: 1.2;
}

/* 5. 下方的描述文字强制换行并对齐 */
.about-two-disc {
    width: 100%; /* 强制描述文字跳到下一行 */
    margin-top: 20px;
    min-height: 80px; /* 设置最小高度，确保左右两边文字高度一致，从而底部对齐 */
}

.case-study-img2 {
    width: 120px;      /* 统一宽度 */
    height: 120px;     /* 统一高度 */
    object-fit: contain; /* 保证 Logo 不被拉伸变形 */

    margin-right: 25px; /* 图片和标题的间距 */
    flex-shrink: 0;   /* 防止图片被挤压 */
}




/* sticky核心 - 加在box上 */
.aws-sticky-box {
  position: -webkit-sticky; /* 兼容 Safari */
    position: sticky;
    top: 120px; /* 根据你头部导航栏的高度调整 */
    align-self: flex-start; /* 关键：防止被 flex 拉伸导致无法位移 */
    z-index:99;
	height: auto !important;
}

/* 卡片样式 */
.aws-contact-card {
    background: #FF4301;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.aws-contact-card a:hover {
    transform: translateY(-3px);
    transition: 0.2s;
}

.aws-contact-card img {
    filter: brightness(0) invert(1);
}

/* 核心修复 */
.blog-area-details .row {
     display: flex !important;
    overflow: visible !important;
	align-items: stretch;
}

.blog-area-details .col-lg-8 {
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
    float: none !important;
}

.blog-area-details .col-lg-4{
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    float: none !important;
    position: relative !important;
    align-self: flex-start !important;
	overflow: visible !important;
	flex-direction: column;
}

.case-study-details-area .col-lg-4::after {
    content: "";
    flex: 1 1 auto; /* 自动占据 row 剩余的所有高度 */
    display: block;
}



.blog-area-details, 
.container, 
.row {
    overflow: visible !important;
}

.col-lg-4 {
    flex: 0 0 auto; 
    width: 33.33333333%;
    height: auto; /* 让它根据 row 自动拉伸 */
    overflow: visible !important; 
}


.case-title {
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin-bottom: 8px;
}

.case-subtitle {
    font-size: 21px;        /* 稍微放大 */
    color: #222;            /* 改成接近黑色 */
    font-weight: 600;       /* 加粗（关键） */
    line-height: 1.5;
    margin-bottom: 20px;
}

.highlight {
    color: #FF4301;
}


.blog-details-content h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.blog-details-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
}


.results-grid {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.result-card {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.result-card:hover {
    transform: translateY(-4px);
}

.result-number {
    font-size: 28px;
    font-weight: 700;
    color: #FF4301;
}

.result-label {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* 通用列表 */
.case-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 25px;
}

.case-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
    font-size: 15px;
}

/* Challenges（问题） */
.challenge-list li::before {
    content: "⚠";
    position: absolute;
    left: 0;
    top: 0;
    color: #FF4301;
    font-size: 16px;
}

/* Solution（解决方案） */
.solution-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #28a745;
    font-size: 16px;
}

.before-after {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* 卡片 */
.ba-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Before 红色弱警示 */
.ba-card.before {
    border-top: 4px solid #ff4d4f;
}

/* After 橙色强调 */
.ba-card.after {
    border-top: 4px solid #FF4301;
}

/* 标题 */
.ba-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* 价格（核心视觉） */
.ba-price {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
}

/* 描述 */
.ba-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

/* 列表 */
.ba-card ul {
    padding-left: 18px;
}

.ba-card ul li {
    margin-bottom: 6px;
    font-size: 14px;
    color: #555;
}

/* VS */
.ba-divider {
    font-weight: 700;
    color: #999;
}



#lead-form select {
    width: 100%;
    height: 55px;
    border: 1px solid #e5e7eb;
    padding: 0 15px;
    border-radius: 5px;
    color: #333;
}

#lead-form input:focus,
#lead-form textarea:focus,
#lead-form select:focus {
    border-color: #ff5e14;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,94,20,0.1);
}

.single-blog-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.single-blog-box:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.form-box input,
.form-box textarea,
.form-box select {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0 14px;
    font-size: 14px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.form-box textarea {
    height: auto;
    padding: 12px 14px;
}

.form-box input:focus,
.form-box textarea:focus,
.form-box select:focus {
    border-color: #ff5e14;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255,94,20,0.12);
}

.form-button button {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff5e14, #ff7a1a);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.25s ease;
}

.form-button button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,94,20,0.3);
}

.form-box {
    margin-bottom: 18px;
}

::placeholder {
    color: #9ca3af;
}

.form-note {
    margin-top: 12px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

#lead-form .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

#lead-form .col-lg-6 {
    width: 50%;
    padding: 0 10px;
}

#lead-form .col-lg-12 {
    width: 100%;
    padding: 0 10px;
}

.custom-form-grid .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.custom-form-grid .col-lg-6,
.custom-form-grid .col-lg-12 {
    width: 100% !important;
    padding: 0 !important;
}

.custom-form-grid .col-lg-12 {
    grid-column: span 2;
}


.lead-card {
    background:#fff;
    padding:32px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.intent-switch {
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.intent-switch button {
    flex:1;
    padding:10px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    cursor:pointer;
}

.intent-switch button.active {
    border-color:#ff5e14;
    background:rgba(255,94,20,0.08);
    color:#ff5e14;
}

.grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.grid .full {
    grid-column:span 2;
}

.grid input,
.grid select,
.grid textarea {
    width:100%;
    height:48px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    padding:0 12px;
    background:#f9fafb;
}

.grid textarea {
    height:100px;
    padding:10px;
    grid-column:span 2;
}

.cta {
    width:100%;
    height:50px;
    margin-top:16px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg,#ff5e14,#ff7a1a);
    color:#fff;
    font-weight:600;
}

.conversion-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 标题 */
.conversion-card h4 {
    font-size: 20px;
    margin-bottom: 18px;
}

/* 卖点 */
.benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits li {
    margin-bottom: 12px;
    padding-left: 22px;
    position: relative;
    font-size: 14px;
}

.benefits li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff5e14;
    font-weight: bold;
}

/* 分割线 */
.divider {
    height: 1px;
    background: #e5e7eb;
    margin: 20px 0;
}

/* steps */
.steps div {
    margin-bottom: 10px;
    font-size: 14px;
}

/* 信任 */
.trust {
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
}