#mobileCarousel {
    display: none;
  }

/* Pantallas pequeñas (móviles y tablets) */
@media (max-width: 767px){
    .container-text {
        display: flex;
        flex-direction: column;
        margin: 40px 0 30px 0;
    }

    .container-left,
    .container-right {
        flex: unset;
        display: block;
        margin: 0;
        text-align: left;
    }

    .text-right{
        margin-top: 5%;
    }

    .text-right p {
        font-size: 0.9em;
        width: 90%;
        margin: 0 auto;
        color: #0a1e6e;
        padding: 1% 5%;
        line-height: 1.5;
    }

    .text-blue {
        color: #0a1e6e;
        font-size: 1.5em;
        font-weight: bolder;
        padding-left: 10%;
        margin-bottom: 5px;
    }

    .text-highlight {
        color: #6482e6;
        font-size: 1.5em;
        font-weight: bolder;
        padding-left: 10%;
        margin-bottom: 5px;
    }

    .team-section {
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: auto;
    }

    .team-text {
        position: absolute;
        z-index: 2;
        width: 100%;
        background-color: #000a3c;
        color: #e8e8e8;
        padding: 20% 10% 15%;
        clip-path: polygon(0 0, 28% 0, 38% 8%, 101% 8%, 101% 90%, 49% 90%, 41% 100%, 0 100%);
        box-sizing: border-box;
    }

    .team-text h2 {
        color: #6482e6;
        font-weight: bold;
        padding-left: 0;
        font-size: 1.5em;
        margin-bottom: 5px;
    }

    .team-text p {
        color: #e8e8e8;
        margin-top: 10px;
        line-height: 1.5;
        padding: 10px 0;
        font-size: 0.9em;
    }

    .team-image {
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 450px;
    }

    .team-image img {
        width: 100%;
        height: auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 31% 100%, 22% 86%, 0% 86%);
    }

    .team-container {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
    }

    .text-light {
        color: #e8e8e8;
        line-height: 1;
        font-size: 1.5em;
        font-weight: bolder;
    }

    .perfil-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10% 0 5%;
    }

    .perfil-container {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 65%;
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        border-radius: 1%;
        overflow: hidden;
    }

    .perfil-image {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        clip-path: polygon(0 5%, 8% 0, 21% 0, 27% 5%, 63% 5%, 68% 0%, 94% 0, 100% 5%, 100% 89%, 93% 95%, 58% 95%, 48% 100%, 10% 100%, 0% 93%, 0 60%, 5% 54%, 5% 38%, 0 30%);
        z-index: 2;
    }

    .perfil-image img {
        max-width: 100%;
        height: auto;
    }

    .perfil-text {
        flex: 1;
        padding: 10% 0; 
        height: auto;
        z-index: 1;
    }

    .perfil-text h1 {
        color: #6482e6;
        font-weight: bold;
        text-align: left;
        font-size: 1.5em;
        text-align: center;
    }

    .perfil-text h4 {
        color: #0a1e6e;
        font-weight: normal;
        font-size: 1.1em; 
        margin-bottom: 2%;
        text-align: center;
    }

    .perfil-text p {
        color: #0a1e6e;
        line-height: 1.5;
        font-size: 0.9em;
        line-height: 1.5;
        text-align: center;
        padding-top: 5%;
    }

    #mobileCarousel {
        display: block;
    }

    #carouselExampleControls{
        display: none;
    }
    
    .carousel-section {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 4%;
    }
    
    .carousel-header {
        margin-bottom: 10px;
    }
    
    .carousel-header h2 {
        font-size: 24px;
        color: #0a1e6e;
        font-weight: bold;
        padding-bottom: 20px;
        width: 100%;
    }
    
    .line-text-integrant{
        display: flex;
        justify-content: center;
    }
    
    .custom-line-integrant{
        width: 30%;
        background: linear-gradient(to right, #D8B079, #0B2447, #56C1B5);
    }
    
    .carusel-design {
        min-height: 480px;
        height: auto;
        padding: 3% 2% 4%;
    }
    
    .carousel-inner {
        height: 100%;
    }

    .integrant-image {
        flex: 0 0 70%;
        min-height: 700px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0 1rem;
        position: relative;
    }

    .integrant-image img {
        width: 80% !important;
        height: auto;
        max-height: 400px;
        object-fit: cover;
        clip-path: polygon(90% 0%, 100% 10%, 100% 87%, 95% 93%, 50% 93%, 45% 100%, 5% 100%, 0% 95%, 0% 70%, 6% 65%, 6% 45%, 0% 40%, 0% 0%);
        background-color: #e6efff;
        position: relative;
        z-index: 2;
    }

    .text-box {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        min-height: 300px;
        height: auto;
        border: 0.01em solid;
        border-image: linear-gradient(to right, #2e5efa 50%, #b9ccd1 100%) 1;
        color: #0a1e6e;
        padding: 80px 4% 4% 4%;
        box-sizing: border-box;
        text-align: center;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .text-box h4 {
        font-size: 17px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 6px;
        color: #0a1e6e;
        line-height: 1.3;
    }

    .text-box h2 {
        font-size: 24px; 
        font-weight: bold;
        margin-bottom: 8px;
        color: #6482e6;
        line-height: 1.2;
    }

    .text-box p {
        font-size: 14px; 
        line-height: 1.4;
        color: #0a1e6e;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: 1;
    }
    
    .carousel-control-prev {
        left: 3%;
    }
    
    .carousel-control-next {
        right: 3%;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 70%;
        filter: invert(50%);
        background-color: transparent;
    }

    
    .play-section {
        width: 100%;
        height: auto;
        padding: 25px 0 50px;
    }
    
    .play-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .play-image img {
        position: relative;
        width: 100%;
        height: auto;
    }
}

/* Pantallas medianas (laptops pequeñas y desktops pequeños) */
@media (min-width: 768px) and (max-width: 1024px) {   
    .container-text {
        display: flex;
        justify-content: space-between;
        margin: 80px 0 60px 0;
    }
    
    .container-left {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        height: 100%;
        margin-right: 2%;
    }
    
    .container-right {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        height: 100%;
        margin-right: 6%;
        color: #0a1e6e;
    }
    
    .text-right p {
        font-size: 0.8em;
        width: 90%;
        color: #0a1e6e;
    }

    .text-blue {
        color: #0a1e6e;
        line-height: 1;
        font-size: 1.3em;
        font-weight: bolder;
    }
    
    .text-highlight {
        color: #6482e6;
        line-height: 1;
        font-size: 1.3em;
        font-weight: bolder;
    }

    .team-section {
        display: flex;
        flex-wrap: wrap;
        background-color: #e8e8e8;
    }
    
    .team-text {
        background-color: #000a3c;
        color: #e8e8e8;
        flex: 1;
        display: flex;
        flex-direction: column;
        clip-path: polygon(0 0, 28% 0, 38% 13%, 101% 13%, 101% 90%, 49% 90%, 41% 100%, 0 100%);
        padding: 7% 0 6%;
        justify-content: center;
    }
    
    .team-text h2 {
        color: #6482e6;
        font-weight: bold;
        padding-left: 10%;
        line-height: 1;
        font-size: 1.3em;
    }
    
    .team-text p {
        color: #e8e8e8;
        margin-top: 20px;
        line-height: 1.5;
        padding: 0 10%;
        font-size: 0.8em;
    }
    
    .team-image {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .team-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        clip-path: polygon(0 13%, 10% 0, 100% 0%, 100% 100%, 10% 100%, 0 90%);
    }
    
    .team-container {
        display: flex;
        margin: 0;
    }

    .text-light {
        color: #e8e8e8;
        line-height: 1;
        font-size: 1.2em;
        font-weight: bolder;
    } 
    
    .perfil-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }

    .perfil-container {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 60%;
        width: 100%;
        margin: 0 auto;
        flex-direction: row;
        border-radius: 1%;
        overflow: hidden;
    }

    .perfil-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        clip-path: polygon(10% 0%, 21% 0%, 30% 6%, 48% 6%, 57% 0%, 90% 0%, 100% 6%, 100% 88%, 92% 93%, 55% 93%, 44% 100%, 10% 100%, 0% 93%, 0% 56%, 9% 50%, 9% 32%, 0% 24%, 0% 8%);
        z-index: 2;
    }

    .perfil-image img {
        max-width: 100%;
        height: auto;
    }

    .perfil-text {
        flex: 1;
        padding: 5% 5%;
        height: auto;
        z-index: 1; 
        border: 1px solid #ccc;
        border-radius: 1%;
    }

    .perfil-text h1 {
        color: #6482e6;
        font-weight: bold;
        text-align: right;
        font-size: 1.5em;
    }

    .perfil-text h4 {
        color: #0a1e6e;
        font-weight: normal;
        font-size: 1.2em;
        margin-bottom: 2%;
        text-align: right;
    }

    .perfil-text p {
        color: #0a1e6e;
        line-height: 1.5;
        font-size: 0.8em;
        text-align: right;
        padding-top: 5%;
    }

    .carousel-section {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 3%;
    }
    
    .carousel-header {
        margin-bottom: 20px;
    }
    
    .carousel-header h2 {
        font-size: 1.3em;
        color: #0a1e6e;
        font-weight: bold;
        padding-bottom: 20px;
        width: 100%;
    }
    
    .line-text-integrant{
        display: flex;
        justify-content: center;
    }
    
    .custom-line-integrant{
        width: 30%;
        background: linear-gradient(to right, #D8B079, #0B2447, #56C1B5);
    }
    
    .carusel-design {
        min-height: 700px;
        height: auto;
        padding: 2% 5% 3%;
    }
    
    .carousel-inner {
        height: 100%;
    }
    
    .integrant-image {
        flex: 0 0 28%;
        min-height: 800px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 0 1rem;
        position: relative;
    }
    
    .integrant-image img {
        width: 90%;
        height: auto;
        max-height: 220px;
        object-fit: cover;
        clip-path: polygon(90% 0%, 100% 10%, 100% 87%, 95% 93%, 50% 93%, 45% 100%, 5% 100%, 0% 95%, 0% 70%, 6% 65%, 6% 45%, 0% 40%, 0% 0%);
        background-color: #e6efff;
        position: relative;
        z-index: 2;
    }
    
    .text-box {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        min-height: 510px;
        height: auto;
        border: 0.01em solid;
        border-image: linear-gradient(to right, #2e5efa 50%, #b9ccd1 100%) 1;
        color: #0a1e6e;
        padding: 90px 3% 3% 3%;
        box-sizing: border-box;
        text-align: left;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .text-box h4 {
        font-size: 1rem;
        font-weight: normal;
        color: #0a1e6e;
        margin-bottom: 0.5rem;
    }
    
    .text-box h2 {
        font-size: 1.3em;
        font-weight: bold;
        color: #6482e6;
        margin-bottom: 0.8rem;
        line-height: 1.2;
    }
    
    .text-box p {
        font-size: 0.8rem;
        line-height: 1.5;
        color: #6c7a92;
        margin: 0;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: 1;
    }
    
    .carousel-control-prev {
        left: 3%;
    }
    
    .carousel-control-next {
        right: 3%;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 100%;
        height: 100%;
        background-size: 100%, 100%;
        filter: invert(50%);
        background-color: transparent;
    }

    .play-section {
        width: 100%;
        height: auto;
        padding: 50px 0;
    }
    
    .play-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .play-image img {
        position: relative;
        width: 80%;
        height: auto;
    }
}

/* Pantallas grandes (pantallas grandes y más grandes) */
@media (min-width: 1025px) and (max-width: 1441px) {
    .team-section {
        display: flex;
        flex-wrap: wrap;
        background-color: #e8e8e8;
    }
    
    .team-text {
        background-color: #000a3c;
        color: #e8e8e8;
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        clip-path: polygon(0 0, 28% 0, 38% 13%, 101% 13%, 101% 90%, 49% 90%, 41% 100%, 0 100%);
    }
    
    .team-text h2 {
        color: #6482e6;
        font-weight: bold;
        padding-left: 15%;
    }
    
    .team-text p {
        color: #e8e8e8;
        margin-top: 20px;
        line-height: 1.5;
        padding-left: 15%;
        width: 90%;
    }
    
    .team-image {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .team-image img {
        width: 100%;
        height: auto;
        clip-path: polygon(0 13%, 10% 0, 100% 0%, 100% 100%, 10% 100%, 0 90%);
    }
    
    .team-container {
        display: flex;
        margin: 0;
    }
    
    .perfil-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .text-right p {
        color: #0a1e6e;
    }

    .perfil-container {
        display: flex;
        border-radius: 1%;
        overflow: hidden;
        max-width: 55%;
    }
    
    .perfil-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        clip-path: polygon(10% 0%, 21% 0%, 30% 6%, 48% 6%, 57% 0%, 90% 0%, 100% 6%, 100% 88%, 92% 93%, 55% 93%, 44% 100%, 10% 100%, 0% 93%, 0% 56%, 9% 50%, 9% 32%, 0% 24%, 0% 8%);
        z-index: 2;
    }
    
    .perfil-image img {
        max-width: 100%;
        height: auto;
    }
    
    .perfil-text {
        flex: 1;
        transform: translate3d(-3%, 20%, 0);
        height: 337px;
        padding: 5% 5% 0% 0%;
        border: 1px solid #ccc;
        border-radius: 1%;
        z-index: 1;
    }
    
    .perfil-text h1 {
        color: #6482e6;
        font-weight: bold;
        text-align: right;
    }
    
    .perfil-text h4 {
        color: #0a1e6e;
        font-weight: normal;
        font-size: larger;
        margin-bottom: 2%;
        text-align: right;
    }
    
    .perfil-text p {
        color: #0a1e6e;
        line-height: 1.5;
        text-align: right;
        padding-top: 4%;
        margin-left: 10%;
    }
    
    .carousel-section {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .carousel-header {
        margin-bottom: 20px;
    }    
    
    .line-text-integrant{
        display: flex;
        justify-content: center;
    }
    
    .custom-line-integrant{
        width: 40%;
        background: linear-gradient(to right, #D8B079, #0B2447, #56C1B5);
    }

    .carousel-header h2 {
        font-size: 4vh;
        color: #0a1e6e;
        font-weight: bold;
        padding-bottom: 40px;
        width: 70%;
    }
    
    .carusel-design {
        min-height: 700px;
        height: auto;
        padding: 2% 5% 4%;
    }
    
    .carousel-inner {
        height: 100%;
    }
    
    .carousel-inner img {
        max-width: 55%;
        margin: 0;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        filter: invert(100%);
        top: 50%;
        transform: translateY(-50%);
        width: 5%;
        height: 5%;
        background-color: #6482e6;
        border-radius: 50%;
        z-index: 1;
    }

    .carousel-control-prev {
        left: 3%;
    }
    
    .carousel-control-next {
        right: 3%;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        border: none;
        background-color: transparent;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 100%;
        height: 100%;
        background-size: 100%, 100%;
        filter: invert(50%);
        background-color: transparent;
    }
    
    .integrant-image {
        flex: 1;
        min-height: 700px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        position: relative;
        margin: 0 1rem;
    }
    
    .integrant-image img {
        width: 100%;
        height: auto;
        clip-path: polygon(90% 0%, 100% 10%, 100% 87%, 95% 93%, 50% 93%, 45% 100%, 5% 100%, 0% 95%, 0% 70%, 6% 65%, 6% 45%, 0% 40%, 0% 0%);
        position: relative;
        z-index: 2;
    }
    
    .text-box {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        min-height: 600px;
        height: auto;
        border: 0.01em solid;
        border-image: linear-gradient(to right, #2e5efa 50%, #b9ccd1 100%)  1;
        color: #0a1e6e;
        padding: 110px 4% 3% 4%;
        box-sizing: border-box;
        text-align: left;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .text-box h4 {
        font-size: 14px;
        color: #0a1e6e;
        font-weight: normal;
        margin: 0 0 8px 0;
        line-height: 1.2;
        text-transform: uppercase;
    }
    
    .text-box h2 {
        font-size: 1.3rem;
        color: #6482e6;
        font-weight: bold;
        margin: 0 0 4% 0;
    }
     
    /***************/
    .play-section {
        width: 100%;
        height: auto;
        padding: 50px 0;
    }
    
    .play-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .play-image img {
        position: relative;
        width: 55%;
        height: auto;
    }
    
}

@media (min-width: 1442px)  {
    .team-section {
        display: flex;
        flex-wrap: wrap;
        background-color: #e8e8e8;
    }
    
    .team-text {
        background-color: #000a3c;
        color: #e8e8e8;
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        clip-path: polygon(0 0, 28% 0, 38% 13%, 101% 13%, 101% 90%, 49% 90%, 41% 100%, 0 100%);
    }
    
    .team-text h2 {
        color: #6482e6;
        font-weight: bold;
        padding-left: 15%;
    }
    
    .team-text p {
        color: #e8e8e8;
        margin-top: 20px;
        line-height: 1.5;
        padding-left: 15%;
        width: 90%;
    }
    
    .team-image {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .team-image img {
        width: 100%;
        height: auto;
        clip-path: polygon(0 13%, 10% 0, 100% 0%, 100% 100%, 10% 100%, 0 90%);
    }
    
    .team-container {
        display: flex;
        margin: 0;
    }
    
    .perfil-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    }
    
    .text-right p {
        color: #0a1e6e;
    }

    .perfil-container {
        display: flex;
        border-radius: 1%;
        overflow: hidden;
        max-width: 55%;
    }
    
    .perfil-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        clip-path: polygon(10% 0%, 21% 0%, 30% 6%, 48% 6%, 57% 0%, 90% 0%, 100% 6%, 100% 88%, 92% 93%, 55% 93%, 44% 100%, 10% 100%, 0% 93%, 0% 56%, 9% 50%, 9% 32%, 0% 24%, 0% 8%);
        z-index: 2;
    }
    
    .perfil-image img {
        max-width: 100%;
        height: auto;
    }
    
    .perfil-text {
        flex: 1;
        transform: translate3d(-3%, 20%, 0);
        height: 585px;
        padding: 5% 5% 0% 0%;
        border: 1px solid #ccc;
        border-radius: 1%;
        z-index: 1;
    }
    
    .perfil-text h1 {
        color: #6482e6;
        font-weight: bold;
        text-align: right;
    }
    
    .perfil-text h4 {
        color: #0a1e6e;
        font-weight: normal;
        font-size: larger;
        margin-bottom: 2%;
        text-align: right;
    }
    
    .perfil-text p {
        color: #0a1e6e;
        line-height: 1.5;
        text-align: right;
        padding-top: 4%;
        margin-left: 10%;
    }
    
    .carousel-section {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .carousel-header {
        margin-bottom: 20px;
    }    
    
    .line-text-integrant{
        display: flex;
        justify-content: center;
    }
    
    .custom-line-integrant{
        width: 40%;
        background: linear-gradient(to right, #D8B079, #0B2447, #56C1B5);
    }

    .carousel-header h2 {
        font-size: 4vh;
        color: #0a1e6e;
        font-weight: bold;
        padding-bottom: 40px;
        width: 70%;
    }
    
    .carusel-design {
        min-height: 700px;
        height: auto;
        padding: 2% 10% 4%;
    }
    
    .carousel-inner {
        height: 100%;
    }
    
    .carousel-inner img {
        max-width: 45%;
        margin: 0;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        filter: invert(100%);
        top: 50%;
        transform: translateY(-50%);
        width: 5%;
        height: 5%;
        background-color: #6482e6;
        border-radius: 50%;
        z-index: 1;
    }

    .carousel-control-prev {
        left: 7%;
    }
    
    .carousel-control-next {
        right: 7%;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        border: none;
        background-color: transparent;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 100%;
        height: 100%;
        background-size: 100%, 100%;
        filter: invert(50%);
        background-color: transparent;
    }
    
    .integrant-image {
        flex: 1;
        min-height: 650px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        position: relative;
        margin: 0 1rem;
    }
    
    .integrant-image img {
        width: 100%;
        height: auto;
        clip-path: polygon(90% 0%, 100% 10%, 100% 87%, 95% 93%, 50% 93%, 45% 100%, 5% 100%, 0% 95%, 0% 70%, 6% 65%, 6% 45%, 0% 40%, 0% 0%);
        position: relative;
        z-index: 2;
    }
    
    .text-box {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        min-height: 500px;
        height: auto;
        border: 0.01em solid;
        border-image: linear-gradient(to right, #2e5efa 50%, #b9ccd1 100%)  1;
        color: #0a1e6e;
        padding: 110px 4% 3% 4%;
        box-sizing: border-box;
        text-align: left;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .text-box h4 {
        font-size: medium;
        color: #0a1e6e;
        font-weight: normal;
        margin: 0 0 8px 0;
        line-height: 1.3;
        text-transform: uppercase;
    }
    
    .text-box h2 {
        font-size: 1.7rem;
        color: #6482e6;
        font-weight: bold;
        margin: 0 0 4% 0;
    }
     
    /***************/
    .play-section {
        width: 100%;
        height: auto;
        padding: 50px 0;
    }
    
    .play-image {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .play-image img {
        position: relative;
        width: 55%;
        height: auto;
    }
    
}