/*-----------------------------------------------------------------------------------

    [Master Stylesheet]

    Project:    Gipix
    
    Version:    1.0

-----------------------------------------------------------------------------------

    [Table of contents]
    
    01. header
    02. btn
    03. hero-section
    04. get-a-quote
    05. social-media-icon
    06. heading
    07. customize-img
    08. server
    09. questions
    10. it-works
    11. staps
    12. team
    13. social-media-section
    14. pricing-plans
    15. newsletter
    16. accordion
    17. count-style
    18. clients
    19. footer
    20. review
    21. youtube
    22. swal-modal
    23. loading
        

-----------------------------------------------------------------------------------*/


@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --bgcolor: #f86044;
    --main-color : #fdc04d ;
}
body {
    font-family: 'DM Sans';
    overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
p

{
    font-size: 18px;
    line-height: 30px;
    color: #444;
    margin: 0;
    font-weight: 400;
    font-family: 'DM Sans';
}
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 15px; /* optional for spacing from sides */
  box-sizing: border-box;
}
*{
    margin: 0;
    padding: 0;
}
a,h2,h3,h4,h5,h6{
    color: #000;
    margin: 0;
}
a{
    text-decoration: none;
}
h1{
  font-size: 60px;
}
h2{
    font-size: 60px;
}
h3{
    font-size: 26px;
}
h4{
    font-size: 24px;
}
h5{
    font-size: 20px;
}
h6{
    font-size: 18px;
}
img {
    max-width: 100%;
}
.gap {
    padding: 120px 0;
}
.no-top{
    padding-top: 0;
}
.no-bottom{
    padding-bottom: 0;
}
ul{
    padding: 0;
    margin: 0;
}
li{
    display: block;
}
figure {
    overflow: hidden;
}
/* 1. header */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-bar ul {
    display: flex;
    align-items: center;
}
.top-bar a i svg {
    width: 30px;
    fill: #000;
    height: auto;
}
.top-bar a i {
    width: 50px;
    height: 50px;
    background-color: var(--main-color);
    margin-right: 10px;
    display: flex;
    align-items: center;
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.top-bar a {
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
}
.top-bar > a:hover {
    color: #f6bb4b;
}
.top-bar a:hover i svg {
    fill: #000;
} 
.top-bar a
.questions .btn span i {
    padding-right: 10px;
}
@media only screen and (max-width: 1920px) and (min-width: 1200px){
    #stickyHeader.slideUp {
        top: 0;
        z-index: 111;
        position: fixed;
        border-radius: 0;
        left: 0;
        box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
        padding-bottom: 20px;
        padding-top: 20px;
        background-color: #22244e;
    }
    body.dark #stickyHeader.slideUp {
        background: #111;
    }
    body.light #stickyHeader.slideUp {
        background: #f6fafb;
    }
}
header {
    padding-top: 20px;
    position: absolute;
    z-index: 1;
    width: 100%;
}
.top-bar ul li {
    padding-right: 50px;
}
.top-bar ul li a{
    color: white;
}
.top-bar ul li a:hover {
    color: var(--main-color);
}
/* 2. btn */
.btn {
    border: none;
    text-align: center;
    cursor: pointer;
    text-transform: capitalize;
    outline: none;
    overflow: hidden;
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    background-color: #fdc04d;
    padding: 26px 42px;
    border-radius: 60px;
    line-height: 0;
    border: 3px solid #fdc04d;
    border-bottom-right-radius: 0;
}
.btn:hover {
    background-color: transparent;
    color: var(--bgcolor);
    border-radius: 50px;
    border : 3px solid var(--bgcolor);
} 
 
.top-bar .btn {
    padding: 12px 26px;
}
header .btn:after {
    width: 136%;
}
.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
/* 3. hero-section */
.hero-section {
    position: relative;
    padding-top: 7%;
    overflow: hidden;
    background-color: #22244e;
        height: 100vh;
} 
.hero-text {

}
.hero-text img.heroimg {
    position: absolute;
    right: -25%;
    z-index: 1;
    bottom: -47%;
    width: 52%;
    height: auto;
}
.hero-text h2 {
    color: #fff;
    line-height: 68px;
    font-family: 'Optima', sans-serif;
}
.hero-text h2 span {
    color: #61ffa4;
}
.hero-text ul li {
    color: white;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    font-size: 18px;
    padding-left: 13px;
}
.hero-text ul {
    display: inline-flex
;
}
.hero-text ul li img {
    width: 30px;
    height: 30px;
    display: flex;
    border-radius: 50%;
    background-color: #ffffff30;
    margin-right: 17px;
    padding: 7px;
}
.video i {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    border-radius: 50%;
    background-color: var(--main-color);
    color: white;
    position: relative;
    margin-right: 20px;
    animation: shadow-pulse 1s infinite;
}
.video { 
    display: inline-block;
}
.video a {
    display: flex;
    color: #fff;
    font-size: 20px;
    align-items: center;
    font-weight: bold;
}
.video a:hover {
    color: var(--main-color);
}
@keyframes shadow-pulse{
    0% {
        box-shadow: 0 0 0 0px rgb(253 192 77);
    }
    100% {
        box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
    }
}
.listing {
    justify-content: space-between;
    width: 89%;
}
img.project-logo {
    position: relative;
    top: -28px;
    width: 18%;
}
/* 4. get-a-quote */

