/* ============================================================
   Movein reference sections — About Us + Our Work Process
   Faithful 1:1 replica of the Awaiken "Movein" template.
   Everything is scoped under .movein so it cannot affect the
   rest of the Atlas Nakliyat site (which keeps its own design).
   ============================================================ */

/* ---- Reference design tokens (scoped) ---- */
.movein{
    --mv-primary:   #062E39;
    --mv-secondary: #F4F5F9;
    --mv-text:      #565969;
    --mv-accent:    #FD5523;
    --mv-white:     #FFFFFF;
    --mv-divider:   #56596924;
    --mv-font:      "DM Sans", sans-serif;

    font-family: var(--mv-font);
    color: var(--mv-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
}

/* ---- Typography baseline (scoped) ---- */
.movein h1,.movein h2,.movein h3,.movein h4,.movein h5,.movein h6{
    margin: 0;
    font-weight: 700;
    line-height: 1.1em;
    color: var(--mv-primary);
    font-family: var(--mv-font);
}
.movein p{ line-height: 1.6em; margin-bottom: 1.5em; font-family: var(--mv-font); }
.movein figure{ margin: 0; }
.movein img{ max-width: 100%; }
.movein a{ text-decoration: none; }

/* ---- Container + grid gutters.
   Width matches the host site (.container = 1200px) so these sections line up
   with the rest of the page; the reference theme used 1300px. ---- */
.movein .container{ max-width: 1200px; padding-right: 15px; padding-left: 15px; }
.movein .row{ margin-right: -15px; margin-left: -15px; }
.movein .row > *{ padding-right: 15px; padding-left: 15px; }

/* ---- Image hover sheen + reveal animation ---- */
.movein .image-anime{ position: relative; overflow: hidden; }
.movein .image-anime:after{
    content:""; position:absolute; width:200%; height:0%; left:50%; top:50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg); z-index:1;
}
.movein .image-anime:hover:after{
    height:250%; transition: all 600ms linear; background-color: transparent;
}
.movein .reveal{
    position: relative; display: inline-flex; visibility: hidden; overflow: hidden;
}
.movein .reveal img{
    height:100%; width:100%; object-fit:cover; transform-origin:left;
}

/* ---- Default button ---- */
.movein .btn-default{
    position:relative; display:inline-block; border-radius:12px;
    font-size:16px; font-weight:600; line-height:1em; text-transform:capitalize;
    font-family: var(--mv-font);
    color: var(--mv-secondary); background: var(--mv-accent);
    border:none; padding:17px 54px 17px 20px;
    transition: all .5s ease-in-out; overflow:hidden; z-index:0; cursor:pointer;
}
.movein .btn-default:hover{ background:transparent; color: var(--mv-white); }
.movein .btn-default::before{
    content:''; position:absolute; top:50%; right:0; width:24px; height:24px;
    background-image:url('../images/arrow-white.svg');
    background-repeat:no-repeat; background-position:center center; background-size:cover;
    transform:translate(-20px,-50%); transition: all .4s ease-in-out;
}
.movein .btn-default:hover::before{ transform:translate(-17px,-50%); }
.movein .btn-default::after{
    content:''; display:block; position:absolute; top:0; bottom:0; left:-15%; right:0;
    width:0; height:106%; background: var(--mv-primary);
    transform:skew(30deg); transition: all .4s ease-in-out; z-index:-1;
}
.movein .btn-default:hover:after{ width:100%; transform:skew(0deg); left:0; }

/* ---- Section title (renamed mv-section-title to avoid site collision) ---- */
.movein .mv-section-row{ margin-bottom:80px; }
.movein .mv-section-row .mv-section-title{ margin-bottom:0; }
.movein .mv-section-row .mv-section-title.mv-section-title-center{
    width:100%; max-width:640px; text-align:center; margin:0 auto;
}
.movein .mv-section-title{ margin-bottom:40px; }
.movein .mv-section-title h3{
    display:inline-block; position:relative; font-size:14px; font-weight:500;
    line-height:1.6em; text-transform:uppercase; color: var(--mv-text);
    padding-left:34px; margin-bottom:10px;
}
.movein .mv-section-title h3::before{
    content:''; position:absolute; top:50%; left:0; transform:translateY(-50%);
    background:url('../images/icon-sub-heading.svg') no-repeat;
    background-position:left center; background-size:cover; width:24px; height:24px;
}
.movein .mv-section-title h2{
    font-size:46px; font-weight:600; letter-spacing:-0.02em; margin-bottom:0;
    color: var(--mv-primary);
}
.movein .mv-section-title h2 span{ color: var(--mv-accent); }
.movein .mv-section-title p{ margin-top:20px; margin-bottom:0; }
.movein .mv-section-title-content p{ margin:0; }

