@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    /* font-family: 'Roboto', sans-serif; */
}
:root{
  /* Colors */

    --fcolor-header:#015682;
    --fcolor-almost-white:#fafafa;
    --fcolor-off-white:#f2f2f2;
    --fcolor-dark-grey:#454444;
    --fcolor-almost-black:#141414;
    --fcolor-medium-grey:#696969;
    --fcolor-grey:#d6d2d2;
    --fcolor-primary:#FF8A01;
    --fcolor-accent:#015682;
    --fcolor-accentlight:#F2F7F9;

  /* Font sizes */

    --fs-paragraph:18px;
    --fs-title:3rem;
    --fs-subtitle:1.5rem;
}
/* Custom Classes */
.fuelStation-flex-row{
    
}
.fuelStation-row-padding-32{
   padding-block: 2rem;
}
.fuelStation-padding-jumbotron{
   padding: 4rem;
}
.fuelStation-light-grey{
   background-color: var(--fcolor-medium-grey);
}
.fuelStation-small{
    font-size: 14px;
}
.fuelStation-font{
  font-size: var(--fs-subtitle);
}
.fuelStation-row-center{
   margin-inline: auto;
   align-items: center;
}
.fuelStation-bg-accent{
    background-color: var(--fcolor-primary) !important;
}
.fuelStation-bg-primary{
    background-color: var(--fcolor-accent) !important;
}
.fuelStation-bg-light_primary{
    background:#F2F7F9;
}

.fuelStation-row-padding{
  padding-inline: 1rem;
}

.fuelStation-line-ht{
   line-height: 1.2;
   
} 
.fuelStation-mg-block{
   margin-block: 1rem;
   
} 

.fuelStation-input{
    padding:16px;
    display:block;border:none;
    border-bottom:1px solid #ccc;
    width:100%;
    margin-block: 1rem;
}
.fuelStation-border{
    border:1px solid #ccc!important;
}
.fuelStation-button{
    border:none;
    display:inline-block;
    padding:16px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:var(--fcolor-almost-white);
    /* background-color:var(--fcolor-primary); */
    text-align:center;
    cursor:pointer;
    white-space:nowrap
}
.fuelStation-block{
    display:block;
    width:100%;
}
.fuelStation-primary{
    color:var(--fcolor-almost-white)!important;
    background-color:var(--fcolor-accent);
}
.fuelStation-text-primary{
    color:var(--fcolor-accent)!important;
   
}
.fuelStation-text-accent{
    color:var(--fcolor-primary)!important;
   
}
.fuelStation-white{
    color:var(--fcolor-almost-black)!important;
    background-color:#fff!important;
}
.fuelStation-text-black{
    color: #000;
}
.fuelStation-text-white{
    color: #fff;
}
.fuelStation-text-dark-grey{
    color:var(--fcolor-dark-grey);
}
.fuelStation-text-grey{
    color:var(--fcolor-grey);
}
.fuelStation-justify{
    text-align:justify!important;
}
.fuelStation-hover-opacity:hover{
    opacity:0.60
}
.fuelStation-large{
    font-size:18px!important;
}
.fuelStation-pd-title{
    padding-block-start: 2rem !important;
    
}

.fuelStation-center-top{
   background-color:rgba(1, 86, 130,0.05);
   margin-inline: auto;
} 
.card img{
    width: 3.5rem;
}

body{
    width: 100%;
    /* height: 100vh; */
    /* background-color: var(--fcolor-off-white); */
}
li{
    list-style: none;
    /* margin-block: 1rem; */
}
h2{
    font-weight:400;
    margin:10px 0;
    color: var(--fcolor-off-white);
}

