/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}


body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  max-width: 1000px;
  margin: 40px auto;
  font-family: "Rubik", sans-serif;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

leftheader,
logo,
rightheader,
hours,
phonenum,
leftmain,
contactbutton,
bullets,
bullet1,
NICEICbox,
NICEICtitle,
NICEICtext,
otherlogos,
rightmain,
testimonials,
testimonialstitle,
testimonialstext,
fullwidthnotice,
fullwidthleft,
fullwidthtitle,
fullwidthtext,
fullwidthright,
services,
servicestitle,
servicetype,
servicetitle,
servicedescription,
seeourwork,
seeourworktitle,
seeourworkvideo,
locations,
locationstitle,
locationsmap,
locationslist,
locationstext,
locationitem,
contact,
contactleft,
contacttitle,
contactform,
contactright,
pricingtitle,
pricingprice,
small,
pricingbullet,
pricingtext,
contactfull,
contactwhatsapp,
contactemail,
contactnumber {
	display: block;
}


leftheader {  vertical-align: top;height: 100px;  width: 39%; display: inline-block;}
logo { }
logo img {height: 100px; border-radius: 20px;}
rightheader { vertical-align: top; height: 100px; width: 60%;  display: inline-block;}
hours { position: relative; line-height: 120%; margin-top: 25px;text-align:center; font-weight: 500; width: 49%;  display: inline-block;}
hours::before {
content: "";
    display: inline-block;
    width: 55px;
    height: 55px;
    background-image: url(open.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 2px;
    top: -12px;
}


phonenum { position: relative;  top:2px; font-weight: 500;  font-size: 140%; width: 50%;  display: inline-block;}
phonenum small{background: transparent; font-size: 70%; margin-top:-10px;}
phonenum::before {
content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(phone-call.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -50px;
}


main{background: #156dbc; margin-top: 30px; border-radius: 40px;}
h1,h2{color:white}
leftmain { width: 60%;  display: inline-block}
mainarea{ display: inline-block; width: calc(100% - 40px); border-radius: 20px; margin: 30px 20px 0;}
h1{font-weight: 600; display: block; padding: 20px 20px 0 20px; font-size: 400%; line-height: 100%;}
h2{font-weight: 400; line-height: 130%; display: block; padding: 20px; font-size: 150%;}
contactbutton { position: relative;background: #083e6f; color: white; display: block; padding: 20px 30px; margin: 20px; width: 344px; text-align: left; font-size: 160%; border-radius: 20px}
contactbutton small {color:rgba(255,255,255,0.5); background: transparent; font-size: 70%; display: block; height: 25px; margin-top: -10px;}

contactbutton::before {
content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    background-image: url(communicate.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 30px;
    top: 25px;
}


bullets {padding: 20px;padding-left: 46px; color: white; }
bullet1 { position: relative; margin-left: 20px;display: inline-block; width: calc(49% - 20px); margin-bottom: 10px;font-weight: 500; font-size: 120%;}
bullet2 { position: relative; margin-left: 20px;display: inline-block; width: calc(49% - 20px); margin-bottom: 10px;font-weight: 500; font-size: 120%;}
bullet3 { position: relative; margin-left: 20px;display: inline-block; width: calc(49% - 20px); margin-bottom: 10px;font-weight: 500; font-size: 120%;}
bullet4 { position: relative; margin-left: 20px;display: inline-block; width: calc(49% - 20px); margin-bottom: 10px;font-weight: 500; font-size: 120%;}

bullet1::before {
content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url(video-call.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -38px;
    top: -3px;
}
bullet2::before {
content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url(checka.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -38px;
    top: -3px;
}
bullet3::before {
content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url(favorite.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -38px;
    top: -3px;
}
bullet4::before {
content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url(cake.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -38px;
    top: -3px;
}

NICEICbox { background: #8eff9d; border-radius: 20px; margin: 20px 40px 40px; }
NICEICtitle { position: relative; margin-left: 70px; margin-top: 20px; font-size: 160%; line-height: 120%;padding: 30px 20px 0 20px;display:block;}
NICEICtitle::before {
content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url(shield.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -55px;
    top: 30px;
}

a{ color: white; text-decoration:none}
a:hover{color:#3fe73f;}
a contactbutton{text-decoration: none;}
contactbutton:hover{background: #3fe73f; font-weight:bold;}
NICEICtext a{color: blue;text-decoration: underline}
NICEICtext a:hover{text-decoration: underline}
fullwidthtitle a{color: #fff; text-decoration: underline}
fullwidthtitle a:hover{color: #3fe73f; text-decoration: underline}

NICEICtext { font-size: 120%; line-height: 120%;padding: 20px 20px 20px 20px;display:block; }
otherlogos { margin-bottom: 20px; padding-bottom: 5px;}
otherlogos img{  display: inline-block; height:80px!important;width:auto!important;  }
rightmain { width: 39%;  display: inline-block; vertical-align:top; margin-top: 60px;}
rightmain img{    width: 90%;
height: 458px;
border-radius: 5px; margin-bottom: 100px;}
testimonials { background: #ffc889;  font-family: "Caveat", cursive;
border-radius: 30px;
margin-right: 30px; position: relative;
margin-bottom: 40px;}

.price-badge {
  /* look & layout */
  --bg1: #2b6cb0;
  --bg2: #63a4ff;
  --shadow: 0 6px 18px rgba(0,0,0,.18);
  display: inline-block;
  padding: 12px 22px 14px;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  line-height: 0.9;
  position: relative;
  isolation: isolate;     /* keep shadows/clip clean */
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.15)) /* sheen */,
    linear-gradient(135deg, var(--bg1), var(--bg2));
  box-shadow: var(--shadow);
  border-radius: 14px;

  /* make the shape a “tag” with a right-side notch */
  clip-path: polygon(
    0% 0%,  calc(100% - 24px) 0%,
    100% 50%,               /* notch tip */
    calc(100% - 24px) 100%, 0% 100%, 0% 0%
  );


  position: absolute;
  left: -30px;
  top: -10px;
  transform: rotate(9deg);
}

/* big top line: £80/ */
.price-badge::before {
  content: "/";
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* small bottom line: hour */
.price-badge::after {
  content: "";
  display: block;
  font-size: .8rem;
  opacity: .95;
  margin-top: 2px;
}

.gridphotos{
        display: inline-block;
    width: 20%;
    margin: 1%;
}

/* optional: a thin accent bar on the left for extra flair */
.price-badge::marker { /* no-op safeguard for some UAs */ }
.price-badge:has(*) {} /* placeholder to avoid accidental grouping */

.price-badge::before,
.price-badge::after { position: relative; z-index: 1; }

.price-badge::selection { background: rgba(255,255,255,.2); }

/* decorative left accent using a background gradient layer */
.price-badge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.15)),
    linear-gradient(135deg, var(--bg1), var(--bg2)),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) left/4px 100% no-repeat;
}


testimonials img {height: 87px;
    margin: 21px auto;
    width: auto;}
testimonialstitle {     font-size: 262%; line-height: 80%; text-align: right;
    margin: 40px 40px 0 40px; padding-top:20px; font-weight: 800;}
testimonialstext {     font-size: 190%; line-height:  100%;
   margin: 10px 30px 30px 30px; }
fullwidthnotice { padding: 10px 20px 15px; background: #df3232; border-radius: 10px; margin: 30px 0;}
fullwidthleft {  vertical-align: top;width: calc(100% - 120px); display: inline-block;}
fullwidthtitle { color: #fff; display: block; font-size: 200%; font-weight:bold }
fullwidthtext { width: 80%; line-height: 110%; color: #fff; display: block; font-size: 140%; font-weight:400; margin-top: -0px}
fullwidthright { display: inline-block; width: 100px; }
fullwidthright img{    top: 28px;
    position: relative;
    margin-left: -37px;
    margin-top: -108px;
    width: 175px;
    height: 175px;
    max-width: unset;
    -webkit-filter: drop-shadow(5px 5px 0px #222);
    filter: drop-shadow(5px 5px 0px #222);
        transform: rotate(14deg);
    animation: sway 1s ease-in-out infinite;

}
services {  }
servicestitle { margin-bottom: 20px; display: block; font-size: 300%; color: black; text-align: center; font-weight: bold;}
servicetype { color: white; min-height: 220px; text-align: center; background: #0056a4; border-radius: 20px; padding: 20px; display: inline-block; margin-right: 1%; margin-bottom: 20px;width: 32%; vertical-align: top; }
/* Every other servicetype (2nd, 4th, 6th, etc.) */
servicetype:nth-child(even) {
	background: #156dbc;
}

@keyframes sway {
    0%   { transform: rotate(9deg); }   /* 14 - 5 */
    50%  { transform: rotate(19deg); }  /* 14 + 5 */
    100% { transform: rotate(9deg); }   /* back to start */
}

servicetitle { font-weight: bold; font-size: 120%; line-height: 100%;}
servicetype svg {margin: auto; margin-bottom: 10px;}
servicedescription { line-height: 110%; margin-top:10px;  font-size: 90%;}
seeourwork  { }
seeourworktitle {  margin-bottom: 20px; display: block; font-size: 300%; color: black; text-align: center; font-weight: bold;} 
seeourworkvideo {  text-align:center; margin-bottom: 40px;}
seeourworkvideo iframe {margin:auto; width: 100%;}
locations {  margin-bottom: 40px; border-radius: 50px; padding: 40px; background: #f9ffbe; vertical-align: top; }
locationstitle {  margin-bottom: 20px; display: block; font-size: 300%; color: black; text-align: center; font-weight: bold;} 
locationsmap { width: 50%; display: inline-block; }
locationsmap img {border-radius: 50px;}
locationslist { vertical-align: top;  width: 49%; padding: 20px;  display: inline-block; }
locationstext { margin-bottom: 10px; font-weight: 500; font-size: 150%;  line-height: 120%;}
locationitem { font-size: 100%; display: inline-block; width: 49%; }
contact {  margin-bottom: 20px; display: block; font-size: 200%; color: black; text-align: center; font-weight: bold; }
contactleft { width: 45%; display: inline-block; vertical-align: top;}
contacttitle {  text-align:left; }
contactform { background: #2ecc71; }
contactright { padding: 20px; background: #156DBD; width: 49%; display: inline-block; vertical-align: top; border-radius: 30px;}
pricingtitle {  }
pricingprice { font-size: 240%;  margin: 20px; line-height: 60%;}
pricingprice small { font-size: 40%;   }
pricingbullet { font-size: 60%; }
pricingtext { background: #2980b9; }
contactfull { background: #8e44ad;    }
contactwhatsapp {    position: relative;
    background: #083e6f;
    color: white;
    display: block;
    padding: 20px 30px 20px 60px;
    margin: 10px 0;
    width: calc(100% - 20px);
    text-align: left;
    font-size: 73%;
    border-radius: 20px;}
contactemail {     position: relative;
    background: #083e6f;
    color: white;
    display: block;
    padding: 20px 30px 20px 60px;
    margin: 10px 0;
    width: calc(100% - 20px);
    text-align: left;
    font-size: 73%;
    border-radius: 20px;}
contactnumber {     position: relative;
    background: #083e6f;
    color: white;
    display: block;
    padding: 20px 30px 20px 60px;
    margin: 10px 0;
    width: calc(100% - 20px);
    text-align: left;
    font-size: 73%;
    border-radius: 20px;}



contactnumber::before {
content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(phone-call.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 14px;
    top: px;
}
contactemail::before {
content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(email.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 13px;
    top: 20px;
}

.test{font-family: sans-serif; font-size: 120%;color: #373737;
    font-weight: bold;
    margin-top: -20px;
    text-align: center;
    padding-bottom: 20px;}
footer{
  text-align:center;
}














@media screen and (max-width: 768px) {


leftheader,
logo,
rightheader,
hours,
phonenum,
leftmain,
contactbutton,
bullets,
bullet1,
NICEICbox,
NICEICtitle,
NICEICtext,
otherlogos,
rightmain,
testimonials,
testimonialstitle,
testimonialstext,
fullwidthnotice,
fullwidthleft,
fullwidthtitle,
fullwidthtext,
fullwidthright,
services,
servicestitle,
servicetype,
servicetitle,
servicedescription,
seeourwork,
seeourworktitle,
seeourworkvideo,
locations,
locationstitle,
locationsmap,
locationslist,
locationstext,
locationitem,
contact,
contactleft,
contacttitle,
contactform,
contactright,
pricingtitle,
pricingprice,
small,
pricingbullet,
pricingtext,
contactfull,
contactwhatsapp,
contactemail,
contactnumber {
  width: 98%; margin: 1%;
}
main{border-radius: 5px;}
h1{font-size: 280%;}
.price-badge{display:none;}
bullet1,bullet2,bullet3,bullet4{display:block; width: 100%; margin-left:0; margin-top:10px; margin-bottom:0;}
fullwidthright img{right: -21px;
    top: 30px;
    position:absolute;
    width: 94px;
    height: 94px;}
    fullwidthright{
        overflow: clip;
    }
    fullwidthnotice{position: relative;}
fullwidthtitle{line-height:0.9}
fullwidthnotice{margin-top: 20px}
servicestitle{font-size: 240%; margin-top: 30px}
servicedescription{display:none;}
servicetype{min-height: auto; padding: 7px;}
servicetype svg{        display: inline-block;
        width: 14%;
        height: 40px;
        text-align: left;
        float: left;
    }
    
    .gridphotos{
        display: inline-block;
    width: 47%;
    margin: 1%;
}


servicetitle{        width: 70%;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        font-size: 21px;}

        footeR{margin-top: 40px; padding: 20px}
        .mainpic{display:none}

        testimonials{ background: transparent; color: white!important}
        testimonialstitle{ display: none;}
        testimonialstext{ display: none;}
        testimonials a small {color: white!important;}
        logo img{height: 143px;
    margin: auto;}
    rightheader{margin-top: 60px;}
    hours::before{left: 40px;}
    phonenum{text-align:center;}
    phonenum::before{left: 40px;}
}