/* ==========================================================================
   Online Web Marketing - subpage styles
   Loaded after css.css on every subpage (and on the home page for the
   .title-link card links). Colours and typography follow css.css:
   body Rubik 15px #212d31, headings Poppins, accent purple #5d26d9,
   dark navy #100739, footer #1a2024.
   ========================================================================== */

/* ---- Page hero ----------------------------------------------------------- */

.page-hero{background-color:#eef0f6;background-image:url(//cdn.online-webmarketing.com/SEO-BANNER-2.jpg);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/SEO-BANNER-2.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/SEO-BANNER-2.webp) 1x);background-position:center;background-size:cover;background-repeat:no-repeat;padding:150px 0 80px;text-align:left}
.page-hero .hero-kicker{font-family:Poppins;font-size:16px;font-weight:600;line-height:26px;color:#100739;margin:0 0 10px}
.page-hero h1{font-family:Poppins;font-size:41px;font-weight:700;line-height:45px;letter-spacing:-1px;color:#100739;margin:0 0 25px}
.page-hero .hero-lead{font-size:17px;line-height:26px;color:#100739;margin:0 0 35px;max-width:640px}
.page-hero .radiantthemes-custom-button-main{background-color:#5d26d9!important;border-color:#2767ff!important;border-style:solid!important;border-width:1px!important;border-radius:35px!important;padding:8px 28px!important;color:#fff!important;line-height:28px!important;font-size:15px!important}
.page-hero .radiantthemes-custom-button-main:hover{background-color:rgba(255,255,255,0.01)!important;color:#2767ff!important;border-color:#2767ff!important}

/* ---- Page sections ------------------------------------------------------- */

.page-section{padding:80px 0 20px}
.page-section h2{color:#100739}
.page-section .section-intro{font-size:16px;line-height:26px;color:#212d31;max-width:820px;margin-bottom:35px}
.page-section .section-kicker{font-family:Poppins;font-size:15px;font-weight:600;line-height:24px;color:#5d26d9;margin:0 0 8px}

/* Icon box - white line-art icons from the CDN sit on a purple chip,
   mirroring the home page services band (where the same icons are used on a dark photo). */
.icon-item{position:relative;min-height:76px;padding:0 0 0 88px;margin-bottom:35px}
.icon-item::before{content:"";position:absolute;left:0;top:2px;width:64px;height:64px;border-radius:16px;background-color:#5d26d9;background-repeat:no-repeat;background-position:center;background-size:34px 34px}
.icon-item h3{font-size:20px;line-height:28px;color:#100739;margin:0 0 10px}
.icon-item p{font-size:15px;line-height:26px;color:#212d31;margin-bottom:0}
.icon-lead::before{background-image:url(//cdn.online-webmarketing.com/lead.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/lead.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/lead.webp) 1x)}
.icon-aim::before{background-image:url(//cdn.online-webmarketing.com/aim.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/aim.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/aim.webp) 1x)}
.icon-hand-shake::before{background-image:url(//cdn.online-webmarketing.com/hand-shake.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/hand-shake.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/hand-shake.webp) 1x)}
.icon-globe::before{background-image:url(//cdn.online-webmarketing.com/globe.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/globe.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/globe.webp) 1x)}
.icon-result::before{background-image:url(//cdn.online-webmarketing.com/result.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/result.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/result.webp) 1x)}
.icon-work::before{background-image:url(//cdn.online-webmarketing.com/work.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/work.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/work.webp) 1x)}
.icon-report::before{background-image:url(//cdn.online-webmarketing.com/lead.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/lead.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/lead.webp) 1x)}
.icon-analytics::before{background-image:url(//cdn.online-webmarketing.com/result.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/result.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/result.webp) 1x)}
.icon-presentation::before{background-image:url(//cdn.online-webmarketing.com/hand-shake.png);background-image:-webkit-image-set(url(//cdn.online-webmarketing.com/hand-shake.webp) 1x);background-image:image-set(url(//cdn.online-webmarketing.com/hand-shake.webp) 1x)}

/* Stats row */
.stats-row{padding-top:10px}
.stats-row .stat h3{font-size:40px;line-height:50px;font-weight:400;color:#100739;letter-spacing:0;margin:0 0 10px}
.stats-row .stat h2{font-size:16px;line-height:28px;font-weight:500;color:#100739;margin:0}

/* Ticked benefit list */
.tick-list{margin:0 0 25px;padding:0;list-style:none}
.tick-list li{position:relative;padding:0 0 12px 32px;font-size:15px;line-height:26px;color:#212d31}
.tick-list li::before{content:"\f00c";font-family:FontAwesome;color:#5d26d9;position:absolute;left:0;top:0}

/* Highlight box (conversion maths, key facts) */
.highlight-box{background-color:#f4f2fd;border-left:4px solid #5d26d9;padding:25px 30px;margin:0 0 35px;font-size:16px;line-height:27px;color:#100739}
.highlight-box p:last-child{margin-bottom:0}

/* Wide illustration band (screenshots / dashboards) */
.figure-band{margin:20px 0 40px;text-align:center}
.figure-band img{max-width:100%;height:auto}
.figure-band figcaption{font-size:13px;line-height:22px;color:#6b7280;padding-top:10px}

/* ---- Call to action band -------------------------------------------------- */

/* Button base (subset of clean.css so subpages do not need an extra request) */
.radiantthemes-custom-button[data-button-direction=left]{text-align:left}
.radiantthemes-custom-button .radiantthemes-custom-button-main{position:relative;display:inline-block;vertical-align:top;text-align:center;transition:all .3s ease-in-out!important}
.radiantthemes-custom-button .radiantthemes-custom-button-main>.placeholder{position:relative}

.cta-band{background-color:#5d26d9;padding:55px 0}
.cta-band h2{color:#fff;font-size:28px;line-height:36px;margin:0 0 8px}
.cta-band p{color:rgba(255,255,255,0.85);font-size:15px;line-height:26px;margin:0}
.cta-band-btn{display:inline-block;background-color:#fff;color:#5d26d9!important;font-family:Poppins;font-weight:700;font-size:15px;line-height:28px;padding:10px 30px;border-radius:35px;text-align:center;border:1px solid #fff;transition:all .3s ease-in-out}
.cta-band-btn:hover{background-color:transparent;color:#fff!important;text-decoration:none!important}

/* ---- Contact form --------------------------------------------------------- */

.contact-details{list-style:none;margin:0 0 30px;padding:0}
.contact-details li{position:relative;padding:0 0 18px 34px;font-size:15px;line-height:26px;color:#212d31}
.contact-details li i{position:absolute;left:0;top:4px;color:#5d26d9;font-size:16px}
.contact-details li a{color:#5d26d9}
.contact-details li strong{color:#100739}

.contact-form .form-row{margin:0 -8px}
.contact-form .form-col{position:relative;min-height:1px;padding:0 8px 16px 8px}
.contact-form label{display:block;font-family:Poppins;font-weight:600;font-size:14px;color:#100739;margin:0 0 6px}
.contact-form label .required{color:#5d26d9}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=url],.contact-form textarea{width:100%;max-width:100%;padding:12px 16px;border:1px solid #d9dbe8;border-radius:6px;background-color:#fff;font-family:Rubik;font-size:15px;line-height:24px;color:#212d31;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.contact-form input:focus,.contact-form textarea:focus{border-color:#5d26d9;outline:none}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form .hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form .form-note{font-size:13px;line-height:22px;color:#6b7280;margin:0 0 18px}
.contact-form .submit-btn{display:inline-block;background-color:#5d26d9;color:#fff!important;font-family:Poppins;font-weight:700;font-size:15px;line-height:28px;padding:10px 32px;border-radius:35px;border:1px solid #2767ff;cursor:pointer;transition:all .3s ease-in-out}
.contact-form .submit-btn:hover{background-color:rgba(255,255,255,0.01);color:#5d26d9!important;border-color:#5d26d9}

.form-banner{display:none;padding:16px 20px;border-radius:6px;font-size:15px;line-height:26px;margin:0 0 22px}
.form-banner.ok{display:block;background-color:#e8f7ee;border:1px solid #34a853;color:#1e7e34}
.form-banner.error,.form-banner.invalid,.form-banner.spam{display:block;background-color:#fdecea;border:1px solid #e05252;color:#b3261e}

/* ---- Header quick navigation (subpages) ----------------------------------- */

.header-quicknav{margin:2px 0 0}
.header-quicknav li{display:inline-block;margin-left:14px}
.header-quicknav a{color:#fff;font-size:13px;line-height:24px;font-weight:500}
.header-quicknav a:hover{color:#2767ff;text-decoration:none!important}

/* ---- Footer links row ------------------------------------------------------ */

.footer-links{margin:0 0 12px}
.footer-links a{color:#fff;font-size:14px;line-height:26px}
.footer-links span.sep{color:rgba(255,255,255,0.4);margin:0 8px;font-size:14px}

/* ---- Home page card links (no visual change) -------------------------------- */

.title-link{color:inherit!important;text-decoration:none!important}
.title-link:hover{color:#5d26d9!important;text-decoration:none!important}

/* ---- Responsive ------------------------------------------------------------- */

@media (max-width:991px){
.page-hero{padding:130px 0 60px}
}
@media (max-width:767px){
.page-hero{padding:120px 0 50px}
.page-hero h1{font-size:30px;line-height:36px;margin-bottom:20px}
.page-hero .hero-kicker{font-size:14px;line-height:22px}
.page-hero .hero-lead{font-size:15px;line-height:24px;margin-bottom:28px}
.page-section{padding:55px 0 10px}
.icon-item{min-height:60px;padding:0 0 0 68px;margin-bottom:28px}
.icon-item::before{width:48px;height:48px;border-radius:12px;background-size:26px 26px}
.icon-item h3{font-size:18px;line-height:26px}
.header-quicknav li{margin-left:8px}
.header-quicknav a{font-size:11px;line-height:20px}
.header-side{float:none!important;text-align:right!important;padding:8px 12px 9px;margin:0 0 6px;background-color:rgba(16,7,57,0.38);border-radius:10px}
.header-side a{text-shadow:0 1px 2px rgba(16,7,57,0.45)}
.header_main .brand-logo{float:none!important}
.cta-band{padding:45px 0}
.cta-band h2{font-size:24px;line-height:32px}
.cta-band-action{margin-top:15px}
}
@media (min-width:768px){
.contact-form .form-col.half{float:left;width:50%}
.contact-form .form-row-full{clear:both}
.cta-band-action{text-align:right}
}