form#contactForm h3 {
    font-size: 36px;
    font-weight: bold;
    line-height: 46px;
    padding-bottom: 6px;
}
.get-a-quote h6 {
    color: #858585;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 30px;
}
.get-a-quote {
    z-index: 11;
    margin-bottom: 40px;
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    box-shadow: -1px 0px 44px 15px rgb(0 0 0 / 7%);
    -webkit-box-shadow: -1px 0px 44px 15px rgb(0 0 0 / 7%);
    -moz-box-shadow: -1px 0px 44px 15px rgba(0,0,0,0.7);
    width: 94%;
    margin-left: auto;
}
.get-a-quote input[type="text"],.get-a-quote input[type="email"], .get-a-quote input[type="number"] {
    width: 100%;
    height: 60px;
    border: 0;
    outline: 0;
    margin-bottom: 20px;
    color: #444;
    font-size: 16px;
    border-bottom: 3px solid #d3d3d3;
}
.get-a-quote input:focus {
    border-color: var(--bgcolor);
}
.get-a-quote p {
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 10px;
}
.radio-button {
    margin-right: 15px;
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    display: flex;
    margin-bottom: 35px;
}
.radio-button label {
    padding-left: 10px;
}
.radio-button input{
    width: 22px;
    height: 22px;
}
.group-img{
    position: relative;
}
.group-img svg {
    position: absolute;
    right: 0;
    width: 22px;
    height: auto;
    top: 21px;
}
.get-a-quote img {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 5. social-media-icon */
ul.social-media-icon {
    position: absolute;
    right: 10%;
    top: 22%;
}
ul.social-media-icon li {
  list-style: none; 
}
ul.social-media-icon li a {
    width: 50px;
    height: 50px;
    font-size: 16px;
    margin: 0 2px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    color: white;
    border-radius: 50%;
}
ul.social-media-icon li a .icon {
  position: relative;
  color: #fff;
  transition: .5s;
  z-index: 3;
}
ul.social-media-icon li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}
ul.social-media-icon li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bgcolor);
  transition: .5s;
  z-index: 2;
}

ul.social-media-icon li a:hover:before {
  top: 0;
}
ul.social-media-icon li:nth-child(1) a{
  background: #3b5999;
}
ul.social-media-icon li:nth-child(2) a{
  background: #55acee;
}
ul.social-media-icon li:nth-child(3) a {
  background: #dd4b39;
}
/* 6. heading */
.heading {
    text-align: center;
    width: 76%;
    margin: auto;
    margin-bottom: 40px;
}
.heading h2 {
    font-size: 58px;
    padding-top: 10px;
    font-weight: bold;
}
.heading span {
    font-weight: 800;
    color: var(--bgcolor);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 18px;
}
/* 7. customize-img */
.customize-img {
    position: relative;
}
.customize-text ul li {
    padding-bottom: 18px;
    display: flex;
    align-items: center;
}
.customize-img:before {
    position: absolute;
    z-index: 0;
    width: 548px;
    height: 548px;
    content: "";
    background-color: #efefef;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.customize-img img {
    animation: top 5s linear infinite;
}
.customize-text ul li img {
    width: 40px;
    height: 40px;
    display: flex;
    border-radius: 50%;
    background-color: #efefef;
    margin-right: 17px;
    padding: 12px;
}
.customize-text p {
    width: 90%;
}
.customize-text ul {
    margin-left: 50px;
    margin-top: 50px;
}
@keyframes top {
   0%{
    transform: translateY(0px);
   }
   50%{
    transform: translateY(10px);
   }
   100%{
    transform: translateY(0px);
   }
}