a{
    text-decoration: none;
}
.mg-block{
    margin-block:2rem;
}
.mg-inline{
    margin-inline:auto;
}
.landing-page{
 
    /* max-width: 1500px; */
    margin-inline: auto;
}
.main-header{

    background: rgb(121,173,200);
    background: linear-gradient(129deg, rgba(121,173,200,1) 0%, rgba(1,86,130,1) 33%, rgba(1,86,130,1) 74%, rgba(121,173,200,1) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 2px 8px grey;
    padding:1rem ;
    position: sticky;
    top: 0;
    z-index: 2300;
    width: 100%;
}

.logo{
    display: flex !important;
    /* justify-content: center; */
    /* align-items: center; */
    gap: 0.5rem; 
   
}

.logo .logoText {
   color:var(--fcolor-almost-white) ;
}

.menuButtonContainer{
    background-color: transparent;
    border: none;
    outline: none;
    right: 1rem;
    width: 2rem;
    height: 100%;
    
    top: 1rem;
    right: 1rem;
}

.menuButtonContainer span, span::before,span::after{
    display: block;
    position: absolute;
    width: 2rem;
    height: 3px;
    background-color: #fff;
    border-radius: 1rem;
    transition:transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2700;

}
span{
    
}

span::before{
    content: "";
 
    margin-top: -6px;
    
}
span::after{
    content: "";
    position: relative;
    margin-top: 6px;
    
}

.navbar{
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(0,0 , 0, .5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateX(120%);
    z-index: 2500;
    transition: transform 500ms  cubic-bezier(0.32, 1, 0.23, 1);
    
}

.navbar .list{
    background-color: var(--fcolor-off-white);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 30%;
    padding-inline-start:1rem ;
    padding-block-start: 5rem;
    z-index: 3700;
}
.navbar .list .list-item {
   margin-block: 1rem;
  
}
.navbar .list .list-item a{
   color: #545454;
  
}
.landing-pg_textContent{
    /* width: 100%; */
    padding-inline: 1rem;
}

.logReg{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;

}
.logReg a:nth-child(1) {
   color:var(--fcolor-header);
   margin-inline-end: 1rem;

}
.btn{
    background-color: transparent;
    color:var(--fcolor-primary);
    border-radius: 0.5rem;
    border: 1px solid var(--fcolor-primary);
}




.btn-regular{
    
    padding-block:0.7rem ;
    padding-inline: clamp(2rem, 2rem + 2vw, 2.5rem);
    
}
.btn-big{
    display: block;
    width:100%;
    padding-block:1rem ;
}

.mobile{
    margin-top: 5rem;
}

.desktop{
    display: none;
}


/* SLIDER STYLES */
/* Overlay */
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1700;

}
#slider {
    position: relative;
    width: 100%;
    height: 265px;
    overflow-x: hidden;
    /* box-shadow: 0 0 30px rgba(8, 175, 36, 0.3); */
    z-index: 1000;
    
  }

  #slider h1{
    color: #ffff;
    text-align:center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom:40%;
    font-size: clamp(2rem,2rem + 5vw,5vw);
    z-index: 1900;
    padding-inline: 2rem;
  }
  #slider ul {
    position: relative;
    list-style: none;
    height: 100%;
    width: 10000%;
    padding: 0;
    margin: 0;
    transition: all 750ms ease;
    left: 0;
    z-index: 1200;
  }
  #slider ul li {
    position: relative;
    height: 100%;
    float: left;
  }
  #slider ul li img{
    width: 100%;
    height: 265px;
  }
  #slider #prev, #slider #next {
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-50%);
    transition: all 150ms ease;
  }
  #slider #prev {
    left: 10px;
  }
  #slider #next {
    right: 10px;
  }
  
  #slider #prev:hover, #slider #next:hover {
    background-color: rgba(0, 0, 0, 0.5);
    text-shadow: 0;
  }



/* ACTIVE STATES */

.nav-open .navbar{
    transform: translateX(0%);
    
}

/* .nav-open .menuButtonContainer{
    position: fixed;
} */
.nav-open .menuButtonContainer span::before{
    transform: rotate(90deg) translateX(6px);
}
.nav-open .menuButtonContainer span{
    position: fixed;
    transform: rotate(0.625turn);
}
.nav-open .menuButtonContainer span::after{
    opacity: 0;
}


/* Section 1-Landing page*/
.landing-page{
    /* background-color: #DD2A32; */
}



.landing-pg_textContent{
    margin-top: 2rem;
    text-align: center;
   
}
.landing-pg_textContent h1{
    margin-block: 1rem;
    font-size: var(--fs-title);
    color: var(--fcolor-almost-white);
}
.landing-pg_textContent p{

   line-height: 1.5;
}


/* SECTION 2 - CTA*/