/* ============================================================
   About Us
   ============================================================ */
.movein.about-us{ position:relative; padding:100px 0; background-color: var(--mv-white); }
.movein.about-us::before{
    content:''; position:absolute; top:0; right:0; transform:translateY(-56%);
    background:url('../images/section-bg-shape-1.png') no-repeat;
    background-position:top right; background-size:contain;
    width:300px; height:230px; z-index:1;
}
.movein .about-us-image{ position:relative; margin-right:25px; z-index:1; }
.movein .about-us-image figure{ display:block; border-radius:40px; }
.movein .about-us-image img{
    width:100%; aspect-ratio:1 / 0.9244; object-fit:cover; border-radius:40px;
}
.movein .about-counter-box{ display:flex; flex-wrap:wrap; gap:20px 30px; }
.movein .about-counter-item{ width:calc(50% - 15px); }
.movein .about-counter-item h2{ font-size:46px; color: var(--mv-accent); margin-bottom:5px; }
.movein .about-counter-item h2 span{ color: var(--mv-primary); }
.movein .about-counter-item p{ margin:0; }
.movein .about-us-btn{ margin-top:40px; }
.movein .about-owner-box{
    display:flex; flex-wrap:wrap; align-items:center; gap:60px; margin-top:40px;
}
.movein .about-owner-image,
.movein .about-owner-info{ width:calc(50% - 30px); }
.movein .about-owner-content p{
    font-size:20px; font-weight:500; color: var(--mv-primary); margin:0;
}
.movein .about-owner-info-body{
    display:flex; flex-wrap:wrap; align-items:center; gap:50px;
    border-top:1px solid var(--mv-divider); margin-top:20px; padding-top:20px;
}
.movein .about-owner-signature img{ max-width:220px; }
.movein .about-owner-info-content h3{ font-size:20px; text-transform:capitalize; margin-bottom:5px; }
.movein .about-owner-info-content p{ margin:0; }
.movein .about-owner-image figure{ display:block; border-radius:40px; }
.movein .about-owner-image img{
    width:100%; aspect-ratio:1 / 0.51; object-fit:cover; border-radius:40px;
}

/* ============================================================
   Our Work Process (dark)
   ============================================================ */
.movein.our-work-process{
    padding:100px 0;
    background-color: var(--mv-primary);
    background-image:url('../images/work-process-bg.png');
    background-repeat:no-repeat; background-position:center center; background-size:cover;
}
.movein.our-work-process .mv-section-title h3{ color: var(--mv-secondary); }
.movein.our-work-process .mv-section-title h2{ color: var(--mv-white); }

