a{
    text-decoration :none !important;
}

.IndexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.slider_item {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.HeroPanel {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2%;
    height: 220px;
    z-index: 0;
    background-color: #f2f5fa80;
    border-radius: 5px;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(100px);
    outline: 1px solid #0000001f;
}

.HeroPanelHeader {
    font-size: 20px;
    text-align:center;
    font-weight:600;
    margin-bottom:10px;
}

.sliderTextContainer {
    height: 100%;
    width: 40%;
}


.sliderTextHeader {
    font-size: 32px;
    font-weight: 900;
    color: #00519b;
    width: 100%;
    text-align: center;
    text-transform:uppercase;
}

.SliderText {
    font-weight: 600;
    margin-top: 20px;
}

.sliderBtn {
    /* background-color: var(--orange);*/
    background-color: var(--darkblue);
    font-weight: 600;
    color: white;
    border-radius: 5px;
    padding: 8px 25px;
    cursor: pointer;
    margin-top: 30px;
}

.SliderTextBottomSpace {
    height: 200px;
}



#btnSellYourCar {
    height: 40px;
    width: 100%;
    outline: 1px solid #707ca35c;
    border-radius: 5px;
    font-size: 18px;
    color: var(--darkblue);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.1s ease;
    text-decoration: none !important;
    background-color: #00519b0d;
}

    #btnSellYourCar:hover {
        background-color: var(--darkblue);
        color: white !important;
    }

.HeroPanelSellYourCar_Content {
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    text-align: left;
}

#HeroPanelContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-top: -130px;
}

#HeroPanelContainerInner {
    width: 100%;
    display: flex;
    justify-content: center;
}

#HeroPanelSellYourCar {
    width: 30%;
    height: 240px;
}

.HeroPanelContainerBtn {
    margin-top: 20px;
}

#HeroPanelSellYourCarAgency {
    width: 30%;
    height: 240px;
    margin-left: 2%
}

#HeroPanelSellYourCarEvaluate {
    width: 30%;
    height: 240px;
    margin-left: 2%
}

#featuredCarsItem_Container {
    column-gap: 40px;
    margin: 10px 5px;
    font-size: 18px;
}

.featuredCarsItem {
    cursor: pointer;
   /* font-family: Khand;*/
}

#FeaturedCarsHeaderContainer {
    margin: 30px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#FeaturedCars {
    margin-top: 10px
}

#FeaturedCars_Inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-selected="true"] {
    font-weight: 600;
    position: relative;
}

    [data-selected="true"]::after {
        content: "";
        background: var(--orange);
        height: .15em;
        width: 100%;
        position: absolute;
        bottom: -4px;
        left: 0px;
        z-index: -1;
    }

.viewAll {
    font-size: 17px;
    margin-right: 10px;
    margin-bottom:10px;
    font-weight:600;
}
    .viewAll a {
        color: #dc3545;
    }

    .viewAll span:nth-child(2) {
        font-size: 28px;
    }

#CarBrandHeaderContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px
}

#CarBrandsInner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px
}

.carBrandCol {
    padding: 10% 23% 23% 23%;
    /*filter: grayscale(100%);
    opacity: 0.6;*/
}

    .carBrandCol div {
        height: 150px;
    }

        .carBrandCol div img {
            width: 100%;
            height: auto;
            height:102px;
        }

.viewAllRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

    .viewAllRow div:first-child {
        font-size: 22px;
    }

    .viewAllRow div:nth-child(2) {
        flex-grow: 1;
    }

.SliderArrow {
    outline: 1px solid #8080803b;
    margin: 3px;
    padding: 3px;
    cursor: pointer
}

    .SliderArrow img {
        height: 40px
    }

#Banner_DriveIt_Container {
    width: 100%;
    height: 450px;
    background-size: cover;
    background-image: url(../images/siteImages/banner_1.jpg);
    background-repeat: no-repeat;
    background-position: right;
}

#Banner_DriveIt_Container_Text_Contianer {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding-left: 20px;
   /* font-family: 'Khand', sans-serif;*/
    box-sizing: border-box;
}

    #Banner_DriveIt_Container_Text_Contianer div:nth-child(1) {
        font-size: 42px;
    }

    #Banner_DriveIt_Container_Text_Contianer div:nth-child(2) {
        font-size: 42px;
        margin-top: 10px;
        font-weight: 600;
        color: var(--orange)
    }

    #Banner_DriveIt_Container_Text_Contianer div:nth-child(3) {
        display: flex;
        gap: 10px;
        font-size: 18px;
        margin-top: 20px;
        font-weight: 600;
    }

#HaveQuestionHeaderContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px
}

#HaveQuestionContentContainer {
    margin-top: 40px;
    padding: 0;
    width:50%;
    /* display: flex;
    justify-content: center*/
}

#mainBanner2 {
    width: 50%;
}

#mainBanner2 img{
    width:80%;
}

.FQAItemHeader {
    font-size: 18px;
    line-height: 1.4;
    border-top: 1px solid #80808047;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
}

    .FQAItemHeader:first-child {
        border-top: none;
    }

    .FQAItemHeader img {
        height: 20px
    }

.FQAItemContent {
    display: none;
    padding: 10px 10px 30px;
    line-height: 1.4;
    font-style: italic;
}


#CustomerReviewsHeaderContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px
}

#CustomerReviewsContainer {
    margin-top: 30px;
    display: flex;
    justify-content: center
}