/* 8. server */
.heading.two {
    text-align: initial;
    margin: 0;
    width: 60%;
    margin-bottom: 40px;
}
.server h5 {
    padding-top: 30px;
    padding-bottom: 14px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
.server i {
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    align-items: center;
}
.server:hover i img{
    transform: rotateY(180deg);
}
.server {
    position: relative;
    border-radius: 5px;
    padding: 40px;
}
.server img {
    height: 65px;
}
.server.two:before{
    background-color: #e1ae51;
} 

.server.three:before{
    background-color: #e66249;
}

.server:before{
    width: 100%;
    border-radius: 10px;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    background-color: #344557;
    position: absolute;
    z-index: -1;

} 
.server:after,.server h5,.server p{
 transition: .5s;   
}
.server p {
    color: #fff;
}
.server:hover h5,.server:hover p{
    color: white;
}
/* 9. questions */
.questions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 50px;
} 
.btn span{
    display: flex;
    align-items: center;
}
.btn i {
    font-size: 22px;
}
.questions h5 {
    font-weight: bold;
}
/* 10. it-works */
.it-works {
    position: relative;
    overflow: hidden; 
} 
/* 11. staps */
.staps {
    display: flex;
    margin-bottom: 40px;
}
.staps:hover i {
    background-color: #f3b84a;
    border-radius: 150px;
}
.staps-img {
    position: relative;
    width: 150px;
    height: 150px;
    margin-right: 30px;
    align-items: center;
    display: flex;
} 
.staps:hover img {
    filter: invert(1);
}
.staps-img img {
    height: 70px;
}
.staps-img i {
    position: relative;
    width: 143px;
    height: 143px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bgcolor);
    border-radius: 50%;
    border-top-right-radius: 0;
}
.staps-img span {
    background-color: var(--main-color);
    position: absolute;
    top: 3px;
    left: -6px;
    width: 40px;
    height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 6;
    font-size: 14px;
    font-weight: bold; 
}
.staps h4 {
    font-size: 28px;
    line-height: 36px;
    font-weight: bold;
    padding-bottom: 10px;
}
.staps-text {
    width: 64%;
}
 .staps-text {
    width: 64%;
}
.staps:hover .staps-img span{
    background-color: var(--bgcolor);
    color: white;
}
.staps-img span,.staps-img i:before{
    transition: .3s;    
}
.logodata.owl-carousel .owl-item img {
    width: auto;
    margin: auto;
    transform: scale(0.9);
}
.logodata.owl-carousel .owl-item img:hover {
    transform: scale(1);
}
.logodata {
    width: 99%;
    margin: auto;
    margin-top: 120px;   
} 
/* 12. team */
.callto svg {
    width: 26px;
    height: auto;
}
#team {
    background-color: #f6f6f6;
}
.team-text {
    padding-left: 50px;
    padding-bottom: 50px;
    position: relative;
    z-index: 11;
}
.team-text:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 81%;
    background-color: #fff;
    z-index: -1;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    border-bottom-left-radius: 0;
} 
.team-img {
    position: relative;
}
.team-text img {
    filter: grayscale(1);
}
.team-text:hover img {
    filter: grayscale(0);
}
.follow {
    position: relative;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    padding: 2px;
    display: inline-flex;
    align-items: center; 
    padding-left: 23px;
    border-radius: 51px;
}
.follow ul.social-media-icon {
    position: relative;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    margin-left: -98px;
    opacity: 0;
    transition: .5s;
}
.team-text:hover .follow ul.social-media-icon {
    margin-left: 14px;
    opacity: 1;
}
.follow > a img{
    margin-right: 6px;
}
.follow > a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    text-transform: capitalize;
}
.team-text span {
    padding-bottom: 6px;
    color: var(--bgcolor);
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 30px;
    display: block;
}
.team-text h5 {
    font-size: 26px;
    font-weight: 400;
    padding-bottom: 16px;
    font-weight:bold ;
}
.callto a {
    color: #444;
    font-weight: bold;
    font-size: 16px;
}
.callto a:hover {
    color: var(--bgcolor);
}
.callto {
    padding-bottom: 30px;
    display: flex;
    align-items: center;
}
.callto a {
    padding-left: 6px;
}
/* 14. pricing-plans */
.pricing-plans-section{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.pricing-plans {
    background-color: #22244e;
    padding: 60px;
    padding-top: 40px;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.pricing-plans span {
    color: white;
    font-weight: 500;
    padding-bottom: 10px;
    display: block;
    font-size: 18px;
}
.pricing-plans h5 {
    font-size: 60px;
    font-weight: bold;
}
.pricing-plans h5 {
    font-size: 60px;
    font-weight: bold;
    color: white;
}
.pricing-plans sub {
    bottom: 0;
    font-size: 16px;
}
.pricing-plans-text {
    background-color: white;
    padding: 60px;
    padding-top: 0;
    padding-bottom: 50px;
    border-radius: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.pricing-plans-text i {
    width: 90px;
    transform: translateY(-30px); 
    height: 90px;
    display: flex;
    border-radius: 50%;
    background-color: var(--main-color);
    align-items: center;
    justify-content: center; 
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    border-bottom-right-radius: 0;
}
.pricing-plans-text:hover{
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.pricing-plans-text img {
    height: 60px;
}
.pricing-plans-text .hero-text ul li{
    color: #444;
}
.pricing-plans-text .hero-text ul li img {
    background-color: #e6eeff;
}
.pricing-plans-text .btn { 
    border: 3px solid var(--bgcolor);
}
.pricing-plans-text .btn span{
    color: var(--bgcolor);
}
.pricing-plans-text i svg {
    width: 50px;
    height: auto;
}
.pricing-plans-text .btn:hover span{
    color: #fff;
}
.pricing-plans-text .hero-text ul {
    margin-bottom: 14px;
}
/* 15. newsletter */
.newsletter {
    padding-top: 20px;
    padding-bottom: 20px;
    background-repeat: no-repeat;
    background-color: #f1f0f0;
}
.newsletter .customize-img:before {
    display: none;
}
.newsletter-text h2 { 
    font-size: 58px;
    padding-bottom: 10px;
    font-weight: bold;
}
.newsletter-text h4 { 
    font-size: 30px;
    line-height: 44px;
    width: 90%;
}
.newsletter-text h6 { 
    font-weight: 400;
    padding-top: 40px;
    line-height: 28px;
    padding-bottom: 20px;
    width: 85%;
}
.newsletter-text h4 span {
    background-color: #22244e;
    color: white;
    padding: 0px 10px;
    font-size: 30px;
}
#faq’s .heading.two {
    width: 100%;
}
/* 16. accordion */
.accordion-item.active .heading {
  color: #bccbb7;
}
.accordion-item.active .icon:before {
  background: #bccbb7;
}
.accordion-item.active .icon:after {
  width: 0;
}
.accordion-item.active .icon:before {
    background: #fff;
}
.accordion-item .heading {
    display: block;
    text-transform: capitalize;
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    transition: 0.3s ease-in-out;
} 
.accordion-item.active .icon {
    border-radius: 50px;
    background-color: var(--bgcolor);
}
.accordion-item .icon {
    display: block;
    position: absolute;
    top: 47%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    left: 12px;
    background-color: #c3c3c3;
    border-radius: 50%;
    border-bottom-right-radius: 0;
}
.accordion-item .icon:before, .accordion-item .icon:after {
    content: "";
    width: 12px;
    height: 3px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s ease-in-out;
    transform: translate(-50%, -50%);
}
.progress {
    height: 8px;
}
.accordion-item.active {
    border: 1px solid var(--bgcolor);
    border-radius: 20px !important;
}
.accordion-item .icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}
.accordion-item .content {
  display: none;
}
.accordion-item {
    border-radius: 50px !important;
    border-bottom-right-radius: 0 !important;
}
.title {
    text-align: start;
    padding: 20px 50px;
    padding-left: 65px;
}
.content {
    padding: 0px 50px;
    padding-bottom: 22px;
    padding-left: 65px;
}
.accordion-item {
    border: 1px solid #c3c3c3;
}
.accordion-item:first-of-type {
    border-radius: 0px;
}
.accordion-item.active a.heading {
    color: black;
} 
.accordion-item {
    margin-bottom: 20px;
}
.accordion-item:not(:first-of-type) {
    border-top: 0;
    border: 1px solid #c3c3c3;
}
.accordion-item.active:not(:first-of-type)
,.accordion-item.active {
    border: 1px solid var(--bgcolor);
}
a.heading{
    width: 100%;
    margin: 0;
}
/* 17. count-style */
.count-style {
    text-align: center;
    margin: auto;
    margin-top: 80px;
} 
.count-style h2 sup {
    font-size: 40px;
    top: -33.5px; 
}
.count-style h2 {
    font-size: 90px;
    font-weight: 800;
    color: var(--bgcolor);
}
.count-style span { 
    font-size: 16px;
}
/* 18. clients */
.clients h6 {
    font-size: 24px;
    font-weight: bold;
}
.clients p {
    font-size: 22px;
    line-height: 38px;
}
.clients span {
    font-size: 14px;
}
.clients {
    padding: 50px;
    border-radius: 50px;
    background-color: #e9eafa;
    position: relative;
    margin: 12px;
}
.clients img {
    position: absolute;
    width: 60px;
}
.clients i {
    background-color: var(--bgcolor);
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 20px;
    border-bottom-right-radius: 0;
}
.clients-slider.owl-carousel .owl-item img {
    width: 52px;
    transform: rotate(180deg);
}
.clients-slider.owl-carousel.owl-theme.owl-loaded.owl-drag {
    margin-left: -1px;
}
.clients-slider.owl-theme .owl-dots .owl-dot.active span {
    background: transparent;
    border: 6px solid var(--bgcolor);
    padding: 3px;
    margin: 4px;
}
.clients-slider.owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 6px solid #c3c3c3;
    padding: 3px;
    margin: 4px;
}
.clients-slider.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 60px;
    display: block !important;
}
/* 19. footer */
footer{
    position: relative;
    background-color: #000;
}
.footer-shaps {
    display: block;
    width: 100%;
    height: 75px;
    position: absolute; 
    bottom: 0;
    z-index: 0;
} 
.links h5 {
    font-size: 28px;
    font-weight: bold;
    text-transform: capitalize;
    color: #fff;
}
.links {
    width: 92%;
}
.links span {
    font-size: 18px;
    color: #d5d5d5;
}
.line {
    display: flex;
    background-color: var(--bgcolor);
    width: 110px;
    height: 3px;
    margin-bottom: 20px;
}
.links a {
    padding-left: 16px;
    color: #d5d5d5;
}
.links a:hover{
    color: var(--bgcolor);
}
.footer-bottom {
    border-radius: 10px;
    text-align: center;
    margin-top: 100px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    position: relative;
    padding-bottom: 10px;
}
.footer-end {
    position: relative;
    z-index: 1;
    border-top: 1px solid #d5d5d52b;
}
.footer-end p {
    text-align: left;
    padding-top: 20px;
    color: white;
    padding-bottom: 20px;
}
.footer-bottom p {
    padding-top: 20px;
    padding-bottom: 30px;
    color: #d5d5d5;
}
.footer-bottom h3 {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
}
#progress {
    z-index: 111;
  position: fixed;
  bottom: 20px;
  right: 10px;
  height: 70px;
  width: 70px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#progress-value {
  display: block;
  height: calc(110% - 15px);
  width: calc(110% - 15px);
  background-color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 35px;
  color: #001a2e;
}
span#progress-value i {
    font-size: 22px;
}
form#subscribe-form{
    position: relative;
}
form#subscribe-form input {
    width: 70%;
    background-color: #ffffff;
    height: 55px;
    padding-left: 30px;
    border-radius: 58px;
    border: 0;
    outline: none;
}
.hero-text p {
    padding-bottom: 16px;
    font-size: 24px;
    color: #fff;
    font-family: 'Optima', sans-serif;
    line-height: 35px;
    width: 70%;
}
h2#bed {
    font-size: 40px;
    font-weight: bolder;
}
span#vail {
    font-size: 39px;
    color: #fff;
    position: relative;
    top: 14px;
}
.hero-section.two .hero-text {
    margin-top: 20px;
    width: 64%;
    margin: auto;
    margin-bottom: 100px;
    text-align: center;
    margin-top: 50px;
}
.hero-section.two .review { 
    justify-content: center;
}
form#subscribe-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: ;
}
button.btn {
    height: 60px;
    margin-left: 10px;
}
/* 20. review */
.review {
    display: flex;
    align-items: center; 
    margin-top: 50px;
    z-index: 11;
    position: relative;
}
ul.star li {
    padding-bottom: 0px;
    padding-left: 4px;
    color: black;
}
.review h6 {
    color: white;
    font-size: 30px;
    padding: 0px 16px;
    font-weight: bold;
    text-transform: capitalize;
}
.review span {
    color: white;
    font-size: 16px;
    font-weight: 600;
}
ul.star {
    display: inline-flex;
    background-color: var(--main-color);
    padding: 4px 13px;
    border-radius: 38px;
}
.hero-section.for .hero-text p {
    color: white;
    padding-bottom: 30px;
    font-size: 18px;
    padding-top: 30px;
    line-height: 32px;
}
/* 21. youtube */
.hs-responsive-embed-youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 25px;
}
.hs-responsive-embed-youtube iframe {
    position: absolute;
    width: 100%!important;
    height: 100%!important;
}
.hero-section.for .review {
    justify-content: flex-start;
    margin: 0;
    margin-bottom: 60px;
    margin-top: 20px;
}
.hero-section.for {
    padding-bottom: 150px;
}
img.shado {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 16px;
}
/* 22. swal-modal */
.swal-modal {
    background-color: var(--main-color);
    border-radius: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
}
.swal-icon--success__hide-corners, .swal-icon--success:after, .swal-icon--success:before {
    background-color: transparent !important;
}
.swal-text {
    text-align: center;
    color: #fff;
}
.swal-footer {
    display: none;
}
.swal-title {
    color: #fff;
    font-family: 'Unbounded';
    font-size: 45px;
      margin: 0px !IMPORTANT;
}
.swal-text {
    text-align: center;
    color: #fff;
    FONT-SIZE: 16PX;
    PADDING: 0PX 42PX;
}
.swal-title {
    MARGIN: 0PX;
    PADDING: 0PX;
}
/* 23. loading */

 .loading-text {
  font-size: 5vw;
  line-height: 64px;
  letter-spacing: 10px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-evenly;
}
.loading-text span {
  -webkit-animation: moveLetters 2.4s infinite ease-in-out;
          animation: moveLetters 2.4s infinite ease-in-out;
  transform: translatex(0);
  position: relative;
  display: inline-block;
  opacity: 0;
  color: #fff;
  text-shadow: 0px 2px 10px rgba(46, 74, 81, 0.3);
}