.movein .wrok-process-list{ display:flex; flex-wrap:wrap; gap:30px; }
.movein .work-process-item{
    position:relative; text-align:center; padding-top:10px; width:calc(25% - 22.5px);
}
.movein .work-process-item:nth-child(odd){ margin-top:90px; }
.movein .work-process-item:after{
    position:absolute; content:''; top:-30px; right:-65px; width:100px; height:50px;
    background:url('../images/work-process-arrow.svg') no-repeat;
    background-position:center center; background-size:cover; z-index:0;
}
.movein .work-process-item:last-child:after,
.movein .work-process-item:nth-child(4n + 4):after{ display:none; }
.movein .work-process-item:nth-child(even):after{ top:132px; transform:rotateX(180deg); }
.movein .work-process-item .icon-box{
    position:relative; width:162px; height:162px; background: var(--mv-accent);
    border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:40px;
}
.movein .work-process-item .icon-box:before{
    content:''; position:absolute; height:calc(100% + 20px); width:calc(100% + 20px);
    border:2px dashed var(--mv-secondary); border-radius:50%;
}
.movein .work-process-item .icon-box img{
    position:relative; width:100%; max-width:60px; z-index:1;
}
.movein .work-process-item .icon-box .work-process-number{
    position:absolute; bottom:-25px; left:50%; transform:translateX(-50%);
    width:40px; height:40px; background: var(--mv-white); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.movein .work-process-item .icon-box .work-process-number h3{ color: var(--mv-accent); font-size:24px; }
.movein .work-process-content h3{
    color: var(--mv-white); font-size:20px; text-transform:capitalize; margin-bottom:15px;
}
.movein .work-process-content p{ color: var(--mv-secondary); margin:0; }

/* ============================================================
   Responsive — <= 991px
   ============================================================ */
@media only screen and (max-width:991px){
    .movein.about-us{ padding:50px 0; }
    .movein.about-us::before{ width:180px; height:135px; transform:translateY(-65%); }
    .movein .about-us-content{ margin-bottom:30px; }
    .movein .about-counter-item h2{ font-size:36px; }
    .movein .about-us-btn{ margin-top:30px; }
    .movein .about-us-image{ margin-right:0; }
    .movein .about-us-image figure,
    .movein .about-us-image img{ border-radius:26px; }
    .movein .about-us-image img{ aspect-ratio:1 / 0.7; }
    .movein .about-owner-box{ gap:30px; margin-top:30px; }
    .movein .about-owner-image,
    .movein .about-owner-info{ width:100%; }
    .movein .about-owner-content p{ font-size:18px; }
    .movein .about-owner-info-body{ gap:20px; }
    .movein .about-owner-signature img{ max-width:160px; }
    .movein .about-owner-image figure,
    .movein .about-owner-image img{ border-radius:26px; }

    .movein.our-work-process{ padding:50px 0; }
    .movein .work-process-item{ width:calc(50% - 15px); }
    .movein .work-process-item:nth-child(odd){ margin-top:50px; }
    .movein .work-process-item:nth-child(even):after{ display:none; }
    .movein .work-process-item .icon-box{ width:132px; height:132px; }
    .movein .work-process-item .icon-box img{ max-width:50px; }
    .movein .work-process-item .icon-box .work-process-number h3{ font-size:20px; }
    .movein .work-process-content h3{ font-size:18px; margin-bottom:10px; }
}

/* ============================================================
   Responsive — <= 767px
   ============================================================ */
@media only screen and (max-width:767px){
    .movein .mv-section-title h2{ font-size:26px; }
    .movein.about-us::before{ width:150px; height:105px; transform:translateY(-58%); }
    .movein .about-counter-box{ gap:20px; }
    .movein .about-counter-item{ width:calc(50% - 10px); }
    .movein .about-counter-item h2{ font-size:26px; }
    .movein .about-owner-content p{ font-size:16px; }
    .movein .about-owner-signature img{ max-width:120px; }
    .movein .about-owner-info-content h3{ font-size:18px; }

    .movein .work-process-item{ width:100%; }
    .movein .work-process-item:nth-child(odd){ margin-top:0; }
    .movein .work-process-item:after{ display:none; }
    .movein .work-process-item .icon-box{ width:102px; height:102px; }
    .movein .work-process-item .icon-box img{ max-width:40px; }
    .movein .work-process-item .icon-box .work-process-number{ width:30px; height:30px; }
    .movein .work-process-item .icon-box .work-process-number h3{ font-size:16px; }
}

/* ============================================================
   Request a Quote — "Why Choose Us" block (dark)
   ============================================================ */
.movein.why-choose-us{
    background-color: var(--mv-primary);
    background-image:url('../images/why-choose-us-bg.png');
    background-repeat:no-repeat; background-position:center center; background-size:cover;
    margin-top:70px; padding:100px 0;
}
.movein.why-choose-us .mv-section-title h3{ color: var(--mv-secondary); }
.movein.why-choose-us .mv-section-title h2{ color: var(--mv-white); }
.movein.why-choose-us .mv-section-title p{ color: var(--mv-white); }

.movein .why-choose-box{ display:flex; flex-wrap:wrap; gap:30px 60px; align-items:center; }
.movein .why-choose-content,
.movein .request-quote-form-box{ width:calc(50% - 30px); }

.movein .why-choose-body ul{ list-style:none; margin:0; padding:0; }
.movein .why-choose-body ul li{
    color: var(--mv-secondary); line-height:1.5em; padding-left:30px;
    background-image:url('../images/icon-sub-heading.svg');
    background-repeat:no-repeat; background-position:left top 1px; background-size:22px auto;
    margin-bottom:15px;
}
.movein .why-choose-body ul li:last-child{ margin-bottom:0; }

/* keep the current phone CTA below the list, legible on the dark panel */
.movein .why-choose-content .quote-call{ margin-top:30px; }

/* white quote-form card */
.movein .request-quote-form-box{
    background: var(--mv-white); border-radius:40px; padding:50px;
    box-shadow:0px 0px 30px 0px #0000001A; margin-top:-170px;
}
.movein .request-quote-form-box h3{
    font-size:36px; font-weight:600; text-transform:capitalize; margin-bottom:30px;
    color: var(--mv-primary);
}
.movein .request-quote-form .form-control{
    width:100%; font-size:16px; font-weight:400; line-height:1.5em; color: var(--mv-text);
    background-color: var(--mv-white); border:1px solid var(--mv-divider);
    border-radius:8px; padding:17px 20px; box-shadow:none; outline:none;
    font-family: var(--mv-font);
}
.movein .request-quote-form .form-control::placeholder{ color: var(--mv-text); }
.movein .request-quote-form .form-control:focus{
    border-color: var(--mv-accent); background-color: var(--mv-white); color: var(--mv-text);
    box-shadow:0 0 0 4px rgba(253,85,35,.14); outline:none;
}
.movein .request-quote-form .form-control.invalid{
    border-color:#e03131; box-shadow:0 0 0 4px rgba(224,49,49,.12);
}
.movein .request-quote-form .form-control.form-select{ padding:17px 30px 17px 20px; }
.movein .request-quote-form .form-control.form-select option{ font-weight:500; color: var(--mv-primary); }
.movein .request-quote-form textarea.form-control{ min-height:120px; resize:vertical; }

/* consent checkbox inside the white card */
.movein .request-quote-form .form-check-wrap{ display:flex; align-items:flex-start; gap:10px; }
.movein .request-quote-form .form-check-input{ margin-top:3px; flex:none; }
.movein .request-quote-form .form-check-input.invalid{ outline:2px solid #e03131; outline-offset:2px; }
.movein .request-quote-form .form-check-label{ font-size:14px; color: var(--mv-text); line-height:1.5em; }
.movein .request-quote-form .btn-default{ cursor:pointer; }
.movein .request-quote-form .form-success{ margin-top:16px; }

/* Request a Quote — responsive <=991px */
@media only screen and (max-width:991px){
    .movein.why-choose-us{ padding:50px 0; margin-top:0; }
    .movein .why-choose-content,
    .movein .request-quote-form-box{ width:100%; }
    .movein .why-choose-body ul li{ padding-left:25px; background-size:18px auto; margin-bottom:12px; }
    .movein .request-quote-form-box{ padding:30px; border-radius:26px; margin-top:0; }
    .movein .request-quote-form-box h3{ font-size:30px; margin-bottom:20px; }
    .movein .request-quote-form .form-control{ padding:12px 15px; }
    .movein .request-quote-form .form-control.form-select{ padding:12px 30px 12px 15px; }
}

/* Request a Quote — responsive <=767px */
@media only screen and (max-width:767px){
    .movein .request-quote-form-box{ padding:20px; }
    .movein .request-quote-form-box h3{ font-size:24px; }
}

/* ============================================================
   FAQ — "Our Faqs" block (reference design, our Q&A)
   ============================================================ */
.movein.our-faqs{ padding:50px 0; background-color: var(--mv-white); }
.movein.our-faqs .container-fluid{ padding:0; }
.movein .row.no-gutters{ margin-right:0; margin-left:0; }
.movein .row.no-gutters > *{ padding-right:0; padding-left:0; }

.movein .faq-content-box{ padding-left: calc(((100vw - 1200px) / 2) + 12px); }
.movein .our-faqs-content{
    position:relative; background: var(--mv-white);
    border:1px solid var(--mv-divider); border-radius:40px;
    box-shadow:0px 0px 30px 0px #062E390D; padding:60px;
    margin:80px 0; margin-right:-80px; z-index:1;
}

/* accordion (Bootstrap 5 collapse + reference look) */
.movein .faq-accordion .accordion-item{
    border:none; border-bottom:1px solid var(--mv-divider); background:transparent;
    border-radius:0; margin-bottom:30px; padding-bottom:30px;
}
.movein .faq-accordion .accordion-item:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.movein .faq-accordion .accordion-header{ margin:0; }
.movein .faq-accordion .accordion-button{
    position:relative; width:100%; text-align:left;
    font-family: var(--mv-font); font-size:20px; font-weight:600; line-height:1.4em;
    color: var(--mv-accent); background:transparent; box-shadow:none;
    border:none; border-radius:0; padding:0 30px 0 0; transition: all .3s ease-in-out;
}
.movein .faq-accordion .accordion-button.collapsed{ color: var(--mv-primary); }
.movein .faq-accordion .accordion-button:not(.collapsed){ padding-bottom:10px; background:transparent; box-shadow:none; }
.movein .faq-accordion .accordion-button:focus{ box-shadow:none; border-color:transparent; outline:none; }
.movein .faq-accordion .accordion-button::after{
    content:''; position:absolute; right:2px; top:7px; width:10px; height:10px;
    margin:0; background:none; flex-shrink:0;
    border-right:2px solid var(--mv-primary); border-bottom:2px solid var(--mv-primary);
    transform: rotate(45deg); transition: all .3s ease-in-out;
}
.movein .faq-accordion .accordion-button:not(.collapsed)::after{
    transform: rotate(-135deg); border-color: var(--mv-accent);
}
.movein .faq-accordion .accordion-body{ padding:0 25px 0 0; color: var(--mv-text); }
.movein .faq-accordion .accordion-body p{ margin-bottom:15px; line-height:1.6em; }
.movein .faq-accordion .accordion-body p:last-child{ margin-bottom:0; }

/* faq image + rotating intro-video button */
.movein .faqs-image{ position:relative; height:100%; }
.movein .faq-image{ height:100%; }
.movein .faq-image figure{ display:block; height:100%; border-radius:40px 0 0 40px; overflow:hidden; }
.movein .faq-image img{ width:100%; height:100%; aspect-ratio:1 / 0.9; object-fit:cover; border-radius:40px 0 0 40px; }
.movein .intro-video-button{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; }
.movein .intro-video-button a{
    position:relative; background-color: var(--mv-white); border-radius:100%;
    width:150px; height:150px; display:inline-flex; align-items:center; justify-content:center; z-index:1;
}
.movein .intro-video-button a figure{ display:block; }
.movein .intro-video-button a figure img{ width:100%; max-width:125px; animation: mv-textrotate 25s infinite linear; }
@keyframes mv-textrotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.movein .into-video-play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.movein .into-video-play-icon img{ max-width:24px; }

/* FAQ responsive <=991px */
@media only screen and (max-width:991px){
    .movein.our-faqs{ padding:25px 0; }
    .movein.our-faqs .container-fluid{ padding:0 15px; }
    .movein .faq-content-box{ padding:0; margin-bottom:30px; }
    .movein .our-faqs-content{ margin:0; padding:30px; border-radius:26px; }
    .movein .faq-accordion .accordion-item{ margin-bottom:20px; padding-bottom:20px; }
    .movein .faqs-image{ padding:0; }
    .movein .faq-image img{ aspect-ratio:1 / 0.68; }
    .movein .faq-image figure,
    .movein .faq-image img{ border-radius:26px; }
    .movein .intro-video-button a{ width:120px; height:120px; }
    .movein .intro-video-button a figure img{ max-width:100px; }
}
/* FAQ responsive <=767px */
@media only screen and (max-width:767px){
    .movein .our-faqs-content{ padding:20px; }
    .movein .faq-accordion .accordion-item{ margin-bottom:10px; padding-bottom:10px; }
    .movein .faq-accordion .accordion-button{ font-size:18px; }
    .movein .faq-accordion .accordion-body{ padding-right:0; }
    .movein .intro-video-button a{ width:90px; height:90px; }
    .movein .intro-video-button a figure img{ max-width:75px; }
    .movein .into-video-play-icon img{ max-width:18px; }
}

/* ============================================================
   Scrolling Ticker
   ============================================================ */
.movein.our-scrolling-ticker{ padding:50px 0 100px; background-color: var(--mv-white); overflow:hidden; }
.movein .scrolling-ticker-box{ --gap:30px; display:flex; overflow:hidden; user-select:none; gap:var(--gap); align-items:center; z-index:1; }
.movein .scrolling-content{ flex-shrink:0; display:flex; gap:var(--gap); min-width:100%; animation: mv-scroll 40s linear infinite; }
@keyframes mv-scroll{ from{ transform: translateX(0); } to{ transform: translateX(calc(-100% - var(--gap))); } }
.movein .scrolling-ticker-box .scrolling-content span{
    display:inline-flex; align-items:center; text-transform:uppercase; white-space:nowrap;
    font-size:100px; line-height:1em; font-weight:700; color:transparent;
    -webkit-text-stroke-width:1px; -webkit-text-stroke-color: var(--mv-primary); opacity:.4;
}
.movein .scrolling-content span img{ max-width:50px; margin-right:30px; }
/* ticker responsive */
@media only screen and (max-width:991px){
    .movein.our-scrolling-ticker{ padding:25px 0 50px; }
    .movein .scrolling-ticker-box{ --gap:20px; }
    .movein .scrolling-content span img{ max-width:30px; margin-right:20px; }
    .movein .scrolling-ticker-box .scrolling-content span{ font-size:75px; }
}
@media only screen and (max-width:767px){
    .movein .scrolling-content span img{ max-width:24px; }
    .movein .scrolling-ticker-box .scrolling-content span{ font-size:50px; }
}