@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500');
body {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
.section-1 {
    width: 100%;
    padding-top:2rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #ffffff;
}
.section-2 {
    width: 100%;
    padding-top:2rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
}
.section-2 p {
    padding-top:1rem;  
}
.section-3 {
    width: 100%;
    padding-top:2rem;
    padding-bottom:4rem;
    text-align: center;

}
.section-4 {
    width: 100%;
    padding-top:2rem;
    padding-bottom:4rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #F5F5F7;
}
.section-5 {
    width: 100%;
    padding-top:4rem;
    padding-bottom:4rem;
    background-color: #ffffff;
}
.section-5 h2 {
    padding-top: 1rem;
    padding-bottom: 2rem;
    text-align: left;
}
.section-5 p {
    text-align: left;
}
.section-6 {
    width: 100%;
    padding-top:2rem;
    padding-bottom:4rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
}
.section-6 p {
    padding-top: 1rem;
    font-size:1.2rem;
    padding-left: 2rem;
    padding-right: 2rem; 
}
.section-7 {
    width: 100%;
    padding-bottom:4rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #F5F5F7;
}
.section-7 h2 {
    padding-top:0rem;
}
.section-7 h3 {
    padding-top: 0rem;
    padding-bottom: 2rem;
}
.section-7 p {
    text-align: left; 
}
.section-8 {
    width: 100%;
    padding-bottom:4rem;
    text-align: center;
    background-color: #CED8E2;
}
.section-8 h2 {
    padding-top: 0rem;
    text-align: left; 
}
.section-8 p {
    text-align: left; 
}
.section-9 {
    width: 100%;
    text-align: center;
    background-color: #ffffff;
}
.section-9 h2 {
    padding-top: 0rem;
    text-align: left; 
}
.section-9 p {
    text-align: left;
    padding-top: 2rem;
}
.section-10 {
    width: 100%;
    padding-bottom:4rem;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #ffffff;
}
.section-10 p {
    text-align: center;
    padding-top: 1rem;
}
.section-10 .carousel-inner {
    min-height: 780px;
      }
.section-11 {
    position: relative;
    background-color: #CBCECC;
    padding-top: 4rem;
}
h1 {
    text-align: center;
    padding-top:2rem;
    padding-bottom:1rem;
    color:#000000;
    font-size:5rem;
}
h2 {
    text-align: center;
    padding-top:2rem;
    padding-bottom:1rem;
    color:#000000;
    font-size:4rem;
}
h3 {
    text-align: center;
    padding-top:2rem;
    padding-bottom:1rem;
    color:#000000;
    font-size:2.5rem;  
}
p {
    color:#000000;
    font-size:1.4rem;
    text-align: center;
}
.carbon-p {
    text-align: left;
    padding-top:1rem;
    color:#000000;
    font-size:1.4rem;
}
.ports-p {
    text-align: center;
    padding-top:1rem;
    color:#686868;
    font-size:1rem;
}
.p-caption {
    padding-top: 0.5rem;
    color:#686868;
    font-size:1.2rem;
    text-align: left;
}
.p-embed {
    position: absolute;
    top: 1rem;
    left: 2rem;
    right: 2rem;
    color: #ffffff;
    text-align:left;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1;
}
.slide-rounded {
    border-radius: 2rem;
    overflow:hidden;
}
.row-vertical {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.row-horizontal {
    padding-left: 2rem;
    padding-right: 2rem;
}
.no-padding {
    padding-left: 0rem;
    padding-right: 0rem;
}
.addons-embed1 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#000000; font-family: 'Inter', sans-serif;
    font-size: 1.4vw;
    text-align: center;
}
.addons-embed2 {
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#000000;
    font-family: 'Inter', sans-serif;
    font-size: 3vw;
    text-align: center;
}
.addons-embed3 {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#000000;
    font-family: 'Inter', sans-serif;
    font-size: 1.1vw;
    text-align: center;
}
.carousel-item .custom-carousel-column {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-gradient-text {
      font-weight: bold;
      background: linear-gradient(90deg, 
          #007AFF 0%, 
          #A55EEA 35%, 
          #FF2D55 65%, 
          #FF9500 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
  }

  .custom-carousel-pill-buttons .custom-btn {
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .custom-carousel-pill-buttons .custom-btn.custom-active {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
  }

@media (max-width: 768px) {
    h1 {
      font-size: 2rem;
    }
    h2 {
      font-size: 2rem;
      padding-top: 0rem; 
    }
    h3 {
      font-size: 1.7rem;  
    }
    h6 {
        font-size: 2rem;
    }
    p {
      font-size: 1.2rem;  
    }
    .slide-rounded {
    margin-bottom: 1rem;
    }
    .carbon-p {
    padding-top:0rem;
    }
    .row-vertical {
    padding-top: 1rem;
    padding-bottom: 1rem;
    }
    .no-padding {
    padding-left: 4rem;
    padding-right: 4rem;
    }
    .section-1 {
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-2 {
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-2 .carousel-inner {
    min-height: 370px;
      }
      #carouselExampleCaptions .carousel-control-prev,
      #carouselExampleCaptions .carousel-control-next {
        top: 40px;
      }
      
      #carouselExampleCaptions .carousel-control-prev-icon,
      #carouselExampleCaptions .carousel-control-next-icon {
        filter: invert(1);
      }
      #carouselExampleCaptions3 .carousel-control-prev,
      #carouselExampleCaptions3 .carousel-control-next {
        top: 160px;
      }
      
      #carouselExampleCaptions3 .carousel-control-prev-icon,
      #carouselExampleCaptions3 .carousel-control-next-icon {
        filter: invert(1);
      }
      .custom-indicators {
        bottom: -30px;
      }
    .section-3 {
    padding-bottom: 2rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-4 {
    padding-bottom: 2rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .setion-4 h2 {
    padding-top: 0rem;
    }
    .section-4 h3 {
    padding-top: 3rem;
    }
    .section-5 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-6 {
    padding-top: 1rem;
    padding-bottom: 2rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-6 .carousel-inner {
        min-height: 890px;
          }
    .section-7 {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    }
    .section-8 {
    padding-bottom: 2rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-9 p {
    padding-top: 0rem;
    }
    .section-10 {
    padding-bottom: 2rem;
    padding-left: 0rem;
    padding-right: 0rem;
    }
    .section-10 .carousel-inner {
        min-height: 420px;
          }
    .section-11 p {
    margin-bottom: 0rem;
    padding-left: 2rem;
    padding-right: 2rem;
          }
    .carousel-slide-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
      }
      .addons-embed1,
      .addons-embed2,
      .addons-embed3 {
        display: none;
      }
    
      .addons-mobile-text {
        display: block;
      }
      .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #000;
        opacity: 0.3;
      }
      
      .carousel-indicators .active {
        opacity: 1;
      }
      .slide-rounded {
        border-radius: 1rem;
    }
    .apple-inteligence {
        padding-bottom: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
      font-size: 3rem;
    }
    h2 {
        font-size: 3rem;
    }
    p {
        font-size: 1.4rem;
    }
    .section-2 .carousel-inner {
        min-height: 410px;
          }
    .section-6 .carousel-inner {
        min-height: 480px;
          }
    .section-10 .carousel-inner {
        min-height: 520px;
          }
          .addons-embed1 {
            font-size: 1.4vw;
  }
          .addons-embed3 {
            padding-top: 1rem;
            font-size: 1.4vw;
  }
}