/* loading screen  */
.loading-screen 
{
    position:fixed;
    top:0;
    height:0;
    height:100vh;
    width:100%;
    background-color:white;
    z-index:99999;
    transition:.2s;
}
.loading-screen.fadeout
{
    opacity:0;
    pointer-events: none;
}
.loading-screen .loading-screen__content 
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.loading-screen .loading-screen__content  img 
{
    width:200px;
    animation:bounce 1s infinite linear;
}
@keyframes bounce {
    0%{
        transform: translateY(0px);
    }
    25%{
        transform: translateY(10px);
    }
    50%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(14px);
    }
    100%{
        transform: translateY(0px);
    }
}
/* start hero section  */
.hero 
{
    height:800px;
    min-height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(to bottom , #7853a065, #7853a0a6), url("../images/hero_bg.webp");
    background-repeat: no-repeat;
    background-size:cover;
    background-position:top;
}
.hero .hero_text-content 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:10px 40px;
    color:white;
    /* gap:20px; */
}
.hero .hero_text-content h1 
{
    font-size:6rem;
    color:var(--primary-color);
    text-shadow: 2px 2px #f1f1f1;
    font-family: 'Noto Nastaliq Urdu', serif;
    margin:20px 0;
}
.hero .hero_text-content p 
{
    font-size:22px;
    text-align: center;
    line-height: 3rem;
    padding:0 200px;
}
@media (max-width:991px)
{
    .hero .hero_text-content p 
    {
        padding:0 100px;
    }
}
@media (max-width:768px)
{
    .hero .hero_text-content p 
    {
        padding:0 60px;
    }
}
@media (max-width:414px)
{
    .hero .hero_text-content p 
    {
        padding:0 30px;
    }
}
@keyframes slideLeft {
    0%{
        opacity:0;
        transform:translateX(300px);
    }
    100%{
        opacity:1;
        transform:translateX(0px);

    }
}
/* end-hero_section  */
/* start-our_vesion-section  */
.our_vision 
{
    padding: 100px 0 50px ;
    background-color: var(--primary-color);
}
.our_vision .section-title 
{
    color:#fff;
}
.our_vision .section-title::before 
{
    background-color: #fff;
}
.our_vision .container 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
}
.our_vision .container .image_container 
{
    width: 100% ;
    height:fit-content;
    /* background:url("../images/arrivo_car_mockup.svg"); */
    /* background-position: center; */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
}

.our_vision .image_container > img 
{
    width: 100% ;
    /* height:400px; */
    object-fit: contain;
    mix-blend-mode: initial ;
}
.our_vision .our_vision_list 
{
    display: flex;
    justify-content: center;
    gap:20px;
    flex-wrap: wrap;
}
.our_vision .our_vision_list .vision_item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    border:1px solid #666;
    border-radius:5px;
    padding:20px    50px;
    text-align:center;
    cursor:pointer;
    flex:1;
    min-width:290px;
    transition:background-color .3s ease;
    color:white;
}
.our_vision .our_vision_list .vision_item:hover 
{
    background:#56177485;
}
.our_vision .our_vision_list .vision_item img 
{
    width:80px;
    filter: invert(100%);
    transition:transform .2s ease;
}
.our_vision .our_vision_list .vision_item:hover img 
{
    transform:scale(1.1,1.1)
}

.our_vision .our_vision_list .vision_item span:nth-of-type(2)
{
    font-size:16px;
    line-height:28px;
}
/* end-our_vesion-section  */
/* start-our_message-section  */
.our_message 
{
    padding : 100px 0 50px;
    background-color:#f7f7f7;
}
.our_message .our_message_content p
{
    text-align: center;
}
.our_message .our_message_content .cards_container 
{
    display:flex;
    justify-content: center;
    /* align-items: center; */
    flex-wrap:wrap;
    gap:20px;
    padding:20px 0;
}
.our_message .our_message_content .cards_container .card 
{
    padding:10px;
    border:1px solid #ddd;
    border-radius:5px;
    text-align: center;
    flex:1;
    min-width: 250px;
    transition:background-color .3s ease;
}
.our_message .our_message_content .cards_container .card:hover
{
    background-color:#B27BED;
}

