/*  *************** new design  ****************************  */
* {
    font-family: Bariol;
    scroll-behavior: smooth;
}
body{
    background-color: #F5F6FA;
}
@font-face{
    font-family:Anton;
    font-weight:400;
    src:url("../font/site/Anton-Regular.ttf")
}
.news--card img, .news--link img{
    border-radius: 8px !important;
    aspect-ratio: 72/100;
    object-fit: cover;
}
.logo--image{
    width : 150px !important;
}
.cranfield--image{
    width: 100px !important;
}
/*  *************** section one ****************************  */
.section--four{
    overflow-x: hidden !important;
}
.section--one{
    min-height: 100vh !important;
    background-image: url("../image/home/bg-section-one.png");
    background-size : cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main--title {
    font-size: 90px !important;
    color: var(--darkblue);
    font-family: Anton , sans-serif;
}
.desc--section1{
    color: var(--darkblue);
    font-size: 23px;
    font-family: Bariol , sans-serif;
}
.row-style {
    padding-top: 10rem;
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeScaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
        transition: all 1s linear;
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        transform: translatex(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        transform: translateY(-100px);
    }
    to {
        opacity:1;
        transform: translateY(0);
    }
}
/*  *************** section one end ****************************  */
/*  *************** section two ****************************  */
.title--index{
    color: var(--darkblue);
    font-size: 50px;
    font-family: Anton , sans-serif;
}
.gap--style{
    gap : 20px;
}
.card--title{
    color: var(--darkblue);
    font-size: 25px;
    font-family: BariolBold , sans-serif;
}
.card--category{
    color: var(--blue);
    font-size: 20px;
    font-family: Bariol , sans-serif;
}
.card--des{
    color: var(--darkblue);
    font-size: 18px;
    font-family: Bariol , sans-serif;
}
.card--transform{
    transition: all 150ms ease-in;
    padding-top: 1rem;
}
.card--transform1{
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-delay: 1s;
}
.card--transform:hover , .card--transform:focus{
    cursor: pointer;
    padding-top: 1rem;
    border-radius: 20px;
    box-shadow: 0px 10px 25px 0px rgba(82, 82, 82, 0.15);
    background-color: transparent;
}
/*  *************** section two end ****************************  */
/*  *************** section three  ****************************  */
.title--explorepeykbot{
    color : var(--darkblue);
    font-family: Anton , sans-serif;
    font-size: 60px;
}
.desc--explorepeykbot {
    color : var(--darkblue);
    font-family: Bariol , sans-serif;
    font-size: 28px;
}
.btn--explorepeykbot{
    display: inline-flex;
    gap: 10px;
    text-decoration: none;
    background-color: var(--darkblue);
    border-radius: 25px;
    padding : 15px 20px;
    transition: all 0.3ms ease;
    box-sizing: border-box;
}
.btn--explorepeykbot:hover{
    cursor: pointer;
    background-color: var(--blue) !important;
}
/*  *************** section three end ****************************  */
/* **************** section four  ******************************** */
.section--four{
    background-image: url('../image/home/bg-section4.png');
    background-position:  center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 850px;
}
.history--title{
    color: var(--darkblue);
    font-family: Bariol , sans-serif;
    font-size: 24px;
}
.row--history{
    position: relative;
    height:600px;
}
.history--div1{
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: 1s;
    gap: 15px;
    position:absolute;
    left:-5%;
    bottom: 33%
}
.history--div2{
    animation-fill-mode: both;
    animation-duration: 1.2s;
    animation-delay: 1.2s;
    gap: 15px;
    position:absolute;
    left:23%;
    bottom:52%
}
.history--div3{
    animation-fill-mode: both;
    animation-duration: 1.4s;
    animation-delay: 1.4s;
    gap: 15px;
    position:absolute;
    left:58%;
    bottom:40%
}
.history--div4{
    animation-fill-mode: both;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    gap: 15px;
    position:absolute;
    left:85%;
    bottom:20%
}
/* **************** section four end ******************************** */
/*  *************** section five  ****************************  */
.btn--support{
    text-decoration: none !important;
    background-color: var(--blue);
    border-radius: 25px;
    font-size: 20px;
    font-family: Bariol , sans-serif;
    padding : 12px 30px;
}
.btn--support:hover{
    text-decoration: none !important;
    cursor: pointer;
    background-color: white;
    color: var(--blue) !important;
    border: 1px solid var(--blue);
}
.btn--support2:hover{
    text-decoration: none !important;
    cursor: pointer;
    background-color: var(--blue);
    border: unset;
    color: white;
}
.btn--support2{
    text-decoration: none !important;
    background-color: white;
    color: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 25px;
    font-size: 20px;
    font-family: Bariol , sans-serif;
    padding : 10px 30px;
}
.bg--peykbotdashboard{
    background-image: url('../image/home/new.png');
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    height: 350px;
}
.card--des2 {
    color: var(--darkblue);
    font-size: 16px;
    font-family: Bariol , sans-serif;
}
/*  *************** section five end  ****************************  */


/*  *************** section partnership with peykbot   ****************************  */
.text--partnership{
    font-size: 18px;
    font-family: Bariol , sans-serif;
}
.margin--style3{
    margin-bottom: 40px ;
}
.card4--style{
    border-radius: 20px;
    background-color: var(--blue);
}
.title--card4{
    font-family: Anton , sans-serif;
    font-size: 200px;
}
.desc--card4{
    font-size: 31px;
    font-family: Bariol , sans-serif;
}
.partnership--title{
    font-family: Anton , sans-serif;
    font-size: 50px;
}
.bg-partnership{
    border-radius: 20px;
    background-color: var(--darkblue);
}
.cardlayer--title{
    font-size: 74px;
    font-family: Anton , sans-serif;
}
.cardlayer--title2{
    font-size: 55px;
    font-family: Anton , sans-serif;
}
.partnership--desc{
    font-family: Bariol , sans-serif;
    font-size: 18px;
}
.partnership--button{
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99;
    width: 60% !important;
    text-decoration : none !important;
    background-color : var(--blue);
    font-size : 18px;
    font-family : Bariol , sans-serif;
    border-radius : 25px;
    padding: 10px 20px;
}
.history--button{
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99;
    width: 30% !important;
    text-decoration: none !important;
    background-color: var(--blue);
    font-size: 20px;
    font-family: Bariol , sans-serif;
    border-radius: 25px;
    padding: 7px 26px;
}
.bg-kuwait-1{
    background-image: url('../image/home/Kuwait/kuwiat-three.png') !important;
}
.bg-kuwait-2{
    background-image: url('../image/home/Kuwait/kuwait-new-one.png') !important;
}
.bg-kuwait-3{

    background-image: url('../image/home/Kuwait/kuwait-new.png') !important;
}
.bg-us-1{
    background-image: url('../image/home/usa/peykbot- city-1.jpg') !important;
}
.bg-us-2{
    background-image: url('../image/home/usa/Peykbot- seaport-1.jpg') !important;
}
.bg-us-3{
    background-image: url('../image/home/usa/peykbot-seaport-2.jpg') !important;
}
.bg-us-4{
    background-image: url('../image/home/usa/peykbot-seaport-3.jpg') !important;
}
.bg-us-5{
    background-image: url('../image/home/usa/peykot-city-2.jpg') !important;
}
.bg-qatar-1{
    background-image: url('../image/home/Qatar/asset-14.png') !important;
}
.bg-qatar-2{
    background-image: url('../image/home/Qatar/asset-15.png') !important;
}
.bg-qatar-3{
    background-image: url('../image/home/Qatar/asset-6.png') !important;
}
.bg-qatar-4{
    background-image: url('../image/home/Qatar/12.png') !important;
}
.bg-dubai-1{
    background-image: url('../image/home/Dubai/asset-13.png') !important;
}
.bg-dubai-2{
    background-image: url('../image/home/Dubai/asset-1.png') !important;
}
.bg-dubai-3{
    background-image: url('../image/home/Dubai/asset-4.png') !important;
    background-position: bottom !important;
}
.bg-dubai-4{
    background-image: url('../image/home/Dubai/asset-2.png') !important;
}
.bg-iraq-1{
    background-image: url('../image/home/Iraq/Peykbot-iraq-one.jpg') !important;
}
.bg-iraq-2{
    background-image: url('../image/home/Iraq/Peykbot-iraq-two.jpg') !important;
}
.bg-iraq-3{
    background-image: url('../image/home/Iraq/Peykbot-iraq-three.jpg') !important;
}
.bg-iraq-4{
    background-image: url('../image/home/Iraq/Peykbot-iraq-four.jpg') !important;
}
.bg-england-1{
    background-image: url('../image/home/England/five.png') !important;
}
.bg-england-2{
    background-image: url('../image/home/England/three.png') !important;
}
.bg-england-3{
    background-image: url('../image/home/England/two.png') !important;
}
.bg-england-4{
    background-image: url('../image/home/England/four.png') !important;
}
.swiper-pagination-england{
    position: absolute;
    left: 6% !important;
    bottom: 3% !important;
    z-index: 999;
}
.card--two , .card--one{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px !important;
    height: 265px !important;
}

.card--six , .card--five ,.card--three {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px !important;
    height: 536px !important;
}
.bg-saudi-1{
    background-image: url('../image/home/Saudi/saudi-new-one.png');
}
.bg-saudi-2{
    background-image: url('../image/home/Saudi/saudi-new-four.png');
}
.bg-saudi-3{
    background-image: url('../image/home/Saudi/three.png');
}
.bg-saudi-4{
    background-image: url('../image/home/Saudi/two.png');
}
.col--height2{
    height: 536px !important;
}
/*.col--height3{*/
/*    height: 536px !important;*/
/*}*/
.card--position__style{
    position: relative;
}
.overlay--style{
    position: absolute;
    left: 5%;
    bottom: 65%;
}
.bg-kuwait-1 .bg-iraq-1{
    bottom: 70% !important;
}
.overlay--style-saudi{
    position: absolute;
    left: 5%;
    bottom: 33%;
}
.england-overlay{
    bottom: 75% !important;
}
.overlay--style2{
    position: absolute;
    bottom: 45%;
    left: 6%;
}
.overlay--style3{
    position: absolute;
    bottom: 45%;
    left: 6%;
}
.swiper {
    width: 100%;
    height: 100%;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--blue) !important;
    width: 40px;
    height: 6px !important;
    border-radius: 10px;
}
#swiper-pagination22{
    position: absolute;
    left: 6% !important;
    bottom: 4% !important;
    z-index: 10;
}
#swiper-pagination11{
    position: absolute;
    left: 55% !important;
    bottom: 4% !important;
    z-index: 10;
}
.pagination-peykbot{
    position: absolute;
    left: 6% !important;
    z-index: 999 !important;
    bottom: 53% !important;
}
.swiper-pagination3{
    position: absolute;
    left: 6% !important;
    bottom: 4% !important;
    z-index: 10;
}
.swiper-pagination4{
    position: absolute;
    left: 6% !important;
    bottom: 4% !important;
    z-index: 10;
}
.swiper-pagination5{
    position: absolute;
    left: 6% !important;
    z-index: 999 !important;
    bottom: 3% !important;
}

