@charset "utf-8";


/* ___________________ Banner section Start _______________________*/
.banner-section{ padding-block: clamp(20px, 2.083vw, 40px) clamp(30px, 3.125vw, 60px); background-color: var(--primary-color); background: url('../images/banner-bg.jpg') center no-repeat; background-size: cover; position: relative; z-index: 1;}
.banner-section .main-block > .row{ --bs-gutter-y:clamp(15px, 1.563vw, 30px); }
.banner-section .design-element-2{ position: absolute; bottom: 29.65%; left: 3.85%; max-width: clamp(29px, 2.188vw, 42px); z-index: -1;}
.banner-section .design-element-3{ position: absolute; bottom: 4.73%; right: 1.25%; max-width: clamp(173px, 20.052vw, 385px); z-index: -1;}
.banner-section .top-block{ background-color: var(--dark-color); border-radius: 15px; display: flex; padding: clamp(10px, 0.521vw, 10px); justify-content: space-between; align-items: center; padding-right: clamp(20px, 2.083vw, 40px); margin-bottom: clamp(30px, 3.125vw, 60px);}
.banner-section .top-block .logo-wrapper{ border-radius: 9px; overflow: hidden; max-width: 380px;}
.banner-section .top-block .ph-number-wrapper{ display: flex; align-items: center; gap: 15px; font-weight: 800;}
.banner-section .top-block .ph-number-wrapper svg{ fill: var(--primary-color); width: clamp(35px, 2.552vw, 49px);}
.banner-section .top-block .ph-number-wrapper span{ font-size: var(--uc--font-size-49); color: var(--light-color);}


.banner-section .main-block .left-block .top-button-block{ gap:10px; }

.banner-section .main-block .left-block .advisor-wrapper{ background-color: var(--light-color);  display: flex; align-items: center; gap: 8px;  padding: 10px; max-width: 290px; border-radius: 100px; box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.21); margin-bottom: clamp(15px, 1.563vw, 30px);}
.banner-section .main-block .left-block .advisor-wrapper .image-wrapper{ max-width: 55px; border-radius: 50%; overflow: hidden; }
.banner-section .main-block .left-block .advisor-wrapper h4{ font-size: var(--uc--font-size-20); font-weight: 700;}
.banner-section .main-block .left-block .advisor-wrapper h5{ font-size: var(--uc--font-size-14); font-weight: 600; color: var(--light-dark-color-1);}
.banner-section .main-block .left-block h1{ margin-bottom: clamp(25px, 2.604vw, 50px);}
.banner-section .main-block .left-block h1 span{ position: relative; z-index: 2;}
.banner-section .main-block .left-block h1 span::before{ content: '';  width: clamp(110px, 12.760vw, 245px); aspect-ratio: 1 / 0.118;; background: url('../images/brush-1.png') no-repeat center; position: absolute; bottom: 8px; left: 0; z-index: -1; background-size: contain;}
.banner-section .main-block .left-block{ position: relative;}
.banner-section .main-block .left-block .design-element-1{ position: absolute; bottom: 0; right: -10%; max-width: clamp(46px, 4.740vw, 91px); z-index: -1;}
.banner-section .main-block p{ font-size: var(--uc--font-size-20); max-width: 640px; margin-bottom: clamp(30px, 3.125vw, 60px); line-height: 1.8;}
.banner-section .main-block .btn-block{ display: flex; gap: clamp(18px, 1.823vw, 35px);}
/* .banner-section .main-block .btn-block .button-1{ display: none;} */

.banner-section .main-block .btn-block .button-1{ display:none; }




#mc_embed_shell{ background-color: var(--light-color); border-radius: clamp(15px, 1.563vw, 30px); padding: clamp(20px, 2.083vw, 40px); scroll-margin-block: 2em;}
#mc_embed_shell #mc-embedded-subscribe-form{ margin: 0;}
#mc_embed_signup h2{ margin: 0; font-size: var(--uc--font-size-35); }
#mc_embed_signup .desc{margin: 0; padding-bottom: clamp(18px, 1.823vw, 35px); font-size: var(--uc--font-size-18); font-weight: 500;}
/*#mc_embed_signup .mc-field-group.input-group ul li{ display: inline;}
/#mc_embed_signup .mc-field-group.input-group ul li:first-child{ margin-right: clamp(21px, 1.563vw, 30px);}
Updated CSS for Radio Buttons
*/
#mc_embed_signup .mc-field-group.input-group ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px; /* Adjust the space between items here */
    padding-left: 0;
    list-style: none;
    margin: 0;
}