.wrapper_cta-container{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto ;
    bottom:10%;
    z-index: 1700;
    /* max-width: 480px;  */
}
.wrapper_cta {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 248px;
    row-gap: 1rem;
    
}
.cta{
    /* padding: 1rem; */
}
#cta_fuel_station_locator-container{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: clamp(245px,245px + 15vw, 50vw);
    margin-inline: auto;
    text-align: center;
    box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid var(--fcolor-primary); 
}
#cta_fuel_station_locator{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-inline: 1rem;
   width: 70%;
   
   
    
}
#cta_fuel_station_locator #input_locator{
    
    background-color:transparent ;
    /* margin-block: 1rem; */
    font-size: clamp(0.4rem,0.4rem + 0.5vw, 0.8rem);
    border: none;
    outline: none;
    text-align: start;
    margin-left: 5%;
    margin-right: auto;
    width: 100%;
    color:#fff;
}
#cta_fuel_station_locator #input_locator::placeholder{
    color: #fff;
    font-weight: 700;
    text-align: start;
    
}

#cta_container{
    /* width: 75px; */
    width: 30%;
}
#cta_container #cta{
    cursor: pointer;
    display: block;
    background-color:var(--fcolor-primary) ;
    padding-block: 0.8rem;
    padding-inline: 1rem;
    font-size: clamp(0.5rem,0.5rem + 1vw, 1rem);
    font-weight: 700;
    text-align: center;
    color: #fff;
    border: none;
    outline: none;
    width: 100%;
}

.cta .text{
    /* margin-block: 1.5rem;
    margin-inline: auto; */
}
.cta .text h1{
    /* text-align: center; */
}
#cta_fuel_station_locator-container img{
    
    position: absolute;
    left: 0.5rem;
   
    
}
#cta_fuel_station_locator #cta_locator{
    
    
}
#cta_fuel_station_locator #cta_locator{
    
}


/* SECTION 3 - Mockups */

.mockups{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min-content;
    margin-inline: auto;
    padding-block: 2rem;
}
.mockups .reports {
    display: grid;
    grid-template-areas: 
    "title"
    "img"
    "subtitle";
    justify-content: center;
    align-items: center;
    /* gap: 1.5rem; */
    margin-block: 1rem;
}
.mockups .reports .mockup_desktop{
    display: none;
}

.mockups .reports .report_text{
    grid-area: title;
}
.mockups .reports_title{
   text-align: center;
   
   color: var(--fcolor-accent);
}
.mockups .reports .mockup1{
    grid-area: img;
}
.mockups .reports img{
    margin-inline: auto;
    
}
.mockups .reports_text_subtitle{
   text-align: center;
   grid-area: subtitle;
   color: #595757;
}
.mockups .sales_book {
    display: grid;
    grid-template-areas: 
    "title2"
    "img2"
    "subtitle2";
    justify-content: center;
    align-items: center;
    /* gap: 1.5rem; */
    margin-block: 1rem;
}
.mockups .sales_book .mockup_desktop{
    display: none;
}
.mockups .sales_book_title{
   text-align: center;
   grid-area: title2;
   color: var(--fcolor-accent);

}

.mockups .sales_book img{
    margin-inline: auto;
    grid-area: img2;
}
.mockups .sales_book_subtitle{
    text-align: center;
   grid-area: subtitle2;
   color: #595757;
}

/* BLOB STYLES */

 /* Mobile blobs */

.blob_mobile{
    position: relative;
    overflow: visible;
}
.blob_mobile .blob1{
  position: absolute;
   display: block;
   margin-inline:auto ;
   max-width: 120%;
   left: -2rem;

}
.blob_mobile .blob2{
  position: absolute;
   display: block;
   margin-inline:auto ;
   max-width: 120%;
   top: -8rem;
   left: -2rem;

}

/* Desktop blobs */
.blob_desktop{
    display: none;
}

.blob1{
    /* top:-5rem ; */
    transform: translateY(-100%); 
    z-index: -1;
}
.blob2{
    top:0 ;
    transform: translateY(-100%); 
    z-index: -1;
}


/* ABOUT SECTION */

.circle{
    width: 5rem;
    height: 5rem;
}
.circle2{
    width: 5.5rem;
    height: 5.5rem;
}