.pagination-mySwiper3{
    position: absolute;
    left: 6% !important;
    z-index: 999 !important;
    bottom: 3% !important;
}
.swiper-pagination-bullet {
    opacity: 1 !important;
    background: white !important;
}
@keyframes zoom-out {
    from{
        transform: scale(1.2,1.2);
    }
    to{
        transform: scale(1,1);
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.swiper-one .swiper-slide-active .overlay--style2
,.swiper-one1 .swiper-slide-active .overlay--style2{
    animation-name: fade-in;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-fill-mode: both;
}
.card--one img , .card--two img
, .card--three img
,.card--five img
,.card--six img
{
    border-radius: 20px !important;
}
/*  *************** section partnership with peykbot  end  ****************************  */
/*  *************** section we are in news  ****************************  */
.section--seven{
    overflow: hidden !important;
}
.news--link{
    text-decoration: none !important;
}
.title--newssection{
    font-size: 22px;
    font-family: Bariol , sans-serif;
    color: var(--blue);
}
.desc--newssection{
     text-align: justify;
    color: var(--darkblue);
    font-family: Bariol , sans-serif;
    font-size: 18px;
}
.swiper {
    width: 100%;
    /*height: auto;*/
}
.mySwiper2 .swiper-slide {
    width: 70%;
}
.mySwiper2 .swiper-slide:nth-child(2n) {
    width: 70%;
}
.mySwiper2 .swiper-slide:nth-child(3n) {
    width: 70%;
}
.mySwiper2 span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--blue) !important;
    width: 40px;
    height: 6px !important;
    border-radius: 10px;
}
.mySwiper2 span.swiper-pagination-bullet{
    background: var(--darkblue) !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: -50%;
}
/*  *************** section we are in news end  ****************************  */
/*  *************** section know our team **************************** */
.swiper-partners .swiper-slide img{
    display: block;
    /*width: 100%;*/
    /*height: 400px;*/
    /*object-fit: cover;*/
}
.swiper-partners .swiper {
    width: 100%;
    height: 100%;
}

