.elementor-775 .elementor-element.elementor-element-eebb30c{padding:0px 0px 0px 0px;}.elementor-775 .elementor-element.elementor-element-a6c27ec > .elementor-element-populated{padding:0px 0px 0px 0px;}body.elementor-page-775:not(.elementor-motion-effects-element-type-background), body.elementor-page-775 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-38416eb *//* Basic Page Style */
    .main-continer {
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f0f2f5;
      font-family: Arial, sans-serif;
      /*
      background-image: url(bottom-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;*/
    }

    /* Main Slider container */
    .circular-slider-container {
      width: 700px; 
      height: 700px;
      position: relative;
    }

    /* rotate animation */
    .slider-ring {
      width: 100%;
      height: 100%;
      position: relative;
      animation: rotate-ring 20s linear infinite;
    }

    .slide-item {
      position: absolute;
      width: 30%; 
      height: 30%;
      cursor: pointer;
    }

    .slide-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      animation: counter-rotate 20s linear infinite;
    }

    .slide-content img {
      max-width: 80%;
      height: auto;
      transition: transform 0.3s;
    }

    .slide-content img:hover {
      transform: scale(1.1);
    }

    .slide-content p {
      margin-top: 10px;
      font-weight: bold;
      color: #444;
      font-size: 14px;
      display: none;
    }

     /* Center Image Style */
    .center-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 270px;
      height: 270px;
      overflow: hidden;
      /*
      border-radius: 50%;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
      background: #fff;
      */
    }

    .center-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


    #resources { top: -25px; left: 50%; transform: translateX(-50%); }
    #review { top: 50%; right: -30px; transform: translateY(-50%); }
    #product { bottom: -50px; left: 51%; transform: translateX(-50%); }
    #curriculum { top: 51%; left: -35px; transform: translateY(-50%); }


    #resources .slide-content img {
        max-width: 80%;
    }
    #review .slide-content img {
        max-width: 76%;
    }
    #product .slide-content img {
        max-width: 66%;
    }
    #curriculum .slide-content img {
        max-width: 83%;
    }

    .corner-arrow {
      position: absolute;
      width: 27%; 
      height: 27%;
    }
    .corner-arrow img { width: 100%; height: 100%; }

    #connect { top: 5%; right: 5%; }
    #communicate { bottom: 5%; right: 5%; }
    #construct { bottom: 5%; left: 5%; }
    #critique { top: 5%; left: 5%; }

    /* Keyframes animation */
    @keyframes rotate-ring {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes counter-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }

    @media (max-width: 767px){
      .circular-slider-container {
        width: 300px; height: 300px;
      }

      .center-image {
        top: 50%;
        left: 49%;
        transform: translate(-50%, -50%);
        width: 170px;
        height: 170px;
    }
     #product {
        bottom: -28px;
    }
    #curriculum {
        left: -28px;
    }
    .lightbox img {
        max-width: 70% !important;
        max-height: 70% !important;
    }
    }




    @media (min-width: 768px) and (max-width: 1024px){
      .circular-slider-container {
        width: 450px; height: 450px;
      }
    }

    /* Lightbox */
    .lightbox {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }
    .lightbox img {
        padding: 3%;
        max-width: 80%;
        max-height: 80%;
        border-radius: 10px;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
        background: #fff;
    }
    .lightbox .close {
      position: absolute;
      top: 20px; right: 30px;
      font-size: 40px;
      color: white;
      cursor: pointer;
      font-weight: bold;
    }/* End custom CSS */