/* =====================================================================
   Section styles — About, Destinations, Services, Advantages,
   Testimonials, Gallery, CTA, Footer
   ===================================================================== */

/* ---------- ABOUT ---------- */
/* Premium background system: a pearl wash that resolves into the tint of the
   section below, film-fine grain + hairline rules for polish, layered brand
   auroras and corner arcs for depth, and a dot texture masked away from the
   content so the reading area stays pristine. */
.about{position:relative;isolation:isolate;
  background:
    /* hairline rules — quiet top edge, luminous bottom seam */
    linear-gradient(90deg,transparent,rgba(17,61,72,.10) 28%,rgba(17,61,72,.10) 72%,transparent),
    linear-gradient(90deg,transparent,rgba(17,61,72,.12) 22%,rgba(26,134,199,.34) 50%,rgba(17,61,72,.12) 78%,transparent),
    /* film grain — barely-there tooth that keeps the wash from looking flat */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E"),
    /* soft vignette for depth at the edges */
    radial-gradient(132% 112% at 50% 40%,rgba(255,255,255,0) 50%,rgba(11,46,73,.05) 100%),
    /* glass sheen sweeping the lower half */
    linear-gradient(112deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 84%),
    /* pearl wash resolving into the tint of the next section */
    linear-gradient(180deg,#fff 0%,#fcfeff 34%,#f8fbfe 68%,var(--light) 100%);
  background-repeat:no-repeat,no-repeat,repeat,no-repeat,no-repeat,no-repeat;
  background-size:100% 1px,100% 1px,180px 180px,auto,auto,auto;
  background-position:0 0,0 100%,0 0,0 0,0 0,0 0}
/* --- sea-wave backdrop: video sits at the very back, under a veil heavy
   enough that the existing dark-on-light content keeps full contrast.
   The whole layer is absolutely positioned and pointer-events:none, so it
   takes no part in layout and never intercepts clicks. --- */
.about-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
/* the artwork is a finished, light-key illustration - no blur, no filter and no
   upscale, so the plane, map and ship stay crisp and as much of the frame shows
   as the section's aspect allows. */
.about-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* veil: the artwork is already pale and on-palette, so no white shield and no
   brand wash are needed - dark-on-light copy reads over it directly. All that
   is left is the bottom few percent, resolving the image into the tint of the
   next section so the boundary is not a hard cut. */
.about-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,248,252,0) 92%,var(--light) 100%)}

/* aurora blooms + hairline corner arcs */
.about::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 100% 0,transparent 0 238px,rgba(26,134,199,.10) 238px 239px,transparent 239px),
    radial-gradient(circle at 100% 0,transparent 0 374px,rgba(26,134,199,.07) 374px 375px,transparent 375px),
    radial-gradient(760px 540px at 2% 2%,rgba(26,134,199,.15),transparent 62%),
    radial-gradient(840px 620px at 100% 96%,rgba(17,61,72,.12),transparent 62%),
    radial-gradient(480px 360px at 76% 0%,rgba(30,136,229,.08),transparent 66%),
    radial-gradient(560px 440px at 26% 106%,rgba(26,134,199,.07),transparent 64%);
  will-change:opacity;animation:aboutGlow 16s ease-in-out infinite}