.our_message .cards_container .card img 
{
    width:64px;
    margin-bottom:10px;
}
/* end-our_message-section  */
/* start-why_us-section  */
.why_us 
{
    padding:100px 0 50px;
}
.why_us .why_us_content > div:nth-of-type(1)
{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    flex-wrap:wrap;
}
.why_us .why_us_content .mid_img_container
{
    flex:1;
    min-width: 250px;
    width:350px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width:991px)
{
    .why_us .why_us_content .mid_img_container
    {
        display:none;   
    }
}
.why_us .why_us_content > div .cards_container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap:wrap;
    gap:20px;
    flex:1;
}
.why_us .why_us_content > div .cards_container .card ,
.why_us .why_us_content > .bottom-card .card 
{
    border:1px solid #ddd;
    border-radius:5px;
    text-align: center;
    padding:20px 30px;
    position:relative;
    min-width:290px;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
}
.why_us .why_us_content > .bottom-card 
{
    margin-top:20px;
    display:flex;
    justify-content: center;
}
.why_us .why_us_content .card::before 
{
    content:"01";
    position:absolute;
    top:5px;
    right:10px;
    font-size:30px;
    z-index:-1;
    font-weight:bold;
    color:#ddd;

}
.why_us .why_us_content .card.one::before 
{
    content:'01'
}
.why_us .why_us_content .card.two::before 
{
    content:'02';
}
.why_us .why_us_content .card.three::before 
{
    content:'03';
}
.why_us .why_us_content .card.four::before 
{
    content:'04';
}
.why_us .why_us_content .card.five::before
{
    content:'05';
}
.why_us .why_us_content .card.six::before 
{
    content:'06';
}
.why_us .why_us_content .card.seven::before 
{
    content:'07';
}
/* end-why_us-section  */
/* start-join_us-section  */
.join_us 
{
    padding:50px 0 50px;
    /* background:linear-gradient(to right , #7853a077, #7853a07c), url("../images/arrivo_car_mockup.svg"); */
    background-color: var(--primary-color);
    background-size:cover;
    background-position: center;
    min-height:100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.join_us .section-title 
{
    color:white;
}
.join_us .section-title::before 
{
    background:white;
}

.join_us .join_us_advantages
{
    flex:1;
    position: sticky;
}
.join_us  .join_us_advantages h2
{
    color:white;
    margin-bottom:20px;
}
.join_us  .join_us_advantages .cards_container 
{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
}
.join_us .join_us_advantages .cards_container .card 
{
    border:1px solid #ddd;
    border-radius:5px;
    background-color:#f7f7f777;
    padding:20px 30px;
    flex:1;
    min-width: 270px;
    text-align: center;
}
.join_us  .cards_container .card .img_container 
{
    width:50px;
    height: 50px;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:auto;
}
.join_us  .cards_container .card .img_container img 
{
    width : 32px;
}
.join_us  .cards_container .card  h6 
{
    font-size:18px;
}
.join_us .container > a 
{
    display:flex;
    justify-content: center;
    align-items: center;
    width:200px;
    height:60px;
    border-radius:30px;
    border:1px solid white;
    margin:30px auto 0;
    padding:10px 30px;
    color:white;
    font-size:22px;
    transition:.3s ease;
    position:relative;
    overflow: hidden;
}
.join_us .container > a span 
{
    position: relative;
    z-index: 1;
}
.join_us .container > a:before
{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    border-radius: 0 40px 40px 0;
    z-index: 0;
    background-color:white;
    transition: .3s all;
}
.join_us .container > a:hover span 
{
    color:var(--primary-color)
}
.join_us .container > a:hover:before
{
    width:100%;
}

/* end-join_us-section  */
/* start-dowonload-section  */
.download 
{
    padding:100px 0;
    background-color:#f7f7f7;
}
.download .links-wrapper 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap:20px;
}
.download .links-wrapper a 
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    border:1px solid #ddd;
    padding:10px 20px;
    border-radius:10px;
    transition:all .3s ease;
}
.download .links-wrapper a:hover 
{
    background-color:var(--primary-color);
    color:white;
    transform:scale(1.1,1.1);
}
.download .links-wrapper a img 
{
    width:32px;
}
/* end-dowonload-section  */