@font-face {
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
    font-family: 'Polar';
}

.main_cont {
    background-color: #f7ffff;
}


 

    .carousel {
      perspective: 1000px;
    }

    .ring {
      width: 600px;
      height: 400px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
    }

    .img {
      position: absolute;
      width: 300px;
      height: 200px;
      background-size: cover;
      background-position: center;
      text-align: center;
      line-height: 200px;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
      border-radius: 10px;
    }

    .img .title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.5);
      padding: 10px 20px;
      border-radius: 5px;
    }


.bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    /* Container styling */
    .bg-container {
        position: relative;
        z-index: 0;
    }

   
    .pg_2 {
       
        line-height: 1.8;
        text-align: center; /* Center text within the list */
    }

    /* Fade-in effect for elements */
    .fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s forwards;
    }

    .fade-in-up:nth-child(1) {
        animation-delay: 0.3s;
    }

    .fade-in-up:nth-child(2) {
        animation-delay: 0.5s;
    }

    .fade-in-up:nth-child(3) {
        animation-delay: 0.7s;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    
    .icon-style {
        font-size: 1.8rem;
        color: #00008B;
        transition: transform 0.3s ease;
        margin-right: 10px; 
    }

    .icon-style:hover {
        transform: scale(1.2);
        color: #FFD700; /* Golden color on hover for icons */
    }

    /* Responsive font size */
    @media (max-width: 768px) {
        /*.display-4 {*/
        /*    font-size: 2.5rem;*/
        /*}*/
        .lead {
            font-size: 1.1rem;
        }
    }