@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --navy:#021a33; --deep:#00344F; --ink:#0E263F; --cyan:#00BFD0; --cyan-d:#0097a7;
  --text:#1a1a1a; --muted:#c9d6e2; --white:#fff;--black:#000;
  --aleo:"Aleo", serif;
  --fira-sans:"Fira Sans", sans-serif;;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font-family:var(--fira-sans);font-weight:300;color:var(--white);background:var(--navy);line-height:1.55;font-size:14px}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/*.wrap{max-width:1100px;margin:0 auto;padding:0 24px}*/

.video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0b2237,#1e3c58);overflow:hidden;display:flex;align-items:flex-end}
.video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* header */
header{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1);position: sticky;top: 0;z-index: 999}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logos{display:flex;align-items:center;gap:18px}

nav{display:flex;gap:26px;font-size:12px}
nav a{font-size: 15px;font-weight: 400;color: var(--white);opacity:.9;padding:4px 0;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--cyan)}
.nav-toggle{display:none;background:none;border:0;padding:10px;margin:-10px -10px -10px 0;cursor:pointer;color:#fff;line-height:0}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle span+span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* tags / buttons */
.tag{display:inline-block;background:var(--cyan);color:var(--black);font-size:14px;padding:10px;border-radius:3px;line-height: 100%;text-transform:uppercase;font-weight:400}
.btn{display:inline-block;background:var(--cyan);color:var(--black);font-size:14px;font-weight:400;padding:8px 20px;border-radius:999px;transition:background .2s}
.btn:hover{background:#26d3e8}

/* hero */
.hero{background:var(--navy);padding:56px 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-family:var(--aleo);font-weight:400;font-size:clamp(34px,5vw,48px);margin:16px 0 4px;line-height:1.1}
.hero .sub{font-family:var(--aleo);font-size:20px;color:var(--white);margin:0 0 22px;font-weight: 300}
.hero p{font-size:14px;color:var(--white);margin:0 0 14px;font-weight: 300}
.hero p strong{color:#fff;font-weight:bold}
.quote{font-family:var(--aleo);color:var(--cyan);font-size:18px;margin-top:22px;font-weight: 500}


/* teasers */
.teasers{background:var(--deep);padding:48px 0 56px}
h2{font-family:var(--aleo);font-weight:400;font-size:24px;margin:12px 0 6px;color: var(--white);}
.lead{font-size:14px;color:var(--white);max-width:588px;margin:0 0 28px;font-weight: 400}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;color:var(--text);display:flex;flex-direction:column;border: none;}
.person{position:absolute;bottom:0;left:22%;width:48%;height:84%;background:linear-gradient(#e2c8b2 0 22%,#dfe6ee 22%);border-radius:48% 48% 0 0/30% 30% 0 0;opacity:.88}
.play{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(20,20,20,.7);border:0;z-index:3;cursor:pointer;transition:transform .2s,background .2s}
.play::after{content:"";position:absolute;top:13px;left:17px;border:9px solid transparent;border-left:14px solid #fff;border-right:0}
.play:hover{background:rgba(0,0,0,.9);transform:scale(1.08)}
.card .body{padding:14px 16px 20px;font-size:11px}
.card h3{font-size:16px;font-weight:bold;text-transform:uppercase;margin:0 0 14px;}
.card h4{font-size:14px;font-weight:bold;margin:0 0 4px}
.card p{margin:0;line-height:1.5;font-size: 14px;color: var(--black);font-weight: 400}

/* featured */
.featured{background:#fff;color:var(--text);padding:32px 0}
.featured .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.featured h2{margin:0 0 8px;color:var(--black);}
.featured h3{font-size:14px;font-weight:bold;margin:0 0 12px}
.featured p{font-size:14px;margin:0 0 12px;color: var(--black);font-weight: 400}
.featured ul{font-size:14px;margin:6px 0 20px;padding-left:18px;color: var(--black);font-weight: 400}
.featured li{margin-bottom:3px}
.featured .quote{color:#00344F;font-size:18px;margin-top:0;font-weight: 500;font-family: var(--aleo);}
.video{position:relative;aspect-ratio:16/9;background:#bfc4cc;overflow:hidden}
.video .top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;color:#102a43;font-weight:600;font-size:11px}
.video .top em{font-family:var(--aleo);font-style:normal;font-size:16px}
.video .panel{position:absolute;left:14px;right:14px;bottom:14px;background:#0b5a76;border-radius:4px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;color:#fff;font-size:9px}
.video .panel div{display:flex;align-items:center;gap:6px}
.video .panel i{width:24px;height:24px;border-radius:50%;background:#e8d6c4;flex:none}
.video .title{position:absolute;left:14px;bottom:78px;font-size:9px;font-weight:600;color:#0b5a76}

/* editor's pick */
.picks{background:var(--deep);padding:36px 0 56px}
.picks h2{text-transform:uppercase;}
.picks .lead{max-width: 100%}
.picks .cards{grid-template-columns:1fr 1fr;gap:36px}
.picks .thumb{position: relative;}
.picks .thumb-overlay{position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);}
.picks .card .body{padding:18px 18px 22px;font-size:12px;background: var(--white);}
.picks .card h4{font-size:14px;margin-bottom:10px;font-weight: bold;color: var(--black);}
.picks .card p{margin-bottom:20px;font-size: 14px;font-weight: 400;line-height: 1.5;color: var(--black);}
.panelists{position:absolute;inset:auto 0 0 0;height:78%;display:flex;justify-content:center;gap:2%;padding:0 6%}
.panelists i{flex:1;background:linear-gradient(#d9bfa8 0 16%,#1a232d 16%);border-radius:40% 40% 0 0/20% 20% 0 0}
.laptop{position:absolute;inset:0;background:radial-gradient(circle at 55% 60%,#4aa8ff 0 6%,transparent 14%),linear-gradient(90deg,#0a1626,#17406b 50%,#0a1626)}
.laptop i{position:absolute;bottom:0;left:38%;width:26%;height:82%;background:linear-gradient(#caa88f 0 14%,#10151d 14%);border-radius:40% 40% 0 0/14% 14% 0 0}

/*footer*/
footer{background:var(--ink);text-align:center;font-size:14px;padding:28px 24px;color:#fff}

.hero-badge-img {
    animation: float 5s ease-in-out infinite;
    z-index: 5;
    }

    @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0px);
    }
    }

/*Footer*/

.footerwrapper {
    font-family: 'Poppins', sans-serif;
    color: #000;
    font-weight: 400;
    background: #FCFCFC;
}
.footerwrapper p{
    font-size: 14px;
}
.footerwrapper a {
    color: #000;
    text-decoration: none;
}
.footerwrapper a:hover {
    color: #0a8eae;
}
.footercol1 {
    padding: 0 0 15px;
    font-size: 14px;
}
.footerlogo {
    display: block;
    float: left;
    margin: 0 0 20px;
}
.footercol2 {
    padding: 8px 0;
}
.footercol2 ul{
    list-style: none;
}
.footercol2 ul li{
    background-position: 5px 12px;
    background-repeat: no-repeat;
    margin: 5px 0 0;
    padding: 0 0 5px 25px;
}
.footerbottomright h4, .footercol2 h4 {
    display: block;
    font-weight: 700;
    color: #000000;
    line-height: normal;
    margin-bottom: 15px;
    font-size: 14px;
}
.footercol2 ul li {
    padding: 0;
    margin: 0 0 10px;
    font-size: 14px;
}
.footerbottom {
    font-size: 14px;
    line-height: 16px;
}
.footersocial a img {
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
    margin-right: 12px;
}