.swiper-partners .swiper-slide {
    padding-right: 0.8rem;
    padding-left:0.8rem;
    height: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.swiper-partners .swiper-wrapper{*/
/*    gap: 70px !important;*/
/*}*/
.swiper-partners .swiper-slide-active .image-partners{
    filter: grayscale(0%) !important;
}
.image-partners{
    width: 100%;
    filter: grayscale(100%) !important;
}
.image-partners:hover{
    cursor: pointer;
    filter: grayscale(0%) !important;
    transform : scale(1.2);
    transition: all ease 1s;
}
.title--getknow{
    color : var(--darkblue);
    font-family : Bariol , sans-serif;
    font-size : 40px;
}
.img--style{
    position: absolute;
    top: -120px;
    left: 80px;
}
.getknow--link{
    color : var(--blue);
    text-decoration : none !important;
    font-size : 22px;
    cursor : pointer;
}
.getknow--button{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10rem;
    z-index: 99;
    width: 30% !important;
    text-decoration : none !important;
    background-color : var(--blue);
    font-size : 18px;
    font-family : Bariol , sans-serif;
    border-radius : 25px;
    padding: 10px 30px;
}
.container--style{
    background: white;
    border-radius: 80px;
    overflow: hidden;
}
.gap--style2{
    gap: 3rem !important;
}
.section--eight{
    overflow-x: hidden !important;
}
/*  *************** section know our team end **************************** */
@media only screen and (min-width: 320px) and (max-width: 567px) {
    .mySwiper2 .swiper-pagination-news{
        position: absolute !important;
        left: 28% !important;
        bottom: 0% !important;
    }
    .swiper-pagination-england{
        bottom: 5% !important;
    }
    .bg-kuwait-1{
        background-image: url('../image/home/Kuwait/M/new-one.png') !important;
    }
    .bg-kuwait-2{
        background-image: url('../image/home/Kuwait/M/new-two.png')!important;
    }
    .bg-kuwait-3{
        background-image: url('../image/home/Kuwait/M/new-three.png')!important;
    }
    .bg-kuwait-4{
        background-image: url('../image/home/Kuwait/M/new-four.png')!important;
    }
    .bg-england-1{
        background-image: url('../image/home/England/M/five.png') !important;
    }
    .bg-england-2{
        background-image: url('../image/home/England/M/three.png') !important;
    }
    .bg-england-3{
        background-image: url('../image/home/England/M/two.png') !important;
    }
    .bg-england-4{
        background-image: url('../image/home/England/M/four.png') !important;
    }
    .bg-iraq-1{
        background-image: url('../image/home/Iraq/M/asset-14.png') !important;
    }
    .bg-iraq-2{
        background-image: url('../image/home/Iraq/M/asset-177.png') !important;
    }
    .bg-iraq-3{
        background-image: url('../image/home/Iraq/M/asset-188.png') !important;
    }
    .bg-iraq-4{
        background-image: url('../image/home/Iraq/M/asset-199.png') !important;
    }
    .bg-qatar-1{
        background-image: url('../image/home/Qatar/M/one.png') !important;
    }
    .bg-qatar-2{
        background-image: url('../image/home/Qatar/M/two.png') !important;
    }
    .bg-qatar-3{
        background-image: url('../image/home/Qatar/M/three.png') !important;
    }
    .bg-qatar-4{
        background-image: url('../image/home/Qatar/M/four.png') !important;
    }
    .bg-dubai-1{
        background-image: url('../image/home/Dubai/M/asset-44.png') !important;
    }
    .bg-dubai-2{
        background-image: url('../image/home/Dubai/M/asset-55.png') !important;
    }
    .bg-dubai-3{
        background-image: url('../image/home/Dubai/M/asset-77.png') !important;
    }
    .bg-dubai-4{
        background-image: url('../image/home/Dubai/M/asset-66.png') !important;
    }
    .bg-saudi-1{
        background-image: url('../image/home/Saudi/M/four.png') !important;
    }
    .bg-saudi-2{
        background-image: url('../image/home/Saudi/M/one.png') !important;
    }
    .bg-saudi-3{
        background-image: url('../image/home/Saudi/M/two.png') !important;
    }
    .bg-saudi-4{
        background-image: url('../image/home/Saudi/M/three.png') !important;
    }
    .card--six , .card--five , .card--three{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px !important;
        height: 335px !important;
    }
    .card--two ,.card--one {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px !important;
        height: 205px !important;
    }
    .partnership--button{
        width: 50% !important;
        padding: 10px 15px !important;
    }
    .icon--explore{
        display: none !important;
    }
    .card4--style{
        height: 335px !important;
    }
    .mySwiper2 .swiper-pagination-bullet {
        background: #29455B !important ;
    }
    span.swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--blue) !important;
        width: 40px;
        height: 6px !important;
        border-radius: 10px;
    }
    .swiper-five .swiper-slide {
        width: 100% !important;
    }
    .swiper-one , .swiper-two , .swiper-two2 , .swiper-england {
        position: relative !important;
    }
    .swiper-pagination1 {
        position: absolute;
        left: 6% !important;
        bottom: 6% !important;
        z-index: 999 !important;
    }
    .swiper-pagination2 {
        position: absolute;
        left: 6% !important;
        bottom: 5% !important;
        z-index: 999 !important;
    }

    .section--six .swiper-pagination3 {
        left: 10% !important;
        bottom: 6% !important;
    }
    .title--card4 {
        font-size: 60px !important;
    }
    .margin--style3 {
        margin-bottom: 5px;
    }
    .desc--card4 {
        font-size: 18px !important;
    }
    .col--height2 {
        height: 390px !important;
    }
    /*.col--height3{*/
    /*    height: 205px !important;*/
    /*}*/
    .text--partnership {
        font-size: 14px;
    }
    .cardlayer--title , .cardlayer--title2{
        font-size: 40px;
    }
    .partnership--desc{
        font-size: 12px;
    }
    .card--transform {
        position: unset;
        transition: unset;
        padding-top: unset;
    }
    .card--transform:hover, .card--transform:focus {
        padding-top: unset;
        border-radius: unset;
        box-shadow: unset;
        background-color: unset;
    }
    .row--history {
        position: relative;
        height: 800px;
    }
    .history--div1 {
        animation-fill-mode: both;
        animation-duration: 2s;
        animation-delay: 1s;

        left: 7% !important;
        bottom: 68% !important;
    }
    .history--div2 {
        animation-fill-mode: both;
        animation-duration: 2s;
        animation-delay: 3s;
        left: 7% !important;
        bottom: 49% !important;
    }
    .history--div3 {
        animation-fill-mode: both;
        animation-duration: 2s;
        animation-delay: 4s;
        left: 7%;
        bottom: 30%;
    }
    .history--div4 {
        animation-fill-mode: both;
        animation-duration: 2s;
        animation-delay: 5s;
        gap: 15px;
        position: absolute;
        left: 7%;
        bottom: 10%;
    }
    .history--title{
        font-size: 18px;
    }
    .section--four{
        background-image: url('../image/home/Group 12656.jpg');
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        height: 850px;
    }
    .res--display{
        display: none !important;
    }
    .getknow--button{
        margin-top: 17rem !important;
        width: 60% !important;
    }
    .container--style{
        padding: 0 !important;
        background: unset !important;
        border-radius: unset !important;
    }
    .img--style {
        position: absolute;
        top: -35px;
        right: -95%;
    }
    .title--getknow {
        font-size: 30px;
    }
    .title--newssection{
        font-size: 16px;
    }
    .desc--newssection{
        font-size: 14px;
    }
    .bg--peykbotdashboard{
        background-image: url('../image/home/new2.png');
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
        height: 400px;
    }
    .row-style {
        padding-top: 5rem;
    }
    .section--one{
        min-height: unset !important;
        background-image: url("../image/home/bg-section-one-mobile.png");
        background-size : cover;
        background-position: top !important;
        background-repeat: no-repeat;
    }
    .desc--section1{
        font-size: 20px;
    }
    .margin--style{
        margin-left : auto !important;
        margin-right : auto !important;
    }
    .main--title {
        font-size: 75px !important;
    }
    .title--index{
        font-size : 32px;
    }
    .card--title{
        font-size: 22px;
    }
    .card--category {
        font-size: 19px;
        margin-top: 1rem;
        margin-bottom: 1rem !important;
    }
    .card--des {
        font-size: 18px;
    }
    .title--explorepeykbot{
        font-size: 40px;
    }
    .desc--explorepeykbot {
        font-size: 20px;
    }
    .btn--explorepeykbot{
        padding: 10px 15px;
    }
    .image-partners{
        border-radius: 15px !important;
        filter: grayscale(100%) !important;
    }
    .image-partners:hover{
        cursor: pointer;
        filter: grayscale(0%) !important;
        transform : unset !important;
        transition: all ease 1s;
    }
}
@media only screen and (min-width: 568px) and (max-width: 767px) {
    .row-style {
        padding-top: 2rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .mySwiper2 .swiper-pagination-news{
        position: absolute !important;
        left: 37% !important;
        bottom: 0% !important;
    }
    .overlay--style-saudi{
        bottom: 53% !important;
    }
    #dubai .swiper-wrapper{
        overflow: hidden;
    }
    .tablet-display , .tablet--br{
        display:none !important;
    }
    .image-partners{
        border-radius: 15px !important;
        filter: grayscale(100%) !important;
    }
    .image-partners:hover{
        cursor: pointer;
        filter: grayscale(0%) !important;
        transform : unset !important;
        transition: all ease 1s;
    }
    .section--six{
        overflow-x: hidden !important;
    }
    .col--height{
        height: 530px;
    }
    .pagination-peykbot{
        left: 8% !important;
        bottom: 0% !important;
    }
    /* .swiper-partners .swiper-wrapper{
       gap: 100px !important;
    } */
    .container--style{
        background: unset !important;
    }
    .display--style{
        display: none !important;
    }

    .order--style1{
        margin-bottom: 0.8rem;
        order: 1 !important;
    }
    .order--style2{
        order: 2 !important;
    }
    .order--style3{
        order: 3 !important;
    }



    .col--height3 {
        gap: 20px !important;
        flex-direction: row !important;
        align-items: baseline !important;
        /*height: 350px !important;*/
        margin-bottom: 1rem !important;
    }
    #swiper-pagination22 {
        left: 5% !important;
        bottom: -96% !important;
    }
    #swiper-pagination11 {
        bottom: -96% !important;
        left: 54% !important;
    }
    .card--six, .card--five, .card--three{
        height: 530px !important;
    }
    .card--two, .card--one{
        height: 350px !important;
    }
    .overlay--style{
        bottom: 65% !important;
    }
    .section--four {
        overflow: hidden !important;
        height: 600px !important;
        background-position: left !important;
    }
    .history--div1 {
        left: -3% !important;
        bottom: 50% !important;
    }
    .history--div2 {
        align-items: start !important;
        left: 30% !important;
        bottom: 52% !important;
    }
    .history--div3 {
        align-items: start !important;
        left: 58% !important;
        bottom: 62% !important;
    }
    .history--div4 {
        left: 76% !important;
        bottom: 54% !important;
    }
    .img--history{
        width: 70px !important;
    }
    .history--title {
        font-size: 20px !important;
    }
    .title--getknow {
        font-size: 30px;
    }
    .img--getknowourteam{
        display: none !important;
    }
    .getknow--button{
        width: 60% !important;
    }
    .img--style2{
        background-image: url('../image/home/get-know-our-team.png');
        height: 300px;
        background-position:  top !important;
        background-size: contain !important;
        background-repeat: no-repeat;
        align-items: end !important;
    }
    .display--style2{
        display: table;
        margin-top: auto;
        margin-bottom: auto;
    }
    .bg--peykbotdashboard{
        height: 200px;
    }
    .margin--style2{
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .title--index{
        font-size: 40px;
    }
    .card--des2{
        font-size: 16px;
    }
    .section--one{
        min-height: unset !important;
    }
    .row-style {
        padding-top: 6rem;
    }
    .main--title {
        font-size: 70px !important;
    }
    .img--animation{
        width: 100% ;
    }
    .desc--section1{
        font-size: 18px;
    }
    .title--explorepeykbot {
        font-size: 40px;
    }
    .desc--explorepeykbot {
        font-size: 20px;
    }
    .btn--explorepeykbot {
        padding: 10px 15px;
    }
    .mySwiper2 .swiper-slide {
        width: 50% !important;
    }

    .mySwiper2 .swiper-slide:nth-child(2n) {
        width: 50% !important;
    }

    .mySwiper2 .swiper-slide:nth-child(3n) {
        width: 50% !important;
    }
    /*  *************** new design end ****************************  */



















































    /*  *************** section one ****************************  */

    .title--section1 {
        font-size: 40px;
        color: #29455b;
        font-family: "BariolBold";
        font-weight: 900;
    }
    .btn--seemore {
        background: #4bd3ef;
        padding: 5px 15px;
        border-radius: 30px;
        text-decoration: none;
        position: absolute;
        color: white;
        bottom: 2.5rem;
        font-size: 16px;
    }
    .btn--section1 {
        background: #4bd3ef;
        padding: 5px 15px;
        border-radius: 30px;
        text-decoration: none;
        font-size: 16px;
        color: white;
        margin-bottom: 2.5rem !important;
    }
    .btn--seemore:hover,.btn--section1:hover {
        cursor: pointer;
        color: white !important;
    }
    .bg--card1 {
        position: relative;
        background-color: rgb(233, 246, 254);
        background-image: url('../image/index/peykbot-desc.png');
        /*background-image: url('../image/index/peyk-mobile.png');*/
        background-position: bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        height: 650px;
        padding-top: 3px;
    }
    .bg--card4 {
        background-color: rgb(255, 230, 229);
        background-image: url('../image/index/driver-mobile.png');
        /*background-image: url('../image/index/peyk-driver.png');*/
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        height: 650px;
        position: relative;
        padding-top: 3px;
    }
    .bg--card2 {
        height: 317px;
        background-color: rgb(206, 237, 199);
    }
    .bg--card3 {
        background-color: rgb(254, 251, 233);
        height: 317px;
    }
    /*  *************** section one ****************************  */
    /*  *************** section two ****************************  */
    .section-two {
        background-image: url('../image/index/intersection.png');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #E9F6FE;
    }

    .ul-section-two {
        padding: 1rem;
    }

    .ul-section-two li {
        color: var(--darkgray);
    }

    .ul-section-two li::marker {
        color: var(--blue);
        font-size: 20px;
    }

    .ul-vehicle {
        padding: 1rem;
    }

    .ul-vehicle li {
        color: var(--darkblue);
    }

    .ul-vehicle li::marker {
        color: var(--blue);
        font-size: 20px;
    }

    .nav-tabs .nav-link {
        font-size: 17px;
        padding: 10px 0px;
    }

    .card-sectin-two {
        box-shadow: 0px 3px 12px #57575712;
        border: 1px solid #E8E8E8;
        border-radius: 14px;
    }

    .btn-section-two {
        background-color: var(--blue);
        border: 2px solid var(--blue);
        color: white !important;
        text-decoration: none;
        outline: none;
    }

    .btn-section-two:hover, .btn-section-two:focus, .btn-section-two:active {
        background: white;
        border: 2px solid var(--blue);
        color: var(--blue) !important;
        outline: none;
        box-shadow: none;
    }

    .section-two-p {
        color: var(--darkgray);
        line-height: 29.5px;
    }

    .input-style-section-two:focus {
        border-color: #cdd4da;
    }

    .input-style-section-two {
        background-color: transparent !important;
        box-shadow: none !important;
        border-left: 0px;
        border-radius: 0px 6px 6px 0px !important;
    }

    span#addon-wrapping {
        background: white;
        border-right: 0px;
        margin-top: 0px;
    }
    span#addon-wrapping-one {
        background: white;
        border-right: 0px;
        margin-top: 0px;
    }

    label.floating-label {
        margin-left: 4rem !important;
    }

    .input-style-section-two:focus label.floating-label {
        top: 1rem;

    }

    .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
        top: -0.3rem;
        background: white;
        opacity: 1;
        z-index: 99;
        padding: 0;
        height: 15px !important;
    }

    i.far.fa-times-circle {
        color: red;
        position: absolute;
        right: 15px;
        top: 40%;
        cursor: pointer;
        z-index: 99;
    }

    #floatingInput-pick-up:invalid ~ #pick-up {
        display: none;
    }

    #floatingInput-drop-off:not(:valid) ~ #drop-off {
        display: none;
    }

    .peyk-form-input-hidden {
        display: none;
    }
    .pac-target-input {
        padding: 1rem 2rem 1rem 0px !important;
    }
    /*  *************** section two ****************************  */
    /*  *************** section three / section three / Why Peyk? ****************************  */
    .section-why-peyk {
        background-color: var(--lightblue);
    }
    /*.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{*/
    /*    bottom: -5px;*/
    /*}*/
    /*.swiper-container.swiper-five {*/
    /*    padding: 45px 0px;*/
    /*}*/
    /*  *************** section three / section three / Why Peyk? ****************************  */
    /*  *************** section four / Want to become a courier driver? ****************************  */

    .card-sectin-peyk {
        box-shadow: 2px 6px 17px #c8c8c829;
        border: 1px solid #F2F2F2;
        border-radius: 38px;
        height: 100%;
    }

    .card-sectin-peyk img {
        width: 250px;
        height: auto;
    }

    .card-text-sectin-peyk {
        color: var(--darkblue);
        font-family: BariolBold;
        font-size: 20px;
    }

    .card-what-need {
        box-shadow: 2px 6px 17px #C8C8C829;
        border: 1px solid #F2F2F2;
        border-radius: 38px;
    }

    .card-need-title {
        color: var(--darkblue);
        font-family: BariolBold;
    }

    .card-need-span {
        color: var(--blue) !important;
        font-family: BariolBold !important;
    }

    .card-need-p {
        color: var(--darkblue);
        font-family: BariolBold;
    }

    .ul-need {
        font-size: 18px;
        color: var(--darkblue);
        list-style: circle inside;
    }

    .ul-need ::marker {
        font-size: 25px !important;
        color: var(--blue) !important;
    }

    .btn-outline-style {
        color: var(--darkblue);
        border: 2px solid var(--darkblue);
        font-size: 17px;
    }

    .btn-outline-style:hover {
        background-color: var(--darkblue);
        border-color:  var(--darkblue);
    }

    .btn-first {
        background-color: var(--blue);
        border: 2px solid var(--blue);
        color: white !important;
        text-decoration: none;
        outline: none;
    }

    .btn-first:hover, .btn-first:active, .btn-first:focus {
        background: white;
        border: 2px solid var(--blue);
        color: var(--blue) !important;
        outline: none;
    }

    .nav-link {
        color: var(--darkblue);
        font-size: 20px;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: var(--darkblue);
    }

    .tab-pane.fade {
        transition: all 0.2s;
        transform: translateY(1rem);
    }

    .tab-pane.fade.show {
        transform: translateY(0rem);
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: var(--darkblue);
        background-color: transparent;
        border-color: transparent;
        border-bottom: 2px solid var(--blue);
        font-size: 17px;
    }

    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
        color: var(--darkblue);
        background-color: transparent;
        border-color: transparent;
        border-bottom: 2px solid var(--blue);
    }
    .nav-tabs {
        border-bottom: 1px solid var(--lightblue);
    }
    /*  *************** section four / Want to become a courier driver? ****************************  */
    /*  *************** section robot ****************************  */
    .robot-background{
        background-image: url("../image/peykrobot/robotindexbg.png");
        background-size: cover;
        background-position: center;
        padding: 8rem 0px;
    }
    .title__robot--index {
        color: var(--darkblue);
        font-size: 2rem;
    }
    .text__robot--index {
        color: var(--darkblue);
        font-size: 5rem;
        font-family: BariolBold;
    }
    .text__robot--index span{
        font-family: BariolBold;
        color: var(--blue) !important;
    }
    .btn__robot--index {
        background: var(--blue);
        color: white;
        width: 100%;
        outline: none;
        box-shadow: none;
    }
    /*  *************** section robot ****************************  */
    /*  *************** section five / Want to become a courier driver? ****************************  */
    .section_five {
        background-color: var(--blue);
    }

    .img-width {
        width: 500px;
        height: auto;
    }

    .section_five_desc {
        color: var(--darkblue);
        font-size: 30px;
    }

    .become_peyker_btn {
        font-family: BariolBold;
        background: var(--darkblue);
        padding: 9px 50px;
        box-shadow: none !important;
        outline: none;
        text-decoration: none;
        border: 2px solid var(--darkblue);
    }

    .become_peyker_btn:hover {
        background: var(--blue);
        border: 2px solid var(--darkblue);
    }

    /*  *************** section five / Want to become a courier driver? ****************************  */
    /*  *************** section six / What Our Customer Have To Say  ****************************  */
    .section-six-bg {
        background-image: url('../image/index/bg-six.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .section_six_card {
        height: 100%;
        box-shadow: 4px 3px 15px var(--lightgray);
        border: 1px solid var(--lightgray);
        border-radius: 22px;
    }

    img.section_six_img {
        width: 25px !important;
        height: auto;
        margin-right: 10px;
    }

    .section_six_card_text {
        text-align: left;
        color: var(--darkgray);
    }

    .section_six_card_title {
        text-align: left;
        color: var(--blue);
        display: flex;
        align-items: center;
    }

    .section-seven {
        background-image: url("../image/index/background.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .container1 {
        position: relative;
        width: 100%;
        height:auto;
    }

    .image {
        display: block;
        width: 100%;
        height: auto;
    }
    .overlay {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        background-color: #ffffffd1;
        /* overflow: hidden; */
        width: 94%;
        height: 33px;
        transition: .5s ease;
        margin: auto;
        border-radius: 15px;
    }
    .container1:hover .overlay {
        height: 98%;
    }
    .container1:hover .text1 {
        top: 7%;
    }
    .text1 {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        color: #29455B;
        font-weight: bold;
        font-family: BariolBold;
    }
    .p2-hover {
        color: #818181;
        font-size: 18px;
        text-align: left;
        height: 135px;
    }
    .txt2 {
        display: none;
    }
    .responsivetxt {
        display: none;
    }

    .container1:hover .txt2 {
        display: block;
        margin-top: 30%;
        padding: 0px 1em;
    }
    .container1:hover .responsivetxt {
        display: block;
        margin-top: 30%;
        padding: 0px 1em;
    }

    .container1:hover .responsivetxt {
        display: block;
        margin-top: 30%;
        padding: 0px 1em;
    }

    .p1-hover {
        color: var(--darkblue);
        font-weight: bold;
        font-family: BariolBold;
        font-size: 19px;
        text-align: left;
        margin-bottom: 0rem;
    }

    .p2.hover {

        color: #818181;
        font-weight: bold;

    }

    .a-hover {
        color: var(--blue);
        font-size: 1.2em;
        font-weight: bold;
        text-decoration: none;
    }

    .a-hover:hover {
        color: var(--darkblue);
        text-decoration: none;
    }

    .container2 {
        position: relative;
        width: 100%;
        height: 95%;
    }


    .overlay {
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        background-color: #ffffffd1;
        /* overflow: hidden; */
        width: 94%;
        height: 33px;
        transition: .5s ease;
        margin: auto;
        border-radius: 15px;
    }

    .container2:hover .overlay {
        height: 100%;
    }

    .container2:hover .text1 {
        top: 7%;
    }

    .text1 {
        color: white;
        font-size: 17px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--darkblue);
        font-weight: bold;
    }

    .container2:hover .txt2 {
        display: block;
        margin-top: 30%;
        padding: 0px 1em;
    }

    .container2:hover .responsivetxt {
        display: block;
        margin-top: 30%;
        padding: 0px 1em;
    }

    .p3-hover {

        color: var(--darkblue);
        font-weight: bold;
    }

    /* input-style */
    .circle-style {
        position: absolute;
        margin-top: -2.3em;
        left: 2.5em;
    }

    .form-group {
        padding: 0px 1rem;
    }


    .image-form {
        border-radius: 6px;
        padding: 0.6em 14.5%;
        background: #E9F6FE;
        margin-right: 1%;
    }


    /*  *************** section eight / Collaboration with  ****************************  */
    /*  *************** section eight / Collaboration with  ****************************  */
    .section-pass {
        background-image: url('../image/index/background-pass.png');
        background-position: bottom;
        background-size: cover;
    }

    .pass-img {
        width: 310px;
        height: auto;
    }

    .title-pass {
        font-family: 'BariolBold';
        color: var(--darkbluepass);
    }

    .pass-text {
        color: var(--darkbluepass);
        font-size: 20px;
        /* text-align: justify; */
    }
    .btn-pass, .btn-pass:hover, .btn-pass:focus {
        background: #00B7C2;
        border: none;
        border-radius: 20px;
        padding: 9px;
    }
    /*  *************** section eight / Collaboration with  ****************************  */
    /*  *************** section ten / We are in the News ****************************  */
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    span#addon-wrapping:focus{
        border-color:var(--darkgray) ;
    }
    span#addon-wrapping-one:focus{
        border-color:var(--darkgray) ;
    }
    /*  *************** section ten / We are in the News ****************************  */
    .section-help-bg {
        background-color: var(--gray);
    }

    .card-section {
        height: 100%;
        box-shadow: 0px 2px 10px var(--lightgray);
        border-radius: 20px;
    }

    .title-section {
        font-family: BariolBold;
        color: var(--darkblue);
    }

    .description-section-ten {
        color: var(--darkgray);
        font-size: 20px;
        margin-top: 1rem;
    }

    .card-img-top {
        width: 100px;
        height: auto;
        display: table;
        margin: -39px auto 0px;
    }

    .link-section-ten {
        color: var(--blue);
        text-decoration: none;
        font-size: 20px;
        transition: 0.2s;
    }

    .link-section-ten:hover {
        color: var(--darkblue);
        transition: 0.2s;
    }

    /*  *************** section ten / We are here to help ****************************  */
    /*  *************** responsive  ****************************  */
    @media only screen and (min-width: 320px) and (max-width: 567px) {
         .mySwiper2 .swiper-container-horizontal>.swiper-pagination-bullets{
            padding-top: 2rem !important;
            position: absolute !important;
            left: 28% !important;
            bottom: 0% !important;
         }
        .bg--card1 {
            background-image: url("../image/index/peyk-mobile.png");
            background-position: bottom;
            padding-left: 1.5rem !important;
            height: 434px;
        }
        .title--section1 {
            font-size: 35px;
        }
        .btn--seemore,
        .btn--section1 {
            padding: 9px 30px;
            font-size: 15px;
        }
        .bg--card4 {
            margin-top: 1rem !important;
        }
        .bg--card2,
        .bg--card3 {
            margin-top: 1rem !important;
            padding-left: 1.5rem !important;
            height: 235px !important;
        }
        /*section one style*/
        .pass-text {
            padding: 0px 10px !important;
        }

        /*.swiper-button-next, .swiper-button-prev {*/
        /*    margin-top: 0rem;*/
        /*}*/

        /*.swiper-seven {*/
        /*    margin-top: 2rem;*/
        /*}*/

        .order-two {
            order: 2;
            margin-top: 50px;
        }

        .order-one {
            order: 1;
        }

        .img-width {
            width: 300px;
            height: auto;
        }
        .card-what-need{
            padding: 1rem !important;
        }
        .ul-need{
            padding: 0rem !important;
        }
        .btn-first,.btn-outline-style{
            font-size: 14px !important;
        }
        .order-two-style{
            order: 2;
            margin-top: 20px !important;
        }
        .order-one-style{
            order: 1;
        }
        .row-style {
            padding-top: 5rem;
        }
        .style-res-title{
            font-size: 25px !important;
        }
        .section-one-desc {
            font-size: 18px !important;
        }
        .floating-label {
            font-size: 13px;
        }
        .pass-img{
            margin-top:2rem !important;
        }
        .col-gif{
            padding: 10px;
        }
        .button-margin-style{
            margin-top: 1rem;
        }
        .image1{
            width: 80% !important;
            height: auto;
            display: table;
            margin: auto;
        }
        .overlay{
            width: 80% !important;
            /*height: auto;*/
        }
        .title__robot--index {
            font-size: 1.5rem;
        }
        .text__robot--index {
            font-size: 3rem;
        }
    }
    @media only screen and (min-width: 568px) and (max-width: 767px) {
        .container1:hover .responsivetxt {
            margin-top: 15%;
        }

        /*.swiper-button-next, .swiper-button-prev {*/
        /*    margin-top: 0rem;*/
        /*}*/

        /*.swiper-seven {*/
        /*    margin-top: 2rem;*/
        /*}*/

        .img-width {
            width: 265px;
            height: auto;
        }

        .become_peyker_btn {
            margin-top: 1rem !important;
        }

        .section_five_desc {
            font-size: 22px;
        }

        .title-section {
            font-size: 20px;
        }
        .order-two {
            order: 2;
            margin-top: 50px;
        }

        .order-one {
            order: 1;
        }
        .order-two-style{
            order: 2;
        }
        .order-one-style{
            order: 1;
        }
        .row-style {
            padding-top: 2rem;
        }
        .title__robot--index {
            font-size: 1.5rem;
        }
        .text__robot--index {
            font-size: 3rem;
        }

    }
    @media only screen and (min-width: 768px) and (max-width: 1199px) {
        .overlay--style3 , .overlay--style2{
            bottom: 57% !important;
        }
        .row-style {
            padding-top: 6rem;
        }
        .bg--card1 {
            background-image: url("../image/index/peyk-mobile.png");
            padding-left: 1.5rem !important;
            background-position: bottom;
            height: 385px;
        }
        .title--section1 {
            font-size: 25px;
        }
        .bg--card4 h2 {
            font-size: 28px !important;
        }
        .bg--card4 {
            background-image: url("../image/index/driver-mobile.png");
            height: 385px;
        }
        .bg--card2,
        .bg--card3 {
            height: 184px !important;
        }
        /*section one style*/
        #gradient-canvas{
            min-height: 10px !important;
        }
        .container1:hover .responsivetxt {
            display: block;
            margin-top: 10%;
        }
        .img-width {
            width: 320px;
            height: auto;
        }
        .card-what-need{
            padding: 5px !important;
        }
        .btn-first,.btn-outline-style{
            font-size: 14px !important;
        }
        .ul-need{
            padding: 0px !important;
        }
        .tab-padding-style {
            padding: 20px !important;
        }
        .title__robot--index {
            font-size: 1.5rem;
        }
        .text__robot--index {
            font-size: 4rem;
        }
    }
    @media only screen and (min-width: 1200px) and (max-width: 1350px) {
        .container1:hover .responsivetxt {
            margin-top: 0% !important;
        }

        .p1-hover {
            font-size: 17px;
        }

        .container1:hover .txt2 {
            margin-top: 17%;
        }

        .p2-hover {
            font-size: 16px;
        }
    }

    @media only screen and (min-width: 1300px) and (max-width: 1590px) {
        .container1:hover .responsivetxt {
            margin-top: 15%;
        }
    }
}
@media only screen and (min-width : 1024px) and (max-width: 1439px ) {
    /*.col--height3{*/
    /*    padding: 0 !important;*/
    /*}*/
    .england-overlay{
        bottom: 80% !important;
    }
    .overlay--style-saudi{
        position: absolute;
        left: 5% !important;
        bottom: 45% !important;
    }
    .overlay--style3{
        position: absolute;
        bottom: 50% !important;
        left: 6% !important;
    }
    .overlay--style2{
        position: absolute;
        bottom: 40% !important;
        left: 6% !important;
    }
    .gap--style2{
        gap: 2rem !important;
    }
    .desc--explorepeykbot{
        font-size: 24px;
    }
    .history--button{
        width: 40% !important;
    }
    .partnership--title{
        font-size: 35px !important;
    }
    .cardlayer--title , .cardlayer--title2{
        font-size: 45px !important;
    }
    .card--five img {
        height: 536px !important;
    }
    .card--six img{
        height: 536px !important;
    }
    .partnership--button{
        width: 90% !important;
    }
    .overlay--style {
        bottom: 73% ;
    }
    .getknow--button{
        width: 40% !important;
    }
    .title--getknow {
        font-size: 35px;
    }
    .img--history{
        width: 100px !important;
    }
    .history--div1 {
        left: -4% !important;
        bottom: 38% !important;
    }
    .history--div2 {
        left: 27% !important;
    }
    .history--div3 {
        left: 50% !important;
    }
    .history--div4 {
        left: 76% !important;
        bottom: 25% !important;
    }
}