@media(max-width:420px){

    .img_slider{
        width: 320px;
        height: 200px;
    }
    .img_slider .slide .info{
       padding: 5px 10px;
    }
    .img_slider .slide .info h2{
      font-size: 25px;
    }
    .img_slider .slide .info p{
       width: 90%;
       font-size: 11px;
    }
    .img_slider .navigation {
      
       bottom: 10px;
    }
   
}

@media(max-width:620px){

    .img_slider{
        width: 400px;
        height: 250px;
    }
    .img_slider .slide .info{
       padding: 10px 20px;
    }
    .img_slider .slide .info h2{
      font-size: 30px;
    }
    .img_slider .slide .info p{
       width: 80%;
       font-size: 13px;
    }
    .img_slider .navigation {
      
       bottom: 15px;
    }
    .img_slider .navigation .btn{
      width: 8px;
      height: 8px;
      margin: 6px;
    
    }
}
@media(max-width:820px){

    .img_slider{
        width: 600px;
        height: 375px;
    }
    .img_slider .slide .info{
       padding: 10px 25px;
    }
    .img_slider .slide .info h2{
      font-size: 35px;
    }
    .img_slider .slide .info p{
       width: 70%;
       font-size: 15px;
    }
    .img_slider .navigation {
      
       bottom: 25px;
    }
    .img_slider .navigation .btn{
      width: 10px;
      height: 10px;
      margin: 8px;
    
    }
}
@media(max-width:960px){
    .fuelStation-text-center{
        text-align: center;
      }
}

/* On tablet screen widths */


@media(min-width:450px){
   
    /* Code here */

     /* SLIDER STYLES LARGE SCREEN 576PX*/
    
 

#cta_fuel_station_locator #input_locator{
    
    background-color:transparent ;
    /* margin-block: 1rem; */
    font-size: clamp(0.5rem,0.5rem + .4vw, .7rem);
    border: none;
    outline: none;
    text-align: center;
    /* margin-left: 5%; */
    margin-right: auto;
    width: 100%;
    
}
}
@media(min-width:576px){
   
    /* Code here */

     /* SLIDER STYLES LARGE SCREEN 576PX*/
    
 
#slider {
   
    width: 100vw;
    /* height: 265px; */
    /* margin-top: .5em; */
    /* margin-left: 60%;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(8, 175, 36, 0.3); */
  }
  #slider ul {
    /* position: relative;
    list-style: none;*/
    height: 100%;
    /*width: 10000%;
    padding: 0;
    margin: 0;
    transition: all 750ms ease;
    left: 0; */
  }
  #slider ul li {
    /* position: relative;*/
    height: 100%;
  
    /*float: left; */
  }
  #slider ul li img{
    width: 100vw;
    height: 500px;
  }
  #slider #prev, #slider #next {
    /* width: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-50%);
    transition: all 150ms ease; */
  }
  #slider #prev {
    /* left: 10px; */
  }
  #slider #next {
    /* right: 10px; */
  }
  
  #slider #prev:hover, #slider #next:hover {
    /* background-color: rgba(0, 0, 0, 0.5);
    text-shadow: 0; */
  }


/* SLIDER STYLES LARGE END HERE */

#cta_fuel_station_locator #input_locator{
    
    background-color:transparent ;
    /* margin-block: 1rem; */
    font-size: clamp(0.5rem,0.5rem + .5vw, .8rem);
    border: none;
    outline: none;
    text-align: center;
    /* margin-left: 5%; */
    margin-right: auto;
    width: 100%;
    
}
/* Blobs mini tabs */
.blob_mobile{
    /* position: relative;
    overflow: visible; */
}
.blob_mobile .blob1{
  /* position: absolute;
   display: block;
   margin-inline:auto ; */
   max-width: 170%;
   /* left: -2rem; */

}
.blob_mobile .blob2{
  /* position: absolute;
   display: block;
   margin-inline:auto ; */
   max-width: 170%;
   /* top: -8rem;
   left: -2rem; */

}

/* Desktop blobs */
.blob_desktop{
    /* display: none; */
}

.blob1{
    /* top:-5rem ; */
    /* transform: translateY(-100%); 
    z-index: -1; */
}
.blob2{
    /* top:0 ;
    transform: translateY(-100%); 
    z-index: -1; */
}
  /* Blobs mini tab end */
}