#mc_embed_signup .mc-field-group.input-group ul li {
    display: flex;
    align-items: center;
}
/* End Radio Button Update */
#mc_embed_signup .mc-field-group.input-group ul li label{ margin-left: 10px;}
#mc_embed_signup .mc-field-group.input-group ul li input[type="radio"]:checked {accent-color: black; }
#mc_embed_signup .mc-field-group input{ background-color: #FAFAFA; border-radius: 15px; padding: clamp(14px, 1.042vw, 20px); font-size: var(--uc--font-size-18);}
#mc_embed_signup .mc-field-group input#mce-PHONE-area{ width: 26%;}
#mc_embed_signup .mc-field-group input#mce-PHONE-detail1{ width: 26%;}
#mc_embed_signup .mc-field-group input#mce-PHONE-detail2{ width: 40%;}
#mc_embed_signup .mc-field-group{ width: 100%;}
#mc_embed_signup .foot{ grid-template-columns: unset; width: 100%;}
#mc_embed_signup .button{ width: 100%; margin: 0; padding: clamp(14px, 1.042vw, 20px); line-height: 1; height: unset; font-size: var(--uc--font-size-20); transition: 0.3s ease-in-out;}
#mc_embed_signup .mc-field-group input:focus{ outline: 1px solid var(--dark-color);}
#mc_embed_signup .mc-field-group{ padding-bottom: clamp(15px, 1.563vw, 30px);}
#mc_embed_signup .button:hover{ background-color: var(--primary-color); color: var(--dark-color); transition: 0.3s ease-in-out;}
/* ___________________ Banner section end _______________________*/



/* ___________________ Ralph is back section start _______________________*/
.ralph-is-back-section { position: relative;}
.ralph-is-back-section .design-emelemt-1{ position: absolute; left: 7.45%; bottom: 17.87%; max-width: clamp(46px, 4.740vw, 91px);}
.ralph-is-back-section .design-emelemt-2{ position: absolute; right: 5.21%; top: 12.74%; max-width: clamp(38px, 3.958vw, 76px);}
.ralph-is-back-section .main-block{ padding: clamp(36px, 4.167vw, 80px) clamp(53px, 6.094vw, 117px) clamp(43px, 4.948vw, 95px);}
.ralph-is-back-section .main-block .title-2{ padding-bottom: clamp(20px, 2.083vw, 40px); max-width: 900px; margin: 0 auto;}
.ralph-is-back-section .main-block p{font-size: var(--uc--font-size-23); text-align: center; line-height: 1.7083;}
.ralph-is-back-section .main-block p + p{ margin-top: clamp(12px, 1.250vw, 24px);}
.ralph-is-back-section .main-block .video-wrapper{ margin-top: clamp(38px, 4.427vw, 85px); position: relative; height: clamp(293px, 33.854vw, 650px); display: block; background-color: var(--dark-color); border-radius: 20px; overflow: hidden; scroll-margin-block: 2rem;}
.ralph-is-back-section .main-block .video-wrapper img{  box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.16); transition: 0.3s ease-in-out; opacity: 70%;}
.ralph-is-back-section .main-block .video-wrapper .icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ralph-is-back-section .main-block .video-wrapper .icon svg{ fill: var(--primary-color); height:clamp(55px, 7.135vw, 137px); width: clamp(55px, 7.135vw, 137px); transition: 0.3s ease;}
.ralph-is-back-section .main-block .video-wrapper:hover .icon svg { animation: liveBeat 0.9s infinite ease-in-out; }
.ralph-is-back-section .main-block .video-wrapper:hover img{ opacity: 50%; transition:  0.3s ease-in-out;}
/* ___________________ Ralph is back section end _______________________*/


