:root {
    /* colors */
    --color-primary: #3876BB;
    --color-primary-hover: #0D4788;
    --color-secondary: #726C96;
    --color-white: #fff;
    --color-black: #000;
    --color-dark: #0F0A01;
    --color-title: #454545;
    --color-body: #5E636A;
    --color-body-light: #9DA6B2;
    --color-light: #EEEEEE;
    --color-menu: #5C5C5C;

    /* typography */
    --text-body-size: 16px;
    --font-primary: Poppins;
    --text-line-height: 24px;

    --container-width: 1170px;
    --button-radius: 16px;
    --button-padding: 15px 23px;
    --input-radius: 16px;

    /* header */
    --header-padding:20px 0;
    --animate-delay: 2s;
}

body {
    color: var(--color-body-light);
    font-weight: 400;
    font-family: var(--font-primary);
    font-size: var(--text-body-size);

}

p { line-height: 24px;}

a { text-decoration: none; color: #3876BB;}
a:hover { color: #0D4788;}
.link { font-family: 'Poppins';    font-style: normal; font-weight: 600;font-size: 18px; line-height: 24px; text-transform: capitalize; color: #3876BB;}

html, body {
    width: 100%;
    height: 100%;
}
.site-wrapper { display: flex; flex-direction: column; align-items: stretch; min-height: 100%;}
.site-main-sec { flex-grow: 1;}
.site-header, .site-main-sec, .site-footer {
    flex-shrink: 0;
}

img { vertical-align: middle; max-width: 100%;}

/* animations
=================================*/
a, .transition, .btn, .res-menu-btn, .res-menu-close-btn, .responsive-menus { transition: all .3s;  }

/* group css
=================================*/
.footer-widgets ul, .site-menu ul { list-style: none; padding: 0; margin: 0;}

/*  general
=================================*/
.container { max-width: var(--container-width);}
.btn-primary {background: var(--color-primary); border-radius: var(--button-radius); padding: var(--button-padding); font-size: var(--text-body-size); line-height: var(--text-line-height);
    border: none;
}
.btn-primary:hover {background: var(--color-primary-hover);}
.btn-primary.shadow { box-shadow: 0px 10px 10px #B7CEE8 !important;}
.primary-title { font-size: 45px; color: var(--color-title); line-height: 54px; font-weight: 700; font-family: var(--font-primary);
    margin: 0 0 13px 0;
}
.input-group:not(:last-child) { margin-bottom: 14px;}

.form-control { border-radius: var(--input-radius); font-size: 18px; padding: 15px 22px; border: 1px solid #D1D1D1;}
.form-control:focus { box-shadow: none;}

/* header
===================================*/
.site-header { background-color: var(--color-white); padding: var(--header-padding); }
.site-menu ul { display: flex; justify-content: center; align-items: center; }
.site-menu ul li { padding: 0 15px; color: var(--color-menu) ;}
.site-menu ul li a { line-height: 24px; display: inline-block; color: var(--color-menu); border-bottom: 2px solid transparent;}
.site-menu ul li.active a, .site-menu ul li a:hover {  border-bottom: 2px solid #6B6B6B; font-weight: 600;}

/* Footer
==================================*/
.site-footer { background-color: var(--color-dark); }
.footer-bottom { padding: 28px 0 13px;}
.footer-bottom p { color: #A7A4B5; line-height: 40px;}
.footer-bottom a {color: #A7A4B5;}
.footer-slogan { font-size: 24px; color: var(--color-white); font-weight: 700; margin-bottom: 0;}
.social-links { display: flex; flex-direction: column;}
.social-links, .social-links a { color: var(--color-white);}
.social-links a { display: block; line-height: 40px;}
.social-links a .icon { margin-right: 10px;}

.footer-widgets .container { border-bottom: 1px solid #221B0D; padding: 68px 0;}
.footer-widget-title { font-size: 18px; color: var(--color-white); font-weight: 500; line-height: 27px;}
.footer-widgets ul li { line-height: 20px; padding: 10px 0; }
.footer-widgets ul li, .footer-widgets ul li a { color: #A8A8A8;}
.footer-widgets ul li a:hover { color: #fff;}

.get-in-touch { position: relative;}
.get-in-touch:before { content: ""; width: 100%; height: 255px; background-color: var(--color-white); z-index: 1; position: absolute; top: 0; left: 0;}
.get-in-touch .container { background: #fff; padding: 58px 50px; z-index: 2; position: relative; box-shadow: 0px -10px 16px #E8E8E8;
    border-radius: 8px;}
    .get-in-touch .container:before { content: ""; background-image: url(/images/delivery-services-icon.png); width: 257px; height: 223px; position: absolute; top: 34px; left: -257px;}

.get-in-touch .btn-primary { min-width: 184px;}
.get-in-touch p {font-weight: 500; font-family: var(--font-primary);
    font-size: 18px;
    line-height: 28px; margin-bottom: 30px; color: #5E636A;}
    .get-in-touch .contact-info p { font-size: 16px; position: relative; padding-left: 45px; margin-bottom: 15px;}
    .get-in-touch .contact-info p:last-child { margin-bottom: 0;}
    .get-in-touch .contact-info p .icon { position: absolute; top: 0; left: 0;}

/* site-banner */
.site-banner .banner-item { display: flex; height: 704px; background-size: contain; background-position: center;
    position: relative;
}
.banner-title {font-family: 'Poppins';
    font-style: normal;
    font-weight: 600; font-size: 61px;
    line-height: 113%; text-transform: capitalize;
    color: #FFFFFF;
}
.banner-title .small {font-size: 27px; display: block; color: #C5C5C5; line-height: 1.4;}
.site-banner .caption { max-width: 725px;}
.site-banner .btn { min-width: 220px; font-size: 18px; margin-top: 15px;}
.site-banner .container { display: flex; height: 100%; }

.site-banner .carousel-item { height: 704px;}

.banner-content-col { display: flex; flex-direction: column; justify-content: center;}
.banner-img-col { display: flex; flex-direction: column; justify-content: flex-end; position: relative;}
.banner-img-col .img-box { position: absolute; bottom: 0; left: 0; width: 600px;}
.site-banner .container .row { width: 100%;}


/* home-about-sec */
.home-about-sec { padding: 104px 0;}
.home-about-sec .primary-title { line-height: 63px;}
.sub-title { color: var(--color-secondary); font-family: var(--font-primary); font-size: 18px;    line-height: 27px;}

/* icon-box */
.icon-box { width: 240px; height: 226px; display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column;
    box-shadow: 0px 10px 30px 4px #E8EAF2;    border-radius: 8px; padding: 15px; background-color: #fff;
}
.icon-box .icon { margin-bottom: 32px; width: 120px; height: 100px; display: flex; justify-content: center; align-items: center;}
.icon-box .title { font-family: 'Poppins';    font-style: normal;    font-weight: 400;    font-size: 18px;    line-height: 24px; text-transform: uppercase;
color: #5B6486;}
.icon-box-service { display: flex; flex-wrap: wrap; column-gap: 35px;}
.icon-box:nth-child(even) { margin-top: 35px;}
.home-service-sec .primary-title { font-size: 42px;}
.text-dark { color: var(--color-body);}
.home-service-sec p { line-height: 28px;}
.home-service-sec { padding-bottom: 70px;}


/* home-testimonials-sec */
.home-testimonials-sec { padding: 70px 0 280px; background-image: url(/images/trolly_icon.png);
    background-repeat: no-repeat;
    background-position: 95% 100%;}
.testimonial-item-wrap { margin-top: 50px; display: flex; flex-wrap: wrap; gap: 40px;}
.testimonial-box { background: #FFFFFF; box-shadow: 0px 10px 40px 4px #E8E8E8;    border-radius: 8px; padding: 46px;}
.testimonial-head { display: flex; align-items: center; margin-bottom: 22px;}
.testimonial-head .graphic { width: 91px; aspect-ratio: 1/1; background: #ddd; border-radius: 999px; margin-right: 20px;}
.testimonial-head  .author_info .title {font-weight: 600;
    font-size: 22px;    line-height: 30px; font-family: var(--font-primary); color: var(--color-black);
    margin: 0 0 2px 0;
}
.testimonial-head  .author_info p { margin: 0; color: var(--color-black); font-weight: 400;    font-size: 18px;    line-height: 30px;}
.testimonial-box .quote p {color: var(--color-black); font-weight: 400;    font-size: 20px;    line-height: 33px;}
.testimonial-box .quote p:not(:last-child) { margin-bottom: 15px;}


/* home-app-sec */
.home-app-sec { background-color: #EEEEEE;}

.home-app-sec .graphic { margin-top: -114px;}
.home-app-sec .content { margin-top: 123px;}
.home-app-sec .content .primary-title { margin-bottom: 20px; margin-top: 0;}
.home-app-sec .content p { color: var(--color-body);}
.home-app-sec .buttons-groups { margin-top: 50px; display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 15px;}
.home-app-sec .buttons-groups .btn { padding: 0;}


/* home-more-sec */
.home-more-sec { text-align: center; padding: 166px 0 120px;}
.home-more-sec .primary-title { font-size: 45px; line-height: 54px; margin-bottom: 17px;}
.home-more-sec { font-size: 22px; line-height: 30px;}
.home-more-sec p { font-size: 1em; line-height: 30px;}
.home-more-sec p:not(:last-child) { margin-bottom: 30px;}



/* Login */
.img-form-wrap {
    display: flex; margin-bottom: 75px; margin-top: 25px;
}
.img-form-wrap .form-section { flex: 1; width: 50%; border-radius: 16px 0 0 16px; text-align: center; padding: 44px 80px;}
.img-form-wrap .graphic-section { width: 50%; background-position: top right; background-size: cover; border-radius: 0 16px 16px 0;}
.form-bg-dark { background-color: #333333;}

.form-bg-dark .primary-title { font-size: 42px; color: #FFFFFF; margin-bottom: 20px;}
.form-slogan {font-weight: 400;    font-size: 18px;    line-height: 1; font-family: var(--font-primary); color: #E0E0E0;    opacity: 0.8;
    margin-bottom: 30px;
}

.img-form-wrap .form-section .form-group {  margin-bottom: 30px;}
.img-form-wrap .form-section .form-control { background: transparent; border: none; border-bottom: 1px solid #6c757d; border-radius: 0; padding-left: 0; padding-right: 0;}
.form-bg-dark .form-control {  color: #fff;}
.icon-input-w { position: relative;}
.icon-input-w.icon-l .form-control { padding-left: 45px !important;}
.icon-input-w.icon-r .form-control { padding-right: 45px !important;}
.img-form-wrap .form-actions .btn { display: block; width: 100%; margin-bottom: 22px;}
 .btn-primary-outline { background: transparent; border: 1px solid #3876BB; color: #3876BB; border-radius: var(--button-radius); padding: var(--button-padding);}
 .btn-primary-outline:hover {
     background-color: #3876BB;
     color: #fff;
 }

 .forget-pass-btn { color: #838383;}
 .forget-pass-btn:hover { color: #fff;}
 .or-sec { text-align: center; display: flex; text-transform: uppercase; font-size: 18px; line-height: 90px; align-items: center;}
 .or-sec:before { content: ""; display: block; flex: 1; margin-right: 10px; height: 1px; background-color: #C4C4C4; opacity: 0.2;}
 .or-sec:after { content: ""; display: block; flex: 1; margin-left: 10px; height: 1px; background-color: #C4C4C4; opacity: 0.2;}

 .third-party-login { display: flex; gap: 27px; justify-content: center; flex-wrap: wrap;}
 .third-party-login .btn { width: 56px; height: 56px; border-radius: 100%; background-color: #fff;
    display: flex; justify-content: center; align-items: center; transition: all .3s;}
 .third-party-login .btn:hover { transform: scale(1.1);}
 .third-party-login .btn-facebook-log { background-color: #127AF5; }
 .third-party-login .btn-facebook-log img { width: 30px;}
 .icon-input-w .icon-left { position: absolute; top: 14px; left: 0;}
 .icon-input-w .icon-right { position: absolute; top: 16px; right: 0;}
 .eye-icon { cursor: pointer; transition: all .3s;}
 .eye-icon:hover { transform: scale(1.2);}
 .img-form-wrap .form-actions { padding-top: 15px;}

 /* site-inner-banner */
 #site-inner-banner .carousel-item { height: 474px;}

 /* about page */
 .content-blocks { padding-top: 50px; overflow: hidden;}
 .content-blocks .row { padding: 50px 0 50px;}
 .app-section-gap-fix { height: 235px;}
 .bg-content-block { padding: 90px 105px; text-align: center; position: relative;}
 .bg-content-block:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .8);}

 .bg-content-block h2, .bg-content-block p { position: relative; z-index: 2;}
 .bg-content-block .primary-title { font-size: 42px; color: #fff;}
 .bg-content-block .lead { font-size: 18px;}
 .bg-light-gray {background: #EEEEEE;}
 .content-blocks .primary-title { font-size: 42px; margin-top: 84px;}
 .content-blocks .graphic.full-bg { padding-left: 0; padding-right: 0; position: relative;}
 .content-blocks .graphic.full-bg > img { position: absolute; width: 300%;}
 .content-blocks .bg-full-div  {	position: absolute;	top: -110px;	left: 0;	width: 150%;	height: 200px;	background: #000;
	z-index: 2;    background-size: cover;    height: 150%;}
.content-blocks .row.extra-gap { padding: 110px 0; margin-top: 50px; margin-bottom: 50px;}
.content-blocks .full-bg.bg-light-gray { position: relative; padding-bottom: 84px;}
.content-blocks .full-bg.bg-light-gray:before { content: ""; position: absolute; width: 150%; height: 100%; background-color: #eeeeee; top: 0; left: -100%; z-index: -1; }

 /* respnsive menu */
 .res-menu-btn { position: absolute; top: 15px; left: 15px; z-index: 2000; padding: 8px 8px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #000; cursor: pointer; display: none;}
.res-menu-btn svg {width: 30px; height: 30px;}

    .res-menu-btn:hover{/* background-color: var(--color-primary-hover);*/ opacity: .5;}
    .res-menu-btn:focus, .res-menu-btn:active {transform: scale(.7);}
.responsive-menus { position: fixed; top: 0; left: 0; width: 100%; height: 80vh; max-height: 80vh; background: var(--color-primary);
    overflow: auto; z-index: 2001;
    transform: translateX(-100%);
}
body.menu_on .responsive-menus { transform: translateX(0); max-width: 250px;}
.responsive-menus ul { list-style: none; padding: 45px 15px 0 15px ; margin: 0;}
.responsive-menus ul li { margin-bottom: 8px;}
.responsive-menus ul li a { display: block; padding: 8px 15px; font-size: 16px; color: #fff; text-align: center; }
.responsive-menus ul li a:hover, .responsive-menus ul li a:focus, .responsive-menus ul li a:active {
    background-color: var(--color-primary-hover);
}
.res-menu-close-btn { position: absolute; top: 15px; right: 15px; color: #fff; cursor: pointer;}
.res-menu-close-btn:hover {
    transform: scale(1.1);
}
.res-menu-close-btn:focus, .res-menu-close-btn:active {
    transform: scale(.7);
}
 /* responsive */
 @media only screen and (max-width: 1200px) {

    #site-main-banner .carousel-item, .home-testimonials-sec, .home-about-sec, .home-app-sec, .home-more-sec, .footer-widgets, .footer-bottom { padding-left: 35px; padding-right: 35px;}
    .get-in-touch { margin-left: 35px; margin-right: 35px;}
    #site-main-banner .banner-title,
    #site-inner-banner .banner-title { font-size: 38px;}
    #site-main-banner .banner-title .small,
    #site-inner-banner .banner-title .small { font-size: 18px;}
    .site-banner .carousel-item { height: 500px;}
    .banner-img-col .img-box { width: 100%;}
    .home-service-sec { padding-left: 30px; padding-right: 30px;}
    .icon-box-service .icon-box {
      width: 45%; aspect-ratio: 1/1;
    }
    .site-banner .btn { font-size: 16px; padding: 10px 15px;}
  }


  @media only screen and (max-width: 992px) {
    .res-menu-btn { display: block;}
    .site-menu, .header-utility { display: none;}
    .site-banner .carousel-item,  #site-inner-banner .carousel-item{ height: 400px;}
    .home-service-sec .col-md-6, .testimonial-item-wrap .col {  width: 100%;}
    .testimonial-item-wrap .col { flex: 1 1 100%;}
    .home-app-sec .graphic { text-align: center;}
    .home-app-sec .content { text-align: center;}
    .home-app-sec .buttons-groups { justify-content: center;}
    .get-in-touch .col-md-6 { width: 100%;}
    .get-in-touch .col-md-6:not(:last-child) { margin-bottom: 35px;}
    .get-in-touch { margin-left: 0; margin-right: 0; border-radius: 0;}
    .get-in-touch .container { border-radius: 0;}
    .img-form-wrap { flex-wrap: wrap; position: relative;}
    .img-form-wrap .form-section, .img-form-wrap .graphic-section { width: 100%;}
    .img-form-wrap .graphic-section { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;}
    .img-form-wrap .form-section { position: relative; z-index: 2; background-color: #333333e6; max-width: 600px;
         border-radius: 16px; margin: 40px auto;
    }
    .content-blocks .col-md-6 { width: 100%; text-align: center;}
    .content-blocks .col-md-6.graphic { text-align: center;}
    .content-blocks .graphic .bg-full-div { position: static; aspect-ratio: 16/4;}
    .content-blocks .full-bg.bg-light-gray {padding-bottom: 30px;}
    .content-blocks .row.extra-gap {margin-bottom: 0;}
    .bg-content-block { padding: 45px 35px}
    .content-blocks .primary-title { margin-top: 35px; margin-bottom: 15px; font-size: 30px;}
    .content-blocks .row.extra-gap { padding: 0; margin-top: 25px;}
    .col-auto.col.brand {
        margin-left: 60px;
    }
  }

  @media only screen and (max-width: 767px) {
    #site-main-banner .banner-content-col, #site-inner-banner .banner-content-col {width: 58.33333333%; flex: 0 0 auto;}
    #site-main-banner .banner-img-col, #site-inner-banner .banner-img-col {width: 41.66666667%;; flex: 0 0 auto;}
    #site-main-banner .banner-title .small, .form-slogan, .img-form-wrap .form-actions .btn.forget-pass-btn,
    #site-inner-banner .banner-title .small { font-size: 14px;}
    #site-main-banner .banner-title, #site-inner-banner .banner-title, .form-bg-dark .primary-title { font-size: 26px;}
    .site-banner .btn, .btn-primary, .btn-primary-outline { min-width: 100px;  font-size: 14px;  margin-top: 15px;  padding: 8px 15px;  border-radius: 10px; }
    .site-banner .carousel-item { height: 300px;}
    #site-inner-banner .carousel-item { height: 250px;}

    .img-form-wrap .form-section { padding-left: 25px; padding-right: 25px; max-width: 85%;}
    .img-form-wrap .form-control { font-size: 15px;}
    .get-in-touch .row { flex-direction: column;}


  }

  @media only screen and (max-width: 520px) {
    #site-main-banner .banner-content-col, .icon-box-service .icon-box {
        width: 100%;
    }
    #site-main-banner .carousel-item, #site-inner-banner .carousel-item, .home-testimonials-sec, .home-about-sec, .home-app-sec, .home-more-sec, .footer-widgets, .footer-bottom {
        padding-left: 15px;
        padding-right: 15px;
      }

      #site-main-banner .banner-content-col, #site-inner-banner .banner-content-col {
        position: relative;
        z-index: 5;
      }
      #site-main-banner .banner-img-col, #site-inner-banner .banner-img-col { width: 60%; position: absolute; bottom: 0; right: 0;}
      #site-main-banner .banner-title, #site-inner-banner .banner-title { font-size: 20px;}
      #site-main-banner .banner-title .small, #site-inner-banner .banner-title .small { font-size: 12px;}
      .primary-title, .home-service-sec .primary-title, .home-more-sec .primary-title { font-size: 26px; line-height: 1.3;}
      .sub-title, .home-more-sec p, .get-in-touch p { font-size: 15px;}
      body, p { font-size: 14px;}
      .link { font-size: 13px;}

      .home-about-sec, .home-more-sec { padding: 40px 0;}
      .home-service-sec { padding-bottom: 40px;}
      .home-testimonials-sec { padding-top: 40px;}
      .icon-box {  margin-top: 25px; }
      .testimonial-head { flex-direction: column; align-content: center; text-align: center;}
      .testimonial-head .graphic { margin-right: 0; margin-bottom: 10px;}
      .testimonial-box .quote p { font-size: 14px; line-height: 1.5; text-align: center;}
      .testimonial-box { padding: 15px;}
      .get-in-touch { border-radius: 0; margin: 0; }
      .get-in-touch .container {padding: 40px 15px;}
      .get-in-touch .col-md-6 { margin-bottom: 25px;}
      .form-control {font-size: 14px;
        padding: 12px 15px; border-radius: 8px;}

  }

/*Slider*/
.carousel-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}