@media(min-width:600px){

    /* SLIDER STYLES LARGE SCREEN 576PX*/


    #slider {
  
       width: 100vw;
       height: 350px;
    
     }
     #slider ul {
       /* position: relative;
       list-style: none;
       height: 100%;
       width: 10000%;
       padding: 0;
       margin: 0;
       transition: all 750ms ease;
       left: 0; */
     }
     #slider ul li {
       /* position: relative;
       height: 100%;
     
       float: left; */
     }
     #slider ul li img{
       width: 100vw;
       height: 350px;
     }
     #slider #prev, #slider #next {
       /* width: 50px;
       line-height: 50px;
       text-align: center;
       color: white;
       text-decoration: none;
       position: absolute;
       top: 50%;
       border-radius: 50%;
       font-size: 2rem;
       text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
       transform: translateY(-50%);
       transition: all 150ms ease; */
     }
     #slider #prev {
       /* left: 10px; */
     }
     #slider #next {
       /* right: 10px; */
     }
     
     #slider #prev:hover, #slider #next:hover {
       /* background-color: rgba(0, 0, 0, 0.5);
       text-shadow: 0; */
     }
   
   
   /* SLIDER STYLES LARGE END HERE */

   /* Blobs mini tabs */
.blob_mobile{
    /* position: relative;
    overflow: visible; */
}
.blob_mobile .blob1{
  /* position: absolute;
   display: block;
   margin-inline:auto ; */
   max-width: 200%;
   /* left: -2rem; */

}
.blob_mobile .blob2{
  /* position: absolute;
   display: block;
   margin-inline:auto ; */
   max-width: 200%;
   /* top: -8rem;
   left: -2rem; */

}

/* Desktop blobs */
.blob_desktop{
    /* display: none; */
}

.blob1{
    /* top:-5rem ; */
    /* transform: translateY(-100%); 
    z-index: -1; */
}
.blob2{
    /* top:0 ;
    transform: translateY(-100%); 
    z-index: -1; */
}
  /* Blobs mini tab end */
}

   
@media(min-width:760px){

    /* SLIDER STYLES LARGE SCREEN 576PX*/


    #slider {
/*   
       width: 100vw;
       height: 350px; */
    
     }
     #slider ul {
       /* position: relative;
       list-style: none;
       height: 100%;
       width: 10000%;
       padding: 0;
       margin: 0;
       transition: all 750ms ease;
       left: 0; */
     }
     #slider ul li {
       /* position: relative;
       height: 100%;
     
       float: left; */
     }
     #slider ul li img{
       /* width: 100vw;
       height: 350px; */
     }
     #slider #prev, #slider #next {
       /* width: 50px;
       line-height: 50px;
       text-align: center;
       color: white;
       text-decoration: none;
       position: absolute;
       top: 50%;
       border-radius: 50%;
       font-size: 2rem;
       text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
       transform: translateY(-50%);
       transition: all 150ms ease; */
     }
     #slider #prev {
       /* left: 10px; */
     }
     #slider #next {
       /* right: 10px; */
     }
     
     #slider #prev:hover, #slider #next:hover {
       /* background-color: rgba(0, 0, 0, 0.5);
       text-shadow: 0; */
     }
   
   
   /* SLIDER STYLES LARGE END HERE */

   #cta_fuel_station_locator #input_locator{
    
    /* background-color:transparent ; */
    /* margin-block: 1rem; */
    /* font-size: clamp(0.4rem,0.4rem + 0.5vw, 0.8rem); */
    /* border: none;
    outline: none;*/
    /* text-align: center;  */
    /* margin-left: -5%; */
    /* margin-right: auto;
    width: 100%;
    color:#fff; */
}
   }



/* On large width screens */



