.elementor-17231 .elementor-element.elementor-element-1bf6746e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-126px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-75436da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-ea97c07{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-31f11fd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-4b26277{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-b3fa5e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-80fd526{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17231 .elementor-element.elementor-element-98b7093{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:4%;--padding-bottom:8%;--padding-left:5%;--padding-right:5%;}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-decoration:var( --e-global-typography-text-text-decoration );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-17231 .elementor-element.elementor-element-bb98286{--item-display:flex;--read-more-alignment:1;--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-17231 .elementor-element.elementor-element-bb98286:after{content:"0.66";}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__thumbnail__link{width:100%;}.elementor-17231 .elementor-element.elementor-element-bb98286.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-17231 .elementor-element.elementor-element-bb98286.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-17231 .elementor-element.elementor-element-bb98286.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__title, .elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__title a{color:var( --e-global-color-364eca9 );font-family:"Dosis", Sans-serif;font-size:24px;font-weight:400;}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__excerpt p{color:var( --e-global-color-secondary );font-family:"Tahoma", Sans-serif;font-size:16px;font-weight:300;text-decoration:none;}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__read-more{color:var( --e-global-color-90cbebd );}.elementor-17231 .elementor-element.elementor-element-bb98286 a.elementor-post__read-more{font-family:"Dosis", Sans-serif;font-size:21px;font-weight:400;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-17231 .elementor-element.elementor-element-98b7093{--padding-top:0%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-widget-posts .elementor-post__excerpt p{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-17231 .elementor-element.elementor-element-98b7093{--padding-top:0%;--padding-bottom:16%;--padding-left:4%;--padding-right:4%;}.elementor-widget-posts .elementor-post__excerpt p{font-size:var( --e-global-typography-text-font-size );}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-17231 .elementor-element.elementor-element-bb98286:after{content:"0.5";}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__thumbnail__link{width:100%;}.elementor-17231 .elementor-element.elementor-element-bb98286 .elementor-post__thumbnail{border-radius:25px 25px 25px 25px;}}/* Start custom CSS for html, class: .elementor-element-20f0038b *//* ====================================
   HERO SECTION
==================================== */

.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    padding: 150px 0px 50px;

    background-image:
        linear-gradient(
            90deg,
            rgba(6,11,20,.95) 0%,
            rgba(6,11,20,.80) 35%,
            rgba(6,11,20,.55) 55%,
            rgba(6,11,20,.15) 100%
        ),
        url('https://www.swarmingbee.co.uk/wp-content/uploads/2026/06/Swarming-Bee-Web-Design-Hero.jpg');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ====================================
   CONTAINER
==================================== */

.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;

    display: flex;
    align-items: center;
}

/* ====================================
   CONTENT
==================================== */

.hero-content {
    max-width: 650px;
}

/* ====================================
   TAG
==================================== */

.hero-tag {
    display: inline-block;

    margin-bottom: 24px;

    color: #f5b800;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ====================================
   HEADLINE
==================================== */

.hero-content h1 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(60px, 6vw, 92px);
    font-weight: 800;

    line-height: .95;
    letter-spacing: -2px;
}

.hero-content h1 span {
    display: block;
    color: #f5b800;
}

/* ====================================
   DESCRIPTION
==================================== */

.hero-description {
    margin-bottom: 40px;

    color: rgba(255,255,255,.80);

    font-size: 22px;
    line-height: 1.7;
    font-weight: 400;
}

/* ====================================
   BUTTONS
==================================== */

.hero-buttons {
    display: flex;
    gap: 20px;

    margin-bottom: 45px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 36px;

    background: #f5b800;
    color: #ffffff !important;

    text-decoration: none;
    font-weight: 700;

    border-radius: 14px;

    transition: all .3s ease;
}

.btn-primary:hover {
    background: #ffc928;
    transform: translateY(-3px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 36px;

    border: 1px solid rgba(255,255,255,.15);

    color: #ffffff;

    text-decoration: none;

    border-radius: 14px;

    transition: all .3s ease;
}

.btn-secondary:hover {
    background: rgba(255,255,255,.08);
        transform: translateY(-3px);
}

/* ====================================
   FEATURES
==================================== */

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255,255,255,.90);

    font-size: 15px;
    font-weight: 500;
}

.tick {
    color: #f5b800;
    font-weight: 700;
}

/* ====================================
   MOBILE
==================================== */

@media (max-width: 1024px) {

    .hero {
        background-position: 70% center;
    }

    .hero-container {
        padding: 0 40px;
    }

    .hero-content {
        max-width: 600px;
    }
}

@media (max-width: 768px) {

    .hero {
        padding: 200px 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(6,11,20,.92) 0%,
                rgba(6,11,20,.88) 100%
            ),
            url('https://www.swarmingbee.co.uk/wp-content/uploads/2026/06/Swarming-Bee-Web-Design-Hero.jpg');

        background-position: center;
    }

    .hero-container {
        padding: 0 25px;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 52px;
    }

    .hero-description {
        font-size: 18px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .hero-features {
        justify-content: center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-783b7e7 *//* ====================================
SECTION 2 - THE PROBLEM
==================================== */

.trades-problem-section {
padding: 120px 40px;
background: #0b1018;
}

.section-heading {
text-align: center;
max-width: 850px;
margin: 0 auto 80px;
}

.section-tag {
display: inline-block;
color: #f5b800;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}

.section-heading h2 {
color: #ffffff;
font-size: clamp(38px, 4vw, 58px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
}

.section-heading p {
color: rgba(255,255,255,.75);
font-size: 20px;
line-height: 1.8;
}

/* ====================================
GRID
==================================== */

.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

/* ====================================
CARD
==================================== */

.problem-card {

background: rgba(255,255,255,.03);

border: 1px solid rgba(255,255,255,.08);

border-radius: 24px;

overflow: hidden;

transition: all .3s ease;

}

.problem-card {

transform: translateY(-8px);

border-color: rgba(245,184,0,.4);

box-shadow:
    0 15px 40px rgba(0,0,0,.25),
    0 0 25px rgba(245,184,0,.08);

}

/* ====================================
IMAGE
==================================== */

.problem-image {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}

/* ====================================
CONTENT
==================================== */

.problem-card h3 {
color: #ffffff;
font-size: 30px;
font-weight: 700;

padding: 30px 30px 15px;

margin: 0;

}

.problem-card p {
color: rgba(255,255,255,.75);

font-size: 17px;
line-height: 1.8;

padding: 0 30px 35px;

margin: 0;

}

/* ====================================
TABLET
==================================== */

@media (max-width: 1024px) {

.problem-grid {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
}

.trades-problem-section {
    padding: 80px 20px;
}

}

/* ====================================
MOBILE
==================================== */

@media (max-width: 760px) {

.section-heading {
    margin-bottom: 50px;
}

.section-heading h2 {
    font-size: 34px;
}

.section-heading p {
    font-size: 18px;
}

.problem-card h3 {
    font-size: 24px;
    padding: 25px 25px 10px;
}

.problem-card p {
    padding: 0 25px 25px;
    font-size: 16px;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-461316e */.services-section {
padding: 120px 0;
background: #060b14;
}

.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}

.service-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 40px 30px;
transition: all .3s ease;
}

.service-card:hover {
transform: translateY(-8px);
border-color: rgba(245,184,0,.4);
box-shadow: 0 15px 40px rgba(245,184,0,.08);
}

.service-icon {
font-size: 48px;
margin-bottom: 25px;
}

.service-card h3 {
color: #fff;
font-size: 26px;
margin-bottom: 15px;
font-weight: 700;
}

.service-card p {
color: rgba(255,255,255,.75);
line-height: 1.8;
font-size: 16px;
}

@media (max-width: 1200px) {


.services-grid {
    grid-template-columns: repeat(2, 1fr);
}


}

@media (max-width: 768px) {


.services-section {
    padding: 80px 0;
}

.services-grid {
    grid-template-columns: 1fr;
}


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d3117c2 *//* ====================================
SECTION 4 - WHY CHOOSE SWARMING BEE
==================================== */

.why-choose-section {
padding: 120px 0;
background: #0b1018;
position: relative;
overflow: hidden;
}

.why-choose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}

/* ====================================
IMAGE
==================================== */

.why-image {
position: relative;
}

.why-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;

border-radius: 24px;

box-shadow:
    0 25px 60px rgba(0,0,0,.35),
    0 0 40px rgba(245,184,0,.08);

}

/* ====================================
CONTENT
==================================== */

.why-content h2 {
color: #ffffff;
font-size: clamp(36px, 4vw, 56px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
}

.intro-text {
color: rgba(255,255,255,.75);
font-size: 20px;
line-height: 1.8;
margin-bottom: 40px;
}

/* ====================================
BENEFITS
==================================== */

.benefits-list {
display: grid;
gap: 18px;
}

.benefit-item {
display: flex;
align-items: center;


padding: 18px 22px;

background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;

color: #ffffff;
font-size: 18px;
font-weight: 500;

transition: all .3s ease;


}

.benefit-item:hover {
border-color: rgba(245,184,0,.4);
transform: translateX(6px);
background: rgba(255,255,255,.05);
}

/* ====================================
TABLET
==================================== */

@media (max-width: 1024px) {


.why-choose-section {
    padding: 80px 0;
}

.why-choose-grid {
    grid-template-columns: 1fr;
    gap: 50px;
}

/* Text first on tablet */

.why-content {
    order: 1;
    text-align: center;
}

.why-image {
    order: 2;
    text-align: center;
}

.why-image img {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.intro-text {
    max-width: 700px;
    margin: 0 auto 40px;
}

.benefits-list {
    max-width: 700px;
    margin: 0 auto;
}

.benefit-item {
    text-align: left;
}


}

/* ====================================
MOBILE
==================================== */

@media (max-width: 768px) {


.why-choose-section {
    padding: 60px 0;
}

.why-content h2 {
    font-size: 36px;
}

.intro-text {
    font-size: 18px;
    line-height: 1.7;
}

.benefits-list {
    gap: 12px;
}

.benefit-item {
    padding: 16px;
    font-size: 16px;
}

.why-image img {
    border-radius: 18px;
}


}

/* ====================================
SMALL PHONES
==================================== */

@media (max-width: 480px) {


.why-content h2 {
    font-size: 30px;
}

.intro-text {
    font-size: 16px;
}

.benefit-item {
    font-size: 15px;
    padding: 14px;
}


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ece0e6 */.results-section {
padding: 120px 0;
background: #060b14;
}

.results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 60px;
margin-bottom: 80px;
}

.result-card {
text-align: center;
padding: 50px 35px;


background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;

transition: .3s ease;


}

.result-card:hover {
transform: translateY(-8px);
border-color: rgba(245,184,0,.4);
}

.result-number {
font-size: 64px;
font-weight: 800;
color: #f5b800;
margin-bottom: 20px;
}

.result-card h3 {
color: #ffffff;
margin-bottom: 15px;
font-size: 26px;
}

.result-card p {
color: rgba(255,255,255,.75);
line-height: 1.8;
}

.testimonial-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.testimonial-card {
padding: 35px;


background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;


}

.testimonial-card p {
color: rgba(255,255,255,.85);
font-size: 18px;
line-height: 1.8;
margin-bottom: 20px;
}

.testimonial-card h4 {
color: #f5b800;
font-size: 16px;
margin: 0;
}

@media (max-width: 1024px) {


.results-grid {
    grid-template-columns: 1fr;
}

.testimonial-wrapper {
    grid-template-columns: 1fr;
}


}

@media (max-width: 768px) {


.results-section {
    padding: 80px 0;
}

.result-number {
    font-size: 48px;
}

.result-card h3 {
    font-size: 22px;
}


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22a5dfc *//* ====================================
FAQ SECTION
==================================== */

.faq-section {
padding: 120px 0;
background: #060b14;
}

.faq-container {
max-width: 1000px;
margin: 80px auto 0;
}

.faq-item {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
margin-bottom: 20px;
overflow: hidden;
transition: all .3s ease;
}

.faq-item {
border-color: rgba(245,184,0,.25);
}

.faq-item summary {
list-style: none;
cursor: pointer;

padding: 32px 40px;
padding-right: 80px;

color: #ffffff;
font-size: 22px;
font-weight: 600;
line-height: 1.5;

position: relative;

}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: "+";
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-50%);
color: #f5b800;
font-size: 32px;
font-weight: 300;
transition: .3s ease;
}

.faq-item[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}

.faq-content {
padding: 0 40px 35px;
}

.faq-content p {
margin: 0;
color: rgba(255,255,255,.75);
font-size: 18px;
line-height: 1.9;
}

/* Tablet */

@media (max-width: 760px) {

.faq-section {
    padding: 80px 0;
}

.faq-item summary {
    padding: 24px;
    padding-right: 60px;
    font-size: 18px;
}

.faq-item summary::after {
    right: 20px;
    font-size: 28px;
}

.faq-content {
    padding: 0 24px 24px;
}

.faq-content p {
    font-size: 16px;
    line-height: 1.8;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-619e5e0 *//* ====================================
SECTION 6 - FINAL CTA
==================================== */

.final-cta-section {
padding: 120px 0;
background: #0b1018;
}

.cta-card {

max-width: 1000px;
margin: 0 auto;

text-align: center;

padding: 80px 60px;

background:
    linear-gradient(
        135deg,
        rgba(245,184,0,.08),
        rgba(255,255,255,.02)
    );

border: 1px solid rgba(245,184,0,.15);
border-radius: 24px;

box-shadow:
    0 25px 60px rgba(0,0,0,.25),
    0 0 40px rgba(245,184,0,.05);

}

.cta-card h2 {
color: #ffffff;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.1;
font-weight: 800;
margin-bottom: 25px;
}

.cta-card p {
max-width: 700px;
margin: 0 auto 40px;

color: rgba(255,255,255,.80);

font-size: 20px;
line-height: 1.8;

}

.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}

.cta-benefits {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;

color: rgba(255,255,255,.85);
font-size: 15px;
font-weight: 500;

}

/* ====================================
TABLET
==================================== */

@media (max-width: 1024px) {

.final-cta-section {
    padding: 80px 0;
}

.cta-card {
    padding: 60px 40px;
}

}

/* ====================================
MOBILE
==================================== */

@media (max-width: 768px) {

.cta-card {
    padding: 50px 25px;
}

.cta-card p {
    font-size: 18px;
}

.cta-buttons {
    flex-direction: column;
}

.cta-benefits {
    gap: 15px;
    flex-direction: column;
}

}/* End custom CSS */