.loading-text span:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.loading-text span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.loading-text span:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.loading-text span:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.loading-text span:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.loading-text span:nth-child(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.loading-text span:nth-child(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
@keyframes moveLetters {
  0% {
    transform: translateX(-15vw);
    opacity: 0;
  }
  33.3%, 66% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(15vw);
    opacity: 0;
  }
}
.preloader {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999999999999999999;
    right: 0;
    background-color: var(--bgcolor);
    top: 0;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.09, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.09, 1);
}
.preloader {
    top: 0%;
}
.page-loaded .preloader {
    top: -100%;
}  
footer {
    background-repeat: no-repeat;
    background-position: top;
    background-color: #000;
}
footer.no-bottom {
    padding-top: 23px;
}
.staps i,.logodata.owl-carousel .owl-item img,
.top-bar a,.btn,.count-style,.callto a,.video a,.team-text img,
.server i img,.pricing-plans-text,.links a,.pricing-plans-text .btn span,ul.social-media-section li i:after{
    transition: .3s;
}
.links p {
    color: #d5d5d5;
}
.pricing-plans-text .hero-text {
    margin: 0;
}

select#LEADCF1 {
    width: 100%;
    height: 60px;
    border: 0;
    outline: 0;
    margin-bottom: 20px;
    color: #444;
    font-size: 16px;
    border-bottom: 3px solid #d3d3d3;
    padding-left: 0px;
}
.intl-tel-input.allow-dropdown {
    width: 100%;
}