@media(min-width:880px) {
   .main-header{
       /* background-color:var(--fcolor-header) ; */
       
       background: var(--fcolor-almost-white);
       display: flex;
       justify-content: space-between;
       align-items: center;
       box-shadow: 1px 2px 8px grey;
       padding:1rem ;
       position: sticky;
       top: 0;
   }
   .logo_container{
     cursor: pointer;
   }
   .logo{
    display: flex !important;
    /* justify-content: center; */
    /* align-items: center; */
    gap: 0.5rem; 
   
}
   .logo .logoText {
       color:var(--fcolor-header) ;
    }
   .menuButtonContainer{
       display: none;
   }
   
   .desktop{
       display: block;
   }
   .mobile{
       display: none;
   }
   .desktop .login{
       color: var(--fcolor-header);
   }

   
   .navbar{
       position: static;
       display: flex;
       flex-direction: row;
       gap: 1rem;
       background-color:transparent;
       
       transform: translateX(0%);
       
       
   }

   .navbar .list{
       display: flex;
       position: static;
       background-color: transparent;
       padding: 0;
       gap: 1rem;
       
   }
   .navbar .list .list-item{
        /* Code here */
   }
   .navbar .list .list-item a{
       color: var(--fcolor-header);
      
    }
   .btn-big{
       max-width: 350px;
   }

   .landing-page-content{
       display: flex;
       justify-content: space-between;
       align-items: center;
       /* min-height: 100vh; */
    
   }

   .landing-pg_img{
       display: flex;
       justify-content: end;
       align-items: center;
       max-width: none;
       width: 100%;
       order:2;
   }
   .landing-pg_textContent{
       order:1;
       text-align: left;
   }
   .landing-pg_textContent a{
      
       text-align: center;
   }
   
   
    /* SLIDER STYLES LARGE SCREEN 576PX*/

 
     #slider {
   
        width: 100%;
        height: 100vh;
        /* margin-top: .5em; */
        /* margin-left: 60%;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(8, 175, 36, 0.3); */
      }
     #slider h1{
   
        bottom: 60%;
      }
      #slider ul {
        /* position: relative;
        list-style: none;*/
        height: 100%;
      /*  width: 10000%;
        padding: 0;
        margin: 0;
        transition: all 750ms ease;
        left: 0; */
      }
      #slider ul li {
        /* position: relative;*/
        height: 100%;
      
      /*  float: left; */
      }
      #slider ul li img{
        width: 100vw;
        height: 100%;
      }
      #slider #prev, #slider #next {
        /* width: 50px;
        line-height: 50px;
        text-align: center;
        color: white;
        text-decoration: none;
        position: absolute;
        top: 50%;
        border-radius: 50%;
        font-size: 2rem;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        transform: translateY(-50%);
        transition: all 150ms ease; */
      }
      #slider #prev {
        /* left: 10px; */
      }
      #slider #next {
        /* right: 10px; */
      }
      
      #slider #prev:hover, #slider #next:hover {
        /* background-color: rgba(0, 0, 0, 0.5);
        text-shadow: 0; */
      }
    
    
    /* SLIDER STYLES LARGE END HERE */
   
   
.wrapper_cta-container{
    /* position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto ;*/
    bottom:40%;
    /*z-index: 1700; */
    /* max-width: 480px;  */
}
.wrapper_cta {
    /* display: flex;
    justify-content: center;
    align-items: center;
    min-width: 248px;
    row-gap: 1rem; */
    
}
.cta{
    /* padding: 1rem; */
}
#cta_fuel_station_locator-container{
    /* position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: clamp(245px,245px + 15vw, 50vw);
    margin-inline: auto;
    text-align: center;
    box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 1px solid var(--fcolor-primary);  */
}
#cta_fuel_station_locator{
   /* display: flex;
   align-items: center;
   justify-content: space-between;
    padding-inline: 1rem;
    width: 70%;
    */
   
    
}
#cta_fuel_station_locator #input_locator{
    
    /* background-color:transparent ;
    /* margin-block: 1rem; 
    font-size: clamp(0.4rem,0.4rem + 0.5vw, 0.8rem);
    border: none;
    outline: none;
    text-align: center;*/
    /* margin-left: -5%; */
   /* margin-right: auto;
    width: 100%; */
    
}
#cta_fuel_station_locator #input_locator::placeholder{
    /* color: #fff;
    font-weight: 700;
     */
}

#cta_container{
    /* width: 75px; */
    /* width: 30%; */
}
#cta_container #cta{
    /* cursor: pointer;
    display: block;
    background-color:var(--fcolor-primary) ; */
    padding-block: 0.95rem;
    /* padding-inline: 1rem;
    font-size: 0.7rem;
    text-align: center;
    color: #fff;
    border: none;
    outline: none;
    width: 100%; */
}