.CustomerReviewsItem {
    margin: 5px;
    padding: 10px;
    outline: 1px solid #cdd8de;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
}

.CustomerReviews_Review {
    font-size: 14px;
    line-height: 1.2;
}

.CustomerReviewsItem_CustomerInfo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.CustomerReviewsItem_ImgContainer img {
    height: 60px;
    border-radius: 100px
}

.CustomerReviewsItem_CustomerName {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    font-size: 16px;
}

#AgenciesHeaderContainer {
    margin: 120px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#AgenciesContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

#AgenciesHeaderContainer {
    margin: 120px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
}
/*.SectionHeader:after {
    position: absolute;
    content: "";
    height: 0.02em;
    width: 100%;
    left: 0;
    background-color: rgba(13, 110, 253, 0.25);
}*/
#AgenciesHeaderContainer_Description {
    margin-top: 10px;
    font-size: 18px;
}

.AgencyDetailContainer {
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    align-items: center;
    width: 100%;
}

.AgencyImgContainer {
    width: 48%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0px
}

.AgencyInfoContainer {
    width: 4%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.AgencyInfoContainer_Haeder {
    font-size: 1.6rem;
    font-weight: 600;
}

.AgencyInfoContainer_Address {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 15px;
    /*text-align: left;*/
}

.AgencyInfoContainer_l1 {
    margin-top: 15px;
    font-size:16px;
}

.AgencyInfoContainer_l2 {
    margin-top: 5px
}

.AgencyInfoContainer_l3 {
    margin-top: 5px
}

#BlogPostHeaderContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px
}


#BlogPostContentContainer {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.BlogPostItem {
    margin: 5px;
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    border-radius: 15px;
    overflow: hidden;
    /*-webkit-box-shadow: 1px 3px 6px 2px rgb(211 211 211);
    -moz-box-shadow: 1px 3px 6px 2px rgb(211 211 211);
    box-shadow: 1px 3px 6px 2px rgb(211 211 211);*/
    outline: 0.1px solid #0445804f;
   
}

.BlogPostItem_Img {
    height: 280px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

.BlogPostItem_Header {
    padding: 10px;
    font-weight: 600;
    font-size: 16px
}

.BlogPostItem_Content {
    padding: 10px;
    overflow: hidden;
    display: -webkit-inline-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    font-size: 14px;
    line-height: 1.6;
    min-height: 50px;
    max-height: 50px;
}

.BlogPostItem_ButtonContainer {
    padding: 4%;
    display: flex;
    justify-content: right;
}

.BlogPostItem_ReadMore {
    outline: 1px solid #b0c6dbad;
    color: #0e487d;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

#FooterInfoSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 80px 0 80px
}

.FooterInfoSectionItem {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.FooterInfoSectionItem_r1 {
    font-weight: 600;
    font-size: 36px;
    color: var(--orange);
}

.FooterInfoSectionItem_r2 {
    font-size: 18px;
    margin-top: 10px;
    min-height:50px;
    text-align:center;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 16px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FQAItemHeader img {
    transition: all 0.6s;
}

.ArrowRotate {
    transform: rotate(90deg);
}


@media (max-width: 768px) {
    .IndexContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 20px;
        padding: 0 10px;
    }

    .slider_item {
        height: 230px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .sliderTextContainer {
        height: 100%;
        width: 100%;
    }

    .sliderTextHeader {
        font-size: 20px;
        font-weight: 900;
        color: #00519b;
        width: 100%;
        text-align: center;
    }

    .SliderText {
        font-weight: 600;
        font-size:12px;
        margin-top: 10px;
    }

    .sliderBtn {
        font-weight: 600;
        color: white;
        border-radius: 10px;
        padding: 10px 20px;
        cursor: pointer;
        margin-top: 15px;
    }

    
    .SliderTextBottomSpace{
        height:50px;
    }

    #HeroPanelContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10;
        margin-top: -30px;
    }

    #HeroPanelContainerInner {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #HeroPanelSellYourCar {
        width: 90%;
        height: 200px;
        padding: 10px;
    }

    #HeroPanelSellYourCarAgency {
        width: 90%;
        height: 180px;
        margin-left: 0%;
        margin-top: 15px;
        padding: 10px;
    }

    #HeroPanelSellYourCarEvaluate {
        width: 90%;
        height: 180px;
        margin-left: 0%;
        margin-top: 15px;
        padding: 10px;
    }


    #HaveQuestionContentContainer{
        width:100%;
    }

    #mainBanner2 {
        width: 100%;
        margin-top:40px
    }

        #mainBanner2 img {
            width: 100%;
        }

    #CustomerReviews_CustomerPanel {
        width: 100%
    }

    .AgencyDetailContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

    }

    .AgencyImgContainer {
        width: 100%;
        height: 200px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 20px;
        margin-bottom : 10px;
    }

    .AgencyInfoContainer {
        width: 100%;
        padding-left: 0px;
        margin-top: 30px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 10px;
    }

    #FooterInfoSection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 80px 0 80px;
        flex-wrap: wrap;
    }

    .FooterInfoSectionItem {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 20px;
    }

    .FooterInfoSectionItem_r1 {
        font-weight: 600;
        font-size: 32px
    }

    .FooterInfoSectionItem_r2 {
        margin-top: 10px;
        font-size: 18px;
    }
}