/* UK Ad Creatives Ltd */
  /* v.05 - February 2025 */
  /* Website by Lotus Digital Ltd */
  /* https://www.lotusdigital.co.uk */
  
  
  /* Global Console */
  
  html {
      scroll-behavior: smooth;
    }
  
  html body{
    font-family: 'Lato', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6{
    font-family: 'Lato', serif;
  }
  
  .container{
    max-width: 1270px;
  }
  
  
  /* Variables */
  
  :root{
    
  }
  
  /* Custom Fonts */


  
  /* Section Styles */
  
  #topBar{
    padding: 10px 0px;
    border-bottom: 1px solid #CB1184;
    background: #FFF;
    text-align: center;
  }
  
  #topBar p{
    color: #49576B;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.36px;
    margin-bottom: 0px;
  }
  
  #topBar p a{
    color: #49576B;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.36px;
  }
  
  #header{
    background: url('img/header-background.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
  }
  
  #header img.logo{
    width: 172px;
    height: auto;
    margin-top: 20px;
  }
  
  #header ul{
    list-style-type: none;
    margin: 0;
    text-align: center;
    padding: 0;
    margin-top: 50px;
  }
  
  #header ul li{
    display: inline;
    margin: 0px 15px;
  }
  
  #header ul li a{
    color: #2F2F2F;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    letter-spacing: -0.48px;
  }
  
  #header ul li:nth-child(n+4) a{
    color: #A7A7A7 !important;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
  }
  
  #header ul li:nth-child(4) a:before{
    content: "soon";
    color: #FFF;
    font-family: Inter;
    font-size: 10px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.218px;
    border-radius: 2.333px;
    background: #CB1184;
    margin-top: -15px;
    position: absolute;
    padding: 3px;
    text-align: center;
    margin-left: 2px;
  }
  
  #header ul li:nth-child(5) a:before{
    content: "soon";
    color: #FFF;
    font-family: Inter;
    font-size: 10px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.218px;
    border-radius: 2.333px;
    background: #CB1184;
    margin-top: -15px;
    position: absolute;
    padding: 3px;
    text-align: center;
    margin-left: 11px;
  }
  
  #header a.getStarted{
    border-radius: 47.508px;
    border: 2px solid #EC00B8;
    background: linear-gradient(263deg, rgba(203, 17, 132, 0.00) -11.29%, #CB1184 106.92%), #4C001B;
    box-shadow: 0px 6px 20.3px 0px rgba(255, 49, 177, 0.40);
    color: #FFF;
    font-family: Inter;
    font-size: 15.148px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.303px;
    text-decoration: none;
    display: block;
    padding: 13px 20px;
    margin-top: 30px;
  }
  
  #header a.getStarted img{
    float: right;
    display: inline;
    width: 30px;
    height: auto;
  }
  
  #header .hero{
    margin-top: 90px;
    padding-bottom: 190px;
  }
  
  #header .hero p{
    color: #4D4D4D;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.12px;
    margin-bottom: 0px;
  }
  
  #header .hero h1{
    color: #4D4D4D;
    font-family: Inter;
    font-size: 90px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -4.5px;
    margin-top: -5px;
    margin-bottom: 0px;
  }
  
  #header .hero h2{
    color: #4D4D4D;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.88px;
    margin-bottom: 0px;
    margin-top: -5px;
  }
  
  #header .hero h2 span{
    color: #CB1184;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.88px;
  }
  
 #header .hero a{
   border-radius: 47.508px;
   border: 2px solid #EC00B8;
   background: linear-gradient(263deg, rgba(203, 17, 132, 0.00) -11.29%, #CB1184 106.92%), #4C001B;
   box-shadow: 0px 6px 20.3px 0px rgba(255, 49, 177, 0.40);
   color: #FFF;
   font-family: Inter;
   font-size: 15.148px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   letter-spacing: -0.303px;
   text-decoration: none;
   display: block;
   width: 75%;
   padding: 13px 20px;
   margin-top: 30px;
   margin-bottom: 30px;
 }
 
 #header .hero a img{
   float: right;
   display: inline;
   width: 30px;
   height: auto;
 }
 
 #header .hero p.clientsIntro{
   color: #4D4D4D;
   font-family: Inter;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   letter-spacing: -0.56px;
   margin-bottom: 10px;
 }
 
 #dashboard{
   background: url('img/dashboard-background.png') no-repeat;
   background-size: cover;
   background-size: top center;
   padding: 180px 0px 0px 0px;
   margin-top: -140px;
 }
 
 #dashboard .dashIntro{
   text-align: center;
   margin-bottom: 70px;
 }
 
 #dashboard .dashIntro p{
   color: #FFF;
   text-align: center;
   font-family: Inter;
   font-size: 28px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: -1.12px;
   margin-bottom: 0px;
 }
 
 #dashboard .dashIntro h2{
   color: #FFF;
   text-align: center;
   font-family: Inter;
   font-size: 70px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: -3.5px;
 }
 
 #dashboard ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
   margin-left: 30px;
 }
 
 #dashboard ul li{
   margin-bottom: 40px;
 }

 #dashboard ul li img{
   width: 30px;
   height: auto;
   display: inline;
   margin-top: -9px;
 }
 
 #dashboard ul li h3{
   display: inline;
   margin-left: 15px;
   color: #FFF;
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 143.523%; /* 28.705px */
   letter-spacing: -0.6px;
 }
 
 #dashboard ul li p{
   color: #FEBDE5;
   font-family: Inter;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 143.523%; /* 20.093px */
   letter-spacing: -0.42px;
   margin-left: 45px;
 }
 
 #dashboard p.more{
   color: #FFF;
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 143.523%; /* 28.705px */
   letter-spacing: -0.6px;
   margin-bottom: 0px;
   margin-left: 73px;
 }
 
 #services{
   padding: 120px 0px 70px 0px;
 }
 
 #services .col-md-12{
   text-align: center;
 }
 
 #services .col-md-12 p{
    color: #4D4D4D;
    text-align: center;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.12px;
    margin-bottom: 0px;
  }
  
  #services .col-md-12 h2{
    color: #4D4D4D;
    text-align: center;
    font-family: Inter;
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -3.5px;
    margin-bottom: 50px;
  }
  
  #services .servicesMiddle{
    margin-top: 40px;
  }
  
  #services .serviceBox{
    border-radius: 6px;
    border: 1px solid #DDE0E6;
    background: #FFF;
    box-shadow: 0px 13px 24.4px 0px rgba(0, 0, 0, 0.06);
    padding: 50px 42px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  #services .serviceBox h3{
    color: #4C4C4C;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 143.523%; /* 28.705px */
    letter-spacing: -0.6px;
  }
  
  #services .serviceBox p{
    color: #86919B;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 143.523%; /* 20.093px */
    letter-spacing: -0.42px;
    margin-bottom: 0px;
  }
  
  #services .serviceBox .tag{
    border-radius: 3.938px;
    background: #CB1184;
    padding: 3px;
    color: #FFF;
    font-family: Inter;
    font-size: 12.273px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.368px;
    text-transform: uppercase;
    margin-left: 135px;
    
    position: absolute;
    margin-top: -58px;
  }
  
  #services a{
     border-radius: 47.508px;
     border: 2px solid #EC00B8;
     background: linear-gradient(263deg, rgba(203, 17, 132, 0.00) -11.29%, #CB1184 106.92%), #4C001B;
     box-shadow: 0px 6px 20.3px 0px rgba(255, 49, 177, 0.40);
     color: #FFF;
     font-family: Inter;
     font-size: 15.148px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     letter-spacing: -0.303px;
     text-decoration: none;
     display: inline-block;
     
     padding: 13px 20px;
     
     text-align: left;
     margin: 0 auto;
     margin-top: 30px;
      margin-bottom: 30px;
   }
   
   #services a img{
     float: right;
     display: inline;
     width: 30px;
     height: auto;
     margin-left: 80px;
   }
   
   #clients{
     text-align: center;
     padding-bottom: 120px;
   }
   
   #clients p{
     color: #8F8F8F;
     text-align: center;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.48px;
     margin-bottom: 30px;
   }
   
   #clients .rating{
     border-radius: 60.969px;
     border: 2.567px solid #EC00B8;
     background: linear-gradient(263deg, rgba(203, 17, 132, 0.00) -11.29%, #CB1184 106.92%), #4C001B;
     box-shadow: 0px 7.7px 26.052px 0px rgba(255, 49, 177, 0.40);
     text-align: center;
     padding: 15px 40px;
     display: inline-block;
     margin: 0 auto;
     margin-top: 30px;
   } 
   
   #clients .rating p{
     color: #FFF;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     letter-spacing: -0.48px;
     margin-bottom: 0px;
     margin-right: 30px;
     display: inline;
   }
   
   #footerCTA{
     background: url('img/footer-cta-background.jpg') no-repeat;
     background-size: cover;
     padding: 120px 0px;
     text-align: center;
   }
   
   #footerCTA p{
     color: #FFF;
     text-align: center;
     font-family: Inter;
     font-size: 32px;
     font-style: normal;
     font-weight: 300;
     line-height: 103.023%; /* 32.967px */
     letter-spacing: -1.28px;
     margin-bottom: 0px;
   }
   
   #footerCTA h2{
     color: #FFF;
     font-family: Inter;
     font-size: 46px;
     font-style: normal;
     font-weight: 500;
     line-height: 103.023%;
     letter-spacing: -1.84px;
     margin-top: -5px;
     margin-bottom: 30px;
   }
   
   #footerCTA p.ctaCopy{
     color: #FFF;
     text-align: center;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: 143.523%; /* 22.964px */
     letter-spacing: -0.48px;
     margin-bottom: 40px;
   }
   
   #footerCTA a{
     border-radius: 35.259px;
     border: 0.511px solid rgba(76, 102, 140, 0.36);
     background: #FFF;
     box-shadow: 0px 2.555px 6.643px 0px rgba(104, 150, 203, 0.31);
     display: inline-block;
     margin-right: 5px;
     margin-left: 5px;
     padding: 10px 20px;
     color: #5E5E5E;
     text-align: center;
     font-family: Inter;
     font-size: 18.737px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.375px;
     text-decoration: none;
   }
   
   #footer{
     padding: 60px 0px;
   }
   
   #footer h2{
     color: #4C4C4C;
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: 143.523%; /* 28.705px */
     letter-spacing: -0.6px;
     margin-bottom: 30px;
   }
   
   #footer ul{
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   #footer ul li{
     margin-bottom: 10px;
     color: #86919B;
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 143.523%; /* 22.964px */
      letter-spacing: -0.48px;
   }
   
   #footer ul li a{
     color: #86919B;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: 143.523%; /* 22.964px */
     letter-spacing: -0.48px;
     text-decoration: none;
   }
   
   #footer .legal{
     margin-top: 60px;
     padding-top: 60px;
     border-top: 1px solid #E3E3E3;
   }
   
   #footer .col-md-6 p{
     color: #86919B;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 143.523%; /* 20.093px */
     letter-spacing: -0.42px;
     margin-bottom: 10px;
     margin-left: 25px;
   }
   
   #footer .col-md-6 p a{
     color: #CB1184;
     text-decoration: underline;
   }
   
   #footer .contact{
     text-align: right;
     
   }
   
   #footer ul.social{
     margin-bottom: 25px;
      display: block;
   }
   
   #footer ul.social li{
     display: inline;
     margin-left: 10px
   }
   
   #footer ul.social li img{
     width: 22px;
     height: auto;
   }
   
   #footer .contact a{
     color: #86919B;
     text-align: right;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: 143.523%; /* 22.964px */
     letter-spacing: -0.48px;
     text-decoration: none;
   }
   
   #header .hero a.viewWork{
     display: none;
   } 
   
   .clientsIntro br{
     display: none;
   }
     
   
  /*Media Queries*/
  
  @media only screen and (max-width: 1200px) {
  /* For desktop: */
  }
  @media only screen and (max-width: 992px) {
  /* For desktop: */
  }
  @media only screen and (max-width: 768px) {
  /* For desktop: */
  
  #topBar{
    display: none;
  }
  
  #header{
    background: url('img/mobile-header.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    padding-bottom: 330px;
  }
  
  #header ul{
    display: none;
  }
  
  #header{
    text-align: center;
  }
  
  #header .col-md-3 a{
    display: none;
  }
  
  #header .hero{
    text-align: center;
    margin-top: 50px;
  }
  
  #header .hero a{
    width: 80%;
    text-align: left;
    margin: 0 auto;
    display: block;
    margin-top: 40px;
    margin-bottom: 0px;
  }  
  
  #header .hero img.clients{
    width: 150px;
    height: auto;
  }
  
  #header .hero img.montage{
    display: none;
  }
  
  #dashboard{
    padding-top: 90px;
    padding-bottom: 60px;
  }
  
  #dashboard .dashIntro h2{
    font-size: 52px;
  }
  
  #dashboard .dashIntro{
    margin-bottom: 30px;
  }
  
  #dashboard ul{
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }
  
  #dashboard p.more {
      color: #FFF;
      font-family: Inter;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 143.523%;
      letter-spacing: -0.6px;
      margin-bottom: 0px;
      margin-left: 66px;
  }
  
