static/styles.css

/* Farm Tech System */

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;

      }

      .body{
        width: 100%;
        padding: 50px;
        background-image: url('tea-estate.jpg');
      }


      body {
        background-image: url('tea-estate.jpg');
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bolder;
        font-size: x-large;
        height: 100vh;
        color: #123C69;
      }

      header {
        color: white;
        padding: 8px ;
        text-align: center;
      }

      .logo {
        font-family: 'Poppins';
        font-size: 24px;
        text-align: center;
      }

      .navbar {
        margin-top: 20px;
      }

      .nav-links {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: center;
      }

      .nav-links li {
        margin: 0 15px;
      }

      .nav-links a {
        color:#AC3B61  ;
        font-weight: bolder;
        font-size: larger;
        text-decoration: none;
      }


      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      p {
        line-height: 1.6;

      }




      .nav-links li:hover a
      {
        background: rgb(255, 255, 255);
        color: black;
        padding: .25rem .5rem;
        transition: all ease-in 300ms;
        border-radius: 25px;

      }

      .animate-charcter
      {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(
          -225deg,
          #231557 0%,
          #44107a 29%,
          #ff1361 67%,
          #fff800 100%
        );

        background-size: auto auto;
        background-clip: border-box;
        background-size: 200% auto;
        color: #AC3B61;
        background-clip: text;
        text-justify: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 2s linear infinite;
        display: inline-block ;
            font-size: 80px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-weight: bold;

      }

      @keyframes textclip {
        to {
          background-position: center;
        }
      };


      *{
        background-color: #eee2dc;
        margin-bottom: 20px;
        padding: 0;
        box-sizing: border-box;
      }

      body{
        align-items: center;
        justify-content: center;
      }

      @keyframes scroll{
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(calc(-250px * 7));
        }
      }

      .slider{
        height: 200px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: auto;
        padding: 0 30px;
      }

      /* .slider::before, .slider::after {
        content: '';
        width: calc(50vw - 125px); /* Adjust the width for the desired padding */


      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }

      .container{
         display: flex;
         /* flex-direction: column; */
         justify-content: center;
         align-items: center;
         text-align: center;
         font-weight: bolder;
         margin: 20px 20px 0 20px;
         padding-top: 10%;
      }

      .container .heading{
        width: 50%;
        padding-bottom: 50px;
      }

      .container .heading h3{
        font-size: 3em;
        font-weight: bolder;
        padding-bottom: 10px;
        border-bottom: 3px solid #222;
      }

      .container .heading h3 span{
        font-weight: 50;
      }

      .container .box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .container .box .dream{
        display: flex;
        flex-direction: column;
        width: 32.5%;
      }

      .container .box .dream img{
        width: 100%;
        padding-bottom: 15px;

      }

      /* @media only screen and (max-width: 769px){
        .container .box{
            flex-direction: column;
        }
      }

      .container .box .dream{
        width: 100%;
      } */


      /* Default styles for all devices */
      .body {
        font-size: 16px;
      }

      /* Tablet styles */
      @media (max-width: 1024px) {
        body {
            font-size: 14px;
        }
      }

      /* Mobile styles */
      @media (max-width: 768px) {
        body {
            font-size: 12px;
        }
      }

      /* Adjust the footer for mobile and tablet views */
      @media only screen and (max-width: 768px) {
        .footer {
          width: 125%;
          flex-direction: column;
          align-items: center;
        }

        .contact {
          text-align: left;
          text-indent: 0;
          margin: 10px 0;
          font-size: x-small;
        }

        .contact h2{
          text-align: left;
          text-indent: 0;
          margin: 10px 0;
          font-size: x-small;

        }

        .iframe
      {
        width: 100%;
        padding: 10px;
      }

        .contact p:first-child{

          text-align: left;
          text-indent: 0;
          margin: 10px 0;
          font-size: x-small;

        }

      .contact p:last-child{

        text-align: left;
          text-indent: 0;
          margin: 10px 0;
          font-size: x-small;
      }

        .developer {
          text-align: right;
          text-indent: 0;
          margin: 10px 0;
          font-size: x-small;
        }

        .footer {
          width: 100vw !important;
        }
      }