body, html {
scroll-behavior: smooth;
}
#iran_map svg.iran_map > .city {
animation: map_anim 0.3s linear 0.1s forwards;
transform-origin: inherit;
transform: scale(1);
opacity: 0;
}
@keyframes map_anim {
0% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* باید زیر اسلایدها باشد */
pointer-events: none; /* از کلیک جلوگیری کند */
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1; /* زیر اسلایدر قرار بگیره */
}
body .rounded-50 {
border-radius: 50px !important;
}
body .rounded-10 {
border-radius: 10px !important;
}
.object-cover {
object-fit: cover;
}
.ratio-4-3 {
aspect-ratio: 4 / 3;
}
.text-size-16, .link-size-16 a, .link-size-16 a:hover, .link-size-16 a:visited {
font-size: 16px !important;
}
body p, body .card .card-text {
text-align: justify;
direction: rtl;
}
.mt-80 {
margin-top: 80px!important;
}
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.image-grid img {
width: calc(25% - 10px);
height: auto;
border-radius: 10px;
object-fit: cover;
}
.widget_theme_1 .widget-title {
font: 800 24px / 30px custom_font_3;
color: #414142;
text-decoration: none;
border-color: #414142;
text-align: center;
}
.text-size-18, .link-size-18 a, .link-size-18 a:hover, .link-size-18 a:visited {
font-size: 18px !important;
}
.salary_option {
display: none
}
.salary_option+label .salary_option_icon {
position: relative
}
.salary_option+label {
background: #fff;
border-radius: 10px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
padding: 10px 20px;
cursor: pointer;
font: 300 17px/150% custom_font_2
}
.salary_option+label .salary_option_icon:before {
content: "";
width: 50px;
height: 30px;
display: block;
background: #a8a6a6;
border-radius: 20px
}
.salary_option+label .salary_option_icon:after {
content: "";
width: 25px;
height: 25px;
display: block;
background: #fff;
border-radius: 100%;
position: absolute;
right: 22px;
top: calc(50% - 13px);
transition: 0.1s linear
}
.salary_option:checked+label .salary_option_icon:after {
right: 3px
}
.salary_option:checked+label .salary_option_icon:before {
background: #2f55d4;
}
.request_service_steps:before {
content: "";
display: block;
width: 2px;
height: 100%;
background: #414142;
position: absolute;
right: 25px;
top: 0;
z-index: -1;
}
.request_service_steps {
list-style: none;
margin: 10px;
height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
padding-right: 80px;
position: relative;
z-index: 0;
gap: 45px; /* ایجاد فاصله بین آیتمها */
}
.request_service_steps li {
background: #f2f2f3;
display: block;
width: 100%;
text-align: center;
padding: 15px;
border-radius: 50px;
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
font: 300 16px / 150% custom_font_2;
color: #414142;
position: relative;
}
.request_service_steps li:before {
content: "";
display: flex
;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
background: #f2f2f3;
border-radius: 15px;
position: absolute;
right: -80px;
top: calc(50% - 27px);
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
}
.request_service_steps li:nth-child(1):before {
content: "1";
}
.request_service_steps li:nth-child(2):before {
content: "2";
}
.request_service_steps li:nth-child(3):before {
content: "3";
}
.request_service_steps li:nth-child(4):before {
content: "4";
}
.request_service_steps li:nth-child(5):before {
content: "5";
}
.request_service_steps li:nth-child(6):before {
content: "6";
}
@media(max-width: 768px) {
.request_service_steps {
height:500px
}
}
@media (min-width: 768px) {
.text-size-md-24, .link-size-md-24 a, .link-size-md-24 a:hover, .link-size-md-24 a:visited {
font-size: 24px !important;
}
}
.text-size-18, .link-size-18 a, .link-size-18 a:hover, .link-size-18 a:visited {
font-size: 18px !important;
}
.driver_application_title:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: #e6bc1c;
border-radius: 100%;
margin-left: 10px;
}
.wp-block-list {
list-style: none;
padding: 0;
margin: 0;
}
.wp-block-list li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #e6bc1c;
border-radius: 100%;
margin-left: 10px;
margin-right: 10px;
}
.custom-product-image-pos-1-absolute {
position: absolute;
top: 0;
right: 0;
}
.custom-product-image-pos-11-relative {
position: relative;
top: 90px;
}
#about_timeline>.row:first-child:before {
content: "";
width: 20px;
height: 3px;
background: #414142;
position: absolute;
right: calc(50% - 10px);
}
#about_timeline>.row:first-child>.col:nth-child(2n+2):before {
content: "";
width: 3px;
height: 100%;
background: #414142;
position: absolute;
right: -2px;
top: 0;
}
#about_timeline>.row:first-child>.col:nth-child(2n+2):after {
content: "";
width: 30px;
height: 30px;
border: 3px solid #414142;
background: #fff;
border-radius: 100%;
position: absolute;
right: -15px;
top: calc(50% - 15px);
}
#about_timeline>.row:first-child>.col {
display: flex;
justify-content: center;
align-items: center;
}
#about_timeline>.row:first-child>.col>.wp-block-group {
background: #262626;
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
border-radius: 20px;
width: 300px;
display: inline-block;
margin: 50px auto;
}
#about_timeline>.row:first-child>.col>.wp-block-group>div {
padding: 35px 0;
display: flex
;
justify-content: center;
align-items: center;
flex-flow: column;
}
#about_timeline>.row:first-child>.col>.wp-block-group>div p {
margin: 0;
}
.text-size-50, .link-size-50 a, .link-size-50 a:hover, .link-size-50 a:visited {
font-size: 50px !important;
}
#about_timeline>.row:last-child>.col {
background: #F2F2F3;
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
border-radius: 40px;
padding: 20px 50px;
max-width: 800px;
margin: 0 auto;
}
.compare_table>.row:first-child {
background: #262626;
border-radius: 50px;
box-shadow: -2px 2px 4px rgb(0 0 0 / 20%);
border: 0;
margin: 0;
}
.compare_table>.row {
border-bottom: 1px solid #c4c4c5;
margin: 0 15px;
align-items: center;
}
.compare_table>.row:first-child>.col:first-child>p {
padding: 20px 15px;
}
.compare_table>.row>.col:first-child p {
text-align: right;
}
.compare_table>.row:first-child p {
font: 300 14px / 150% custom_font_2;
color: #414142;
}
.compare_table>.row p {
margin: 0;
line-height: 40px;
font: 300 14px / 150% custom_font_1;
color: #414142;
}
.compare_table>.row .positive {
color: #6EC071;
}
.compare_table>.row .negative {
color: #D45E53;
}
.compare_table>.row .positive, .compare_table>.row .negative {
font-size: 40px;
font-family: custom_font_4;
}
.sam_bg_shadow {
background: #e6bc1c;
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
border-radius: 40px;
padding: 50px;
}
.car-vip:before {
content: "";
width: 75%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
aspect-ratio: 1;
object-fit: cover;
display: block;
background: radial-gradient(circle, rgba(80, 80, 80, 1) 0%, rgba(44, 44, 44, 1) 100%);
border-radius: 50px;
border: 1px solid rgb(255 255 255 / 20%);
}
.services_tabs>.nav-tabs .nav-link:before {
background: radial-gradient(circle, rgba(80, 80, 80, 1) 0%, rgba(44, 44, 44, 1) 100%);
box-shadow: unset;
border: 1px solid rgb(255 255 255 / 30%);
}
.services_tabs>.nav-tabs .nav-link:before {
content: "";
width: 80px;
height: 80px;
border-radius: 24px;
background-color: #f2f2f3;
box-shadow: inset -2px 2px 3px rgb(0 0 0 / 30%);
position: absolute;
top: 0;
right: calc(50% - 40px);
z-index: -1;
}
.mazaya_vip .container-fluid>.row>.col>div {
text-align: center;
position: relative;
z-index: 0;
color: #fff;
display: flex
;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
padding-top: 30px;
width: 140px;
height: 140px;
background: #272727;
border: 1px solid rgb(255 255 255 / 20%);
margin: 0 auto;
border-radius: 40px;
}
.mazaya_vip .container-fluid>.row>.col>div a {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.mazaya_vip .container-fluid>.row>.col>div img {
margin-bottom: 10px;
margin-bottom: 0;
}
/* Add here all your CSS customizations */
#quick_call {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
outline: none;
background-color: #e6bc1c;
border: none;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 90px;
width: 55px;
transition: 500ms;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
.blink-soft{
box-shadow: 0 0 0 rgba(0,0,0,0);
animation: soft-blink 1.2s ease-in-out infinite;
}
.blink-soft-delay{
box-shadow: 0 0 0 rgba(0,0,0,0);
animation: soft-blink 1.4s ease-in-out infinite;
}
@keyframes soft-blink{
0%,100%{ opacity:1 }
50% { opacity:.10 }
}
.dot {
position: relative;
display: inline-block;
background: #e6bc1c;
overflow: hidden; /* جلوی لرزش رو میگیره */
}
.dot::after {
content: "";
position: absolute;
inset: -8px; /* یا inset: -8px اگر بخوای بزرگتر باشه */
border: 2px solid #e6bc1c;
opacity: 0.8;
animation: ping 1.4s ease-out infinite;
}
@keyframes ping {
0% { transform: scale(0.7); opacity: 0.8; }
80%,100% { transform: scale(1.6); opacity: 0; }
}
.faa-ring.animated, .faa-ring.animated-hover:hover, .faa-parent.animated-hover:hover>.faa-ring {
-webkit-animation: ring 3s ease infinite;
animation: ring 3s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
.back-tooltip + .tooltip > .tooltip-inner {
font-size: 16px;
padding: 13px;
border-radius: 10px;
font-family: IRANSansWeb;
}
@-webkit-keyframes ring {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg)
}
2% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg)
}
4% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg)
}
6% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg)
}
8% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg)
}
10% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg)
}
12% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg)
}
14% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg)
}
16% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg)
}
18% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg)
}
20% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes ring {
0% {
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg)
}
2% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg)
}
4% {
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg)
}
6% {
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg)
}
8% {
-webkit-transform: rotate(-22deg);
-ms-transform: rotate(-22deg);
transform: rotate(-22deg)
}
10% {
-webkit-transform: rotate(22deg);
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
12% {
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg)
}
14% {
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg)
}
16% {
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg)
}
18% {
-webkit-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg)
}
20% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(7px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(7px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(7px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
.custom-wrap-icons .custom-box-icon {
position: relative;
float: right;
text-align: center;
margin-right: 75px;
}
.custom-wrap-icons .custom-box-icon:nth-child(1) {
margin-right: 0;
}
@media (max-width: 575px) {
.custom-wrap-icons .custom-box-icon {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 40px;
}
.custom-wrap-icons .custom-box-icon:nth-child(3) {
margin-bottom: 0;
}
}
.custom-wrap-icons .custom-box-icon span {
display: block;
color: #1e1e1e;
font-weight: 700;
margin-top: 20px;
}
.custom-wrap-icons .custom-box-icon .wrap-dashed-lines svg.dashed-line {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateY(-50%) scaleX(-1);
-ms-transform: translateY(-50%) scaleX(-1);
transform: translateY(-50%) scaleX(-1);
}
@media (max-width: 475px) {
.custom-wrap-icons .custom-box-icon .wrap-dashed-lines svg.dashed-line {
display: none;
}
}
.custom-wrap-icons .custom-box-icon .wrap-dashed-lines svg.dashed-line._left {
right: -70px;
top: 15%;
}
.custom-wrap-icons .custom-box-icon .wrap-dashed-lines svg.dashed-line._right {
left: -70px;
top: 50%;
}
.custom-wrap-icons:nth-child(1) {
margin-left: 0;
}
.custom-product-image-pos-2 {
position: absolute;
top: -80px;
right: 61vw;
width: auto;
height: 170%;
z-index: 2;
}
@media (max-width: 991px) {
.custom-product-image-pos-2 {
right: 74vw;
}
}
@media (max-width: 767px) {
.custom-product-image-pos-2 {
display: none;
}
}
.custom-product-image-pos-2._litle-small {
top: -65px;
right: 67vw;
z-index: 1;
height: 155%;
}
@media (max-width: 991px) {
.custom-product-image-pos-2._litle-small {
right: 86vw;
}
}
/* استایل فقط مخصوص کارت کلیکگشت */
.clickgasht-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
margin-right: 50px!important;
margin-left: 50px!important;
}
.clickgasht-card:hover {
box-shadow: 0 10px 38px rgba(30, 58, 138, 0.25);
transform: translateY(-3px);
}
/* تیتر وسطچین */
.clickgasht-card .card-title {
text-align: center;
font-size: 1.4rem;
}
.clickgasht-card .card-title {
text-align: center;
font-size: 1.4rem;
border-bottom: 1px solid #b7bac2;
padding-bottom: 5px;
}
/* فیلدهای ورودی */
.clickgasht-input {
border: 1.8px solid #636566 !important;
border-radius: 7px;
padding: 10px 14px;
font-size: 15px;
height: 58px;
transition: all 0.25s ease;
}
.clickgasht-input:focus {
border-color: #1e3a8a !important;
box-shadow: 0 0 6px rgba(30, 58, 138, 0.25);
}
/* آیکونها */
.clickgasht-card .form-icon i {
color: #1e3a8a;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
opacity: 0.8;
}
/* دکمه */
.clickgasht-btn {
background-color: #1e3a8a !important;
color: #fff;
border-radius: 10px;
border: none;
padding: 17px!important;
font-size: 15px;
transition: all 0.3s ease;
}
.clickgasht-btn:hover {
background-color: #162c6b !important;
box-shadow: 0 6px 20px rgba(30, 58, 138, 0.35);
}
/* تنظیم استایل برای select2 فقط داخل کارت کلیکگشت */
.clickgasht-select-wrapper {
position: relative;
}
/* ظاهر select2 */
.select2-container--bootstrap .select2-selection {
height: 58px !important;
border: 1.8px solid #636566 !important;
border-radius: 7px !important;
display: flex !important;
align-items: center;
padding-right: 40px !important; /* جا برای آیکون */
padding-left: 35px !important;
transition: all 0.25s ease;
}
/* فوکوس */
.select2-container--bootstrap.select2-container--focus .select2-selection {
border-color: #1e3a8a !important;
box-shadow: 0 0 6px rgba(30, 58, 138, 0.25);
}
/* متن داخل select */
.select2-selection__rendered {
font-size: 15px;
color: #333;
line-height: 58px !important;
}
/* فلش بازشونده */
.select2-selection__arrow b {
border-color: #1e3a8a transparent transparent transparent !important;
border-width: 7px 6px 0 6px !important;
top: 40% !important;
}
/* آیکون map */
.clickgasht-select-wrapper .clickgasht-select-icon {
color: #1e3a8a;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
opacity: 0.9;
pointer-events: none;
z-index: 5;
}
/* dropdown */
.select2-container--bootstrap .select2-dropdown {
border: 1.5px solid #1e3a8a !important;
border-radius: 7px !important;
box-shadow: 0 4px 20px rgba(30, 58, 138, 0.15);
font-size: 15px;
}
.select2-container--bootstrap .select2-results__option {
padding: 10px 12px;
transition: background-color 0.2s;
}
.select2-container--bootstrap .select2-results__option--highlighted {
background-color: #1e3a8a !important;
color: #fff !important;
}
.btn-swap {
background: #1e3a8a;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: all 0.3s ease;
}
.btn-swap:hover {
background: #334ebd;
transform: rotate(180deg);
}
.swap-icon {
width: 22px;
height: 22px;
}
.form-icon .icons {
top: 15px!important;
}
/* ظاهر select2 */
.select2-container--bootstrap .select2-selection {
height: 58px !important;
border: 1.8px solid #636566 !important;
border-radius: 7px !important;
display: flex !important;
align-items: center;
padding-right: 40px !important;
padding-left: 35px !important;
transition: all 0.25s ease;
}
/* آیکون مبدا و مقصد */
.clickgasht-select-wrapper .clickgasht-select-icon {
color: #1e3a8a;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
opacity: 0.9;
pointer-events: none;
z-index: 5;
}
/* دکمه جابهجایی */
.btn-swap {
position: absolute;
top: 65%;
right: -15px; /* دقیقا وسط بین دو فیلد */
transform: translateY(-50%);
background: #1e3a8a;
border: none;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(30, 58, 138, 0.2);
}
.btn-swap:hover {
background: #334ebd;
transform: translateY(-50%) rotate(180deg);
}
/* آیکون درون دکمه */
.swap-icon {
width: 20px;
height: 20px;
}
/* برای حذف فاصله بین ستونها در حالت دسکتاپ */
.clickgasht-origin-wrapper,
.clickgasht-destination-wrapper {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* تنظیم کمی فاصله در حالت موبایل */
@media (max-width: 768px) {
.btn-swap {
right: 100%;
transform: translate(50%, -50%);
top: 20%;
}
.btn-in-slider a{
font-size: 14px!important;
padding: 7px!important;
}
}
/* واکنشگرا */
@media (max-width: 768px) {
.clickgasht-card {
padding: 20px;
margin-right: 5px!important;
margin-left: 5px!important;
}
.clickgasht-input {
height: 44px;
}
.clickgasht-btn {
margin-top: 20px;
}
.form-icon .icons {
top: 8px!important;
}
}
.tiny-slide {
cursor: pointer;
}
/* ========== SweetAlert2 – Compact, RTL, Small Buttons ========== */
.swal2-container {
padding: 0.75rem !important; /* فاصله اطراف کل مودال */
}
.swal2-popup {
direction: rtl; /* فارسی */
width: min(92vw, 420px) !important; /* عرض کمتر */
padding: 1rem 1rem 0.875rem !important; /* پدینگ جمعوجور */
border-radius: 14px !important;
font-size: 0.92rem !important; /* اندازه کلی متن */
line-height: 1.6 !important;
}
/* عنوان */
.swal2-title {
font-size: 1.05rem !important;
margin: 0 0 .25rem !important;
padding: 0 !important;
text-align: center !important;
}
/* متن داخل مودال */
.swal2-html-container {
font-size: 0.92rem !important;
margin: 0 0 .75rem !important;
text-align: center !important;
}
/* آیکنها کوچیکتر */
.swal2-icon {
transform: scale(0.8);
margin: 0.25rem auto 0.5rem !important;
}
/* ورودیها (اگر داشته باشی) */
.swal2-input, .swal2-textarea, .swal2-select {
font-size: 0.92rem !important;
padding: 0.5rem 0.6rem !important;
border-radius: 10px !important;
}
/* دکمهها جمعوجورتر */
.swal2-actions {
gap: .5rem !important;
margin: .25rem 0 0 !important;
}
.swal2-confirm, .swal2-deny, .swal2-cancel {
font-size: 0.9rem !important;
padding: 0.4rem 0.8rem !important;
border-radius: 10px !important;
min-width: 100px; /* برای هماهنگی عرض */
}
/* آیکن لودینگ کوچیکتر */
.swal2-loader {
width: 1.6rem !important;
height: 1.6rem !important;
border-width: .18rem !important;
}
/* موبایل کمی فشردهتر */
@media (max-width: 480px){
.swal2-popup { width: 94vw !important; font-size: .9rem !important; }
.swal2-title { font-size: 1rem !important; }
}
.dots {
display: inline-block;
width: 1em;
text-align: left;
}
.dots::after {
content: '...';
animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { color: transparent; text-shadow: none; }
40% { color: inherit; text-shadow: none; }
60% { text-shadow: .25em 0 0 currentColor; }
80% { text-shadow: .25em 0 0 currentColor, .5em 0 0 currentColor; }
100% { text-shadow: none; color: transparent; }
}
/*set Service Classes */
.stepper-wrapper {
gap: 35px;
}
.step-item {
text-align: center;
position: relative;
}
.step-circle {
width: 58px;
height: 58px;
border-radius: 50%;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px auto;
transition: all 0.3s ease;
}
.step-circle i {
font-size: 26px;
line-height: 1;
}
.step-item.active .step-circle {
background: #4f46e5;
color: #fff;
}
.step-item.completed .step-circle {
background: #22c55e;
color: #fff;
}
.step-title {
font-size: 17px;
font-weight: 600;
margin-top: 6px;
color: #444;
}
.step-line {
width: 120px;
height: 3px;
background: #e5e5e5;
align-self: center;
}
.step-box {
padding: 35px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
/* کانتینر */
.text-h1-title {
font-size:30px!important;
}
.date-tabs-container {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
/* دکمه اسکرول چپ/راست */
.date-arrow {
background: #ffffff;
border: 1px solid #e5e7eb;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s;
color: #333;
}
.date-arrow:hover {
background: #4f46e5;
color: #fff;
}
/* با اسکرول ولی بدون نمایش scrollbar */
.date-tabs-wrapper {
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
flex: 1;
}
.date-tabs-wrapper::-webkit-scrollbar {
display: none;
}
/* گروه تبها */
.date-tabs {
display: inline-flex;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
background: #fafafa;
}
/* هر تب */
.date-tab {
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: #555;
background: #f8f8f8;
border-left: 1px solid #e5e7eb;
transition: 0.25s;
white-space: nowrap;
}
.date-tab:first-child {
border-left: none;
}
.date-tab:hover {
background: #4f46e5;
color: #fff;
}
.date-tab.active {
background: #4f46e5;
color: #fff;
}
.col-select-car {
padding-left: 40px;
}
/*car Item*/
.car-card {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 12px;
padding: 18px;
margin-bottom: 15px;
box-shadow: 0 3px 15px rgba(0,0,0,0.04);
border: 1px solid #eee;
gap: 20px;
}
/* تصویر خودرو */
.car-card-image img {
width: 100%; /* بزرگتر */
height: 150px;
object-fit: contain;
border-radius: 8px;
}
/* متن وسط */
.car-card-info {
flex: 1;
}
.car-card-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.car-card-desc {
font-size: 17px;
color: #777;
margin: 0;
}
/* ستون قیمت + دکمه */
.car-card-price-wrapper {
text-align: center;
padding-right: 20px;
border-right: 2px solid #e5e7eb;
padding-top: 0;
border-top: none;
min-width: 160px;
}
/* قیمت */
.car-card-price {
font-size: 20px;
font-weight: 800;
color: #3b3b3b;
margin-bottom: 12px;
}
/* دکمه رزرو */
.car-card-btn {
width: 100%;
font-size: 18px;
}
.car-features {
list-style: none;
padding: 0;
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr); /* دوتایی */
gap: 8px 15px;
}
.car-features li {
display: flex;
align-items: center;
font-size: 14px;
color: #555;
gap: 6px;
}
.car-features i {
font-size: 18px;
color: #4f46e5; /* تم کلیکگشت */
}
.step3-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
}
/* Route عمودی */
.route-vertical {
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
}
.route-city {
font-size: 20px;
font-weight: bold;
}
.route-line-vertical {
width: 2px;
height: 90px;
background: #ccc;
margin: 10px 0;
}
/* امکانات */
.step3-features ul {
list-style: none;
margin: 0;
padding: 0;
}
.step3-features li {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 15px;
color: #555;
}
.step3-features i {
font-size: 20px;
color: #4f46e5;
}
/* تصویر صندلی */
.step3-seat img {
width: 115px;
height: auto;
}
/* تاریخ */
.summary-date {
font-size: 18px;
color: #555;
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}
/* ستون 4 — باکس راست مرحله 3 */
.step3-sidebar {
margin-left: 15px; /* فاصله از ستون سمت راست */
}
/* تصویر دستهبندی */
.step3-car-img-box img {
width: 200px !important;
height: auto !important;
margin: 0 auto;
display: block;
}
/* تصویر صندلی مرحله 3 */
.step3-seat img {
width: 115px;
height: auto;
}
.step3-bill-sticky {
position: sticky;
top: 100px;
}
.nav-tabs .nav-link {
font-weight: 600;
color: #555;
}
.nav-tabs .nav-link.active {
background: #4f46e5 !important;
color: #fff !important;
border-radius: 6px;
}
@media (max-width: 768px) {
.step-circle {
width: 40px;
height: 40px;
}
.step-title {
font-size: 14px!important;
}
.step-circle i {
font-size: 16px;
}
.text-h1-title {
font-size: 20px!important;
}
.date-tab {
padding: 5px 10px;
font-size: 13px;
font-weight: 500;
}
.col-select-car {
padding-right: 40px;
}
.car-card {
flex-direction: column;
align-items: flex-start;
padding: 15px;
gap: 0;
}
.car-card-image img {
width: 70%;
height: auto;
margin: 0 auto 15px auto;
display: block;
}
.car-features {
grid-template-columns: 1fr 1fr;
}
.car-card-price-wrapper {
width: 100%;
border-right: none;
padding-left: 0;
padding-top: 20px;
border-top: 2px solid #e5e7eb;
margin-top: 15px;
text-align: right; /* برای فاز RTL */
}
.car-card-btn {
width: 100%;
margin-top: 10px;
}
.step3-wrapper {
flex-direction: column;
align-items: flex-start;
}
.step3-seat img {
width: 60%;
}
.step3-bill-sticky{
position: relative !important;
top: 0 !important;
order: -1;
width: 100%;
margin-bottom: 20px;
}
}
/* ---- DESKTOP (صورتحساب همیشه ثابت در سمت راست) ---- */
@media (min-width: 992px) {
/*.step3-bill-sticky {*/
/* position: fixed !important;*/
/* left: 40px;*/
/* top: 120px;*/
/* z-index: 1000;*/
/*}*/
/* ستون فرم باید فضای سمت راست خالی را جبران کند */
/*.step3-form-col {*/
/* padding-left: 380px; !* اندازه ستون ثابت *!*/
/*}*/
}
/* ---- MOBILE (اول فرم، بعد صورتحساب) ---- */
@media (max-width: 768px) {
.step3-form-col {
order: 1;
width: 100%;
}
.step3-bill-sticky {
order: 2;
/*position: relative !important;*/
/*width: 100% !important;*/
/*top: auto !important;*/
/*right: auto !important;*/
/*margin-top: 20px;*/
}
}
/* =========================================================
ALOGHAZAL INDEX PAGE - UNIFIED PREMIUM CSS
Luxury UI + Motion + AOS + Parallax + Counters + Timeline
========================================================= */
/* ===============================
Root Variables
=============================== */
:root {
--algh-gold-1: #f4d77b;
--algh-gold-2: #ddb94c;
--algh-gold-3: #c79a22;
--algh-gold-4: #9f7613;
--algh-ink: #1f1f1f;
--algh-dark: #222222;
--algh-text: #444444;
--algh-muted: #666666;
--algh-muted-2: #7d7d7d;
--algh-white: #ffffff;
--algh-cream: #fffdf8;
--algh-soft-bg: #fffaf0;
--algh-section-alt: #fcfaf4;
--algh-line: #efe5c8;
--algh-border: #efe7ce;
--algh-border-gold: rgba(199, 154, 34, 0.28);
--algh-shadow-xs: 0 10px 25px rgba(0, 0, 0, 0.05);
--algh-shadow-sm: 0 14px 30px rgba(0, 0, 0, 0.05);
--algh-shadow-md: 0 18px 35px rgba(0, 0, 0, 0.08);
--algh-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08);
--algh-shadow-gold: 0 18px 45px rgba(185, 139, 23, 0.22);
--algh-motion: cubic-bezier(0.22, 1, 0.36, 1);
--algh-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ===============================
Global
=============================== */
html {
scroll-behavior: smooth;
}
[data-aos] {
will-change: transform, opacity;
}
[data-aos="fade-up"] {
transform: translate3d(0, 28px, 0);
}
[data-aos="zoom-out"] {
transform: scale(1.04);
}
/* ===============================
Hero Section
=============================== */
.algh-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 130px 0 90px;
min-height: 760px;
background:
radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 30%),
radial-gradient(circle at 78% 24%, rgba(244, 215, 123, 0.20) 0%, rgba(244, 215, 123, 0) 32%),
radial-gradient(circle at 68% 68%, rgba(199, 154, 34, 0.08) 0%, rgba(199, 154, 34, 0) 28%),
linear-gradient(135deg, #ffffff 0%, #fffdf8 52%, #f7f1df 100%);
}
.algh-hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 160px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
z-index: 0;
pointer-events: none;
}
.algh-hero-content,
.algh-hero-media {
position: relative;
z-index: 2;
}
.algh-hero-content {
max-width: 650px;
}
/* Hero Decorative Shapes */
.algh-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.algh-shape-1 {
width: 420px;
height: 420px;
top: -150px;
right: -120px;
border: 1px solid rgba(201, 161, 53, 0.18);
animation: alghOrbitSlow 16s ease-in-out infinite;
}
.algh-shape-2 {
width: 540px;
height: 540px;
bottom: -220px;
left: -180px;
background: rgba(212, 175, 55, 0.06);
animation: alghFloatSoft 11s ease-in-out infinite;
}
.algh-shape-3 {
width: 10px;
height: 10px;
top: 120px;
left: 46%;
background: #d2aa38;
box-shadow:
60px 70px 0 rgba(210, 170, 56, 0.40),
-80px 180px 0 rgba(210, 170, 56, 0.22),
110px 260px 0 rgba(210, 170, 56, 0.18);
animation: alghSparkleDots 8s ease-in-out infinite;
}
/* Hero Badge */
.algh-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
padding: 10px 18px;
border-radius: 50px;
color: #a88018;
background: rgba(212, 175, 55, 0.10);
border: 1px solid rgba(212, 175, 55, 0.28);
font-size: 14px;
font-weight: 800;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.12);
backdrop-filter: blur(8px);
}
.algh-badge i {
font-size: 18px;
}
.algh-badge::after {
content: "";
position: absolute;
top: 0;
right: -140%;
width: 90%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
transform: skewX(-22deg);
animation: alghShimmer 5.5s ease-in-out infinite;
}
/* Hero Text */
.algh-hero-title {
margin: 0;
color: var(--algh-dark);
font-size: clamp(38px, 4vw, 64px);
line-height: 1.45;
font-weight: 900;
text-wrap: balance;
}
.algh-hero-title span {
position: relative;
background: linear-gradient(135deg, var(--algh-gold-1) 0%, var(--algh-gold-2) 35%, var(--algh-gold-3) 70%, var(--algh-gold-4) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.algh-hero-title span::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -8px;
height: 10px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(221,185,76,0), rgba(221,185,76,0.35), rgba(221,185,76,0));
animation: alghPulseLine 3.2s ease-in-out infinite;
}
.algh-hero-text {
max-width: 600px;
color: var(--algh-muted);
font-size: 17px;
line-height: 2.1;
}
/* Hero Actions */
.algh-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.algh-btn-primary,
.algh-btn-outline,
.algh-btn-light,
.algh-contact-lines a {
position: relative;
overflow: hidden;
min-height: 54px;
padding: 13px 24px;
border-radius: 12px;
font-weight: 800;
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
background var(--algh-transition),
color var(--algh-transition),
border-color var(--algh-transition);
}
.algh-btn-primary i,
.algh-btn-outline i,
.algh-btn-light i {
margin-left: 6px;
}
.algh-btn-primary {
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17) !important;
border: none !important;
box-shadow: 0 14px 30px rgba(185, 139, 23, 0.28);
}
.algh-btn-outline {
border: 1px solid #c69b2f !important;
background: #ffffff !important;
color: #a67f16 !important;
}
.algh-btn-outline:hover {
background: #c69b2f !important;
color: #ffffff !important;
}
.algh-btn-light {
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17);
color: #ffffff !important;
border: 0;
box-shadow: 0 12px 30px rgba(185, 139, 23, 0.28);
}
.algh-btn-primary:hover,
.algh-btn-outline:hover,
.algh-btn-light:hover,
.algh-contact-lines a:hover {
transform: translateY(-3px);
}
.algh-btn-primary:hover,
.algh-btn-light:hover {
box-shadow: 0 16px 34px rgba(185, 139, 23, 0.35);
}
.algh-btn-primary::before,
.algh-btn-outline::before,
.algh-btn-light::before,
.algh-contact-lines a::before {
content: "";
position: absolute;
top: 0;
right: -140%;
width: 70%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
transform: skewX(-20deg);
transition: right 0.85s ease;
}
.algh-btn-primary:hover::before,
.algh-btn-outline:hover::before,
.algh-btn-light:hover::before,
.algh-contact-lines a:hover::before {
right: 160%;
}
/* Hero Mini Features */
.algh-hero-features {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.algh-mini-feature {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
padding: 12px 16px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #eee5c8;
box-shadow: var(--algh-shadow-xs);
color: #444444;
font-weight: 700;
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-mini-feature i {
color: #c49a26;
font-size: 18px;
}
.algh-mini-feature::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--algh-gold-1), var(--algh-gold-3));
opacity: 0;
transition: opacity var(--algh-transition);
}
.algh-mini-feature:hover {
transform: translateY(-4px);
border-color: rgba(199,154,34,0.35);
box-shadow: var(--algh-shadow-md);
}
.algh-mini-feature:hover::before {
opacity: 1;
}
/* ===============================
Hero Media / Parallax
=============================== */
.algh-hero-media {
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
}
.algh-parallax-area {
position: relative;
transform-style: preserve-3d;
perspective: 1200px;
}
.algh-parallax-layer {
will-change: transform;
transition: transform 0.18s linear;
}
.algh-hero-media.is-parallax-active .algh-premium-frame {
transition: transform 0.18s linear;
}
.algh-hero-media::before {
content: "";
position: absolute;
inset: 8% 4% auto auto;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(244, 215, 123, 0.28), rgba(244, 215, 123, 0));
filter: blur(12px);
opacity: 0.9;
z-index: 0;
animation: alghSoftAura 6s ease-in-out infinite;
}
.algh-hero-media::after {
content: "";
position: absolute;
left: 8%;
bottom: 4%;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(199, 154, 34, 0.16), rgba(199, 154, 34, 0));
filter: blur(10px);
z-index: 0;
animation: alghSoftAuraReverse 7s ease-in-out infinite;
}
.algh-hero-glow {
position: absolute;
width: 470px;
height: 470px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(245,226,171,0.7) 58%, rgba(212,175,55,0.18) 100%);
box-shadow: 0 24px 60px rgba(187, 148, 40, 0.18);
filter: blur(2px);
animation: alghGlowPulse 5.5s ease-in-out infinite;
}
.algh-hero-image-wrap,
.algh-premium-frame {
position: relative;
z-index: 2;
transform-style: preserve-3d;
}
.algh-hero-image-wrap {
width: 460px;
height: 460px;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
border-radius: 36px;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.7);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}
.algh-premium-frame::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 36px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(221,185,76,0.35), rgba(255,255,255,0.65));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.algh-premium-frame::after {
content: "";
position: absolute;
inset: 16px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
pointer-events: none;
}
.algh-hero-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
user-select: none;
pointer-events: none;
filter: drop-shadow(0 18px 30px rgba(0,0,0,0.10));
}
/* Floating Cards */
.algh-floating-card {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
min-width: 220px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(212,175,55,0.22);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
backdrop-filter: blur(10px);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-floating-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: rgba(199,154,34,0.35);
box-shadow: 0 20px 40px rgba(0,0,0,0.10);
}
.algh-floating-card i {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.algh-floating-card strong,
.algh-floating-card span {
display: block;
}
.algh-floating-card strong {
color: #333333;
font-size: 17px;
}
.algh-floating-card span {
color: var(--algh-muted-2);
font-size: 15px;
margin-top: 3px;
}
.algh-floating-card-top {
top: 65px;
right: -15px;
}
.algh-floating-card-bottom {
bottom: 65px;
left: -10px;
}
/* ===============================
Stats Section
=============================== */
.algh-stats-section {
position: relative;
z-index: 5;
padding-top: 0;
margin-top: -20px;
}
.algh-stat-box {
position: relative;
overflow: hidden;
height: 100%;
min-height: 190px;
padding: 28px 18px;
border-radius: 26px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 239, 0.92));
border: 1px solid rgba(199, 154, 34, 0.16);
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.045);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition),
background var(--algh-transition);
}
.algh-stat-box::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(244, 215, 123, 0.16), rgba(244, 215, 123, 0) 42%);
opacity: 0;
transition: opacity var(--algh-transition);
pointer-events: none;
}
.algh-stat-box::after {
content: "";
position: absolute;
top: 0;
right: -130%;
width: 80%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
transform: skewX(-20deg);
transition: right 0.9s ease;
pointer-events: none;
}
.algh-stat-box:hover {
transform: translateY(-7px);
border-color: rgba(199, 154, 34, 0.36);
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.075);
}
.algh-stat-box:hover::before {
opacity: 1;
}
.algh-stat-box:hover::after {
right: 160%;
}
.algh-stat-icon {
width: 48px;
height: 48px;
margin: 0 auto 15px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(244, 215, 123, 0.25), rgba(199, 154, 34, 0.14));
color: var(--algh-gold-4);
font-size: 25px;
box-shadow: 0 12px 28px rgba(199, 154, 34, 0.12);
}
.algh-stat-box h3 {
margin-bottom: 8px;
line-height: 1;
font-weight: 900;
font-size: clamp(30px, 4vw, 46px);
color: var(--algh-ink);
}
.algh-counter,
.algh-counter-suffix {
display: inline-block;
background: linear-gradient(135deg, var(--algh-gold-1), var(--algh-gold-3), var(--algh-gold-4));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.algh-stat-box p {
margin-bottom: 0;
color: #5f5f5f;
font-size: 17px;
margin-top:5px;
line-height: 1.9;
text-align:center;
}
/* ===============================
General Sections
=============================== */
.algh-section {
position: relative;
overflow: hidden;
padding: 90px 0;
background: #ffffff;
}
.algh-section::before {
content: "";
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
width: min(1120px, calc(100% - 24px));
height: 1px;
background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,0.28), rgba(212,175,55,0));
pointer-events: none;
}
.algh-section-alt {
background: var(--algh-section-alt);
}
/* Section Head */
.algh-section-head .algh-section-tag {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 50px;
background: rgba(212, 175, 55, 0.10);
border: 1px solid rgba(212, 175, 55, 0.22);
color: #af8618;
font-size: 13px;
font-weight: 800;
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.10);
transition: transform var(--algh-transition), box-shadow var(--algh-transition);
}
.algh-section-head h2 {
margin-top: 18px;
margin-bottom: 18px;
color: #212121;
font-size: 36px;
font-weight: 900;
line-height: 1.5;
}
.algh-section-head p {
margin-bottom: 0;
color: var(--algh-muted);
font-size: 16px;
line-height: 2.1;
}
.algh-section-head-animated {
position: relative;
}
.algh-section-head-animated::after {
content: "";
display: block;
width: 84px;
height: 3px;
margin-top: 18px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(244, 215, 123, 0), var(--algh-gold-2), rgba(244, 215, 123, 0));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.8s var(--algh-motion);
}
.text-center.algh-section-head-animated::after {
margin-right: auto;
margin-left: auto;
transform-origin: center;
}
.algh-section-head-animated.aos-animate::after {
transform: scaleX(1);
}
.algh-section-head-animated:hover .algh-section-tag {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(212, 175, 55, 0.18);
}
/* Section Image */
.algh-section-image {
position: relative;
}
.algh-section-image::before {
content: "";
position: absolute;
inset: auto 8% -16px 8%;
height: 34px;
background: radial-gradient(circle, rgba(199,154,34,0.16) 0%, rgba(199,154,34,0) 72%);
filter: blur(16px);
z-index: 0;
}
.algh-section-image img {
position: relative;
z-index: 1;
width: 100%;
border-radius: 24px;
border: 1px solid #f0ead8;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
transition:
transform 0.7s var(--algh-motion),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-section-image:hover img {
transform: translateY(-6px) scale(1.015);
border-color: rgba(199,154,34,0.28);
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.10);
}
/* ===============================
Cards
=============================== */
.algh-service-card,
.algh-info-card,
.algh-step-card,
.algh-adv-card,
.algh-partner-card {
position: relative;
overflow: hidden;
height: 100%;
padding: 28px 22px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #efe7cf;
box-shadow: var(--algh-shadow-sm);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition),
background var(--algh-transition);
}
.algh-service-card::before,
.algh-info-card::before,
.algh-step-card::before,
.algh-adv-card::before,
.algh-partner-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(221,185,76,0.08) 100%);
opacity: 0;
transition: opacity var(--algh-transition);
pointer-events: none;
}
.algh-service-card::after,
.algh-info-card::after,
.algh-step-card::after,
.algh-adv-card::after,
.algh-partner-card::after {
content: "";
position: absolute;
top: 0;
right: -130%;
width: 80%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
transform: skewX(-20deg);
transition: right 0.9s ease;
pointer-events: none;
}
.algh-service-card:hover,
.algh-info-card:hover,
.algh-step-card:hover,
.algh-adv-card:hover,
.algh-partner-card:hover {
transform: translateY(-5px);
border-color: rgba(199,154,34,0.34);
box-shadow: var(--algh-shadow-lg);
}
.algh-service-card:hover::before,
.algh-info-card:hover::before,
.algh-step-card:hover::before,
.algh-adv-card:hover::before,
.algh-partner-card:hover::before {
opacity: 1;
}
.algh-service-card:hover::after,
.algh-info-card:hover::after,
.algh-step-card:hover::after,
.algh-adv-card:hover::after,
.algh-partner-card:hover::after {
right: 160%;
}
.algh-service-card i,
.algh-adv-card i {
width: 56px;
height: 56px;
margin-bottom: 16px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(212,175,55,0.12);
color: #c49a26;
font-size: 24px;
transition:
transform var(--algh-transition),
background var(--algh-transition),
color var(--algh-transition),
box-shadow var(--algh-transition);
}
.algh-service-card:hover i,
.algh-adv-card:hover i {
transform: translateY(-3px) scale(1.06);
background: linear-gradient(135deg, rgba(221,185,76,0.22), rgba(199,154,34,0.18));
box-shadow: 0 10px 24px rgba(199,154,34,0.16);
}
.algh-service-card h5,
.algh-info-card h5,
.algh-step-card h5,
.algh-adv-card h5 {
margin-bottom: 12px;
color: #2d2d2d;
font-size: 20px;
font-weight: 800;
}
.algh-service-card p,
.algh-info-card p,
.algh-step-card p,
.algh-adv-card p {
margin-bottom: 0;
color: #6a6a6a;
line-height: 1.95;
font-size: 16px;
}
.algh-adv-card,
.algh-partner-card {
text-align: center;
}
.algh-adv-card i {
margin-left: auto;
margin-right: auto;
display: flex;
}
.algh-partner-card {
padding: 32px 16px;
color: #3c3c3c;
font-size: 18px;
font-weight: 800;
}
/* ===============================
Check / Coverage Lists
=============================== */
.algh-check-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 28px;
}
.algh-coverage-list {
display: grid;
gap: 14px;
margin-top: 28px;
}
.algh-check-item,
.algh-coverage-item {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.75);
border: 1px solid #eee4c6;
color: #454545;
font-weight: 700;
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition),
background var(--algh-transition);
}
.algh-check-item:hover,
.algh-coverage-item:hover {
transform: translateX(-4px);
border-color: rgba(199,154,34,0.34);
box-shadow: 0 14px 28px rgba(0,0,0,0.05);
background: linear-gradient(135deg, #ffffff, #fffdf7);
}
.algh-check-item i,
.algh-coverage-item i {
color: #c39a28;
font-size: 18px;
}
/* ===============================
Process Timeline
=============================== */
.algh-process-section {
background:
radial-gradient(circle at 15% 20%, rgba(244, 215, 123, 0.12), rgba(244, 215, 123, 0) 28%),
linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}
.algh-process-timeline {
position: relative;
}
.algh-process-line {
position: absolute;
top: 34px;
right: 12.5%;
left: 12.5%;
height: 3px;
border-radius: 999px;
background: rgba(199, 154, 34, 0.14);
overflow: hidden;
z-index: 0;
}
.algh-process-line-fill {
position: absolute;
top: 0;
right: 0;
width: var(--algh-process-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--algh-gold-1), var(--algh-gold-2), var(--algh-gold-3));
box-shadow: 0 0 18px rgba(199, 154, 34, 0.34);
transition: width 0.35s var(--algh-motion);
}
.algh-step-card,
.algh-process-step {
position: relative;
z-index: 2;
}
.algh-process-step {
min-height: 245px;
padding: 38px 24px 26px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(199, 154, 34, 0.16);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.045);
}
.algh-process-step:hover,
.algh-process-step.is-active {
transform: translateY(-8px);
border-color: rgba(199, 154, 34, 0.40);
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.08);
}
.algh-step-dot {
position: absolute;
top: -6px;
right: 26px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
border: 4px solid var(--algh-gold-2);
box-shadow:
0 0 0 8px rgba(221, 185, 76, 0.12),
0 0 22px rgba(199, 154, 34, 0.34);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition);
}
.algh-process-step.is-active .algh-step-dot,
.algh-process-step:hover .algh-step-dot {
transform: scale(1.18);
box-shadow:
0 0 0 10px rgba(221, 185, 76, 0.16),
0 0 30px rgba(199, 154, 34, 0.50);
}
.algh-step-number {
position: relative;
display: inline-flex;
margin-bottom: 14px;
padding: 7px 14px;
border-radius: 999px;
color: var(--algh-gold-4);
background: rgba(244, 215, 123, 0.18);
font-size: 13px;
font-weight: 800;
}
.algh-process-step h5 {
margin-bottom: 12px;
color: #222222;
font-weight: 900;
}
.algh-process-step p {
margin-bottom: 0;
color: #666666;
line-height: 2;
font-size: 16px;
}
/* ===============================
FAQ
=============================== */
.algh-faq .accordion-item {
overflow: hidden;
margin-bottom: 16px;
border: 1px solid #eee3c6;
border-radius: 16px !important;
background: #ffffff;
box-shadow: 0 12px 26px rgba(0,0,0,0.04);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-faq .accordion-item:hover {
transform: translateY(-3px);
border-color: rgba(199,154,34,0.32);
box-shadow: 0 18px 34px rgba(0,0,0,0.06);
}
.algh-faq .accordion-button {
position: relative;
padding: 20px 24px;
background: #ffffff;
color: #2e2e2e;
font-weight: 800;
box-shadow: none !important;
transition:
background var(--algh-transition),
color var(--algh-transition),
padding var(--algh-transition);
}
.algh-faq .accordion-button::before {
content: "";
position: absolute;
right: 0;
top: 16px;
bottom: 16px;
width: 4px;
border-radius: 10px;
background: linear-gradient(180deg, var(--algh-gold-1), var(--algh-gold-3));
opacity: 0;
transition: opacity var(--algh-transition);
}
.algh-faq .accordion-button:not(.collapsed) {
padding-right: 30px;
color: #b88e1d;
background: #fffdf7;
}
.algh-faq .accordion-button:not(.collapsed)::before {
opacity: 1;
}
.algh-faq .accordion-body {
padding: 0 24px 22px;
color: #666666;
line-height: 2;
}
/* ===============================
Final CTA
=============================== */
.algh-final-cta {
position: relative;
overflow: hidden;
padding: 80px 0;
background:
radial-gradient(circle at 20% 20%, rgba(221,185,76,0.12), rgba(221,185,76,0) 28%),
radial-gradient(circle at 85% 30%, rgba(221,185,76,0.10), rgba(221,185,76,0) 30%),
linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
}
.algh-final-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 80%);
transform: translateX(100%);
animation: alghSweepDark 7s ease-in-out infinite;
pointer-events: none;
}
.algh-final-title,
.algh-final-text,
.algh-contact-lines,
.algh-final-cta .algh-btn-light {
position: relative;
z-index: 2;
}
.algh-final-title {
margin-bottom: 18px;
color: #ffffff!important;
font-size: 38px;
line-height: 1.6;
font-weight: 900;
}
.algh-final-text {
margin-bottom: 22px;
color: rgba(255,255,255,0.82)!important;
line-height: 2;
font-size: 16px;
}
.algh-contact-lines {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.algh-contact-lines a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 18px;
border-radius: 12px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.16);
color: #ffffff !important;
font-weight: 800;
}
/* ===============================
Optional Fade Group
=============================== */
.algh-fade-up-group > * {
opacity: 0;
transform: translateY(20px);
animation: alghFadeSlideUp 0.8s ease forwards;
}
.algh-fade-up-group > *:nth-child(1) { animation-delay: 0.35s; }
.algh-fade-up-group > *:nth-child(2) { animation-delay: 0.48s; }
.algh-fade-up-group > *:nth-child(3) { animation-delay: 0.61s; }
/* ===============================
Keyframes
=============================== */
@keyframes alghFadeSlideUp {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes alghShimmer {
0%, 70%, 100% {
right: -140%;
}
85% {
right: 160%;
}
}
@keyframes alghGlowPulse {
0%, 100% {
transform: scale(1);
opacity: 0.95;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes alghFloatSoft {
0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -18px, 0);
}
}
@keyframes alghOrbitSlow {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-10px, 12px, 0) scale(1.03);
}
}
@keyframes alghSparkleDots {
0%, 100% {
opacity: 0.9;
transform: scale(1);
}
50% {
opacity: 0.45;
transform: scale(1.18);
}
}
@keyframes alghPulseLine {
0%, 100% {
opacity: 0.45;
transform: scaleX(0.92);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes alghSweepDark {
0%, 100% {
transform: translateX(100%);
}
50% {
transform: translateX(-100%);
}
}
@keyframes alghSoftAura {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.8;
}
50% {
transform: translate3d(-14px, 12px, 0) scale(1.08);
opacity: 1;
}
}
@keyframes alghSoftAuraReverse {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.7;
}
50% {
transform: translate3d(16px, -10px, 0) scale(1.12);
opacity: 0.95;
}
}
/* ===============================
Responsive
=============================== */
@media (max-width: 991px) {
.algh-hero {
padding: 110px 0 70px;
min-height: auto;
}
.algh-hero-title {
font-size: 46px;
}
.algh-hero-media {
min-height: 480px;
}
.algh-hero-glow {
width: 380px;
height: 380px;
}
.algh-hero-image-wrap {
width: 360px;
height: 360px;
}
.algh-premium-frame::before {
border-radius: 30px;
}
.algh-floating-card {
min-width: 200px;
}
.algh-floating-card-top {
right: 0;
}
.algh-floating-card-bottom {
left: 0;
}
.algh-section-head h2 {
font-size: 30px;
}
.algh-final-title {
font-size: 30px;
}
.algh-process-line {
display: none;
}
.algh-process-step {
min-height: auto;
}
.algh-step-dot {
top: 18px;
right: auto;
left: 22px;
}
}
@media (max-width: 767px) {
.algh-hero {
padding: 95px 0 55px;
}
.algh-hero-content {
text-align: center;
margin: 0 auto;
}
.algh-badge {
font-size: 13px;
}
.algh-hero-actions,
.algh-hero-features,
.algh-contact-lines {
justify-content: center;
}
.algh-hero-title {
font-size: 34px;
line-height: 1.6;
}
.algh-hero-text {
font-size: 15px;
line-height: 2;
}
.algh-hero-media {
min-height: 390px;
}
.algh-hero-glow {
width: 290px;
height: 290px;
}
.algh-hero-image-wrap {
width: 280px;
height: 280px;
padding: 18px;
border-radius: 24px;
}
.algh-premium-frame::before {
border-radius: 24px;
}
.algh-premium-frame::after {
inset: 10px;
border-radius: 18px;
}
.algh-floating-card {
min-width: 160px;
max-width: 180px;
padding: 10px 12px;
}
.algh-floating-card i {
width: 34px;
height: 34px;
font-size: 16px;
}
.algh-floating-card strong {
font-size: 11px;
}
.algh-floating-card span {
font-size: 9px;
}
.algh-floating-card-top {
top: 20px;
right: 0;
}
.algh-floating-card-bottom {
bottom: 18px;
left: 0;
}
.algh-section {
padding: 70px 0;
}
.algh-section-head h2 {
font-size: 26px;
}
.algh-final-title {
font-size: 26px;
}
.algh-stat-box {
min-height: 170px;
padding: 24px 12px;
border-radius: 22px;
}
.algh-stat-icon {
width: 42px;
height: 42px;
font-size: 22px;
}
.algh-process-step {
padding: 34px 20px 24px;
border-radius: 22px;
}
.algh-mini-feature,
.algh-check-item,
.algh-coverage-item {
justify-content: center;
text-align: center;
}
}
@media (max-width: 420px) {
.algh-hero-title {
font-size: 30px;
}
.algh-hero-image-wrap {
width: 250px;
height: 250px;
}
.algh-mini-feature {
width: 100%;
justify-content: center;
}
.algh-contact-lines a {
width: 100%;
}
}
/* =========================================================
HERO FLOATING MOTION
Safe with JS Parallax because it uses translate property
========================================================= */
/* حرکت نرم قاب اصلی تصویر */
.algh-hero-image-wrap.algh-premium-frame {
animation: alghHeroFrameFloat 6.5s ease-in-out infinite;
}
/* نفس کشیدن خیلی ملایم خود تصویر */
.algh-hero-image {
animation: alghHeroImageBreath 6s ease-in-out infinite;
}
/* حرکت نرم کارت بالایی */
.algh-floating-card-top {
animation: alghFloatingCardTopMove 7s ease-in-out infinite;
}
/* حرکت نرم کارت پایینی */
.algh-floating-card-bottom {
animation: alghFloatingCardBottomMove 8s ease-in-out infinite;
}
/* برای اینکه حرکتها طبیعیتر و لوکستر باشند */
.algh-hero-image-wrap,
.algh-hero-image,
.algh-floating-card {
will-change: translate, scale;
}
/* ===============================
Hero Floating Keyframes
=============================== */
@keyframes alghHeroFrameFloat {
0%, 100% {
translate: 0 0;
}
25% {
translate: 0 -6px;
}
50% {
translate: 0 -13px;
}
75% {
translate: 0 -7px;
}
}
@keyframes alghHeroImageBreath {
0%, 100% {
translate: 0 0;
scale: 1;
}
50% {
translate: 0 -4px;
scale: 1.015;
}
}
@keyframes alghFloatingCardTopMove {
0%, 100% {
translate: 0 0;
}
50% {
translate: 0 -11px;
}
}
@keyframes alghFloatingCardBottomMove {
0%, 100% {
translate: 0 0;
}
50% {
translate: 0 10px;
}
}
/* ===============================
Accessibility / Reduced Motion
=============================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
[data-aos] {
transform: none !important;
opacity: 1 !important;
}
.algh-parallax-layer {
transform: none !important;
}
.algh-process-line-fill {
width: 100% !important;
}
*,
*::before,
*::after {
animation: none !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.algh-hero-image-wrap,
.algh-hero-image,
.algh-floating-card {
translate: none !important;
scale: none !important;
}
}
/* =========================================================
PARTNERS / TRUSTED COMPANIES SLIDER
========================================================= */
.algh-partners-section {
position: relative;
padding: 90px 0;
overflow: hidden;
background:
radial-gradient(circle at 15% 20%, rgba(201, 156, 75, 0.13), transparent 34%),
radial-gradient(circle at 85% 80%, rgba(157, 110, 41, 0.10), transparent 36%),
linear-gradient(180deg, #fffaf0 0%, #ffffff 55%, #fff8eb 100%);
}
.algh-partners-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(184, 134, 44, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(184, 134, 44, 0.045) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
/* ===============================
Slider Wrapper
=============================== */
.algh-partners-slider-wrap {
position: relative;
margin-top: 42px;
padding: 22px 0;
isolation: isolate;
}
.algh-partners-slider-wrap::before,
.algh-partners-slider-wrap::after {
content: "";
position: absolute;
top: 0;
width: 110px;
height: 100%;
z-index: 4;
pointer-events: none;
}
.algh-partners-slider-wrap::before {
right: 0;
background: linear-gradient(
to left,
#fffaf0 0%,
rgba(255, 250, 240, 0.88) 35%,
transparent 100%
);
}
.algh-partners-slider-wrap::after {
left: 0;
background: linear-gradient(
to right,
#fffaf0 0%,
rgba(255, 250, 240, 0.88) 35%,
transparent 100%
);
}
.algh-partners-slider {
position: relative;
z-index: 2;
}
/* ===============================
Decorative Glow
=============================== */
.algh-partners-glow {
position: absolute;
top: 50%;
width: 170px;
height: 170px;
border-radius: 50%;
transform: translateY(-50%);
filter: blur(42px);
opacity: 0.42;
z-index: 0;
pointer-events: none;
}
.algh-partners-glow-left {
left: 8%;
background: rgba(201, 156, 75, 0.34);
}
.algh-partners-glow-right {
right: 8%;
background: rgba(235, 197, 122, 0.36);
}
/* ===============================
Partner Item
=============================== */
.algh-partner-item {
padding: 12px;
}
/* ===============================
Partner Logo Card
Supports optional partner name
=============================== */
.algh-partner-logo-card {
position: relative;
min-height: 118px;
padding: 22px 24px;
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 230, 0.78));
border: 1px solid rgba(196, 146, 54, 0.18);
box-shadow:
0 18px 45px rgba(78, 55, 19, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
}
.algh-partner-logo-card.has-partner-name {
min-height: 132px;
padding-top: 20px;
padding-bottom: 18px;
}
.algh-partner-logo-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.68) 48%,
transparent 100%
);
transform: translateX(120%);
transition: transform 0.75s ease;
pointer-events: none;
}
.algh-partner-logo-card::after {
content: "";
position: absolute;
inset: auto 22px 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
rgba(201, 156, 75, 0.72),
transparent
);
opacity: 0;
transition: opacity 0.35s ease;
}
.algh-partner-logo-card:hover {
transform: translateY(-7px);
border-color: rgba(201, 156, 75, 0.38);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 216, 0.92));
box-shadow:
0 24px 60px rgba(91, 63, 22, 0.13),
0 0 0 5px rgba(201, 156, 75, 0.06);
}
.algh-partner-logo-card:hover::before {
transform: translateX(-120%);
}
.algh-partner-logo-card:hover::after {
opacity: 1;
}
/* ===============================
Logo Box & Image
=============================== */
.algh-partner-logo-box {
position: relative;
z-index: 2;
min-height: 62px;
display: flex;
align-items: center;
justify-content: center;
}
.algh-partner-logo-card img {
display: block;
max-width: 150px;
max-height: 58px;
width: auto;
height: auto;
object-fit: contain;
transition:
filter 0.35s ease,
transform 0.35s ease;
}
.algh-partner-logo-card:hover img {
filter: grayscale(0) contrast(1) opacity(1);
transform: scale(1.045);
}
/* ===============================
Optional Partner Name
=============================== */
.algh-partner-name {
position: relative;
z-index: 2;
max-width: 100%;
font-size: 15px;
font-weight: 700;
line-height: 1.8;
color: #7a5520;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition:
color 0.35s ease,
transform 0.35s ease;
}
.algh-partner-logo-card:hover .algh-partner-name {
color: #9d6e29;
transform: translateY(-1px);
}
/* ===============================
Tiny Slider Custom Fixes
=============================== */
.algh-partners-slider-wrap .tns-outer {
position: relative;
z-index: 2;
}
.algh-partners-slider-wrap .tns-ovh {
overflow: hidden;
}
.algh-partners-slider-wrap .tns-inner {
direction: ltr;
}
/* Optional Dots if enabled later */
.algh-partners-slider-wrap .tns-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
.algh-partners-slider-wrap .tns-nav button {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(155, 113, 39, 0.25);
transition: all 0.3s ease;
}
.algh-partners-slider-wrap .tns-nav button.tns-nav-active {
width: 26px;
background: linear-gradient(90deg, #9d6e29, #d7ae59);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.algh-partner-logo-card {
min-height: 112px;
padding: 20px 22px;
}
.algh-partner-logo-card.has-partner-name {
min-height: 128px;
}
.algh-partner-logo-card img {
max-width: 135px;
max-height: 54px;
}
.algh-partner-name {
font-size: 14px;
}
}
@media (max-width: 991px) {
.algh-partners-section {
padding: 75px 0;
}
.algh-partners-slider-wrap::before,
.algh-partners-slider-wrap::after {
width: 78px;
}
}
@media (max-width: 767px) {
.algh-partners-section {
padding: 62px 0;
}
.algh-partners-slider-wrap {
margin-top: 30px;
padding: 14px 0;
}
.algh-partners-slider-wrap::before,
.algh-partners-slider-wrap::after {
width: 48px;
}
.algh-partner-item {
padding: 8px;
}
.algh-partner-logo-card {
min-height: 100px;
padding: 18px;
border-radius: 20px;
}
.algh-partner-logo-card.has-partner-name {
min-height: 120px;
}
.algh-partner-logo-box {
min-height: 54px;
}
.algh-partner-logo-card img {
max-width: 118px;
max-height: 48px;
}
.algh-partner-name {
font-size: 13px;
line-height: 1.7;
}
}
@media (max-width: 480px) {
.algh-partner-logo-card {
min-height: 92px;
padding: 16px;
border-radius: 18px;
}
.algh-partner-logo-card.has-partner-name {
min-height: 114px;
}
.algh-partner-logo-box {
min-height: 50px;
}
.algh-partner-logo-card img {
max-width: 108px;
max-height: 44px;
}
.algh-partner-name {
font-size: 12.5px;
}
}
.algh-section-desc {
font-size: 19px!important;
text-align: center;
}
/* =========================================================
ALOGHAZAL CONTACT PAGE
========================================================= */
/* ===============================
Contact Hero
=============================== */
.algh-contact-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 130px 0 90px;
min-height: 720px;
background:
radial-gradient(circle at 18% 24%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 30%),
radial-gradient(circle at 80% 25%, rgba(244,215,123,0.22) 0%, rgba(244,215,123,0) 34%),
radial-gradient(circle at 68% 75%, rgba(199,154,34,0.10) 0%, rgba(199,154,34,0) 30%),
linear-gradient(135deg, #ffffff 0%, #fffdf8 52%, #f7f1df 100%);
}
.algh-contact-hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 160px;
background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(255,255,255,0));
z-index: 0;
pointer-events: none;
}
.algh-contact-hero-title {
margin: 0;
color: var(--algh-dark);
font-size: clamp(38px, 4vw, 60px);
line-height: 1.5;
font-weight: 900;
}
.algh-contact-hero-title span {
position: relative;
background: linear-gradient(135deg, var(--algh-gold-1), var(--algh-gold-2), var(--algh-gold-3), var(--algh-gold-4));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.algh-contact-hero-title span::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -8px;
height: 10px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(221,185,76,0), rgba(221,185,76,0.35), rgba(221,185,76,0));
animation: alghPulseLine 3.2s ease-in-out infinite;
}
/* ===============================
Contact Hero Card
=============================== */
.algh-contact-hero-card-wrap {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.algh-contact-glow {
position: absolute;
width: 470px;
height: 470px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(245,226,171,0.72) 58%, rgba(212,175,55,0.20) 100%);
box-shadow: 0 24px 60px rgba(187,148,40,0.18);
filter: blur(2px);
animation: alghGlowPulse 5.5s ease-in-out infinite;
}
.algh-contact-premium-card {
position: relative;
z-index: 2;
width: min(100%, 470px);
padding: 38px 34px;
border-radius: 34px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(255,255,255,0.72);
box-shadow: 0 25px 55px rgba(0,0,0,0.08);
backdrop-filter: blur(14px);
overflow: hidden;
animation: alghHeroFrameFloat 6.5s ease-in-out infinite;
}
.algh-contact-premium-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 34px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(221,185,76,0.38), rgba(255,255,255,0.65));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.algh-contact-premium-card::after {
content: "";
position: absolute;
top: 0;
right: -130%;
width: 80%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.50), rgba(255,255,255,0));
transform: skewX(-20deg);
animation: alghShimmer 6s ease-in-out infinite;
pointer-events: none;
}
.algh-contact-card-icon {
width: 68px;
height: 68px;
border-radius: 20px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17);
color: #ffffff;
font-size: 32px;
box-shadow: 0 16px 34px rgba(185,139,23,0.24);
}
.algh-contact-premium-card h3 {
margin-bottom: 16px;
color: #242424;
font-size: 28px;
font-weight: 900;
}
.algh-contact-premium-card p {
margin-bottom: 24px;
color: #666666;
line-height: 2;
font-size: 16px;
}
.algh-contact-quick-list {
display: grid;
gap: 14px;
}
.algh-contact-quick-item {
position: relative;
display: flex;
align-items: center;
gap: 13px;
padding: 15px 16px;
border-radius: 16px;
background: #ffffff;
border: 1px solid #eee5c8;
box-shadow: 0 12px 26px rgba(0,0,0,0.04);
color: inherit;
text-decoration: none;
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-contact-quick-item:hover {
transform: translateY(-4px);
border-color: rgba(199,154,34,0.34);
box-shadow: 0 18px 34px rgba(0,0,0,0.07);
}
.algh-contact-quick-item i {
width: 42px;
height: 42px;
border-radius: 13px;
background: rgba(212,175,55,0.12);
color: #c49a26;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.algh-contact-quick-item span,
.algh-contact-quick-item strong {
display: block;
}
.algh-contact-quick-item span {
color: #777777;
font-size: 13px;
margin-bottom: 3px;
}
.algh-contact-quick-item strong {
direction: ltr;
text-align: right;
color: #2d2d2d;
font-size: 17px;
font-weight: 900;
}
.algh-contact-floating-note {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(212,175,55,0.22);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
color: #444444;
font-weight: 800;
backdrop-filter: blur(10px);
}
.algh-contact-floating-note i {
color: #c49a26;
font-size: 20px;
}
.algh-contact-floating-note-top {
top: 80px;
right: 10px;
animation: alghFloatingCardTopMove 7s ease-in-out infinite;
}
.algh-contact-floating-note-bottom {
bottom: 85px;
left: 0;
animation: alghFloatingCardBottomMove 8s ease-in-out infinite;
}
/* ===============================
Contact Info Cards
=============================== */
.algh-contact-info-card {
position: relative;
overflow: hidden;
height: 100%;
padding: 30px 22px;
border-radius: 22px;
background: #ffffff;
border: 1px solid #efe7cf;
box-shadow: var(--algh-shadow-sm);
text-align: center;
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition),
border-color var(--algh-transition);
}
.algh-contact-info-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0), rgba(221,185,76,0.09));
opacity: 0;
transition: opacity var(--algh-transition);
pointer-events: none;
}
.algh-contact-info-card::after {
content: "";
position: absolute;
top: 0;
right: -130%;
width: 80%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.48), rgba(255,255,255,0));
transform: skewX(-20deg);
transition: right 0.9s ease;
pointer-events: none;
}
.algh-contact-info-card:hover {
transform: translateY(-7px);
border-color: rgba(199,154,34,0.34);
box-shadow: var(--algh-shadow-lg);
}
.algh-contact-info-card:hover::before {
opacity: 1;
}
.algh-contact-info-card:hover::after {
right: 160%;
}
.algh-contact-info-icon {
width: 58px;
height: 58px;
margin: 0 auto 18px;
border-radius: 17px;
background: rgba(212,175,55,0.12);
color: #c49a26;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
transition: var(--algh-transition);
}
.algh-contact-info-card:hover .algh-contact-info-icon {
transform: translateY(-3px) scale(1.06);
background: linear-gradient(135deg, rgba(221,185,76,0.22), rgba(199,154,34,0.18));
box-shadow: 0 10px 24px rgba(199,154,34,0.16);
}
.algh-contact-info-card h5 {
margin-bottom: 12px;
color: #2d2d2d;
font-size: 20px;
font-weight: 900;
}
.algh-contact-info-card p {
margin-bottom: 14px;
color: #666666;
line-height: 1.9;
font-size: 15px;
}
.algh-contact-info-card a,
.algh-contact-info-card strong {
display: inline-flex;
direction: ltr;
color: #a67f16;
font-size: 18px;
font-weight: 900;
text-decoration: none;
}
/* ===============================
Contact Form
=============================== */
.algh-contact-form-card,
.algh-address-card,
.algh-contact-trust-box,
.algh-contact-dark-box {
position: relative;
overflow: hidden;
border-radius: 26px;
border: 1px solid #efe7cf;
box-shadow: var(--algh-shadow-sm);
}
.algh-contact-form-card {
padding: 36px;
background: rgba(255,255,255,0.92);
}
.algh-contact-form-card::before,
.algh-address-card::before,
.algh-contact-trust-box::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(244,215,123,0.16), rgba(244,215,123,0) 38%);
pointer-events: none;
}
.algh-contact-form {
position: relative;
z-index: 2;
}
.algh-form-group label {
display: block;
margin-bottom: 10px;
color: #333333;
font-weight: 800;
font-size: 15px;
}
.algh-input-wrap {
position: relative;
}
.algh-input-wrap i {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
color: #c49a26;
font-size: 19px;
z-index: 2;
pointer-events: none;
}
.algh-textarea-wrap i {
top: 23px;
transform: none;
}
.algh-contact-form .form-control,
.algh-contact-form .form-select {
min-height: 54px;
padding: 13px 48px 13px 16px;
border-radius: 14px;
border: 1px solid #eee3c6;
background-color: #ffffff;
color: #333333;
font-weight: 600;
box-shadow: none;
transition:
border-color var(--algh-transition),
box-shadow var(--algh-transition),
background var(--algh-transition);
}
.algh-contact-form textarea.form-control {
min-height: 150px;
resize: vertical;
line-height: 2;
}
.algh-contact-form .form-control:focus,
.algh-contact-form .form-select:focus {
border-color: rgba(199,154,34,0.55);
box-shadow: 0 0 0 4px rgba(199,154,34,0.10);
background: #fffdf8;
}
.algh-contact-form .form-control::placeholder {
color: #a1a1a1;
font-weight: 500;
}
.algh-form-note {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(212,175,55,0.10);
border: 1px solid rgba(212,175,55,0.22);
color: #6a551d;
font-weight: 700;
line-height: 1.8;
}
.algh-form-note i {
color: #b98b17;
font-size: 20px;
}
.algh-contact-submit {
min-width: 230px;
}
/* ===============================
Address / Side Cards
=============================== */
.algh-contact-side {
height: 100%;
}
.algh-address-card,
.algh-contact-trust-box {
padding: 30px 26px;
background: rgba(255,255,255,0.92);
}
.algh-address-icon {
width: 62px;
height: 62px;
margin-bottom: 18px;
border-radius: 18px;
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 14px 28px rgba(185,139,23,0.22);
}
.algh-address-card h4,
.algh-contact-trust-box h5,
.algh-contact-dark-box h4 {
position: relative;
z-index: 2;
color: #252525;
font-weight: 900;
line-height: 1.6;
}
.algh-address-card p {
position: relative;
z-index: 2;
color: #666666;
line-height: 2.1;
margin-bottom: 22px;
}
.algh-address-actions {
position: relative;
z-index: 2;
}
.algh-contact-dark-box {
padding: 30px 26px;
background:
radial-gradient(circle at 20% 20%, rgba(221,185,76,0.14), rgba(221,185,76,0) 30%),
linear-gradient(135deg, #1f1f1f 0%, #2b2b2b 100%);
border-color: rgba(255,255,255,0.10);
}
.algh-contact-dark-box span {
display: inline-flex;
margin-bottom: 10px;
color: var(--algh-gold-1);
font-size: 14px;
font-weight: 900;
}
.algh-contact-dark-box h4 {
color: #ffffff!important;
}
.algh-contact-dark-box p {
color: rgba(255,255,255,0.78);
line-height: 2;
margin-bottom: 22px;
}
/* ===============================
Map
=============================== */
.algh-map-card {
position: relative;
overflow: hidden;
height: 430px;
border-radius: 28px;
border: 1px solid rgba(199,154,34,0.22);
background: #ffffff;
box-shadow: 0 22px 52px rgba(0,0,0,0.08);
}
.algh-map-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(221,185,76,0.34), rgba(255,255,255,0.65));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 2;
pointer-events: none;
}
.algh-map-card iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
filter: saturate(0.85) contrast(1.02);
}
/* ===============================
Floating Contact Buttons
=============================== */
.algh-floating-contact-buttons {
position: fixed;
left: 22px;
bottom: 22px;
z-index: 999;
display: grid;
gap: 12px;
}
.algh-floating-contact-btn {
width: 54px;
height: 54px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
font-size: 25px;
text-decoration: none;
box-shadow: 0 14px 30px rgba(0,0,0,0.18);
transition:
transform var(--algh-transition),
box-shadow var(--algh-transition);
}
.algh-floating-contact-btn:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}
.algh-floating-phone {
background: linear-gradient(135deg, var(--algh-gold-2), #b98b17);
}
.algh-floating-whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
}
/* ===============================
Contact Responsive
=============================== */
@media (max-width: 991px) {
.algh-contact-hero {
padding: 110px 0 70px;
min-height: auto;
}
.algh-contact-hero-title {
font-size: 44px;
}
.algh-contact-hero-card-wrap {
min-height: 500px;
}
.algh-contact-glow {
width: 380px;
height: 380px;
}
.algh-contact-premium-card {
width: min(100%, 430px);
}
.algh-contact-floating-note-top {
right: 0;
}
.algh-contact-floating-note-bottom {
left: 0;
}
}
@media (max-width: 767px) {
.algh-contact-hero {
padding: 95px 0 55px;
}
.algh-contact-hero-title {
font-size: 33px;
line-height: 1.65;
text-align: center;
}
.algh-contact-hero-card-wrap {
min-height: 470px;
}
.algh-contact-glow {
width: 290px;
height: 290px;
}
.algh-contact-premium-card {
padding: 28px 22px;
border-radius: 24px;
}
.algh-contact-premium-card h3 {
font-size: 23px;
}
.algh-contact-floating-note {
font-size: 12px;
padding: 10px 12px;
}
.algh-contact-floating-note-top {
top: 12px;
}
.algh-contact-floating-note-bottom {
bottom: 12px;
}
.algh-contact-form-card {
padding: 26px 18px;
border-radius: 22px;
}
.algh-address-card,
.algh-contact-trust-box,
.algh-contact-dark-box {
padding: 26px 20px;
border-radius: 22px;
}
.algh-contact-submit {
width: 100%;
}
.algh-map-card {
height: 340px;
border-radius: 22px;
}
.algh-floating-contact-buttons {
left: 14px;
bottom: 14px;
}
.algh-floating-contact-btn {
width: 48px;
height: 48px;
border-radius: 15px;
font-size: 22px;
}
}
@media (max-width: 420px) {
.algh-contact-hero-title {
font-size: 29px;
}
.algh-contact-premium-card {
padding: 24px 16px;
}
.algh-contact-quick-item {
padding: 13px;
}
.algh-contact-quick-item strong {
font-size: 15px;
}
.algh-map-card {
height: 300px;
}
}
/* =========================================================
ABOUT PAGE - PREMIUM STYLES
ساختار بدنه متفاوت با ایندکس و تماس
========================================================= */
/* ===============================
About Hero
=============================== */
.algh-about-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 140px 0 70px;
text-align: center;
background:
radial-gradient(circle at 30% 10%, rgba(244, 215, 123, 0.12), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(199, 154, 34, 0.07), transparent 40%),
linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}
.algh-about-hero-bg-shape {
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, rgba(212,175,55,0.03) 0px, rgba(212,175,55,0.03) 2px, transparent 2px, transparent 8px);
pointer-events: none;
z-index: 0;
}
.algh-about-hero-content {
position: relative;
z-index: 2;
}
.algh-about-eyebrow {
display: inline-block;
padding: 8px 20px;
border-radius: 30px;
background: rgba(212, 175, 55, 0.10);
border: 1px solid rgba(212, 175, 55, 0.25);
color: #b08a1e;
font-weight: 800;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 25px;
backdrop-filter: blur(4px);
}
.algh-about-hero-title {
font-size: clamp(32px, 5vw, 52px);
font-weight: 900;
color: #1f1f1f;
line-height: 1.5;
margin-bottom: 24px;
}
.algh-about-hero-title span {
background: linear-gradient(135deg, #dbb432, #9f7613);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.algh-about-hero-sub {
max-width: 650px;
margin: 0 auto;
color: #666666;
font-size: 17px;
line-height: 2.1;
}
/* Visual Emblem */
.algh-about-visual {
position: relative;
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.algh-about-emblem {
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border: 2px solid rgba(212,175,55,0.35);
box-shadow: 0 20px 45px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.algh-about-emblem img {
max-width: 65%;
max-height: 65%;
object-fit: contain;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.algh-about-aura {
position: absolute;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(244,215,123,0.3) 0%, transparent 70%);
border-radius: 50%;
z-index: 1;
animation: alghGlowPulse 5.5s ease-in-out infinite;
}
/* ===============================
Mission & Vision Cards
=============================== */
.algh-mv-card {
background: #ffffff;
border-radius: 28px;
padding: 40px 32px;
height: 100%;
border: 1px solid #efe7cf;
box-shadow: 0 18px 40px rgba(0,0,0,0.04);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
overflow: hidden;
}
.algh-mv-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 70px;
background: linear-gradient(to bottom, #dbb432, #9f7613);
border-radius: 0 10px 10px 0;
opacity: 0.8;
}
.algh-mv-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(0,0,0,0.08);
}
.algh-mv-icon {
width: 60px;
height: 60px;
border-radius: 18px;
background: rgba(212,175,55,0.12);
color: #c49a26;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.algh-mv-card h3 {
font-size: 24px;
font-weight: 900;
color: #1f1f1f;
margin-bottom: 16px;
}
.algh-mv-card p {
color: #666;
line-height: 2.1;
margin: 0;
}
/* ===============================
Vertical Story Timeline
=============================== */
.algh-vertical-timeline {
position: relative;
padding-right: 40px;
margin-top: 30px;
}
.algh-vertical-timeline::before {
content: '';
position: absolute;
right: 16px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(221,185,76,0.6), rgba(221,185,76,0.05));
border-radius: 4px;
}
.algh-vt-item {
position: relative;
margin-bottom: 45px;
padding-right: 40px;
}
.algh-vt-item:last-child {
margin-bottom: 0;
}
.algh-vt-dot {
position: absolute;
right: 8px;
top: 5px;
width: 18px;
height: 18px;
background: #fff;
border: 3px solid #dbb432;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(221,185,76,0.15);
z-index: 2;
}
.algh-vt-content {
background: #ffffff;
border: 1px solid #efe7cf;
border-radius: 20px;
padding: 24px 28px;
box-shadow: 0 10px 28px rgba(0,0,0,0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.algh-vt-content:hover {
transform: translateY(-4px);
box-shadow: 0 16px 35px rgba(0,0,0,0.07);
}
.algh-vt-year {
display: inline-block;
font-weight: 900;
font-size: 14px;
color: #a67f16;
background: rgba(212,175,55,0.12);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
.algh-vt-content h4 {
font-size: 20px;
font-weight: 900;
color: #1f1f1f;
margin-bottom: 10px;
}
.algh-vt-content p {
color: #666;
line-height: 1.9;
margin: 0;
}
/* ===============================
Core Values Cards
=============================== */
.algh-value-card {
background: #ffffff;
border: 1px solid #efe7cf;
border-radius: 24px;
padding: 32px 24px;
text-align: center;
height: 100%;
box-shadow: 0 12px 30px rgba(0,0,0,0.04);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.algh-value-card:hover {
transform: translateY(-6px);
border-color: rgba(199,154,34,0.35);
box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
.algh-value-icon-wrap {
width: 64px;
height: 64px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgba(244,215,123,0.25), rgba(199,154,34,0.12));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #b98b17;
font-size: 28px;
}
.algh-value-card h5 {
font-size: 20px;
font-weight: 900;
color: #222;
margin-bottom: 12px;
}
.algh-value-card p {
color: #666;
line-height: 1.9;
margin: 0;
}
/* ===============================
Manifest / Quote Section
=============================== */
.algh-manifest-section {
padding: 90px 0;
background:
radial-gradient(circle at 50% 50%, rgba(244,215,123,0.10), transparent 60%),
#fffdf8;
border-top: 1px solid #efe7cf;
border-bottom: 1px solid #efe7cf;
}
.algh-manifest-card {
position: relative;
padding: 50px 40px;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(8px);
border-radius: 32px;
border: 1px solid rgba(212,175,55,0.2);
box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}
.algh-quote-icon {
font-size: 48px;
color: rgba(212,175,55,0.3);
margin-bottom: 25px;
display: block;
}
blockquote {
font-size: 22px;
font-weight: 700;
line-height: 2.1;
color: #333;
margin: 0;
font-style: normal;
}
.algh-manifest-divider {
width: 60px;
height: 3px;
background: linear-gradient(to right, #dbb432, transparent);
margin: 25px auto;
border-radius: 2px;
}
.algh-manifest-author {
font-size: 16px;
font-weight: 800;
color: #9f7613;
display: block;
}
/* ===============================
Responsive
=============================== */
@media (max-width: 991px) {
.algh-about-hero {
padding: 110px 0 50px;
}
.algh-vertical-timeline {
padding-right: 30px;
}
.algh-vt-item {
padding-right: 30px;
}
}
@media (max-width: 767px) {
.algh-about-hero-title {
font-size: 30px;
}
.algh-mv-card {
padding: 28px 20px;
}
.algh-vertical-timeline {
padding-right: 20px;
}
.algh-vt-item {
padding-right: 25px;
}
.algh-manifest-card {
padding: 30px 20px;
}
blockquote {
font-size: 18px;
}
}