.clientsIntro br{
  display: block;
}
  
#dashboard img.dashpreview{
  display: none;
}

#services{
  padding-top: 60px;
  padding-bottom: 60px;
}

#services .col-md-12 h2{
  font-size: 52px;
}  

#services .servicesMiddle {
    margin-top: 0px;
}

#header .hero a.viewWork{
  border-radius: 60.969px;
  border: 2.567px solid #FFF;
  background: linear-gradient(263deg, rgba(230, 230, 230, 0.00) -11.29%, #D0D0D0 106.92%), #FFF;
  box-shadow: 0px 7.7px 26.052px 0px rgba(172, 172, 172, 0.40);
  width: 80%;
  text-align: left;
  margin: 0 auto;
  display: block;
  margin-top: 10px !important;
  margin-bottom: 50px;
  color: #151515;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.389px;
}  

#footer h2{
  display: none;
}

#footer ul{
  display: none;
}

#footer{
  text-align: center;
}

#footer img.logo{
  width: 150px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 30px;
}

#footer .col-md-6 p{
  margin-left: 0px;
}

#clients{
  display: none;
}

#footer ul.social{
  margin: 0 auto;
  text-align: center;
  float: none;
  margin-bottom: 20px;
}

#footer ul.social li img{
  width: 40px;
  height: auto;
}

#footer .contact{
  text-align: center;
}

  }
  @media only screen and (max-width: 590px) {
  /* For desktop: */
  }
  @media only screen and (max-width: 480px) {
  /* For desktop: */
  }
  @media only screen and (min-width: 320px) {
  /* For desktop: */
  }