
      body {
        font-family: Georgia, serif !important;
/*        background-color: #f5f5f5;*/
        margin: 0;
      }

     /* .circle {
        fill: none;
        stroke: #E09132;
        stroke-width: 2;
        r: 90;
        cx: 100;
        cy: 100;
        opacity: 1;
        animation: borderFade 3s ease-out forwards;
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180px;
        height: 180px;
        z-index: 5;
      }

      .path {
        fill: none;
        stroke: #E09132;
        stroke-width: 10;
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        animation: draw 2s ease-out forwards, fadeout 1s ease-in 2s forwards;
      }

      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes fadeout {
        to {
          opacity: 0;
        }
      }

      @keyframes borderFade {
        to {
          opacity: 0;
        }
      }*/

      .banner-top {
        position: relative;
        /*background-image: url('file:///D:/xampp/htdocs/VYPAARIMPORTS/assets/img/banner-top-bg.jpg'); */
        background-image: url(../img/banner-top-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;
      }

      .banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
      }

      .title-area {
        position: absolute;
        bottom:35px;
/*        left: 80px;*/
/*        transform: translate(-50%, -50%);*/
        text-align: left;
        z-index: 10;
        color: white;
      }

      .title-area h1 {
        margin: 0;
        font-weight: 600;
        font-size: 4.5rem;
      }

      .title-area .light-tagline {
        font-weight: 400;
        font-size: 1.5rem;
        margin-top: 0.5rem;
      }

      @media (max-width: 768px) {

          .navbar-brand img{
                width: 165px !important;
                margin-top: 12px !important;
        }
        

         .category .card img {
                /* width: 50px; */
                right: 15px !important;
                top: 15px !important;
            }
            
        .title-area{
            left: 20px;
            bottom: 20px;
        }
        .title-area h1 {
          font-size: 2.5rem;
        }

        .title-area .light-tagline {
          font-size: 1.2rem;
        }

        .navbar .container-fluid{
            padding-left:20px !important;
            padding-right:20px !important;
        }

        .banner-top {
/*          background-image: url('assets/img/banner-top-bg-mobile-new.webp');*/
          background-image: url(../img/banner-top-bg-mobile-new.webp);
        }

        .category .sec-title {
            font-size: 30px !important;
            line-height: 34px !important;
        }
        .offcanvas{
          background-color: #E09132 !important;
        }
        .offcanvas hr{
          display: block;
           border:1px solid #424530;
           opacity: 1;
        }

      }
      .offcanvas hr{
        display: none;
      }

      .category .card{
        width: 100%;
        border: 0px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: 20px;
        padding: 26px 24px 26px 24px;
        margin-bottom: 20px;
      }


      .category .card h3{
          font-size: 27px;
          line-height: 30px;
          padding-top: 22px;
      }
      .category .card img{
            width: 55px;
            position: absolute;
            right: 35px;
            top: 14px;
       }
      .category .sec-title{
          font-size: 40px;
          line-height: 43px;
          margin-bottom: 43px;
      }

      .category .line {
        width: 88%;
        height: 0px;
        border: 0.1px solid #E09132;
        margin-top: 3.4rem;
        margin-left: auto;
        margin-right: auto;
    }
        .category .card .hover-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-60%, -60%);
            font-size: 18px;
            color: #FFFFFF;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            font-size: 30px;
        }

        .category .card:hover {
            background-color: #E09132;
            transition: 0.6s;

        }

        .category .card:hover h3, .card:hover .line {
            opacity: 0;
        }

        .category .card:hover .hover-text {
            opacity: 1;
        }

         .category .card:hover .line {
          border: 1px solid #424530 !important;
        }

        .navbar-brand img{
            width: 250px;
                margin-top: 12px;
                /*border: 2px solid #E09132;
                border-radius: 100%;*/
        }
        .navbar .container-fluid{
            padding-left: 60px;
            padding-right: 60px;
        }
        .nav-link {
            font-size: 20px;
            color: #fff !important;
            padding-right: 21px !important;
        }
        .copyright p{
            font-size: 13px;
            color: #555;
        }
