/* css reset */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
    /* text-align: center; */
}

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
	background: linear-gradient(to bottom,
		rgba(21, 77, 175, 1),
        rgb(132, 184, 236),
        rgb(132, 184, 236),
        rgb(206, 230, 251),
		rgba(240, 248, 255, 1),
        rgb(211, 215, 247),
        rgb(179, 186, 241),
		rgba(28, 50, 187, 1)
		);
	max-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
	color: white;
	position: relative;
	margin: 0;
}

section{
    position: relative;

}

.ss-show{
    display: none;
}
/* preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#143d7a; 
	z-index:99;
}


#status img{
	width:80px;
	/* height:80px; */
	position:absolute;
	left:50%;
	top:50%; 
    transform:translate(-50%,-50%);
    filter:brightness(1.5);
    
}

.item8{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hp-icon .hp-1{
    transition: 0;
}

.item8:hover > .hp-icon .hp-1{
    fill:#76fcfd;
}

.hp-icon{
    margin-top: 2px;
    width: 40px;
}


/* nav */
.nav-bar{
    display: flex;
    position: fixed;
    width: 100vw;
    height: 60px;
    background-color: #0e2948c4;
    border-bottom: solid 1px white;
    z-index: 9;
}

.logo{
    position: absolute;
    width: 84px;
    left: 5%;
    top:12px
}

.logo img{
    width: 100%;
}

.menu_list{
    width: 12vw;
    min-height: 100vh;
    height: 100%;
    background-color: #143d7a;
    z-index: 9;
    text-align: center;
    position: absolute;
    right: -100%;
    transition: 0.5s;
    overflow-y: auto;
    padding-top: 1rem;
}

.menu_box{
    display:block;
    font-size: 2.3rem;
    position: fixed;
    right: 20px;
    cursor: pointer;
    transition: 0.5s;
}

.menu_box:hover{
    color:#76fcfd;
}

.menu_close_box{
    cursor: pointer;
    font-size: 2.3rem;
    position: absolute;
    right: 25px;
    top: 10px;
    transition: 0.5s;
}
.menu_close_box:hover{
    color:#76fcfd;
}

.item{
    padding: 2.5rem;
    border-bottom: solid 1px white;
    cursor: pointer;
}

.item:hover{
    color: #76fcfd;
}




.header-social-area img {
    width: 40px;
    margin: 0 1rem;
}

.header-social-area img:hover{
    opacity: 0.5;
}

/* section_1 */
.section_1{
    overflow: hidden;
}
#myVideo {
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

.kv-bg{
    position: relative;
    right: 0;
    top: 0;
    width: 100vw;
    opacity: 0.7;
}

.section_1::after{
    content: "";
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 20vw;
    background: linear-gradient(to bottom, rgba(65, 121, 199, 0), rgb(133 184 236) );
    z-index: 2;
}

.kv-bg-line{
    position: absolute;
    width: 100vw;
    top: 0;
    opacity: 0.7;
}

.title{
    position: absolute;
    width: 70vw;
    top: 24vw;
    left: 50vw;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
}

.mb-title{
    display: none;
}

.title img{
    width: 100%;
}

.black-bg{
    position: absolute;
    width: 80vw;
    height: 64vw;
    background-image: radial-gradient(ellipse, #020202e8 20%, #00000000 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}



/* section_2 */
.section_2{
    /* height: 60vw; */
    overflow: hidden;
    padding-bottom: 10vw;
}
.decor-tl,.decor-bl,.decor-br,.decor-tr{
    position: absolute;
}

.decor-tl {
    width: 59vw;
    top: -7vw;
    left: -13vw;
}

.decor-bl{
    width: 32vw;
    bottom: 0vw;
    left: -6vw;
    opacity: 0.3;
}

.decor-br{
    width: 59vw;
    bottom: -18vw;
    right: -13vw;
    transform:rotate(180deg);
}

.decor-tr{
    width: 41vw;
    top: 5vw;
    right: -6vw;
    opacity: 0.3;
    transform: rotate(180deg);
}

.foreword{
    position: relative;
    left: 50%;
    /* top: 50%; */
    transform: translatex(-50%);
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    /* display: none; */
    text-align: left;
    padding-top: 15vw;
    width: 80vw;
    max-width: 1067px;
    
}

.six-issues{
    width: 28vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* top: 50%; */
    /* transform:translate(-50%,-50%); */
    padding-top: 10vw;
}

.six-issues svg{
    width: 100%;
}

.issue{
    cursor: pointer;
}

.cls-5,.cls-2 {
    transition: 0.5s;
}


.issue:hover> .cls-5{
    fill:rgb(239 252 147);
    
}

.issue:hover > .cls-2{
    fill: #144e93;
    font-weight: 700;
}

/* section-set */
.section-title{
    position: relative;
    font-size: 2rem;
    color:#144e93;
    font-weight: 600;
    /* padding-bottom: 2vw; */
    text-align: center;
}

.title-line{
    width: 25vw;
    position: relative;
    bottom: 1.4rem;
    left: -2vw;
}

.title-left{
    text-align: center;
}

.title-left p{
    text-align: center;
    margin-left: 2vw;
    color: rgb(40 121 175);
}

.title-left .title-line{
    width: 15vw;
    /* transform: rotate(180deg); */
    left: -1vw;
}
.section{
    width: 85vw;
    max-width: 1280px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.see-more{
    width: 100%;
    position: relative;
    height: 3rem;
}

.podcast-link{
    position: absolute;
    left: 5px;
    width: 50px;
    
}


.podcast-link:hover >.podcast .hp-2{
    fill: #144e93;
}

.podcast-link:hover >.podcast .hp-1{
    fill: #ffffff;
}




.article-link{
    position: absolute;
    width: 7vw;
    right: 2rem;
    transition: 0.5s;
}

.article-link img{
    width: 100%;
}

.article-link:hover{
    transform: translateX(10px);
}

/* section_3 */
.s3-content{
    color:#143d7a;
}
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7rem;
    margin-top: 2rem;
}

.article{
    width: 60%;
    padding: 3rem;
}

.article-full{
    width: 100%;
}

.abstract,.article-title{
    /* text-align: left; */
    margin-bottom: 2rem;
}

.article-title{
    font-size: 2.2rem;
    letter-spacing: 2px;
}

.article-full h2{
    text-align: center;
}

.abstract{
    font-size: 1.5rem;
}

.images{
    padding:2.5rem;
    width: 40%;
    position: relative;
    transition: 0.5s;
}

.images:hover{
    transform:scale(1.05);
}

.semi-image::after{
    content: "";
    position: absolute;
    width: calc(100% - 4rem);
    height: calc(100% - 4.25rem);
    background-color: #338ae2;
    top: 3rem;
    left: 3rem;
    z-index: -1;
}

.images img{
    width: 100%;
}

.chart{
    background-color: #fff;
    border-radius: 10px;
    height: auto;
    width: 100%;
    padding: 0.5rem;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.chart-title{
    text-align: center;
    padding-top: 1rem;
    font-size: 2rem;
    color: #2066bb;
}

.deep-blue{
    color:#143d7a;
}

.yellow{
    color:#f4ce0f;
}

.white{
    color: white;
}

/* section_9 */
.section_9{
    width: 85vw;
    max-width: 1680px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


.podcast-episode{
    color: #1b4075;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    width: calc(100% / 3);
}

.host-episode{
    position: relative;
    left: 5rem;
}

.host img{
    width: 221px;
    position: relative;
    bottom: 0.7rem;
}

.podcast-episode.speaker-hover:hover > .podcast-title{
    color: #2066bb;
}

.podcast-episode.speaker-hover:hover > .podcast-img{
    transform: scale(1.05);
}

.podcast-img{
    width: 40%;
    margin-right: 1rem;
    position: relative;
    transition: 0.5s;
}
.podcast-title{
    width: 60%;
    transition: 0.5s;
}

/* .podcast-img:hover{
    transform: scale(1.05);
} */

.podcast-img img{
    width: 100%;
}

.podcast{
    position: absolute;
    right: 0.5rem;
    bottom: 1rem;
    width: 25%;
    transition: 0.5s;
}

.hp-1{
    fill:#fff;
    fill-rule:evenodd;
    transition: 0.5s;

}

.hp-2{
    transition: 0.5s;
    fill:#2879af;
}

.podcast-icon{
    transition: 0.5s;
}

.podcast-icon:hover{
    transform: scale(1.05);
}

.podcast-icon:hover > .podcast .hp-1{
    fill:#ffffff;
}

.podcast-icon:hover > .podcast .hp-2{
    fill:#598ae2;
}

.host{
    margin-bottom: 1.5rem;
}
.speak-title{
    font-size: 1.4rem;
}

.speaker{
    color: #2879af;
}
.speaker h2{
    font-size: 1.3rem;
}
.speaker p {
    font-size: 1.1rem ;
}


/* section_5 */
.article_2{
    width: 50%;
    padding: 3rem;
    border-radius: 10px;
    margin: 1.5rem;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}

.blue{
    background: #598ae2;
    transition: 0.5s;
    position: relative;
}

.purple{
    background: #7575d3;
    /* margin-top: 5vw; */
    transition: 0.5s;
    position: relative;
    top: 5rem;
}
.edu-img{
    position: relative;
    width:60%;
    margin-bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.blue:hover,.purple:hover {
    transform: scale(1.03);
}

/* section_6 */
.bg-decor {
    position: absolute;
    width: 28vw;
    right: -13vw;
    top: 4vw;
}

.dark-purple{
    background-color: #4b4baa;
    border-radius: 10px;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
    margin:3rem;
    transition: 0.5s;
}

.dark-purple:hover{
    transform: scale(1.03);
}

.highschool-img{
    width: 50%;
}

/* section_7 */

.dark-blue{
    border-radius: 10px;
    background-color: #374cb5;
    margin:3rem;
    transition: 0.5s;
}

.dark-blue:hover{
    transform: scale(1.03);
}

.space-img{
    position: relative;
    height: 20vw;
    width: 50%;
    transition: 0.5s;
}

.space-img:hover{
    transform:scale(1.05);
}


.space-img-1,.space-img-2{
    position: absolute;
}

.space-img-1{
    width: 11vw;
    left: 10vw;
    top: 0vw;
}

.space-img-2{
    width: 13vw;
    left: 0vw;
    top: 10vw;
}

.space-img::before{
    content: "";
    width: 18vw;
    height: 15vw;
    position: absolute;
    left: 1vw;
    top: 2vw;
    background: linear-gradient(45deg,#342db0, #57a1f2);
}


/* section_8 */
.solution-content{
    /* margin: 4rem; */
    background-color: #f9fbff54;
    border-radius: 20px;
    padding: 2rem;
}

/* go-to-top */
.right-fixed-area {
    position: fixed;
    right: 30px;
    bottom: 25px;
    display: flex;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: 0.5s;
    z-index: 999;
}


.right-fixed-area.show{
    opacity: 1;
}

.go-to-top {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    background-color: #76fcfd;
    border:solid 2px #76fcfd;
    transition: 0.5s;
}

.go-to-top:hover{
    background: none;
}

.go-to-top:hover > #arrow .arrow{
    stroke:#ffffff;
}

#arrow{
    width:20px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50% ,-50%)
}

.arrow{
    fill:none;
    stroke:#144e93;
    stroke-linecap:round;
    stroke-miterlimit:10;
    stroke-width:5px;
}



/* footer */
footer{
    text-align: left;
    background: #143d7a;
    display: flex;
    align-items: center;
    padding: 2rem 5vw;
    line-height: 2rem;
    letter-spacing: 2px;
}


.left,.right{
    width: 50%;
    padding: 2rem;
}

.right{
    border-left: solid 1px #fff;
}

@media screen and (max-width:1950px){
    .title-left .title-line {
        width: 16vw
    }

    .article-link {
        width: 10vw;
    }

    .menu_close_box {
        font-size: 2rem;
        right: 15px;
        top: 10px;
    }
}

@media screen and (max-width:1700px){
    .title-left .title-line {
        width: 22vw;
        left: -2vw;
    }
    .menu_list {
        width: 18vw;
    }

    .host-episode {
        left: 0rem;
    }
}
@media screen and (max-width:1540px){
    .section_1::after {
        background: linear-gradient(to bottom, rgba(65, 121, 199, 0), rgb(96 149 216) );
    }
    .six-issues {
        width: 35vw;
    }
    .section-title {
        position: relative;
        font-size: 1.8rem;
    }
    .title-left .title-line {
        width: 20vw;
        left: -2vw;
    }
    .section_1 {
        height: 50vw;
    }
    .kv-bg {
        top: -7vw;
    }

    .kv-bg-line {
        top: -7vw;
    }
    .title {
        top: 17vw;
    }

    .foreword {
        font-size: 1.5rem;
    }
    .article-title {
        font-size: 1.8rem;
    }

    .abstract{
        font-size: 1.3rem;
    }
    .article_2 {
        width: 35%;
    }

    .article {
        width: 40%;
    }

    .article-full {
        width: 100%;
    }

    .images {
        width: 35%;
    }

    .space-img {
        width: 30%;
    }

    .sol-img{
        width: 45%
    }

    .section_9 { 
        margin-top: -7rem;
        display: flex;
        flex-direction: column;
        
    }

    .host-episode{
        flex-direction: row-reverse;
        left: 0rem;
    }

    .podcast-episode {
        width: 50%;
    }

    
}

@media screen and (max-width:1350px){
    .title-left .title-line {
        width: 28vw;
        left: -2vw;
    }

    .host img {
        width: 75%;
    }
}

@media screen and (max-width:1120px){
    .title-left .title-line {
        width: 38vw;
        left: -2vw;
    }

    .host img {
        width: 85%;
    }
}

@media screen and (max-width:1080px){
    .title-line {
        width: 40vw;
    }
    .title-left .title-line {
        width: 29vw;
        left: -3vw;
    }
    .article-title {
        font-size: 1.5rem;
    }

    .menu_list {
        width: 27vw;
    }

    .section_1::after {
        height: 15vw;
        background: linear-gradient(to bottom, rgba(65, 121, 199, 0), rgb(82 135 208) );
    }
    .foreword {
        font-size: 1.2rem;
    }

    .six-issues {
        width: 40vw;
    }

    .abstract {
        font-size: 1.1rem;
    }

    .article-link {
        width: 12vw;
    }

    .article {
        padding: 2rem;
    }

    .article_2 {
        width: 40%;
        padding: 2rem;
    }

    .space-img {
        position: relative;
        height: 20vw;
        width: 50%;
    }

    .space-img-1 {
        width: 16vw;
        left: 13vw;
        top: -2vw;
    }

    .space-img-2 {
        width: 17vw;
        left: 0vw;
        top: 12vw;
    }

    .space-img::before {
        width: 22vw;
        height: 21vw;
        left: 4vw;
        top: 2vw;
    }

    .sol-img{
        width: 50%;
        padding: 1rem;
    }

    footer {
        letter-spacing: 1px;
        font-size: 0.8rem;
    }

    .podcast-title h2{
        font-size: 1.3rem;
    }

    .podcast-title p{
        font-size: 1rem;
    }

    .host img {
        width: 95%;
    }
}

@media screen and (max-width:850px){
    .menu_list {
        width: 38vw;
    }

    .section_1{
        height: auto;
    }

    .title {
        top: 23vw;
    }

    .kv-bg{
        top: 0;
    }

    .kv-bg-line {
        top: 0vw;
    }

    .section_1::after {
        height: 20vw;
        background: linear-gradient(to bottom, rgba(65, 121, 199, 0), rgb(80 134 207));
    }

    .decor-tr {
        width: 53vw;
        top: 1vw;
        right: -14vw;
    }
    .foreword {
        font-size: 1rem;
    }

    .six-issues {
        width: 37vw;
    }
    .decor-br {
        bottom: -15vw;
    }

    .decor-bl {
        width: 46vw;
        bottom: 1vw;
        left: -14vw;
        opacity: 0.3;
    }

    .content {
        display: flex;
        flex-direction: column;
    }

    .content.reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .article {
        width: 80%;
        padding: 2rem;
    }

    .images {
        padding: 1rem;
        width: 50%;
        position: relative;
    }

    .article-title {
        font-size: 1.7rem;
    }

    .abstract {
        font-size: 1rem;
    }

    .article-link {
        width: 20vw;
        right: 0rem;
    }

    .title-line {
        width: 56vw;
    }

    .title-left .title-line {
        width: 38vw;
        left: -4vw;
    }

    .semi-image::after {
        width: calc(100% - 2rem);
        height: calc(100% - 2.25rem);
        top: 2rem;
        left: 2rem;
    }

    .content {
        margin-bottom: 2rem;
        margin-top: 0rem;
    }

    .article_2 {
        width: 80%;
    }

    .purple {
        top: 0rem;
    }

    .bg-decor {
        position: absolute;
        width: 65vw;
        right: 13vw;
        top: 12vw;
    }

    .space-img {
        height: 49vw;
    }

    .space-img-1 {
        width: 29vw;
        left: 19vw;
        top: 0vw;
    }

    .space-img-2 {
        width: 30vw;
        left: -6vw;
        top: 21vw;
    }

    .space-img::before {
        width: 27vw;
        height: 37vw;
        left: 7vw;
        top: 6vw;
    }

    .solution-content{
        width: 80%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .solution-content .article{
        width: 100%;
    }

    .sol-img{
        width:80%;
    }

    .section_9 { 
        margin-top: -4rem;
    }

    .podcast-episode {
        width: 80%;
    }

    .host-episode{
        flex-direction: row-reverse;
        left: 0rem;
    }
}


@media screen and (max-width:540px){
    body {
        background: linear-gradient(to bottom,
            rgba(21, 77, 175, 1),
            rgb(132, 184, 236),
            rgb(206, 230, 251),
            rgba(240, 248, 255, 1),
            rgb(211, 215, 247),
            rgb(179, 186, 241),
            rgba(28, 50, 187, 1)
            );
        }
    .ss-show{
        display: block;
    }
    .menu_list {
        width: 100vw;
    }

    .item {
        padding: 1rem;
    }

    .header-social-area img {
        width: 35px;
        margin: 0 1rem;
    }

    .section_1::after {
        height:30vw;
        background: linear-gradient(to bottom, rgba(65, 121, 199, 0), rgb(90 144 213 / 66%), rgb(82 136 209) );
    }

    .section-title {
        font-size: 1.5rem;
    }

    .title-line {
        width: 72vw;
        position: relative;
        bottom: 1.3rem;
        left: -7vw;
    }

    .title-left{
        text-align: left;
    }

    .title-left p{
        text-align: left;
        margin-left: 2vw;
    }

    .title-left .title-line {
        width: 62vw;
        left: -21vw;
        bottom: 5vw;
    }

    .podcast-link {
        width: 40px;
    }

    .black-bg {
        width: 90vw;
        height: 99vw;
    }

    .section_1{
        width: 100vw;
        height: auto;
    }
    #myVideo {
        left: 50%;
        transform: translateX(-50%);
    }

    .kv-bg{
        width: 252vw;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }

    .kv-bg-line {
        position: absolute;
        width: 252vw;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }


    .pc-title{
        display: none;
    }
    .mb-title{
        display: block;
    }

    .title {
        width: 90vw;
        top: 59vw;
    }


    .foreword {
        font-size: 1.1rem;
    }

    .six-issues {
        width: 88vw;
    }

    .decor-tl {
        width: 73vw;
        top: -7vw;
        left: -24vw;
    }

    .decor-tr {
        width: 66vw;
        top: 6vw;
        right: -20vw;
    }

    .decor-bl {
        width: 67vw;
        bottom: 7vw;
        left: -15vw;
    }

    .decor-br {
        width: 73vw;
        bottom: 60vw;
        right: -27vw;
    }

    .content {
        display: flex;
        flex-direction: column;
        margin-top: 0rem;
        margin-bottom: 2rem;
    }

    .content.reverse {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 0rem;
    }

    .article {
        width: 100%;
        padding: 1rem;
    }

    .abstract, .article-title {
        margin-bottom: 1.5rem;
    }

    .article-title {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .images {
        padding: 1rem;
        width: 80%;
        position: relative;
    }

    .abstract {
        font-size: 1.2rem;
    }

    .article-link {
        width: 30vw;
        right: 0rem;
    }

    .semi-image::after {
        width: calc(100% - 2rem);
        height: calc(100% - 2.25rem);
        top: 1.5rem;
        left: 1.5rem;
    }

    .article_2 {
        width: 100%;
        padding: 2rem;
        margin: 1.5rem;
    }

    .purple {
        top: 0rem;
    }

    .edu-img {
        width: 70%;
        margin-bottom: 1rem;
    }

    .dark-blue {
        margin-top: 0;
    }

    
    .mb-padding{
        padding-left: 9vw;
    }

    .article-full h2{
        text-align: left;
    }

    .chart {
        margin-top: 0;
    }

    .chart-title {
        font-size: 1.1rem;
        text-align: center !important;
    }

    .bg-decor {
        width: 85vw;
        right: -2vw;
        top: 18vw;
    }

    .space-img {
        position: relative;
        height: 74vw;
        width: 100%;
    }

    .space-img::before {
        width: 54vw;
        height: 39vw;
        left: 12vw;
        top: 21vw;
    }

    .space-img-1 {
        width: 38vw;
        left: 40vw;
        top: 0vw;
    }

    .space-img-2 {
        width: 41vw;
        left: 6vw;
        top: 34vw;
    }

    .solution-content {
        width: 100%;
        padding: 2rem 1rem;
    }

    .sol-img{
        width: 100%;
        padding: 0;
    }

    .right-fixed-area {
        bottom: 60px;
    }

    footer {
        text-align: left;
        padding: 1rem;
        font-size: 0.5rem;
        line-height: 1.2rem;
        letter-spacing: 1px;
        flex-direction: column;
    }

    .left, .right {
        width: 100%;
        padding: 1rem;
        font-size: 0.75rem;
    }

    .right{
        border-left: none;
        border-top: solid 1px #fff;
        text-align: center;
        
    }

    .section_9 {
        margin-top: -3rem
    }

    .podcast-episode {
        width: 100%;
        padding: 2rem 0rem
    }

    .host-episode{
        flex-direction: row-reverse;
        left: 0rem;
    }

    .host-episode .podcast-img{
        margin-left: 1rem;
        margin-right: 0;
        width: 43%;
    }

    .host-episode .speaker{
        margin-top: -1rem;
    }
    .podcast-title h2 {
        font-size: 1.1rem;
    }

    .host h1{
        font-size: 1.3rem;
    }

    .host img {
        width: 130%;
        left: -3rem;
        bottom: 0.5rem;
    }

    .host {
        margin-bottom: 1rem;
    }

    .speak-title{
        font-size: 1.1rem !important;
    }

    .podcast-title p {
        font-size: 0.8rem;
    }

    .podcast-img {
        width: 45%;
    }

    .podcast-title {
        width: 55%;
    }

}