.infusr-pb-button {
  margin: 30px;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  opacity: 1;
  transition: .2s;
}

.infusr-pb-button:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

span.rotate {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fdc04d  url("https://goo.gl/0eJslQ") center no-repeat;
  position: absolute;
  transform: rotate(0deg);
  transition: .4s;
}

.infusr-pb-button:hover .rotate {
  background-color: #fdc04d;
}

.infusr-pb-button:active .rotate {
  background-color: #fdc04d;
}

.infusr-pb-button.active {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  
  .rotate {
    background-image: url("https://goo.gl/EfgECT");
    transform: rotate(45deg);
  }
}

.infusr-pb-panel-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
  pointer-events: none;
  display: block;
}

.infusr-pb-mobile-wrapper {
  position: absolute;
  bottom: 100px;
  width: 100%;
}

.infusr-pb-mobile-wrapper .infusr-pb-panel {
  position: static;
  margin: 0 auto;
}

@media only screen and (max-width: 500px) {
    .infusr-pb-mobile-wrapper .infusr-pb-panel {
        min-width: 90%;
    }
    .phone-number {
    display: none !important;
}
}

.infusr-pb-panel {
  font-family: 'Roboto Condensed', sans-serif;
  position: fixed;
  bottom: 100px;
  left: 20px;
  width: auto;
  max-width: 300px;
  margin: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  border: none;
  border-radius: 1rem;
  outline: 0;
  box-shadow: 0 2px 15px rgba(0,0,0,.3);
}

.infusrmenu.-style_mobile .infusr-pb-panel {
  left: 0;
  max-width: 290px;
}

.infusr-pb-heading {
  padding: 20px;
  background: #fdc04d;
  color: #fff;
  border-radius: 1rem 1rem 0 0 ;
}

.infusr-pb-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    opacity: 0.6;
  
  &:hover {
    opacity: 1;
  }
}

.infusr-pb-title {
  margin-bottom: 0;
  margin-top: 0;
  line-height: 1.5;
  width: 90%;
}

.infusr-pb-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 20px 10px 20px;
}

.infusr-pb-body ul {
  list-style: none;
  padding: 0;
}

.infusr-pb-body ul li {
  margin: 10px 0px;
}

.infusr-pb-body ul li i {
  display: inline-block;
  width: 20px;
}

.infusr-pb-body ul li a {
  font-weight: 700;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
}
span.rotate i {
    padding-left: 7px;
}
.infusr-pb-body ul li a {
    font-family: 'DM Sans';
    font-size: 20px !important;
}
div[data-modal-effect=fadescale] {
    .infusr-pb-panel {
        opacity: 0;
        transform: scale(0.2);
        transform-origin: left bottom;
        transition: all 0.3s cubic-bezier(0,0,0.7,1);
    }

    &.panel-show {
        pointer-events: all;
      
        .infusr-pb-panel {
            opacity: 1;
            transform: scale(1);
        }
    }
}
@media (max-width: 480px) {
  .price-box {
    flex: 1 1 50%; /* half-half width */
  }
}

@media only screen and (max-width:767px) {
img.project-logo {
    width: 33% !important;
}
span#vail {
    font-size: 32px !important;
    color: #fff;
    position: relative;
    top: 0px !important;
}
h2#bed {
    font-size: 40px !important;
}
      div#contact_form {
    display: block !IMPORTANT;
}
#crmWebToEntityForm.zcwf_lblLeft {
    position: relative;
    left: 0% !important;
}
.depreciation-box .top {
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: 4px;
    font-family: 'DM Sans';
}
    .depreciation-box:not(:last-child) {
        border-right: 2px solid #000 !important;
                border-bottom: none !important;
    }
        .depreciation-container {
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
    }