/* ___________________ why-work-with-ralph start _______________________*/
.why-work-with-ralph { padding-block: clamp(37px, 4.271vw, 82px); background-color: var(--light-ash-color); position: relative; z-index: 1;}
.why-work-with-ralph .row{ --bs-gutter-y:clamp(20px, 2.083vw, 40px);}
.why-work-with-ralph .design-element-1{ position: absolute; bottom: clamp(14px, 1.042vw, 20px); left: 0; max-width: clamp(158px, 18.333vw, 352px); z-index: -1;}
.why-work-with-ralph .left-block .title-1{ line-height: 1;}
.why-work-with-ralph .left-block .main-img-wrapper{ margin-top: clamp(20px, 2.083vw, 40px); position: relative; height: 515px;}
.why-work-with-ralph .left-block .main-img-wrapper [class^="img-wrapper-"]{ max-width: 400px; aspect-ratio: 4/3; position: absolute;}
.why-work-with-ralph .left-block .main-img-wrapper [class^="img-wrapper-"] img{ border-radius: 12px; box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.16);}
.why-work-with-ralph .left-block .main-img-wrapper .img-wrapper-1{ top: 0; left: 0;}
.why-work-with-ralph .left-block .main-img-wrapper .img-wrapper-2{ bottom: 0; right: 0;}
.why-work-with-ralph .right-block .box{ border-radius: 20px; background-color: var(--light-color); box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.16); padding: clamp(18px, 1.823vw, 35px) clamp(15px, 1.563vw, 30px);}
.why-work-with-ralph .right-block .box + .box{ margin-top: clamp(15px, 1.563vw, 30px);}
.why-work-with-ralph .right-block .box .head{ display: flex; gap: clamp(15px, 1.563vw, 30px); align-items: center; margin-bottom: clamp(11px, 0.781vw, 15px);}
.why-work-with-ralph .right-block .box .head h3{ font-size: var(--uc--font-size-27); font-weight: 800;}
.why-work-with-ralph .right-block .box p{ line-height: 1.625;}
/* ___________________ why-work-with-ralph start _______________________*/


/* ___________________ customer rating section start_______________________*/
.customer-rating-section{ padding-block: clamp(41px, 4.688vw, 90px); position: relative; overflow-x: hidden;}
.customer-rating-section .title-1{ padding-bottom: clamp(20px, 2.083vw, 40px);}
.customer-rating-section .design-element-1{ position: absolute; top: 19.93%; left: 5.21%; max-width: clamp(60px, 12.188vw, 234px);}
.customer-rating-section .design-element-2{ position: absolute; bottom: 11.48%; right: 4.17%; max-width: clamp(29px, 2.188vw, 42px);}
.customer-rating-section .box{  background-color: var(--primary-color); border-radius: 15px; padding: clamp(32px, 3.646vw, 70px); text-align: center; height: 100%;}
.customer-rating-section .box .title-2{ padding-bottom: clamp(14px, 1.042vw, 20px); font-size: var(--uc--font-size-40);}
.customer-rating-section .box h4{ padding-bottom: clamp(14px, 1.042vw, 20px); font-size: var(--uc--font-size-30); font-weight: 600;}
.customer-rating-section .box p{ max-width: 440px; margin: 0 auto; font-size: var(--uc--font-size-20); font-weight: 500; line-height: 1.5;}
.customer-rating-section .row [class^="col-"]:nth-child(even) .box{ background-color: var(--dark-color); color: var(--primary-color);}
/* ___________________ customer rating section end_______________________*/