.cta .text{
    /* margin-block: 1.5rem;
    margin-inline: auto; */
}
.cta .text h1{
    /* text-align: center; */
}
#cta_fuel_station_locator-container img{
/*     
    position: absolute;
    left: 0.5rem; */
   
    
}
#cta_fuel_station_locator #cta_locator{
    
    
}
#cta_fuel_station_locator #cta_locator{
    
}

    /* MOCKUPS STYLES */

    
.mockups{
   padding-inline: 4rem; 
   max-width: 1250px;
   margin-inline: auto;
   
}
.mockups .reports {
    /* margin-left: 0; */
    grid-template-areas: 
    "img     title"
    "img   subtitle";
    grid-template-rows: .5fr 2.5fr;
    padding: 5rem 2rem 5rem 2rem; 
    justify-content: center;
    align-items: start;
    column-gap: 3rem;
    width:fit-content;
    transform: translateX(-7vw);
}

.mockups .reports .mockup_mobile{
   display: none;
}
.mockups .reports .mockup1_desktop{
    display: block;
    grid-area: img;
}
.mockups .reports_title{
   margin-block: 1rem;
   margin-inline-start: 1rem;
   text-align: left;
   grid-area: title;
   width: calc(100% + 15vw);
   font-size: 48px;
}

.mockups .reports .mockup1_desktop img{
    margin-inline: auto;
    width: 387px;
    /* max-width: 100%; */
}


.mockups .reports_text_subtitle{
    text-align: left;
   grid-area: subtitle;
   /* padding-inline-end: 2rem; */
   margin-inline-start: 1rem;
   width: calc(100% + 10vw);
}
.mockups .sales_book {
    grid-template-areas: 
    "img2     title2"
    "img2     subtitle2";
    grid-template-rows: .5fr 2.5fr;
    justify-content: center;
    align-items: start;
    column-gap: 3rem;
    width:fit-content;
    transform: translateX(-5vw);
}
.mockups .sales_book  .mockup_mobile{
    display: none;
 }
 .mockups .sales_book .mockup_desktop.mockup2{
    display: block;
    grid-area: img2;
}
.mockups .sales_book_title{
   margin-block-start: 1rem;
   margin-inline-start: 1rem;
   text-align: left;
   grid-area: title2;
   width: calc(100% + 15vw);
   font-size: 48px;
}

.mockups .sales_book .mockup_desktop.mockup2 img{
    width: 387px;
    margin-inline: auto;
   
}
.mockups .sales_book_subtitle{
   text-align: left;
   grid-area: subtitle2;
   /* padding-inline-end: 6rem; */
   margin-inline-start: 1rem;
   /* width: calc(100% + 10vw); */
}

/* BLOB STYLES */

.blob_mobile{
    display: none;
}
.blob_desktop img{
    position: absolute;
   /* display: block; */
   /* margin-inline:auto ;
   width: 625px;
   max-width: 200%;
    */

}


.blob_desktop{
    display: block;
    /* position: relative;
    overflow: visible; */
}

.blob1{
    /* top:-5rem ; */
    /* transform: translate(50%,-100%);  */
    /* z-index: -1;*/
    /* left: -5rem;  */
}

.blob2{
    /* top:-5rem ; */
    transform: translate(50%,-5%); 
    /* z-index: -1; */
    left: -5rem;
}
 

}
@media(min-width:880px) and (min-height:768px){
  
  

    .wrapper_cta-container {
       
        bottom:50%;
        /* z-index: 1700;
        max-width: 280px;  */
    }
}

/* Refactored Landing Page: Image Slider  */





/* Really big Screens */

@media(min-width:960px){
  .fuelStation-flex-row{
     display: flex;
     /* justify-content: center;
     align-items: start; */
     gap: 2rem;
 }
 .fuelStation-footer-center{
   text-align: center;
 }
 .fuelStation-col{
   min-width: 30%;
  }
  .fuelStation-center-top{
      display: flex;
      justify-content: center;
      align-items: start;
      margin-inline: auto;
  }

 
}

@media(min-width:1200px){
   .main-header{
       padding-inline: 3rem;
   }
   .landing-page-content{
       padding-inline: 3rem;

   }
   .landing-pg_textContent{
       padding-inline: 0;
   }
   #get_started_bottom{
    transform: translateX(-2%);
   }
}