/* fine dot texture, faded out from behind the content */
.about::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(11,46,73,.10) 1px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(74% 66% at 50% 46%,transparent 34%,#000 100%);
  mask-image:radial-gradient(74% 66% at 50% 46%,transparent 34%,#000 100%)}
@keyframes aboutGlow{0%,100%{opacity:.88}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.about::before{animation:none}}
@media (max-width:768px){
  /* nothing sits over the artwork on phones: the aurora bloom and the dot
     texture were both muting it, and here the illustration IS the backdrop */
  .about::before,.about::after{display:none}
  /* contain, not cover - the plane sits at 16-45% across and the ship at
     52-97%, so any crop tight enough to cover a phone-shaped section clipped
     one of them. nothing is cropped now; the area the artwork does not reach
     is filled by the gradient below, whose stops are sampled from the image's
     own rows, so it reads as more of the same sky and sea, not as a band. */
  .about-bg{background:linear-gradient(180deg,#e9f7fd 0%,#edf8fd 20%,#f0f9fd 40%,
    #f3fafd 50%,#eef9fd 70%,#d7effd 88%,#c8eafd 94%,#d1edfd 100%)}
  .about-image{object-fit:contain;object-position:center bottom;
    /* the artwork is deliberately low-contrast; a light lift makes the plane,
       map and ship read at phone size without darkening the field under copy */
    filter:saturate(1.22) contrast(1.06)}
  .about-media::before{top:-16px;right:-14px;width:150px;height:120px;border-top-right-radius:22px}
  .about-media::after{right:-50px;bottom:-60px;width:220px;height:220px}
  .about-actions{gap:16px}}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-media{position:relative}
.about-img{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.about-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.about-img:hover img{transform:scale(1.06)}
.about-img--main{height:420px}
.about-img--small{position:absolute;right:-10px;bottom:-40px;width:210px;height:230px;border:6px solid #fff}
.about-badge{position:absolute;left:-10px;top:30px;background:var(--accent);color:#fff;
  border-radius:16px;padding:16px 20px;box-shadow:0 16px 30px rgba(17,61,72,.35);text-align:center;
  animation:floatY 4s ease-in-out infinite}
.about-badge .ab-num{display:block;font-family:var(--font-title);font-size:26px;font-weight:700}
.about-badge .ab-text{font-size:12px;opacity:.9}
.about-lead{color:var(--body-strong);font-weight:500;margin:6px 0 22px}
.about-list{margin-bottom:30px;display:grid;gap:12px}
.about-list li{display:flex;align-items:flex-start;gap:12px;color:var(--body)}
.about-list i{color:var(--blue);margin-top:5px}

/* ---------- ABOUT · designed details ---------- */
/* media stack: editorial corner frame, ambient lift under the inset photo */
.about-media::before{content:"";position:absolute;top:-22px;right:-22px;width:230px;height:180px;
  border-top:1px solid rgba(26,134,199,.40);border-right:1px solid rgba(26,134,199,.40);
  border-top-right-radius:28px;pointer-events:none;
  -webkit-mask-image:radial-gradient(farthest-side at 100% 0,#000 42%,transparent 100%);
  mask-image:radial-gradient(farthest-side at 100% 0,#000 42%,transparent 100%)}
.about-media::after{content:"";position:absolute;right:-70px;bottom:-90px;width:290px;height:290px;z-index:-1;
  pointer-events:none;background:radial-gradient(circle,rgba(26,134,199,.22),transparent 68%)}
/* main photo: bottom scrim so the chip reads, plus a hairline inner edge */
.about-img--main{position:relative}
.about-img--main::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,46,73,0) 50%,rgba(11,46,73,.44) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.about-img--small{box-shadow:0 26px 52px -20px rgba(9,80,130,.55)}
/* glass location chip */
.about-chip{position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:50px;
  font-family:var(--font-title);font-size:13px;font-weight:600;letter-spacing:.2px;color:#fff;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 26px -10px rgba(11,46,73,.6)}
.about-chip i{font-size:12px;color:#8fd3ff}
/* badge: gradient glass, sheen, gradient numeral */
.about-badge{padding:18px 22px;border-radius:18px;
  background:linear-gradient(150deg,#17505f 0%,var(--accent) 55%,#0d3541 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 46px -18px rgba(17,61,72,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.about-badge::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%)}
.about-badge .ab-num{font-size:28px;letter-spacing:.5px;
  background:linear-gradient(180deg,#fff,#cfe9fb);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.about-badge .ab-text{position:relative;font-weight:500;letter-spacing:.3px;opacity:.86}
/* the water lifts this section's midtones, so the eyebrow is deepened two steps
   (same blue) to hold WCAG AA over the footage - measured 4.84:1 vs 2.80:1 */
.about .sub-title{color:#0e5f8f}
.about .sub-title::before{background:#0e5f8f}
/* title flourish */
.about .sec-title{position:relative;display:block;width:-moz-fit-content;width:fit-content;padding-bottom:18px}
.about .sec-title::after{content:"";position:absolute;left:0;bottom:6px;width:78px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--sky),rgba(26,134,199,0))}
/* lead: accent rule */
.about-lead{position:relative;padding-left:22px}
.about-lead::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--sky),rgba(26,134,199,.08))}
/* list: gradient check chips */
.about-list{gap:14px}
.about-list li{align-items:center;gap:14px;font-weight:500;transition:color .3s ease,transform .3s ease}
.about-list li:hover{color:var(--heading);transform:translateX(4px)}
.about-list i{flex:0 0 auto;width:28px;height:28px;margin-top:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  box-shadow:0 6px 14px -4px rgba(30,136,229,.65),inset 0 1px 0 rgba(255,255,255,.4)}
/* action row: CTA */
.about-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- TITLE FLEX (slider heads) ---------- */
.title-flex{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.slider-nav{display:flex;gap:12px}
.round-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.3s ease}
.round-arrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-3px)}

/* ---------- DESTINATIONS ---------- */
.destinations{background:#89d2e4}          /* requested sky background */
.destinations .sub-title{color:#0b3d5c}
.destinations .sub-title::before{background:#0b3d5c}
.destinations .sec-title{color:#08303f}
.destinations .sec-title span{color:#0b5e78}
/* coverflow slider — centered on page, FULL WIDTH, no overflow
   (slider is a direct child of the section, so width:100% = full width) */
.destination-slider{width:100%;overflow:hidden;padding:24px 0 46px}
.destination-slider .swiper-wrapper{align-items:stretch}
.destination-slider .swiper-slide{height:auto}
.destination-slider .swiper-slide .dest-card{height:100%}
/* side padding so cards aren't flush to screen edges */
.destination-slider{padding-left:max(20px,3vw);padding-right:max(20px,3vw)}
.dest-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .4s ease,box-shadow .4s ease}
.dest-card:hover{transform:translateY(-8px);box-shadow:0 26px 46px rgba(9,80,130,.22)}
.dest-img{height:280px;overflow:hidden;position:relative}
.dest-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.dest-card:hover .dest-img img{transform:scale(1.08)}
.dest-body{padding:22px 24px}
.dest-loc{display:inline-flex;align-items:center;gap:6px;color:var(--sky);font-size:13px;font-weight:600;margin-bottom:6px}
.dest-name{font-size:22px;margin-bottom:12px}
.dest-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:14px;transition:gap .3s ease}
.dest-link:hover{gap:14px;color:var(--blue)}
.destination-slider{padding-bottom:10px}

/* ---------- SERVICES (category slider — WP style: image, title, See More) ---------- */
.services-slider{padding-bottom:10px}
.category-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);text-align:center;
  transition:transform .4s ease,box-shadow .4s ease}
.category-card:hover{transform:translateY(-10px);box-shadow:0 28px 50px rgba(9,80,130,.2)}
.category-img{overflow:hidden;position:relative}
.category-img img{width:100%;height:340px;object-fit:cover;transition:transform .6s ease}
.category-card:hover .category-img img{transform:scale(1.08)}
.category-body{padding:26px 24px 30px}
.category-title{font-size:20px;font-weight:600;color:var(--heading);margin-bottom:14px;transition:color .3s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-card:hover .category-title{color:var(--accent)}
/* line-btn style underline link */
.category-link{position:relative;display:inline-block;color:var(--accent);font-family:var(--font-title);
  font-weight:600;font-size:14px;padding-bottom:4px}
.category-link i{margin-left:6px;transition:transform .3s ease}
.category-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blue);
  transform:scaleX(.35);transform-origin:left;transition:transform .35s ease}
.category-card:hover .category-link::after{transform:scaleX(1)}
.category-card:hover .category-link i{transform:translateX(5px)}
.services-pagination{display:flex;justify-content:center;gap:8px;margin-top:30px}
.services-pagination .swiper-pagination-bullet{width:10px;height:10px;background:var(--accent);opacity:.25;transition:.3s}
.services-pagination .swiper-pagination-bullet-active{opacity:1;width:26px;border-radius:6px}

/* ---------- OUR ADVANTAGES (solid alternating white/blue) ---------- */
.advantages{background:#89d2e4}
.advantages .sub-title{color:#0b3d5c}
.advantages .sub-title::before{background:#0b3d5c}
.advantages .sec-title{color:#08303f}
.advantages .sec-title span{color:#0b5e78}
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0 5%;box-sizing:border-box}
.adv-card{position:relative;overflow:hidden;padding:34px 28px;border-radius:20px;
  background:#fff;border:1px solid var(--border);color:#0b2e49;box-shadow:0 14px 34px rgba(9,80,130,.15);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.adv-card:hover{transform:translateY(-12px) scale(1.015);box-shadow:0 26px 48px rgba(9,80,130,.28)}
.adv-num{position:absolute;top:6px;right:20px;font-family:var(--font-title);font-weight:700;font-size:64px;
  line-height:1;color:rgba(42,159,214,.18);transition:transform .45s ease,color .45s ease;pointer-events:none}
.adv-card:hover .adv-num{transform:scale(1.15) rotate(-6deg);color:rgba(42,159,214,.4)}
.adv-title{position:relative;z-index:2;font-size:21px;font-weight:600;line-height:1.35;color:#073b5c;margin-bottom:12px}
.adv-title::after{content:"";display:block;width:42px;height:3px;border-radius:3px;background:#1a86c7;margin-top:12px}
.adv-card p{position:relative;z-index:2;font-size:15px;line-height:1.65;color:#33546e}
.adv-card:nth-child(even){background:#1e88e5;border-color:#1e88e5;color:#fff;box-shadow:0 16px 36px rgba(13,71,161,.28)}
.adv-card:nth-child(even):hover{box-shadow:0 26px 48px rgba(13,71,161,.4)}
.adv-card:nth-child(even) .adv-title{color:#fff}
.adv-card:nth-child(even) .adv-title::after{background:#fff}
.adv-card:nth-child(even) p{color:rgba(255,255,255,.95)}
.adv-card:nth-child(even) .adv-num{color:rgba(255,255,255,.3)}
.adv-card:nth-child(even):hover .adv-num{color:rgba(255,255,255,.48)}

/* ---------- TESTIMONIALS ---------- */
.testi-card{background:#fff;border-radius:20px;padding:38px 34px;box-shadow:var(--shadow);position:relative;margin:10px 0 40px;height:calc(100% - 50px)}
.testi-quote{position:absolute;top:30px;right:34px;font-size:44px;color:#e3f0f8}
.testi-stars{color:#ffb400;margin-bottom:16px;display:flex;gap:3px;font-size:15px}
.testi-text{color:var(--body-strong);font-weight:500;font-size:16px;line-height:1.7;margin-bottom:26px}
.testi-author{display:flex;align-items:center;gap:14px}
.testi-author img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #e3f0f8}
.testi-author h4{font-size:17px;margin-bottom:2px}
.testi-author span{color:var(--sky);font-size:13px;font-weight:600}
.testi-author .testi-avatar{flex-shrink:0;width:60px;height:60px;border-radius:50%;border:3px solid #e3f0f8;
  background:#e3f0f8;color:var(--accent);font-size:20px;display:flex;align-items:center;justify-content:center}
.testi-pagination{display:flex;justify-content:center;gap:8px}
.testi-pagination .swiper-pagination-bullet{width:10px;height:10px;background:var(--accent);opacity:.25;transition:.3s}
.testi-pagination .swiper-pagination-bullet-active{opacity:1;width:26px;border-radius:6px}

/* ---------- GALLERY ---------- */
.gallery{background:#89d2e4}
.gallery .sub-title{color:#0b3d5c}
.gallery .sub-title::before{background:#0b3d5c}
.gallery .sec-title{color:#08303f}
.gallery .sec-title span{color:#0b5e78}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:row dense;gap:16px}
.gallery-item{position:relative;overflow:hidden;border-radius:16px;display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-item::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,61,72,.65),transparent);opacity:0;transition:.4s ease;z-index:1}
.gallery-item:hover::before{opacity:1}
.gallery-plus{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);transition:.4s ease;z-index:2}
.gallery-item:hover .gallery-plus{opacity:1;transform:scale(1)}
.gallery-item--tall{grid-row:span 2}
.gallery-item--wide{grid-column:span 2}

/* ---------- CTA ---------- */
.cta-section{position:relative;padding:110px 0;text-align:center;color:#fff;overflow:hidden}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-attachment:fixed}
.cta-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,30,37,.9),rgba(17,61,72,.75));z-index:1}
.cta-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.cta-section .sub-title{color:#7fd0f2;justify-content:center}
.cta-section .sub-title::before{background:#7fd0f2}
.cta-title{font-family:var(--font-title);font-size:42px;font-weight:700;color:#fff;margin-bottom:18px}
.cta-text{color:rgba(255,255,255,.9);margin-bottom:32px;font-weight:500}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}
.cta-note{margin-top:18px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.75)}

/* ---------- FOOTER ---------- */
.site-footer{background:#ffffff;color:var(--body)}
/* full-width footer content with 5% side padding */
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr;gap:40px;
  max-width:100%;padding:80px 5% 50px}
/* logo: colourful emblem shown as-is on the white footer */
.footer-logo{display:inline-block;margin-bottom:22px}
.footer-logo img{height:88px;width:auto;filter:none}
.footer-about p{color:var(--body);font-size:15px;font-weight:500;line-height:1.7;margin-bottom:22px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:50%;background:#eaf1f6;
  display:flex;align-items:center;justify-content:center;color:var(--accent);transition:.3s ease}
.footer-social a:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.footer-title{color:var(--heading);font-family:var(--font-title);font-size:20px;font-weight:600;margin-bottom:22px}
.footer-menu li{margin-bottom:12px}
.footer-menu a{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--body);transition:.3s ease}
.footer-menu a:hover{color:var(--accent);padding-left:6px}
.footer-menu i{color:var(--blue);font-size:12px}
.footer-contact li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:15px;font-weight:500;color:var(--body)}
.fc-icon{width:38px;height:38px;border-radius:10px;background:#e9f4fb;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.footer-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.footer-gallery img{aspect-ratio:1;object-fit:cover;border-radius:8px;transition:.3s ease}
.footer-gallery a:hover img{opacity:.85;transform:scale(1.05)}
/* Copyright bar — kept exactly as before (dark, unchanged) */
.footer-bottom{background:var(--dark);border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom .container{max-width:100%;padding:0 5%}
.footer-bottom p{text-align:center;padding:18px 0;font-size:14px;color:#aebcc7;font-weight:400}
.footer-bottom .footer-credit{color:#fff;font-weight:700}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .services-grid,.adv-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:768px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:35vw}
  .gallery-item--tall{grid-row:span 2}
  .gallery-item--wide{grid-column:span 2}
  .about-grid{grid-template-columns:1fr;gap:70px}
  .about-img--main{height:340px}
  .cta-bg{background-attachment:scroll}
  .cta-title{font-size:32px}
}
@media (max-width:600px){
  .services-grid,.adv-grid,.footer-grid{grid-template-columns:1fr}
  .adv-grid{padding:0 20px}
  .about-img--small{width:150px;height:160px;right:0;bottom:-30px}
  .title-flex{flex-direction:column;align-items:flex-start}
}