.depreciation-container {
    display: -webkit-box!important;
    
}
.depreciation-box .bottom {
    font-size: 10px !important;
    font-weight: 700;
    color: black;
    font-family: 'DM Sans';
}
 a.grow-btn {
    display: none;
}   
    .hero-text {
    text-align: left;
}
ul.invest-list li {
    text-align: left;
}
    .hero-section {
        padding-top: 61px !important;
    }
    
    section.thank {
        height: 52vh !important;
    background-position: center !important;
}
/*section.hero-section {*/
/*    background: linear-gradient(0deg, rgb(0 0 0 / 74%), rgb(0 0 0 / 52%)), url(https://kaykayproperties.com/askari-iv/assets/img/mobile-view.jpg) !important;*/
/*}*/
    /*    .logo img {*/
    /*    width: 66px !IMPORTANT;*/
    /*}*/

        .hero-text h2 {
        font-size: 12vw !important;
        line-height: 45px !important;
        margin-top: 0px;
    }
    .hero-section {
    position: relative;
    padding-top: 7%;
    overflow: hidden;
    background-color: #22244e;
    height: auto !important;
}
    .d-flex.listing p {
    font-size: 4vw !important;
            line-height: 22px;
}
.hero-text p {
    width: 100% !important;
}
    .hero-text p {
        padding-bottom: 0px !important;
    }
.d-flex.listing p {
    color: #ffffff;
    position: relative;
    top: 14px;
    font-weight: 700;
}
/*.d-flex.listing {*/
/*    background: #61ffa4;*/
/*    padding: 0px 10px 0px 10px;*/
/*    border-radius: 5px;*/
/*}*/
section#arrow {
    display: none;
}
    .hero-text ul li {
        font-size: 16px;
        padding-bottom: 0px !important;
    }
h2.invest-title {
    font-size: 20px !important;
    padding-bottom: 0px !important;
}
h2.invest-title {
    font-size: 20px !important;
}
    section.hero-section {
           padding-bottom: 35px;
}
.infusr-pb-button {
    z-index: 999 !IMPORTANT;
  
   
}
.carousel {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 24vh !important;
    min-height: 230px !important;
}
 .price-box {
        width: 48% !important;
        padding: 10px !important;
      }
      .price-box {
    min-width: 180px !important;
}
.hero-text {
    margin-top: 50px;
}
.hero-text ul {
    display: block !important;
}

      .price-box-title {
        font-size: 12px !important;
      }

      .price-box-amount {
        font-size: 36px !important;
      }
}
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  height: 80vh;
  min-height: 800px;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all var(--transition-duration) ease-in-out;
  display: flex;
  align-items: flex-end;
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}

.slide.exit-left {
  transform: translateX(-100%);
}

.slide.exit-right {
  transform: translateX(100%);
}

.overlay {
  position: absolute;
  inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgb(0 0 0 / 0%), rgba(0, 0, 0, 0.1));
  z-index: 0;
}

.slide-content {
  padding: 2rem;
  z-index: 2;
  max-width: 700px;
  margin-bottom: 30px;
  display:none;
}

.slide-content h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.slide-content p {
  font-size: 1rem;
  color: #ddd;
  margin-bottom: 1rem;
}

.slide-content .author {
  font-size: 0.85rem;
  color: #aaa;
}

.controls {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: 32px;
  background-color: #fdc04d;
}

.arrows {
  display: flex;
  gap: 0.5rem;
}

.arrow-btn {
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.3s;
}

.arrow-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .slide-content {
    padding: 1.5rem;
  }


  .slide-content h1 {
    font-size: 1.5rem;
  }

  .slide-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .slide-content h1 {
    font-size: 1.2rem;
  }

  .slide-content p {
    display: none;
  }
}

 .social-icons {
      display: flex;
      gap: 20px;
    }

    .social-icons a {
      background-color: #fdc04d;
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      font-size: 24px;
      transition: 0.3s;
    }

    .social-icons a:hover {
      transform: scale(1.1);
    }
    .social-icons a {
    padding-left: 0px;
}
p#avail {
font-size: 34px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
        line-height: 35px;
}


 .price-box-container {
    display: flex;
    gap: 15px;
    padding: 11px;
    flex-wrap: wrap;
    padding-left: 0px;
}

    .price-box {
      background-color: #b7312c;
      color: #fff;
      padding: 15px 30px;
      border-radius: 5px;
      text-align: center;
      min-width: 220px;
    }

    .price-box-title {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 5px;
      letter-spacing: 0.8px;
    }

    .price-box-amount {
      font-size: 40px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -1px;
      line-height: 1;
    }

    @media (max-width: 600px) {
         .price-box-container {
        flex-direction: column;
        align-items: center;
        display: -webkit-box;
        
                margin-top: 30px;
    }
    .price-box {
    margin-right: 10px;
}
    }
    
    .row.news {
    margin-top: 85px;
}
/*.logo img {*/
/*    width: 57%;*/
/*}*/

/* === PANEL (like image #1) === */
#contactForm{
  max-width: 360px;            /* change if you need wider */
  padding: 26px 22px;
  background: rgba(0,0,0,.55);
      border: 2px solid #61ffa4;   /* neon blue frame */
  box-shadow: 0 0 0 3px rgba(33,164,255,.15),
              0 12px 30px rgba(0,0,0,.45);
  border-radius: 2px;
  color:#fff;
}

/* remove any theme spacing conflicts */
#contactForm .form-group{ margin: 14px 0; }

/* hide theme icons to match reference */
#contactForm .field-icon{ display:none; }

