html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
     font-family: "Lato", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  
    background: url("images/inner_bg.png") center top no-repeat;
   
    
}    
        .bg {background: #F3F7FF}
        .top-section { margin-bottom: 48px}
        .top-section button { margin-right: 10px; border-radius: 12px}
        .top-section button a { color: #000; text-decoration: NONE  }
        .top-section .carousel-caption { left: 15%; top: 30%; TEXT-ALIGN: LEFT; width: 30%}
        .top-section .carousel-caption h5{ font-size: 42px; font-weight: 400; line-height: 56px; padding-bottom: 16px; color: #fff}
        .top-section .carousel-caption h5 span {color: #F3AB03; font-family: "Shadows Into Light", cursive;}
        .top-section .carousel-caption p { color: #CDD1DF; font-size: 24px; line-height: 32px; font-weight: 400; padding-bottom: 35px;}
        .header { position: absolute; z-index: 100; width: 100%; }
        .head { display: flex; justify-content: space-between; align-items: center}
        .head ul { padding: 0; margin: 0; backdrop-filter: blur(240px);  padding: 12px 12px; border-radius: 40px; display: flex}
        .head ul li { list-style: none}
        
        .head ul li a { color:#fff;  text-decoration: none; padding: 5px 12px; }
        .head ul li a:hover { color: yellow}
        .head ul.open {
    display: block;
    width: 72%;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0;
    border: none;
    height: 100vh;
    text-align: right;
            padding-top: 50px;
}
        .head ul.open li { padding-bottom: 20px;}
        .head ul.open li:last-child { display: block;}
        
        h2 {color: #213B74; font-size: 32px; font-weight: 400; line-height: 56px; text-align: center; width: 100%; }
        .partners ul { padding: 0; margin: 0; width: 100%; text-align: center; display: flex; justify-content: center}
        .partners ul li { list-style:none; padding: 20px }
        .how-work { padding-top: 40px; text-align: center; padding-bottom: 44px;}
        .how-work p { font-size: 18px; font-weight: 400; line-height: 24px; }
        .how-work p strong { font-weight: 700}
        .steps { display: flex; justify-content: space-between; gap: 32px; padding-top: 44px; padding-bottom: 44px;}
        .steps .step { text-align: left; background: #fff; border-radius: 15px; background: #fff; padding: 20px;}
        .steps .step .st { color: #5D74AA; font-size: 14px; line-height: 32px; font-weight: 700}
        .steps .step h3 {color: #213B74; font-size: 24px; font-weight: 400; line-height: 56px; }
        .steps .step p {color: #6C80AE; font-size: 16px; font-weight: 400; line-height: 20px; }
        .fill-form { background: url(images/form-bg.png) left top no-repeat; background-size:cover; padding: 44px 0 }
        .fill-form .forms { display: flex; justify-content: space-between; align-items:center}

        .fill-form .forms .formtext, .fill-form .forms .form { width: 50%}
        .fill-form .forms .formtext h3 {color: #FFFEFF; font-size: 32px; font-weight: 500; line-height: 56px; }
         .fill-form .forms .formtext p {color: #EDEFF7; font-size: 24px; font-weight: 400; line-height: 32px; padding-right: 100px; }
       .fill-form .forms .form  {backdrop-filter: blur(54px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.22) 100%); padding: 33px 60px; border-radius: 20px; color: #fff;}
        .fill-form .forms .form h3 { width: 100%; text-align: center; padding-bottom: 32px; color: #FFFEFF; font-size: 24px; font-weight: 700; line-height: 56px; }
        .fill-form .forms .form .btn-primary { width: 100%; background: #2A2F85}
        .fill-form .forms .form input, .fill-form .forms .form textarea,  .fill-form .forms button  { border: none; border-radius: 10px;}
        .project {text-align: center; padding-top: 44px;}

#section-cars .project {text-align: center; padding-top:0px;}
        .project h2 { color: ##363636; font-size: 32px; font-weight: 400; line-height: 56px;}
        .project .all-prj { display: flex; justify-content:space-between; gap:34px; padding-top: 44px; flex-wrap: wrap}
        .project .all-prj .prj { background: #EDEFF7; border: 1px solid #D9E2F6; border-radius: 32px; width: 30%}
        .project .all-prj .prj p { padding: 15px; }
        .project .all-prj .prj p a { font-weight: 800; text-decoration: underline; color: #213B74}
        .project .all-prj .prj .inner-prj { background: #fff; border-radius: 32px; padding: 15px; text-align: left}
        .project .all-prj .prj .inner-prj .pr_title {color: #213B74; font-size: 16px; font-weight: 700; line-height: 18px; padding-top: 15px;}
        .project .all-prj .prj .inner-prj p {color: #696969; font-size: 12px; font-weight: 400; line-height: 16px; padding: 10px 0}
       .project .all-prj .prj .inner-prj .ameniteis {color: #213B74; font-size: 12px; font-weight: 500; line-height: 16px; border-top:1px solid #ccc; padding: 10px 0; display: flex; justify-content: space-between}
       .project .all-prj .prj .inner-prj  .posse { background: #E6F3EA; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 16px;     display: flex; justify-content: space-between; color: #1F8600;}
        .price {color: #213B74; font-size: 24px; font-weight: 800; line-height: 32px; padding: 8px 0   }
.prp-details .price {color: #9a5c2f;}
        .contact-mid { background: url( images/contact-bg.png) left top no-repeat; border-radius: 20px; background-size: 100% ; margin-top: 44px;}
            .contact-mid .cont { text-align: center; padding: 70px 350px; width: 100%; background: #00000099; color: #fff; border-radius: 20px;}
            .contact-mid .cont  h2 {
font-weight: 500;
font-size: 24px;
line-height: 32px;
letter-spacing: 0%;
text-align: center; color: #fff; padding-bottom: 20px;
}
            .contact-mid .cont  p {
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 0%;
text-align: center; padding-bottom: 44px
}
            .contact-mid .cont a { color: #000; text-decoration: none; margin-top: 30px;}
            .faq {display: flex; justify-content: space-between; text-align: left; margin-top: 44px;}
            .faq .faq-left { width: 370px; text-align: left}
           
            .faq .faq-left h2 {
font-weight: 700;
font-size: 32px;
line-height: 58px;
letter-spacing: 6%;
vertical-align: middle; padding-bottom: 20px; text-align: left;
}
            .faq .faq-left p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 6%;  color: #213B74;
}
             .faq .faq-right { width: calc(100% - 400px);}
            .faq .accordion-button,   .faq .accordion-item { background: #E8F0FF;}
            .faq .accordion-item { margin-bottom: 10px; border: none; border-radius: 20px;}
            .faq .accordion-button {border-radius: 20px;}
            .faq  .accordion-button:not(.collapsed) { box-shadow: none;}
            .faq  .accordion-item:first-of-type .accordion-button, .faq .accordion-item:last-of-type .accordion-button.collapsed { border-radius: 20px;}
            .faq .accordion-item h2 .accordion-button { line-height: 44px;  color: #00021E;
font-weight: 500;
font-size: 24px;
letter-spacing: 0%;
vertical-align: middle;
}
            .faq .accordion-item .accordion-body {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%; color: #666778;
vertical-align: middle; padding-top: 0;
}
            
            .footer {background:#000D28; padding: 45px 0; margin-top: 44px}
           .footer  .ftcontent .subs { padding: 10px 0; font-size: 20px; font-weight: 400; color: #fff;}
           .footer .ftcontent input {     border: none;
    border-bottom: 1px solid #FFFFFFCC;
    padding: 10px 0 10px;
    width: 100%;
    background: none; margin-bottom: 20px;}
            .footer .ftcontent button a { text-decoration: none; color:#000D28 }
           
           .kibcom { width: 374px;}
            .kibcom p {color: #fff; 
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0%;
                padding: 10px 0
}
           .kibcom .btnsubmit {margin: 15px 0;}
            .kibcom .social a { margin-right: 10px;}
           .ftcontent { display: flex;  width: calc(100% - 350px); padding-left: 50px; justify-content: space-between;}
           .ftcontent ul { padding: 0; margin: 0;}
            .ftcontent ul li { list-style: none; }
           .ftcontent ul li.heading {font-size: 24px; font-weight: 600; color: #fff; padding-bottom: 20px;}
           .ftcontent ul li a { color: #fff;  padding: 6px 0;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
               display:block; text-decoration: none;
}
           .copyright {border-top:1px solid #ccc; padding: 20px 0; text-align: center; width: 100%;  font-size: 18px; font-weight: 400; color: #fff; margin-top: 30px; }
            .flx {   display: flex;}
        .hemburger { display: none}
        .open { display: flex;}
        .close {    padding: 0 15px 36px 0;
    margin-top: -30px;
    font-size: 32px;
    font-weight: 200;
    color: #fff;}
        .head ul li.contact { display: none}
         .head ul li.close { display: none}
        .contact { display: block}
           .searchprform {  width: calc(100% - 200px);
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    position: absolute;
    z-index: 10;
    top: 75%;
            margin: 8px 100px; opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; }
        
        .searchprform.show {
  opacity: 1;
  visibility: visible;
}
        
        
        .searchprform h2 {color: #00092A;
font-weight: 600;
font-size: 24px;
line-height: 28px;    margin-bottom: 27px; text-align: left;

} 
        
        .searchprform .aed { display: flex; border: none; background: rgba(242, 242, 242, 1); font-size: 16px; line-height: 28px; color: #9A99A2; padding: 10px; border-radius: 10px;}
        .searchprform .aed > div { width: 50px; line-height: 28px;}
        .searchprform .aed input { background: none; border: none; padding: 0}
        .searchprform .aed select { background-color: rgba(242, 242, 242, 1); border: none; padding: 0}
        .searchprform button { margin-top: 25px; width: 100%;background: #2A2F85; border: none; }
        
        .searchprform button.btn-primary{padding: 7px;}
       .searchprform .form-label  {color:#00092A; 
font-weight: 500;
font-size: 16px;
line-height: 28px;
letter-spacing: 6%;
}
#wrapper { overflow: visible;}
 .header { position: inherit;
    z-index: 100;
    width: 100%;
    padding-top: 10px;
    /*background: linear-gradient(178deg, #f1c27c, #c48123);*/
     background: #a76227;
    padding-bottom: 10px;
    border-bottom: 1px solid #ffa152a6;}

.headers { width: calc(100%); padding: 0 15px;  border-bottom: 1px solid #ccc; position: sticky;  top: 111px;  z-index: 8;  background: linear-gradient(178deg, #3c3595, #091e4b);}
        .headers .head-top { display: flex; justify-content: flex-start; border-bottom: 1px solid gray; background: #4a2103; color: #fff;}
        .headers .head-top .logo { width: 200px; padding: 5px}
        .headers .head-top .top-nav { width: calc(100% - 200px); display: flex; justify-content: space-between; align-items: center}
        .headers .head-top .top-nav h2 { font-weight: bold; font-size: 18px; color: #fff;  text-align: left; letter-spacing: 0; width: calc(100% - 500px);}
.headers .head-top .top-nav h2 a { color: #fff;}
        .headers .head-top .top-nav ul { display: flex;}
        .headers .head-top .top-nav ul li { list-style: none;}
        .headers .head-top .top-nav ul li a {    padding: 10px 20px;
    border: 1px solid #af510d;
    border-radius: 5px;
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    background: #682c00;}
        .headers .head-top .top-nav ul li a:hover { box-shadow: 0 0 2px #ffa96a}
        .headers .filter {  padding: 20px; display: flex; justify-content: space-between; align-items: center;  width: 1280px; margin: 0 auto; color: #213B74}
        .filter .search-filter button { display: flex; justify-content: space-between; width: 200px; align-items: center; border:1px solid #ccc; padding: 14px; border-radius: 5px; cursor: pointer;  color: #213B74; }
.filter .search-filter button svg { fill:#213B74;}
        .headers .filter .rest-filter { width: calc(100% - 200px); padding-left: 20px; display: flex; justify-content: flex-start; gap:20px}
        .headers .filter .rest-filter .bonus {align-items: center; border:1px solid #ccc; padding: 10px; border-radius: 5px; cursor: pointer; background: none; background: #fff; color: #213B74;}
       .headers  .filter .rest-filter .status {align-items: center; border:1px solid #ccc; padding: 10px; border-radius: 5px; cursor: pointer; width: 200px;     color: #213B74;}
        .headers  .filter .rest-filter .outer {width: 10%; position: relative}
        .headers  .filter .rest-filter .outer .price {align-items: center; border:1px solid #ccc; padding: 10px; border-radius: 5px; cursor: pointer;   display: flex; justify-content: space-around; background: #fff; width: 100%; font-size: 16px;  font-weight: normal; color: #213b74; }
.headers .filter .rest-filter .outer .price svg {width: 20px;}
        
        .headers  .filter .rest-filter .outer .price-sec {position: absolute;
    left: 0;
    top: 50px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 300px;}
        .pricebtn { background: #ebebeb; padding: 5px; border-radius: 5px; display: flex}
        .pricebtn button { background: none; border: none; width: 50%; padding: 10px 0 }
        .pricebtn button.active { background: #fff; box-shadow: 0 0 5px #777; border-radius: 5px}
        .pricebar {padding-top: 10px;}
        .pricebar label {font-weight: bold; font-size: 15px; font-weight: 600; padding-bottom: 5px;}
        .pricebar .relative input { width: 100%; border: 1px solid #bdbdbd; padding: 5px; border-radius: 5px; background: #fff;} 
        .pricebar .price-list { padding-top: 10px;}
        .pricebar .price-list .p-list { font-size: 16px; font-weight: bold; padding: 3px 0}
        .submit {margin: 15px;
    width: calc(100% - 30px);
    background: #000;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;}

#subheader h1 { font-size: 52px; color: #fff; text-shadow: none;}
#content section:first-of-type {
    padding-top: 20px;
   background: linear-gradient(178deg, #3c3595, #091e4b);
        margin-bottom: 40px; color: #fff;
    padding-bottom: 65px;
}

#content #section-car-details:first-of-type { background: #fff;}
.ul-style-2 li, .prp-item span { color: #000}

.prp-address { color: #000; display: flex; align-items: center}
.prp-address svg { margin-right: 10px;}

.inner-prj a {    position: relative;
    padding-bottom: 56.9%;
    display: flex;
    overflow: hidden;
    text-decoration: none;
    
   }

  .inner-prj a img  {width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
        top: 0;}

.about-right-text { line-height: 30px; font-size: 18px;}
.about-left-text h2 {font-size: 42px; font-weight: 400;   line-height: 55px; text-align: left}
.about_numbers { margin-bottom: 50px;}
.about_numbers h3 { font-weight: bold;}
.about_numbers .de_count {border:1px solid #e3cdbc;}
.about_feature { margin-bottom: 100px;}
h2 {letter-spacing: -0.5px;}
#section-call-to-action { margin-bottom: -133px;}
#section-img-with-tab {
    background: #f6f6f6; padding-bottom: 50px; padding-top: 50px;
}
.tab-content>.active { line-height: 22px;}
.contact_page h3 {padding: 15px 0}   
#submit input { padding: 15px}

#content {padding: 110px 0 90px 0!Important;}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1270px;
    }
    
}

@media (max-width: 1024px) {
.headers {    padding: 15px 15px;}
                .headers .filter {width: 100%;  display: block; padding: 0;}
                .headers .filter .search-filter { width: 100%}
                .filter .search-filter button { width: 99%; padding: 10px 14px;}
                .price, .form-select { line-height: inherit}
                .headers .filter .rest-filter .bonus { width: 48%; text-align: left;}
                .headers .filter .rest-filter {gap: 10px; flex-wrap: wrap; padding: 10px 0 0 0; width: 100%;}
                .headers .filter .rest-filter .status { width: 48%}
                .headers .filter .rest-filter .outer {    width: 48%;}
                .headers .filter .rest-filter .outer .price { padding: 5px; justify-content: space-between}
}
@media (max-width: 991px) {
#content {padding: 83px 0 90px 0!Important;}
}

            @media (max-width: 820px) {
                .top-section .carousel-caption h5 {font-size: 27px;line-height: 32px;}
                .top-section .carousel-caption { width: 41%;}
                .top-section .carousel-caption p {font-size: 16px; line-height: 22px; font-weight: 400; padding-bottom: 30px;}
                .partners ul li a img { width: 100% }
                .partners ul li {list-style: none; padding: 20px 0px;   margin: 0 5px;}
                .fill-form .forms { flex-wrap: wrap;}
                .fill-form .forms .formtext, .fill-form .forms .form { width: 100%}
                .fill-form .forms .form { margin-top: 30px;}
                .project .all-prj .prj { width: 33%;}
                .project .all-prj { gap:9px;}
                .contact-mid .cont { padding: 50px;}
                .faq { flex-wrap: wrap}
                .faq .faq-left { width: 100%; padding-bottom: 44px;}
                .faq .faq-right {width: 100%;}
                .steps .step h3 {line-height: inherit;    padding-bottom: 10px;}
                .footer > .flx { flex-wrap: wrap}
               .kibcom {width: 100%; padding-bottom: 30px;}
               .ftcontent {width: 100%; padding-left: 0;}
                .hemburger { display: none}
                    #subheader {padding: 0px 0 65px 0 !important;}
                    #subheader h1 {  margin-top: 21px; font-size: 34px; }
                headers  {top: 83px;}
                .image-container { display: none;}
                
                 
                
            }
            
 @media (max-width: 768px) {
             #content { padding: 83px 0 90px 0;}
             .headers { top:83px}
}

            @media (max-width: 767px) {
                 .ftcontent { width: 100%;padding-left: 0;flex-wrap: wrap;}
                h2 { font-size: 20px; line-height: 40px;}
                .partners { overflow: hidden;} 
                .partners ul { overflow-x: scroll}
                .partners ul li a img { width: auto;}
                .how-work p {font-size: 14px; line-height: 20px;}
                .steps { flex-wrap: wrap}
                .fill-form .forms .form { padding: 20px;}
                .project .all-prj { flex-wrap: wrap}
                .project .all-prj .prj {width: 100%;}
                .contact-mid .cont {padding: 20px;}
                .contact-mid {    background-size: 100% 100%;}
                .head ul { display: none;}
                .top-section .carousel-caption {left: 14%; top: 31%;  right: auto;}
                .top-section .carousel-caption h5 {font-size: 14px; line-height: 14px;}
                .top-section .w-100 { height: 50%}
                .top-section .carousel-caption {width: 100%;}
                .top-section .carousel-caption {width: 75%;}
                .top-section button { padding: 5px}
                .fill-form .forms .formtext p { padding-right: 0}
                .fill-form .forms .formtext h3 {line-height: 42px; padding-bottom: 10px;}
                .fill-form {padding: 10px 0;}
                .hemburger { display: block}
                .head ul.open li { margin-bottom: 36px;}
                .head ul li.close{display: block;}
                .overlay { background: rgba(0, 0, 0, 0.7); width: 100vw; height: 100vh;         z-index: 1;    position: absolute; display: none}
                .blk { display: block}
                .ove { overflow: hidden}
                .about-left-text h2 {line-height: 32px; font-size: 24px;}
                
                .searchprform {width: calc(100% - 6%);
        margin: 0;
        box-shadow: 0px 0px 5px #ccc;
        margin: 0 3%;
        top: 20%;}
               
                .prp-address { display: block}
                 #subheader h1 {    line-height: 36px; font-size: 28px;} 
               
            }


.property-card {
  max-width: 340px;
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  font-family: sans-serif;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.offer-badge {
  position: absolute;
  top: 0;
  left: 0;
     background: linear-gradient(90deg, #ffca6f 0%, #e09941 100%);
  color: #fff;
  font-size: 13px;
  padding: 8px 12px;
 
  border-bottom-right-radius: 8px;
  z-index: 2;
    border: 1px solid #fff;
    border-top:none;
    border-left:none;
}

.offer-badge strong { font-size: 16px;  font-weight: bold; text-shadow:0px 0px 3px #383838;}

.property-img {
  width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}

.property-info {
    display: flex;
    justify-content: space-between;
    background-color: #003f66c2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    width: calc(100% - 20px);
    border-radius: 57px;
    align-items: center;
    padding: 0 10px;
    margin: 0 auto;
    left: 10px;
    border: 1px solid #fff;
}
.property-info .price  { color: #fff; padding: 2px 0;}
.property-info .price span {
  font-weight: bold;
}

@media (max-width: 767px) {
    .property-info .price { font-size: 18px}
}


.vision-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 3rem;
   
      
    }

    .vision-images {
      position: relative;

      max-width: 50%;
    }

    .vision-images .main-img {
      width: 100%;
      border-radius: 20px;
    }

    .vision-images .overlay-img {
      position: absolute;
      top: 40%;
      left: 40%;
      transform: translate(-50%, -50%);
      width: 60%;
      border-radius: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .vision-content {
      
      max-width: 600px;
    }

    .vision-content h2 {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 1.5rem;
        text-align: left;
    }

    .quote-box {
      background-color: #fbf4e6;
      padding: 1.5rem 2rem;
      border-radius: 12px;
      font-size:29px;
      margin-bottom: 1.5rem;
      line-height: 1.6;
      position: relative;
          font-weight: bold;
    color: #444;
    }

    .quote-box::before {
      content: "“";
      font-size: 2rem;
      color: #1a202c;
      margin-right: 10px;
    }

    .quote-box::after {
      content: "”";
      font-size: 2rem;
      color: #1a202c;
      margin-left: 10px;
    }

    .vision-content p {
      font-size: 1rem;
      line-height: 1.7;
    }

    .vision-content p strong {
      font-weight: 700;
    }

    @media (max-width: 768px) {
      .vision-section {
        flex-direction: column;
      }
        .vision-images { max-width: 100%;}

      .vision-content h2 {
        font-size: 2rem;
      }

      .quote-box {
        font-size: 1rem;
      }
    }


#problem-solution-section {
      background: #fff;
      color: #000;
      margin: 0;
      padding: 0;
    overflow: hidden;
    }

    #problem-solution-section .section {
      padding: 40px 0px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 30px;
      flex-wrap: wrap;
    }

    #problem-solution-section .card {
      border-radius: 25px;
      padding: 40px 30px;
      flex: 1 1 500px;
      max-width: 50%;
      box-sizing: border-box;
    }

    #problem-solution-section .problem {
   background: linear-gradient(0deg, #D09E59 0%, #FFE3A7 100%);
    }

    #problem-solution-section .solution {
      background: linear-gradient(to bottom, #3C4A85, #000000);
      color: #fff;
    }

    #problem-solution-section .card h2 {
      font-size: 28px;
      text-align: center;
      margin: 0 0 20px;
    }

    #problem-solution-section .divider {
      width: 250px;
      height: 1px;
      background: currentColor;
      margin: 0 auto 30px;
      opacity: 0.5;
    }

    #problem-solution-section .list-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 17px;
      margin-bottom: 25px;
      line-height: 1.6;
    }

    #problem-solution-section .list-item span.icon {
      font-size: 20px;
      line-height: 1;
      margin-top: 2px;
    }

    #problem-solution-section .problem .icon {
      color: red;
    }

    #problem-solution-section .solution .icon {
      color: #00c853;
    }

    @media (max-width: 768px) {
      #problem-solution-section .section {
        padding: 10px 15px;
        gap: 20px;
      }

      #problem-solution-section .card {
        padding: 30px 20px;
      }

      #problem-solution-section .card h2 {
        font-size: 24px;
      }

      #problem-solution-section .list-item {
        font-size: 16px;
      }
    }


 #transparency-section { margin-bottom: 80px; margin-top: 20px;   }

    #transparency-section .ts-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
        width: 100%;
    }

#transparency-section .ts-container .t-left { width: 30%; }
#transparency-section .ts-container .t-right { width: calc(70% - 20px); display: flex; flex-wrap: wrap; gap: 20px; }

    #transparency-section .ts-card {
      border-radius: 20px;
      overflow: hidden;
      background: white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    #transparency-section .ts-card img {
      width: 100%;
      border-radius: 12px;
    }

    #transparency-section .ts-yellow-card {
    background: linear-gradient(to top, #FDE68A, #FCD34D);
    padding: 25px;
    border-radius: 20px;
    color: #000;
    height: 100%;
    background-image: url(../images/backed.png), linear-gradient(to top, #FDE68A, #FCD34D);
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: no-repeat;
        background-position: bottom;
}

    #transparency-section .ts-yellow-card h2 {
      font-size: 28px;
      margin-bottom: 20px;
      font-weight: 700;
    }

    #transparency-section .ts-yellow-card ul {
      list-style: disc;
      padding-left: 20px;
    }

    #transparency-section .ts-yellow-card ul li {
      margin-bottom: 25px;
      font-size: 18px;
        line-height:28px;
    }

    #transparency-section .ts-developers-card {
      background: linear-gradient(to bottom right, #e0f2fe, #f8fafc);
         background-image: url(../images/trusted.png), linear-gradient(to bottom right, #e0f2fe, #f8fafc);
    background-size: cover;
    background-repeat: no-repeat;
        background-position: bottom;
        padding: 20px 20px 326px 20px;
        
    }

    #transparency-section .ts-developers-card h2,
    #transparency-section .ts-success-card h2 {
      font-size: 38px;
      margin-bottom: 15px;
      font-weight: 800;
        text-align: left;
        
    }

    #transparency-section .ts-developers-card ul {
      list-style: none;
      padding-left: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px; width: 42%;
    }

    #transparency-section .ts-developers-card ul li {
      font-size: 22px;
      display: flex;
      align-items: center;
            font-weight: bold;
    color: #000;
    padding: 5px 15px 5px 0;

    }

    #transparency-section .ts-developers-card ul li::before {
      content: "✅";
      margin-right: 8px;
      color: green;
    }

    #transparency-section .ts-success-card {
      background: linear-gradient(to bottom right, #e0f2fe, #f0fdf4);
      padding: 25px;
      border-radius: 20px;
      text-align: left;
        width: calc(70% - 10px);
        background-image: url(../images/proven.jpg), linear-gradient(to bottom right, #e0f2fe, #f0fdf4);
    background-size: cover;
    background-repeat: no-repeat;
        background-position: bottom;
    }

    #transparency-section .ts-success-card h2 {
        font-size: 38px;
    margin-bottom: 16px;
    text-shadow: 0 0 5px #fff;
    }

    #transparency-section .ts-success-card p {
      font-size: 18px;
    margin-bottom: 20px;
    color: #000;

    }

    #transparency-section .ts-city-img {
      border-radius: 20px;
      overflow: hidden;
          width: calc(30% - 10px);
    }

    #transparency-section .ts-city-img img {
      width: 100%;
      height: auto;
      border-radius: 20px;
    }

  @media (max-width: 820px) {
      #transparency-section .ts-container .t-left, #transparency-section .ts-container .t-right { width: 100%}
      #transparency-section .ts-success-card h2 {
    font-size: 28px;
    margin-bottom: 23px;
    text-shadow: 0 0 5px #fff;
    line-height: 30px;
}
      #transparency-section .ts-success-card { padding: 15px;}
      #problem-solution-section .card { max-width: 100%;}
}

    @media (max-width: 768px) {
      #transparency-section .ts-container {
        flex-direction: column;
        align-items: center;
      }
        #problem-solution-section .section {padding: 10px 0px 40px;}
        .abouth2 { font-size: 28px; font-weight: bold}
        #transparency-section .ts-city-img { width: 100%;}
        #transparency-section .ts-success-card { width: 100% ; background-image: url(), linear-gradient(to bottom right, #e0f2fe, #f0fdf4);} 
        #transparency-section .ts-success-card h2 { font-size: 22px;}
        #transparency-section .ts-developers-card h2, #transparency-section .ts-success-card h2 { font-size: 24px; padding: 20px 20px 0px 20px}
        #transparency-section .ts-developers-card { padding-bottom: 120px;}
        .phone-num-big { text-align: center;} 
       .btn-main { width: 100%!Important; padding: 10px!Important;}
    }


 #uae-invest {
      font-family: 'Arial', sans-serif;
      padding: 40px 20px;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
    }

    #uae-invest .steps-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    #uae-invest .step {
      text-align: center;
      max-width: 400px;
      margin: 20px 0;
    }

    #uae-invest .step img {
      width: 100%;
      max-width: 120px;
      border-radius: 10px;
      margin-bottom: 15px;
    }

    #uae-invest .step h3 {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 10px;
        color: #000;
    }

    #uae-invest .step p {
      font-size: 20px;
      color: #555;
        line-height: 28px;
    }

   

    /* Responsive */
    @media (min-width: 768px) {
      #uae-invest .steps-container {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      #uae-invest .step {
        flex: 0 0 48%;
        margin: 40px 0;
      }

      #uae-invest .step:nth-child(odd) {
        align-self: flex-start;
      }

      #uae-invest .step:nth-child(even) {
        align-self: flex-end;
      }
        
        #uae-invest .step h3 { font-size: 28px;}
 
    }

    @media (min-width: 1024px) {
      #uae-invest .step {
        flex: 0 0 22%;
        margin: 10px 0;
      }
        
       
        #uae-invest .step:nth-child(3)  { margin-top: 100px;}
         #uae-invest .step:nth-child(4)  { margin-top: -20px;}
         #uae-invest .dotted-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../images/thred.png) no-repeat center 135px;
      background-size: contain;   }
    }
.mission { margin-bottom: 40px;}

.mission .vision-images { order: 2}
.hero-section { background: url(../images/about-banner.jpg) center top no-repeat; background-size: cover; margin-bottom: 50px}
.hero-section h1 { width: 1270px; margin: 0 auto; text-align: right; color: #fff; font-size: 96px; font-weight: bold; padding: 50px 0 513px}

@media (max-width: 820px) {
    .hero-section h1 {    width: 100%;
    margin: 0 auto;
    text-align: right;
    color: #fff;
    font-size: 59px;
    font-weight: bold;
    padding: 31px 34px 27% 0;}
}

#join-revolution {
  font-family: 'Segoe UI', sans-serif;
  background: url('../images/about-address.jpg') no-repeat center center/cover;
  width: 1265px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 20px;
  box-sizing: border-box;
    margin: 0 auto;
}

#join-revolution .card {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  text-align: center;
}

#join-revolution h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 700;
    color: #fff;
}

#join-revolution p {
  font-size: 22px;
  margin: 10px 0;
  line-height: 1.5;
}

#join-revolution a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}
@media (max-width: 820px) {
#join-revolution { width: 100%}
}

@media (max-width: 600px) {
  #join-revolution .card {
    padding: 30px 20px;
  }

  #join-revolution h2 {
    font-size: 20px;
  }

  #join-revolution p {
    font-size: 14px;
  }
}