1 .sbc-case-studies { 2 padding: 10px 40px; 3 } 4 5 .single-project .page-content { 6 max-width: 700px; 7 margin: 0 auto; 8 padding: 20px 20px 60px 20px; 9 } 10 11 .single-project .page-content h2, 12 .single-project .page-content h3 { 13 margin-top: 36px; 14 margin-bottom: 12px; 15 color: #222; 16 } 17 18 .single-project .page-content h2:first-child, 19 .single-project .page-content h3:first-child { 20 margin-top: 0; 21 } 22 23 .single-project .page-content p { 24 line-height: 1.75; 25 color: #444; 26 margin-bottom: 16px; 27 } 28 29 .single-project .page-content img { 30 max-width: 100%; 31 height: auto; 32 display: block; 33 margin: 16px auto; 34 border-radius: 8px; 35 } 36 37 .single-project .page-content a { 38 color: #108DFF; 39 } 40 41 .sbc-project-single__image { 42 border-radius: 8px; 43 overflow: hidden; 44 } 45 46 .sbc-project-single__image img { 47 width: 100%; 48 height: auto; 49 display: block; 50 } 51 52 .sbc-project-single__cats { 53 margin-top: 16px; 54 font-size: 13px; 55 color: #888; 56 } 57 58 .sbc-project-single__back { 59 margin-top: 24px; 60 } 61 62 .sbc-project-single__back a { 63 color: #108DFF; 64 text-decoration: none; 65 font-weight: 700; 66 } 67 68 .sbc-project-single__back a:hover { 69 text-decoration: underline; 70 } 71 72 .sbc-case-swiper { 73 overflow: hidden; 74 } 75 76 .sbc-case-item { 77 display: flex; 78 flex-direction: column; 79 background: #fff; 80 border-radius: 8px; 81 overflow: hidden; 82 box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); 83 height: 100%; 84 } 85 86 .sbc-case-item__thumb { 87 display: block; 88 padding: 14px 14px 0 14px; 89 } 90 91 .sbc-case-item__thumb-inner { 92 aspect-ratio: 4 / 3; 93 overflow: hidden; 94 border-radius: 6px; 95 } 96 97 .sbc-case-item__thumb img { 98 width: 100%; 99 height: 100%; 100 object-fit: cover; 101 display: block; 102 transition: transform 0.35s ease; 103 } 104 105 .sbc-case-item:hover .sbc-case-item__thumb img { 106 transform: scale(1.06); 107 } 108 109 .sbc-case-item__title { 110 display: block; 111 padding: 16px 18px 4px 18px; 112 font-weight: 700; 113 font-size: 16px; 114 color: #222; 115 text-decoration: none; 116 } 117 118 .sbc-case-item__title:hover { 119 color: #108DFF; 120 } 121 122 .sbc-case-item__cats { 123 padding: 0 18px 16px 18px; 124 font-size: 12px; 125 color: #888; 126 } 127 128 .sbc-case-swiper__nav { 129 display: flex; 130 align-items: center; 131 justify-content: center; 132 gap: 18px; 133 margin-top: 24px; 134 } 135 136 .sbc-case-swiper__prev, 137 .sbc-case-swiper__next { 138 width: 40px; 139 height: 40px; 140 border-radius: 50%; 141 border: 1px solid #ddd; 142 background: #fff; 143 cursor: pointer; 144 position: relative; 145 flex: 0 0 auto; 146 transition: background 0.2s ease, border-color 0.2s ease; 147 } 148 149 .sbc-case-swiper__prev:hover, 150 .sbc-case-swiper__next:hover { 151 background: #108DFF; 152 border-color: #108DFF; 153 } 154 155 .sbc-case-swiper__prev::before, 156 .sbc-case-swiper__next::before { 157 content: ""; 158 position: absolute; 159 top: 50%; 160 left: 50%; 161 width: 9px; 162 height: 9px; 163 border-top: 2px solid #666; 164 border-right: 2px solid #666; 165 transition: border-color 0.2s ease; 166 } 167 168 .sbc-case-swiper__prev:hover::before, 169 .sbc-case-swiper__next:hover::before { 170 border-color: #fff; 171 } 172 173 .sbc-case-swiper__prev::before { 174 transform: translate(-30%, -50%) rotate(-135deg); 175 } 176 177 .sbc-case-swiper__next::before { 178 transform: translate(-70%, -50%) rotate(45deg); 179 } 180 181 .sbc-case-swiper .swiper-pagination { 182 position: static; 183 width: auto; 184 display: flex; 185 align-items: center; 186 gap: 8px; 187 } 188 189 .sbc-case-swiper .swiper-pagination-bullet { 190 width: 8px; 191 height: 8px; 192 background: #ddd; 193 opacity: 1; 194 margin: 0; 195 } 196 197 .sbc-case-swiper .swiper-pagination-bullet-active { 198 background: #108DFF; 199 } 200 201 @media (max-width: 600px) { 202 .sbc-case-studies { 203 padding: 10px 10px; 204 } 205 } 206 207 /* ======================================== 208 PROJECT HERO SECTION 209 ======================================== */ 210 .sbc-project-hero { 211 position: relative; 212 width: 100%; 213 min-height: 420px; 214 background-size: cover; 215 background-position: center; 216 display: flex; 217 align-items: center; 218 justify-content: center; 219 overflow: hidden; 220 } 221 .sbc-project-hero-overlay { 222 position: absolute; 223 inset: 0; 224 background: rgba(15, 23, 30, 0.55); 225 display: flex; 226 align-items: center; 227 justify-content: center; 228 padding: 60px 20px; 229 } 230 .sbc-hero-title { 231 color: #fff !important; 232 font-size: clamp(28px, 5vw, 48px) !important; 233 font-weight: 700; 234 font-family: 'Bague', sans-serif; 235 text-align: center; 236 margin: 0 !important; 237 text-shadow: 0 2px 12px rgba(0,0,0,0.25); 238 max-width: 800px; 239 } 240 .sbc-project-header .entry-title { 241 font-size: clamp(28px, 5vw, 42px); 242 font-weight: 700; 243 font-family: 'Bague', sans-serif; 244 text-align: center; 245 margin: 0; 246 padding: 80px 20px 40px; 247 } 248 249 /* Hide default page-header when hero is present */ 250 .sbc-project-single .page-header { 251 display: none; 252 } 253 254 /* ======================================== 255 PROJECT CONTENT AREA 256 ======================================== */ 257 .sbc-project-single .page-content { 258 max-width: 960px; 259 margin: 0 auto; 260 padding: 40px 20px 80px 20px; 261 } 262 .sbc-project-single .page-content h1 { 263 font-size: clamp(24px, 4vw, 36px); 264 font-weight: 700; 265 font-family: 'Bague', sans-serif; 266 color: #222; 267 margin-top: 40px; 268 margin-bottom: 12px; 269 line-height: 1.3; 270 } 271 .sbc-project-single .page-content h4 { 272 font-size: clamp(20px, 3vw, 26px); 273 font-weight: 700; 274 font-family: 'Bague', sans-serif; 275 color: #222; 276 margin-top: 32px; 277 margin-bottom: 10px; 278 line-height: 1.3; 279 } 280 .sbc-project-single .page-content p { 281 line-height: 1.75; 282 color: #444; 283 margin-bottom: 16px; 284 font-size: 16px; 285 } 286 .sbc-project-single .page-content strong { 287 color: #23b7f3; 288 font-weight: 700; 289 } 290 291 /* Images: nice shadow + border-radius */ 292 .sbc-project-single .page-content img { 293 max-width: 100%; 294 height: auto; 295 display: block; 296 margin: 20px auto; 297 border-radius: 10px; 298 box-shadow: 0 4px 20px rgba(0,0,0,0.10); 299 transition: transform 0.3s ease, box-shadow 0.3s ease; 300 } 301 .sbc-project-single .page-content img:hover { 302 transform: scale(1.015); 303 box-shadow: 0 6px 28px rgba(0,0,0,0.16); 304 } 305 306 /* ======================================== 307 GALLERY SECTIONS (multiple images together) 308 ======================================== */ 309 /* When there are many sequential images without text between them, 310 let them flow in a responsive grid */ 311 .sbc-project-single .page-content img + img { 312 margin-top: 12px; 313 } 314 .sbc-project-single .page-content img:only-child { 315 margin-bottom: 0; 316 } 317 318 /* ======================================== 319 STAT LINES / RESULTS 320 ======================================== */ 321 .sbc-project-single .page-content p:last-child { 322 font-weight: 600; 323 color: #333; 324 font-size: 15px; 325 letter-spacing: 0.2px; 326 } 327 328 /* ======================================== 329 LINKS & CTA 330 ======================================== */ 331 .sbc-project-single .page-content a { 332 color: #23b7f3; 333 text-decoration: underline; 334 text-decoration-color: rgba(35,183,243,0.3); 335 text-underline-offset: 3px; 336 transition: text-decoration-color 0.2s; 337 } 338 .sbc-project-single .page-content a:hover { 339 text-decoration-color: #23b7f3; 340 } 341 342 /* ======================================== 343 BACK LINK 344 ======================================== */ 345 .sbc-project-single .page-content .sbc-project-single__back a { 346 display: inline-flex; 347 align-items: center; 348 gap: 6px; 349 color: #23b7f3; 350 font-weight: 700; 351 text-decoration: none; 352 margin-top: 32px; 353 padding: 10px 0; 354 font-size: 15px; 355 } 356 .sbc-project-single .page-content .sbc-project-single__back a:hover { 357 text-decoration: underline; 358 } 359 360 /* ======================================== 361 PROJECT CONTENT POLISH (gallery, CTA, results) 362 ======================================== */ 363 364 /*

blocks containing only images -> responsive grid */ 365 .sbc-project-single .page-content .sbc-gallery { 366 display: grid; 367 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 368 gap: 16px; 369 margin: 34px 0; 370 padding: 18px; 371 background: #f7f9f9; 372 border-radius: 14px; 373 } 374 .sbc-project-single .page-content .sbc-gallery a.sbc-gallery-item { 375 display: block; 376 text-decoration: none; 377 } 378 .sbc-project-single .page-content .sbc-gallery img, 379 .sbc-project-single .page-content .sbc-gallery a.sbc-gallery-item img { 380 display: block; 381 width: 100%; 382 height: auto; 383 margin: 0; 384 border-radius: 10px; 385 box-shadow: 0 4px 14px rgba(0,0,0,0.12); 386 } 387 .sbc-project-single .page-content .sbc-gallery a.sbc-gallery-item:hover img { 388 transform: translateY(-3px); 389 box-shadow: 0 10px 24px rgba(0,0,0,0.20); 390 } 391 .sbc-project-single .page-content .sbc-gallery .sbc-gallery-item + .sbc-gallery-item { 392 margin-top: 0; 393 } 394 395 /* Standalone CTA paragraph -> centered pill button */ 396 .sbc-project-single .page-content .sbc-cta-wrap { 397 text-align: center; 398 margin: 38px 0 26px; 399 } 400 .sbc-project-single .page-content a.sbc-cta-btn { 401 display: inline-block; 402 background: #23b7f3; 403 color: #ffffff; 404 font-family: 'Bague', sans-serif; 405 font-weight: 700; 406 font-size: 17px; 407 line-height: 1.2; 408 letter-spacing: 0.3px; 409 padding: 14px 36px; 410 border-radius: 33px; 411 text-decoration: none; 412 box-shadow: 0 6px 18px rgba(35,183,243,0.35); 413 transition: background 0.2s, transform 0.2s, box-shadow 0.2s; 414 } 415 .sbc-project-single .page-content a.sbc-cta-btn:hover { 416 background: #1ca2d8; 417 color: #ffffff; 418 text-decoration: none; 419 transform: translateY(-1px); 420 box-shadow: 0 10px 24px rgba(35,183,243,0.45); 421 } 422 423 /* Mixed paragraph (stats/feature image + CTA) -> result card */ 424 .sbc-project-single .page-content p.sbc-results { 425 background: #f7f9f9; 426 border: 1px solid #e9eef1; 427 border-radius: 16px; 428 padding: 30px 32px; 429 margin: 38px 0; 430 text-align: center; 431 color: #2b3840; 432 font-size: 15px; 433 line-height: 1.8; 434 font-weight: 400; 435 letter-spacing: 0; 436 } 437 .sbc-project-single .page-content .sbc-results img, 438 .sbc-project-single .page-content .sbc-results a img { 439 margin: 0 auto 12px; 440 border-radius: 10px; 441 box-shadow: 0 4px 14px rgba(0,0,0,0.12); 442 } 443 .sbc-project-single .page-content p.sbc-results br { 444 display: none; 445 } 446 447 /* ======================================== 448 RESPONSIVE 449 ======================================== */ 450 @media (max-width: 768px) { 451 .sbc-project-hero { 452 min-height: 300px; 453 } 454 .sbc-project-single .page-content { 455 padding: 24px 16px 60px 16px; 456 } 457 .sbc-project-single .page-content .sbc-gallery { 458 grid-template-columns: repeat(2, 1fr); 459 gap: 10px; 460 padding: 12px; 461 } 462 .sbc-project-single .page-content a.sbc-cta-btn { 463 display: block; 464 text-align: center; 465 font-size: 16px; 466 } 467 .sbc-project-single .page-content p.sbc-results { 468 padding: 22px 16px; 469 text-align: center; 470 } 471 } 472 473 /* ======================================== 474 HOMEPAGE — SOCIALME.gr 475 ======================================== */ 476 477 /* --- Section Titles --- */ 478 .sbc-home-title { 479 position: relative; 480 margin-bottom: 10px; 481 } 482 483 .sbc-title-bar { 484 display: block; 485 width: 60px; 486 height: 4px; 487 border-radius: 2px; 488 margin: 16px auto 0; 489 } 490 491 .sbc-title-left .sbc-title-bar { 492 margin-left: 0; 493 margin-right: auto; 494 } 495 496 .sbc-home-sub { 497 display: block; 498 margin-top: 8px; 499 font-size: 19px; 500 font-weight: 400; 501 line-height: 1.5; 502 } 503 504 /* --- Buttons (pill) --- */ 505 .sbc-home-btn.elementor-button { 506 border-radius: 30px !important; 507 padding: 14px 40px !important; 508 font-size: 17px !important; 509 letter-spacing: 0.3px; 510 transition: transform 0.25s ease, box-shadow 0.25s ease; 511 box-shadow: 0 4px 18px rgba(76, 194, 192, 0.35); 512 } 513 514 .sbc-home-btn.elementor-button:hover { 515 transform: translateY(-2px); 516 box-shadow: 0 6px 24px rgba(76, 194, 192, 0.50); 517 } 518 519 /* --- Icon Boxes (service & strategy rows) --- */ 520 .elementor-widget-icon-box .elementor-icon-box-wrapper { 521 border-radius: 14px; 522 padding: 22px 14px; 523 transition: transform 0.25s ease, box-shadow 0.25s ease; 524 } 525 526 .elementor-widget-icon-box .elementor-icon-box-wrapper:hover { 527 transform: translateY(-4px); 528 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); 529 } 530 531 .elementor-widget-icon-box .elementor-icon-box-title { 532 margin-bottom: 8px; 533 } 534 535 .elementor-widget-icon-box .elementor-icon-box-description { 536 font-size: 14px !important; 537 line-height: 1.6; 538 } 539 540 .elementor-widget-icon-box .elementor-icon-box-icon { 541 margin-bottom: 14px; 542 } 543 544 /* --- Video section text --- */ 545 #sbc-home-video .elementor-text-editor { 546 text-align: center; 547 font-size: 15px; 548 line-height: 1.8; 549 color: #5c5c5c; 550 max-width: 600px; 551 margin: 0 auto 24px; 552 } 553 554 /* --- Counters (green bar already styled via Elementor) --- */ 555 556 /* --- Philosophy section (white on orange) --- */ 557 .elementor-element-f3b5978 .sbc-home-title .elementor-heading-title { 558 color: #FFFFFF !important; 559 } 560 561 .elementor-element-f3b5978 .sbc-home-sub { 562 color: #FFFFFF; 563 opacity: 0.92; 564 } 565 566 /* --- Clients logos marquee --- */ 567 .sbc-home-logos { 568 overflow: hidden; 569 width: 100%; 570 padding: 10px 0; 571 } 572 573 .sbc-home-logos-track { 574 display: flex; 575 gap: 48px; 576 width: max-content; 577 animation: sbc-marquee 30s linear infinite; 578 } 579 580 .sbc-home-logos-track a { 581 display: flex; 582 align-items: center; 583 flex-shrink: 0; 584 filter: grayscale(40%); 585 opacity: 0.85; 586 transition: filter 0.3s ease, opacity 0.3s ease; 587 } 588 589 .sbc-home-logos-track a:hover { 590 filter: grayscale(0); 591 opacity: 1; 592 } 593 594 .sbc-home-logos-track a img { 595 height: 50px; 596 width: auto; 597 object-fit: contain; 598 } 599 600 .sbc-home-logos:hover .sbc-home-logos-track { 601 animation-play-state: paused; 602 } 603 604 @keyframes sbc-marquee { 605 0% { transform: translateX(0); } 606 100% { transform: translateX(-50%); } 607 } 608 609 /* --- Marketing / Philosophy buttons (pill green on dark/orange) --- */ 610 .elementor-element-3a0f45b .sbc-home-btn.elementor-button, 611 .elementor-element-bfa6cc6 .sbc-home-btn.elementor-button { 612 margin-top: 20px; 613 } 614 615 /* --- Responsive: Homepage --- */ 616 @media (max-width: 768px) { 617 .sbc-home-title { 618 margin-bottom: 6px; 619 } 620 .sbc-home-title .elementor-heading-title { 621 font-size: 24px !important; 622 } 623 .sbc-home-sub { 624 font-size: 16px !important; 625 } 626 .sbc-title-bar { 627 margin: 12px auto 0; 628 } 629 .sbc-home-btn.elementor-button { 630 padding: 12px 28px !important; 631 font-size: 15px !important; 632 } 633 .sbc-home-logos-track { 634 gap: 32px; 635 } 636 .sbc-home-logos-track a img { 637 height: 40px; 638 } 639 } /* ======================================== ABOUT — SOCIALME.gr (dev321, page 422) ======================================== */ /* --- Hero --- */ .elementor-element-a65de69 .elementor-text-editor { max-width: 760px; margin: 18px auto 0; text-align: center; } /* --- Quote --- */ .elementor-element-15ef493 .elementor-text-editor p:first-child { border-left: 4px solid #108DFF; padding: 6px 0 6px 22px; } /* --- Stats --- */ .elementor-element-5c48365 { text-align: center; } .elementor-element-e43ff53 .elementor-heading-title, .elementor-element-d046a5c .elementor-heading-title, .elementor-element-dd9e6db .elementor-heading-title, .elementor-element-fb0776b .elementor-heading-title { transition: transform 0.25s ease; } .elementor-element-e43ff53:hover .elementor-heading-title, .elementor-element-d046a5c:hover .elementor-heading-title, .elementor-element-dd9e6db:hover .elementor-heading-title, .elementor-element-fb0776b:hover .elementor-heading-title { transform: translateY(-3px); } /* --- Timeline --- */ .elementor-element-53406c2 .elementor-heading-title, .elementor-element-c0188fd .elementor-heading-title, .elementor-element-a05d52b .elementor-heading-title { font-size: 34px; } .elementor-element-69eca31 .sbc-title-bar, .elementor-element-ed47dcd .sbc-title-bar, .elementor-element-6ef1935 .sbc-title-bar { margin-left: auto; margin-right: auto; } .elementor-element-2ad7929 .elementor-widget:first-child { margin-bottom: 8px; } .elementor-element-2ad7929 .elementor-text-editor p, .elementor-element-61367d3 .elementor-text-editor p, .elementor-element-3128c4d .elementor-text-editor p { font-size: 16px; line-height: 1.7; } /* --- Icon boxes (features) --- */ .elementor-element-35e69b8 .elementor-widget-icon-box .elementor-icon-box-wrapper, .elementor-element-57bc334 .elementor-widget-icon-box .elementor-icon-box-wrapper { padding: 26px 18px; } /* --- Team --- */ .elementor-element-220efe4, .elementor-element-5019a21, .elementor-element-3091a3c, .elementor-element-000ed73 { text-align: center; } .elementor-element-220efe4 .elementor-widget-image img, .elementor-element-5019a21 .elementor-widget-image img, .elementor-element-3091a3c .elementor-widget-image img, .elementor-element-000ed73 .elementor-widget-image img { box-shadow: 0 10px 30px rgba(0,0,0,0.10); transition: transform 0.3s ease, box-shadow 0.3s ease; } .elementor-element-220efe4:hover .elementor-widget-image img, .elementor-element-5019a21:hover .elementor-widget-image img, .elementor-element-3091a3c:hover .elementor-widget-image img, .elementor-element-000ed73:hover .elementor-widget-image img { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,0.16); } /* --- CTA band --- */ .elementor-element-2af744a .sbc-home-btn.elementor-button { background: #FFFFFF !important; color: #108DFF !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .elementor-element-2af744a .sbc-home-btn.elementor-button:hover { background: #EAF7F7 !important; color: #2F9E9C !important; } /* --- Responsive: About --- */ @media (max-width: 768px) { .elementor-element-403091d, .elementor-element-5c48365 { flex-wrap: wrap !important; } .elementor-element-15ef493, .elementor-element-8e9716b, .elementor-element-e43ff53, .elementor-element-d046a5c, .elementor-element-dd9e6db, .elementor-element-fb0776b { flex-basis: 50% !important; } .elementor-element-220efe4, .elementor-element-5019a21, .elementor-element-3091a3c, .elementor-element-000ed73 { flex-basis: 50% !important; } .elementor-element-53406c2, .elementor-element-c0188fd, .elementor-element-a05d52b { flex-direction: column !important; } .elementor-element-69eca31, .elementor-element-ed47dcd, .elementor-element-6ef1935, .elementor-element-2ad7929, .elementor-element-61367d3, .elementor-element-3128c4d { width: 100% !important; } .elementor-element-2af744a .elementor-heading-title { font-size: 24px !important; } } /* Home logos carousel - slight side padding per slide */ .elementor-element-f6d2151 .swiper-slide-inner { padding: 0 12px; } .elementor-element-f6d2151 .swiper-slide-image { width: 100%; height: auto; object-fit: contain; } @media (max-width: 767px) { .elementor-element-f6d2151 .swiper-slide-inner { padding: 0 8px; } }