/* === INPUTS / SELECT === */
#contactForm .form-control{
  width:100%;
  height:44px;
  padding: 10px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff;
  outline:none;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 999px rgba(0,0,0,0); /* fixes iOS autofill glow */
}

#contactForm .form-control::placeholder{
  color: rgba(255,255,255,.75);
}

/* select should look like inputs */
#contactForm select.form-control{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* focus glow */
#contactForm .form-control:focus{
  border-color:#21A4FF;
  box-shadow: 0 0 0 2px rgba(33,164,255,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* === SUBMIT BUTTON (white with envelope) === */
#contactForm input[type="submit"].form-control{
    background: #61ffa4;
    color: #111;
    border: none;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
}

#contactForm input[type="submit"].form-control::before{
  content: "✉";
  position:absolute;
  left:16px;
  top:50%;
  transform: translateY(-50%);
  font-size:16px;
}

#contactForm input[type="submit"].form-control:hover{
  filter: brightness(.95);
}

/* keep Zoho’s hidden rows hidden */
#contactForm .wfrm_fld_dpNn{ display:none !important; }

/* responsive */
@media (max-width:480px){
  #contactForm{ max-width:100%; padding:20px 16px; }
}

.container-fluid.main-content {
    width: 95%;
    margin: 0 auto;
}

 header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 40px;
      background-color: #ffffffcc;
      backdrop-filter: blur(6px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      position: sticky;
      top: 0;
      z-index: 1000;
      flex-wrap: nowrap;
    }

    .logo {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a1a;
    }

    .logo span {
      color: #61ffa4;
    }

    .contact-section {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
    }

    .contact-box {
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: #ffffff;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .contact-box:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .icon-circle {
      background-color: #d7f2e3;
      color: #1a1a1a;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 14px;
    }

    .contact-box a {
      text-decoration: none;
      color: #1a1a1a;
      font-weight: 500;
      font-size: 15px;
    }

    .mobile-contact-toggle {
      display: none;
      font-size: 20px;
      background: none;
      border: none;
      color: #61ffa4;
      cursor: pointer;
    }

    .mobile-dropdown {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 70px;
      right: 20px;
      background-color: #fff;
      padding: 12px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      z-index: 100;
      animation: fadeDown 0.3s ease-in-out;
    }

    .mobile-dropdown .contact-box {
      margin-bottom: 8px;
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .contact-section {
        display: none;
      }

      .mobile-contact-toggle {
        display: block;
      }
    }

    @media (min-width: 769px) {
      .mobile-contact-toggle {
        display: none;
      }
    }


   .invest-section {
      max-width: 900px;
      /*margin: 20px auto;*/
      border-radius: 12px;
      /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);*/
    }
