*{
            box-sizing: border-box;
        }
      :root{
        --main-color:rgb(248, 79, 1);
        --primary-color:#FFC727;
      }
        body{
            height: 100%;
            width: 100%;
            background-size: 100% 100%;
            background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
            background-image: radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 18% 71%, #DBDBDBF5 6%, #073AFF00 100%),radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, #073AFF00 100%),radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%, #073AFF00 100%),radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),radial-gradient(74% 86% at 67% 38%, #6DFFAEF5 24%, #073AFF00 100%),linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
            overflow-x: hidden;
            color: #34444b;
            font-family: Arial, Helvetica, sans-serif;
        }
        a{
            text-decoration: none;
        }
    /* Navbar */
    .topnav {
    overflow-x: hidden;
    margin-left: 8%;
    margin-right: 8%;
    overflow-x: hidden;
    }
    .logo{
        font-weight: bolder;
    }
    /* Style the links inside the navigation bar */
    .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    }

    /* Change the color of links on hover */
    .topnav a:hover {
    color: var(--primary-color);
    }

    /* Add an active class to highlight the current page */
    .topnav a.active {
    background-color: #04AA6D;
    color: white;
    }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
    display: none;
    }
    .menu-items{
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }
    .sign-in-btn{
        border: 2px solid black;
        width: 8rem;
        border-radius: 2rem;
    }
    .sign-up-btn{
        border: 2px solid #fe4848;
        width: 9rem;
        color:#fff;
        background-color: rgb(248, 79, 1);
        border-radius: 2rem;
    }
   /*Hero Section */
    main{
        margin-left: 8%;
        margin-right: 8%;
        overflow-x: hidden;
    }
    .hero-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40%, 50%));
        width: 100%;
        height: auto;
    }
    .heading-container{
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
    }
    .main-heading{
        font-size: 4.9rem;
    }
    .colorfull{
        color: rgb(248, 79, 1);
    }
    .text-description{
        font-size: 1.1rem;
        margin-top: -1.1rem;
    }
    .call-to-action{
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .btn{
        border: 2px solid #fe4848;
        width: 9rem;
        color:#fff;
        padding: 0.5rem;
        background-color: rgb(248, 79, 1);
        border-radius: 2rem;
        text-align: center;
    }
    .watch-btn{
        border: 2px solid var(--primary-color);
        width: 9rem;
        color:#fff;
        padding: 0.5rem;
        background-color: var(--primary-color);
        border-radius: 2rem;
        text-align: center;
    }
    .image-container{
        justify-content: center;
        place-content: centers;
      }   
   
    /* Client Logo Section */
      .client{
        margin-left: 8%;
        margin-right: 8%;
        overflow-x: hidden;
      }
      
      .container {
        overflow: hidden;
        overflow-x: hidden;
        .slider {
          animation: slidein 15s linear infinite;
          white-space: nowrap;
          .logos {
            width: 100%;
            display: inline-block;
            margin: 0px 0;
            .fa {
              width: calc(100% / 5);
              animation: fade-in 0.5s 
                cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
            }
          }
        }
      }
      
      @keyframes slidein {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(-100%, 0, 0);
        }
      }
      
      @keyframes fade-in {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      .text-center{
        text-align: center;
        font-size: 1.8rem;
      }
      /* about-us section */
      .about{
        margin-left: 8%;
        margin-right: 8%;
       
      }
      .about-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(45%, 50%));
      }
      .about-image{
        width: 100%;
      }
      .about-img{
        height: 100%;
        width: 100%;
      }
      .about-text{
        width: 100%;
      }
      .about-us-items{
        display: flex;
        flex-direction: column;
        margin-top: 4rem;
      }
      .about-main-heading{
        font-size: 1.6rem;
        color: var(--main-color) ;
      }
      .about-description{
        font-size: 4rem;
        margin-top: -2rem;
      }
      .about-feature{
        display: flex;
        flex-direction: column;
        margin-top: -5.6rem;
      }
      .about-feature-items{
        font-size: 1.3rem;
        margin-right: 40%;
        
        
      }
      .about-feature-one{
        display: flex;
        gap:20px;
        margin-top: 0.9rem;
      }
      .about-icon{
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        padding: 0.7rem;
        color: var(--main-color);
      }
      .about-btn{
            border: 2px solid #fe4848;
            width: 9rem;
            color:#fff;
            padding: 0.5rem;
            background-color: rgb(248, 79, 1);
            border-radius: 2rem;
            text-align: center;
            margin-top: 0.4rem;
       }

       /* Services Section */
        .services{
          margin:2% 8% 0 8% ;
        }
        .services-container{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
        .services-text{
          width: 100%;
        }
        .services-text-detail{
          width: 100%;
          margin-top: 6rem;
        }
        .services-heading{
          font-size: 1.6rem;
          color: var(--main-color) ;
        }
        .services-sub-heading{
          font-size: 3.2rem;
          margin-top: 1rem;
        }
        .services-heading-detail{
          font-size: 1.1rem;
          margin-top: -1rem;
          margin-right: 15rem;
          margin-bottom: 2.8rem;
        }
        .services-btn{
          border: 2px solid #fe4848;
          width: 11rem;
          color:#fff;
          padding: 0.5rem 1.3rem 0.5rem 1.3rem;
          background-color: rgb(248, 79, 1);
          border-radius: 2rem;
          text-align: center;
          margin-top: 7rem;
        }
        .services-list{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(48%, 50%));
        }
        .services-list-items{
          background-color: rgb(248, 248, 248);
          border-radius: 1rem;
          display: flex;
          height: 250px;
          width: 260px;
          flex-direction: column;
          margin-top: 1rem;
        }
        .services-icon{
          color: var(--main-color);
          font-size: 7rem;
          text-align: center;
          height: 2.5rem;
          margin-top: 1rem;
        }
        .services-list-heading{
          text-align: center;
          font-size: 1.6rem;
          
        }
        .services-list-detail{
          text-align: center;
          margin-top: -0.2rem;
        }
        .services-link{
          text-align: center;
          color: #000;
        }
        .services-link-colorfull{
          text-align: center;
          color: var(--main-color);
        }

        /* End Services Section */

        /* Why Choose-Us Section */
        
        .choose-us{
          margin: 3% 8% 0 8%;
        }
        .choose-us-container{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(48%, 50%));
        }
        .choose-us-items{
          width: 100%;
        }
        .choose-us-text{
          margin-top: 20%;
        }
        .choose-us-heading{
          font-size: 1.6rem;
          color: var(--main-color) ;
        }
        .choose-us-title{
          font-size: 3.2rem;
          margin-top: 1rem;
        }
         .choose-us-description{
          font-size: 1.1rem;
          margin-top: -1rem;
          margin-right: 9rem;
         }
         .choose-us-list-div{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(48%, 50%));
          margin-top: 2rem;
         }
         .choose-us-items-list{
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 1.4rem;
          font-weight: 600;
         }
         /* End Choose-Us Section */

         /* Growth Section */
        .growth{
          margin:2% 8% 0 8% ;
        }
        .growth-container{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
        .growth-text{
          width: 100%;
          margin-top: 3rem;
        }
        .growth-text-detail{
          width: 100%;
          margin-top: 6rem;
        }
        .growth-heading{
          font-size: 1.6rem;
        }
        .growth-sub-heading{
          font-size: 3rem;
          margin-top: 1rem;
        }
        .growth-heading-detail{
          font-size: 1.1rem;
          margin-top: -1rem;
          margin-right: 15rem;
          margin-bottom: 2.8rem;
        }
        .growth-btn{
          border: 2px solid #fe4848;
          width: 11rem;
          color:#fff;
          padding: 0.5rem 1.3rem 0.5rem 1.3rem;
          background-color: rgb(248, 79, 1);
          border-radius: 2rem;
          text-align: center;
          margin-top: 7rem;
        }
      
        /* End Growth Section */

        /* Feedback Section */
        .feedback{
          margin:2% 8% 0 8% ;
          overflow-x: hidden;
        }
        .feedback-heading{
          text-align: center;
          margin: 0 20% 0 20%;
        }
        .feedback-main-heading{
          font-size: 3rem;
        }
        .feedback-sub-heading{
          font-size: 1rem;
          margin-top: -1.7rem;
        }
        .feedback-container{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(50%, 50%));
        }

        .feedback-text-container{
          width: 100%;
        }
        .client-feedback{
          width: 100%;
          margin-top: 7rem;
        }
        .client-rating{
          height: 10rem;
          width: 10rem;
        }
        .feedback-rating-heading{
          margin-right: 8rem;
          font-size: 1.5rem;
          margin-top: -4rem;
        }
        .client-name{
          font-size: 1.8rem;
        }
        .client-title{
          font-size: 1rem;
          margin-top: -2rem;
        }
        .feedback-arrow{
          display: flex;
          flex-direction: row;
          justify-content: center;
          color: white;
          gap: 0.4rem;
        }
        .left-arrow{
          color: white;
          background-color: #34444b;;
          padding: 1rem;
        }
        .right-arrow{
          color: white;
          background-color: var(--main-color);
          padding: 1rem;
        }
        /* End Feedback Section */

        /* Newsletter Session */
          .newsletter{
            margin: 2% 8% 0 8%;
            overflow-x: hidden;
            background: linear-gradient(180deg, #b7ef73 0%, #5d90ee 100%);
            border-radius: 2rem;
          }
          .newsletter-container{
            padding: 2rem;
            display: grid;
            grid-template-columns: 1fr;
          }
          .newsletter-heading{
            text-align: center;
            font-size: 1.6rem;
            color: var(--main-color);
          }
          .newsletter-sub-heading{
            text-align: center;
            font-size: 2.2rem;
            margin-top: -1rem;
          }
          .newsletter-description{
            text-align: center;
            margin: 0 22% 0 22%;
            margin-top: -2rem;
          }
          .newsletter-form{
           display: flex;
           justify-content: center;
           
          }
          .subscription {
            display: flex;
            justify-content: center;
            position: relative;
            width: 50%;
            height: 100%;
        }

        .add-email {
            flex: 1;
            height: 4rem;
            padding: 10px;
            justify-content: center;
            border-radius: 5px;
            position: relative;
            display: flex;
        }

        .add-email input {
            flex: 1;
            border: none;
            outline: none;
            padding: 10px;
            border-radius: 5rem 0 0 5rem;
            font-size: 14px; /* Adjusted font size for better readability */
        }

        .add-email button {
            border: none;
            border-radius: 0 5rem 5rem 0;
            outline: none;
            cursor: pointer;
            background: var(--primary-color);
            color: #FFFFFF;
            padding: 10px;
            font-size: 14px; /* Adjusted font size for better readability */
        }

        .add-email button:hover {
            background: var(--main-color);
        }
         /* End Newsletter Session */

         /* Footer Section */
          .footer{
            margin: 2% 8% 0 8%;
            overflow-y: hidden;
            overflow-x: hidden;
          }
          .footer-container{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(25%, 25%));
          }
          .footer-main-heading{
            font-size: 1.4rem;
            justify-content: center;
          }
          .footer-main-heading::after{
            content: "";
            display: flex;
            height: 0.2rem;
            width: 4rem;
            position: absolute;
            justify-content: start;
            background-color: var(--main-color);
          }
          .footer-angle{
            color: var(--main-color);
            margin-bottom: 10px;
            
          }
          .footer-coloum-one-description{
            font-size: 1.1rem;
            text-align: start;
            margin-right: 0.6rem;
          }
         
          .footer-one-menu{
            list-style: none;
            text-align: start;
            display: flex;
            flex-direction: column;
          }

       .footer-one-menu a {
            color: #34444b;
            text-decoration: none;
            transition: color 0.3s ease;
            margin-bottom: 10px;
            text-align: start;
        }
        .footer-contact{
          display: flex;
          flex-direction: row;
          gap: 1rem;
          margin-top: 0.7rem;
         
        }
        .footer-icon{
          display: flex;
          flex-direction: row;
          gap: 1rem;
          margin-top: 0.7rem;
          background-color: #fff;
          padding: 1rem;
          border-radius: 50%;
         
        }
        .footer-line{
          color:var(--main-color);
          width: 98%;
        }
        .footer-underline-menu-items a{
          color: #34444b;
          padding: 1rem;
          text-align: center;
        }
        .footer-underline-menu{
          justify-content: space-between;
          display: flex;
        }
        .footer-credit a{
          color: var(--main-color);
        }
         /* End Footer Section */