/* ___________________ the process section start_______________________*/
.the-process-section { position: relative; width: 100%; overflow: hidden; padding-block: clamp(45px, 5.208vw, 100px);}
.the-process-section .main-block > .row{ --bs-gutter-y:clamp(15px, 1.563vw, 30px);}
.the-process-section::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: url('../images/the-process-bg.jpg') ; background-size: contain; animation: scrollTexture 100s linear infinite; z-index: -1;}
@keyframes scrollTexture { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.the-process-section .title-1{ padding-bottom: clamp(25px, 2.604vw, 50px); }
.the-process-section p{ padding-bottom: clamp(20px, 2.083vw, 40px); font-size: var(--uc--font-size-18); max-width: 600px;}
.the-process-section .box p{ padding-block: clamp(11px, 0.781vw, 15px) 0; text-align: center;}
.the-process-section .right-block .box{ background-color: var(--light-color); padding: clamp(18px, 1.823vw, 35px) clamp(13px, 1.302vw, 25px); border-radius: 20px; min-height: 275px; box-shadow: 0px 7px 31px 0px rgba(1, 2, 2, 0.16);}
.the-process-section .right-block .box + .box{ margin-top: clamp(15px, 1.563vw, 30px); }
.the-process-section .right-block .box .icon{  display: flex; justify-content: center; max-width: clamp(35px, 3.646vw, 70px); margin: 0 auto; margin-bottom: clamp(15px, 1.563vw, 30px);}
.the-process-section .right-block .box h5{ font-size: var(--uc--font-size-30); font-weight: 700;  text-align: center; }
.the-process-section .right-block [class^="col-"]:nth-child(odd) .box:nth-child(even){ background-color: var(--primary-color);}
.the-process-section .right-block [class^="col-"]:nth-child(even) .box:nth-child(odd){ background-color: var(--primary-color);}
.the-process-section .right-block [class^="col-"]:nth-child(even){ margin-top: clamp(18px, 1.823vw, 35px);}
/* ___________________ the process section end_______________________*/


/* ___________________ faq section start_______________________*/
.faq-section{ padding-block: clamp(41px, 4.688vw, 90px); overflow-x: hidden;}
.faq-section .row{ --bs-gutter-y:clamp(15px, 1.563vw, 30px); }
.faq-section .top-block{ padding-bottom: clamp(32px, 3.646vw, 70px); position: relative;}
.faq-section .top-block .design-element-1{ position: absolute; bottom: clamp(-40px, -4.167vw, -80px); right: clamp(-90px, -9.375vw, -180px); z-index: -1; max-width: clamp(173px, 20.052vw, 385px);}
.faq-section .top-block .right-block{ background-color: var(--primary-color); padding: clamp(25px, 2.604vw, 50px) clamp(18px, 1.823vw, 35px) clamp(13px, 1.302vw, 25px); border-radius: 20px; }
.faq-section .top-block .right-block .link{ font-size: var(--uc--font-size-24); font-weight: 700; color: var(--dark-color); margin-bottom: clamp(14px, 1.042vw, 20px);}
.faq-section .top-block .right-block .button-1{ display: block; text-align: center; margin-top: clamp(14px, 1.042vw, 20px);}
.faq-section .top-block .right-block .sub-title-1{ margin-bottom: clamp(18px, 1.823vw, 35px);}
.faq-section .bottom-block .accordion{ padding: clamp(20px, 2.083vw, 40px) clamp(23px, 2.344vw, 45px); border: 1px solid #d1d1d1; border-radius: clamp(14px, 1.042vw, 20px); background-color: var(--light-color);}
.faq-section .bottom-block .accordion .accordion-button:focus { box-shadow: none !important;  }
.faq-section .bottom-block .accordion .accordion-button:not(.collapsed),
.faq-section .bottom-block .accordion .accordion-button:focus { background-color: transparent !important; color: inherit !important; }
.faq-section .bottom-block .accordion .accordion-button:not(.collapsed) { box-shadow: none; padding-bottom: clamp(13px, 1.302vw, 25px);}
.faq-section .bottom-block .accordion .accordion-button { background-color: transparent !important; transition: none !important; font-size: var(--uc--font-size-24); font-weight: 700; padding: clamp(18px, 1.823vw, 35px) 0;}
.faq-section .bottom-block .accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-bottom: 1px solid var(--primary-color); }
.faq-section .bottom-block .accordion .accordion-body{ padding: 0; font-weight: 500; padding-bottom: clamp(13px, 1.302vw, 25px);}
.faq-section .bottom-block .accordion .accordion-button::after{ background-image: url('../images/plus.png') !important;}
.faq-section .bottom-block .accordion .accordion-button:not(.collapsed)::after{ background-image: url('../images/minus.png') !important;}
.faq-section .bottom-block .img-wrapper{ height: 100%;}
.faq-section .bottom-block .img-wrapper img{ border-radius: clamp(14px, 1.042vw, 20px);}
/* ___________________ faq section end_______________________*/


/* ___________________ clients reviews section start________________________*/
.clients-reviews-section{ padding-block: clamp(41px, 4.688vw, 90px); background-color: var(--dark-color); position: relative;}
.clients-reviews-section .design-element-1{ position: absolute; top: 12.76%; left: 6.51%; max-width: clamp(29px, 2.188vw, 42px);}
.clients-reviews-section .design-element-2{ position: absolute; top:  9.55%; right: 5.73%; max-width: clamp(46px, 4.740vw, 91px);}
.clients-reviews-section .sub-title-box{ display: flex; justify-content: center;}
.clients-reviews-section .title-2{ color: var(--light-color); text-align: center; margin: 0 auto; margin-block: clamp(25px, 2.604vw, 50px) clamp(45px, 5.208vw, 100px); max-width: 900px;}
.clients-reviews-section .video-container .row{ --bs-gutter-y: clamp(15px, 1.563vw, 30px); }
.clients-reviews-section .video-container .video-wrapper{ position: relative; height: 275px; display: block; background-color: var(--dark-color); border-radius: 10px; overflow: hidden;}
.clients-reviews-section .video-container .video-wrapper img{  transition: 0.3s ease-in-out;}
.clients-reviews-section .video-container .video-wrapper .icon svg{ width: clamp(35px, 2.604vw, 50px); height: clamp(35px, 2.604vw, 50px); fill: var(--primary-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.clients-reviews-section .video-container .video-wrapper:hover .icon svg { animation: centeredPulse 1s infinite ease-in-out; }
.clients-reviews-section .video-container .video-wrapper:hover img{ opacity: 30%; transition:  0.3s ease-in-out;}
/* ___________________ clients reviews section end________________________*/


/* ___________________ footer start________________________*/
footer{ background: url('../images/footer-bg.jpg') center no-repeat; padding-block: clamp(41px, 4.688vw, 90px); background-size: cover; background-position: center; }
footer .title-1{ padding-bottom: clamp(23px, 2.344vw, 45px);}
footer p{line-height: 1.6667; font-size: var(--uc--font-size-18); max-width: 880px;}
footer p + p{ margin-top: clamp(20px, 2.083vw, 40px);}
footer .button-1{ margin-top: clamp(25px, 2.604vw, 50px);}
footer .box .icon svg{ width: clamp(45px, 3.125vw, 60px); height: clamp(45px, 3.125vw, 60px);}
footer .box h4{ font-size: var(--uc--font-size-30); padding-block: clamp(14px, 1.042vw, 20px) clamp(7px, 0.521vw, 10px);}
footer .box a{ font-size: var(--uc--font-size-40); font-weight: 700; color: var(--dark-color); transition: 0.3s ease-in-out;}
footer .box + .box{ margin-top: clamp(29px, 3.385vw, 65px);}
footer .row{ --bs-gutter-y: clamp(25px, 2.604vw, 50px); }
footer .box a:hover{ transform: translateY(-3px); transition: 0.3s ease-in-out;}
/* ___________________ footer end________________________*/



/* ----------------------------------- */
/* All animation css start*/
.animate-float {
  animation: float 3s ease-in-out infinite;
}

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

.animate-rotate {
  animation: rotate 40s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-wave {
  animation: wave 5s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
}

.animate-pulse {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animate-float-slow {
  animation: float 6.5s ease-in-out infinite;
}

.animate-spin-reverse {
  animation: spinReverse 20s linear infinite;
}

@keyframes spinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.animate-float-random {
  animation: floatRotate 6s ease-in-out infinite;
}

@keyframes floatRotate {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes liveBeat {
  0%, 100% { transform: scale(1) ; opacity: 1; }
  50% { transform: scale(1.05) ; opacity: 0.9; }
}

@keyframes centeredPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
/* ----------------------------------- */
/* All animation css end*/