h2.invest-title {
    text-align: left;
}
input#Mobile {
    padding-left: 35px !important;
}
ul.invest-list li span {
    color: #000;
}
ul.invest-list li {
    padding-left: 0px;
}
section#arrow img {
    width: 39%;
    position: absolute;
    right: 0px;
    top: 285px;
}
ul.invest-list li {
    padding-bottom: 0px;
}
    .invest-title {
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #1a1a1a;
      text-align: center;
    }

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

    .invest-list li {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 16px;
    }

    .invest-list i {
      color: #61ffa4; /* golden color */
      font-size: 18px;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .invest-list span {
      font-size: 16px;
      color: #333;
      line-height: 1.5;
    }
ul.invest-list {
    display: block;
}
    @media (max-width: 600px) {
      .invest-title {
        font-size: 22px;
      }

      .invest-list li {
        gap: 12px;
      }

      .invest-list span {
        font-size: 20px;
      }
    }
    
    
     .grow-section {
      max-width: 1200px;
      margin: 60px auto;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .grow-text {
      flex: 1 1 550px;
      padding: 20px;
    }

    .grow-text h2 {
      font-size: 36px;
      margin-bottom: 20px;
      font-weight: 400;
    }

    .grow-text h2 strong {
        font-weight: 400;
    font-family: 'Optima';
    text-transform: capitalize;
    }

    .grow-text p {
      font-size: 16px;
      color: #777;
      margin-bottom: 30px;
    }

    .grow-features {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
    }

    .grow-feature {
      flex: 1 1 240px;
      display: flex;
      align-items: flex-start;
      gap: 15px;
    }

    .grow-feature i {
      font-size: 26px;
      color: #000;
    }

    .grow-feature .feature-text {
      display: flex;
      flex-direction: column;
          position: relative;
    top: -11px;
    }

    .grow-feature .feature-text h4 {
          font-size: 52px;
    font-weight: bold;
    margin-bottom: 6px;
    }

    .grow-feature .feature-text p {
      font-size: 14px;
      color: #777;
    }

    .grow-btn {
    display: inline-block;
    background-color: #61ffa4;
    color: #000000;
    padding: 14px 30px;
    font-size: 19px;
    /* border-radius: 30px; */
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
    font-family: 'DM Sans';
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 10px;
    }

    .grow-btn:hover {
      background-color: #00b453;
    }

    .grow-video {
      flex: 1 1 500px;
      padding: 20px;
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

    .grow-video img {
      width: 100%;
      border-radius: 20px;
      display: block;
    }

    .grow-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      background-color: #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .grow-play i {
      color: #fff;
      font-size: 28px;
      margin-left: 4px;
    }

    .grow-play:hover {
      background-color: #00b453;
    }

    @media (max-width: 991px) {
      .grow-section {
        /*flex-direction: column;*/
        padding: 0px 20px;
      }

      .grow-text, .grow-video {
        flex: 1 1 100%;
        padding: 10px;
      }

      .grow-text h2 {
          font-size: 10vw;
        text-align: left;
      }

      .grow-btn {
        margin-top: 20px;
      }
    }
    
    
    
    
     .thankyou-wrapper {
      margin: 0;
      font-family: 'Optima', sans-serif;
         background: linear-gradient(0deg, rgb(0 0 0 / 74%), rgb(0 0 0 / 52%)), url(https://sqyd.pk/projects/abraz-ul-minal-towers/assets/img/mainbg.jpg);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #fcd26a;
      overflow: hidden;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
          background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    }

    /* Inner card */
    .thankyou-card {
      background: #121212;
      padding: 45px 55px;
      border-radius: 20px;
      box-shadow: 0 15px 30px rgba(252, 210, 106, 0.3);
      width: 400px;
      position: relative;
      animation: fadeInUp 1s ease forwards;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Logo container */
    .thankyou-logo {
      margin-bottom: 40px;
    }

    .thankyou-logo img {
  
    }
div#thankyouText h2 {
    color: #fff;
}
    /* Loader circle */
    .thankyou-loader {
      width: 120px;
      height: 120px;
      border: 6px solid rgba(252, 210, 106, 0.3);
      border-top: 6px solid #fcd26a;
      border-radius: 50%;
      animation: spin 1.5s linear infinite;
      /*box-shadow: 0 0 15px #fcd26a;*/
      margin-bottom: 40px;
    }

    /* Checkmark */
    .thankyou-checkmark {
      width: 120px;
      height: 120px;
      background: #fcd26a;
      border-radius: 50%;
      margin-bottom: 30px;
      display: none;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 30px #fcd26a;
      position: relative;
    }

    .thankyou-checkmark::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 60px;
      border: solid #121212;
      border-width: 0 10px 10px 0;
      transform: rotate(45deg);
      animation: check 0.4s ease forwards;
    }

    /* Text section */
    .thankyou-text {
      display: none;
      color: #fff;
      margin-top: 10px;
    }

    .thankyou-text h2 {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }

    .thankyou-text p {
      font-size: 17px;
      color: #ccc;
      margin-bottom: 30px;
      line-height: 1.5;
    }

    /* Back button */
    .thankyou-back-btn {
      background-color: #fcd26a;
      color: #121212;
      text-decoration: none;
      font-weight: 700;
      padding: 15px 45px;
      border-radius: 40px;
      font-size: 17px;
      box-shadow: 0 8px 20px rgba(252, 210, 106, 0.4);
      transition: background-color 0.3s ease;
      display: inline-block;
    }

    .thankyou-back-btn:hover {
      background-color: #d1a71e;
      box-shadow: 0 10px 25px rgba(209, 167, 30, 0.6);
    }

    /* Animations */
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

    @keyframes check {
      0% {
        opacity: 0;
        transform: scale(0.2) rotate(45deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(45deg);
      }
    }

    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive */
    @media(max-width: 440px) {
      .thankyou-card {
        width: 90vw;
        padding: 35px 25px;
        border-radius: 15px;
      }

      .thankyou-loader, .thankyou-checkmark {
        width: 90px;
        height: 90px;
      }

      .thankyou-checkmark::after {
        width: 22px;
        height: 44px;
        border-width: 0 7px 7px 0;
      }

      .thankyou-text h2 {
        font-size: 24px;
      }

      .thankyou-text p {
        font-size: 15px;
      }
    }
    
    
     .depreciation-container {
      display: flex;
      border: 2px solid #000;
      border-radius: 10px;
      overflow: hidden;
      max-width: 500px;
   
      font-family: Arial, sans-serif;
      background-color: #fff;
      position: relative;
    }

    .depreciation-box {
     
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      box-sizing: border-box;
      position: relative;
    }

    /* Center divider line using pseudo-element */
    .depreciation-box:first-child::after {
      content: "";
      position: absolute;
      top: 15%;
      right: 0;
      width: 1.5px;
      height: 70%;
      background-color: #000;
    }

    .depreciation-box .top {
        font-size: 3.5vw;
    font-weight: 900;
    margin-bottom: 4px;
    font-family: 'DM Sans';
    }

    .depreciation-box .bottom {
         font-size: 14px;
    font-weight: 700;
    color: black;
    font-family: 'DM Sans';
    }

    /* Responsive */
    @media (max-width: 600px) {
      .depreciation-container {
        flex-direction: column;
      }

      .depreciation-box:first-child::after {
        display: none;
      }

      .depreciation-box:not(:last-child) {
        border-bottom: 2px solid #000;
      }
    }
    
   div#contact_form {
    display: none;
}
.floating-form {
    max-width: 323px;
    padding: 30px 30px 10px 30px;
    border: 1px solid #ddd;
    right: -78px;
    position: fixed;
    z-index: 99999;
}
.contact-opener, .floating-form input[type=button]:hover, .floating-form input[type=submit]:hover {
    background: linear-gradient(to bottom, #e01e26 5%, #e01e26 100%);
    /* background-color: #000000b5; */
}

.contact-opener {
        position: absolute;
    left: -111px;
    transform: rotate(-90deg);
    top: 422px;
    padding: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    font-size: 20px;
    font-weight: bold;
    font-family: arial;
}

#crmWebToEntityForm.zcwf_lblLeft {
    position: relative;
    left: 26%;
}

.grow-btn:hover {
    background-color: #000000;
}

a:focus, a:hover {
    color: #ffffff;
    text-decoration: none;
}

#mobileContacts {
    display: none;
  }
  #mobileContacts.active {
    display: flex; /* ya jo bhi layout chahiye */
  }
  
   .invest-section {
      max-width: 900px;
      width: 100%;
      font-family: "Inter", sans-serif;
      color: #1f2937;
    }

    .invest-section .invest-list {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 2 columns */
      gap: 0px 40px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .invest-section .invest-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 500;
      padding: 8px 0;
    }

    .invest-section .invest-list svg {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      stroke: #44b172; /* dark gray */
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 640px) {
      .invest-section .invest-list {
        grid-template-columns: 1fr; /* stack on mobile */
      }
    }